tedtalksbits / styles

PPV Components Design System

This design system is to help build UI components faster and keep the design consistent throughout the application. The goal of this system is to make our components modular and easy to maintain.

Table of Contents

1. Sizes
2. Colors
   • Backgroound-Color
   • Color
3. Shadows
4. Border radius
5. Flex box
6. Grid
7. Margin
8. Padding
9. Typography
10. Animation
11. Containers

Sizes

Main Sizes

Variable	Size
--xs	0.15rem
--s	0.5rem
--m	0.5rem
--l	0.75rem
--xl	1rem
--xxl	1.5rem
--xxxl	2.5rem

Size Range

The range starts at xs which is the smallest value and ends at xxxl which is the largest value.

Uses

use as a varaible ⚠ Use margin helper classes instead

.my-element{
   margin-top: var(--xs);
   /*same as*/
   margin-top: 0.15rem;
}

---

Colors And Gradients

Main Colors and Shades

• Grey
• Blue
• Red
• Purple
• Pink
• Cyan
• Orange
• Yellow
• Teal
• Green
• Gradient

Color Range

The last number at the end of a color class/variable is the range. The range starts at 50 which is the lightest value and ends at 900 which is the darkest value. Lighter ⏭ Darker ColorName-50 - ColorName-900

Color Range Example

Uses (Background)

use as a varaible

.my-element{
   background: var(--blue-500);
   background: var(--gradient-500);
}

use as a class

<div class="bg-blue-500"></div>
<div class="bg-gradient-500"></div>

Uses (Color)

use as a varaible

h1{
  color : var(--blue-500);
  color : var(--txt-gradient-500);
}

use as a class

<h1 class="blue-500"></h1>
<h1 class="txt-gradient-500"></h1>

---

Shadows

Shadow Range

The range starts at xs which is the lightest value and ends at xxl which is the darkest value. Lighter ⏭ Darker shadow-xs - shadow-xxxl

Uses

use as a varaible (not recommended)

.my-element{
   box-shadow: var(--shadow-xs);
}

use as a class

<div class="shadow-xs"></div>

---

Border radius

Border radius Range

The range starts at xs which is the smallest value and ends at xxl which is the largest value.

rounded-xs ⏭ rounded-xxxl

Uses

use as a varaible (not recommended)

.my-element{
   border-radius: var(--rounded-xs);
}

use as a class

<div class="rounded-xs"></div>

For fully rounded (border-radius: 50%; ) use:

   <div class="rounded"></div>

---

Flex Box

• Flex (Horizontal)

<div class="flex"></div>
<!---Same as--->
<div class="flex-h"></div>

• Flex (Vertical)

<div class="flex-v"></div>
<!---Same as--->
<div class="flex-column"></div>

• Align items (Vertical)

Options:

• center
• top
• bottom (baseline)

<div class="align-center"></div>
<div class="align-top"></div>
<div class="align-bottom"></div>

• Justify content (Horizontal)

Options:

• center
• space-between
• space-around
• baseline
• space-evenly

<div class="justify-center"></div>
<div class="justify-between"></div>
<div class="justify-around"></div>
<div class="justify-baseline"></div>
<div class="justify-evenly"></div>

• Gap

Gap range

The range starts at xs which is the smallest value and ends at xxl which is the largest value.

gap-xs ⏭ gap-xxxl

use as a varaible (not recommended)

.my-flex-element{
   gap: var(--gap-xs);
}

use as a class

<div class="flex gap-xs"></div>

---

Margin

Margin Range

The range starts at xs which is the smallest value and ends at xxl which is the largest value.

m-xs ⏭ m-xxxl

Uses

use as a varaible (not recommended)

.my-element{
   margin: var(--m-xs);
}

use as a class

<div class="m-xs"></div>

• Margin Horizonal (left - right)

use as a class

   <div class="mx-xs"></div>

• Margin Vertically (top - bottom)

use as a class

   <div class="my-xs"></div>

• Margin Left

use as a class

   <div class="ml-xs"></div>

• Margin Right

use as a class

   <div class="mr-xs"></div>

• Margin Top

use as a class

   <div class="mt-xs"></div>

• Margin Bottom

use as a class

   <div class="mb-xs"></div>

---

Padding

Padding Range

The range starts at xs which is the smallest value and ends at xxl which is the largest value.

m-xs ⏭ m-xxxl

Uses

use as a varaible (not recommended)

.my-element{
   padding: var(--p-xs);
}

use as a class

<div class="p-xs"></div>

• Padding Horizonal (left - right)

use as a class

   <div class="px-xs"></div>

• Padding Vertically (top - bottom)

use as a class

   <div class="py-xs"></div>

• Padding Left

use as a class

   <div class="pl-xs"></div>

• Padding Right

use as a class

   <div class="pr-xs"></div>

• Padding Top

use as a class

   <div class="pt-xs"></div>

• Padding Bottom

use as a class

   <div class="pb-xs"></div>

---

Typography

Sizes:

Variable	Size
--xs	0.75rem
--s	0.875rem
--m	1rem
--l	1.125rem
--xl	1.25rem
--xxl	1.5rem
--xxxl	2rem-5rem

Options:

• bold
• center
• underline

The range starts at xs which is the smallest value and ends at xxl which is the largest value.

m-xs ⏭ m-xxxl

Uses

use as a varaible (not recommended)

p{
   font-size: var(--font-xl);
}

use as a class

<p class="font-xl bold"></p>
<p class="font-xl underline"></p>
<p class="font-xl center"></p>
<p class="font-xl center underline bold">I am bold underlined and centered</p>

---

Animations

• animateIn (fades in from top)
• animateOut (Fade out)

Uses

use as a class

<p class="animateIn">I will fade in from top</p>

Containers and Wrappers

.content-wrapper

use as a class

<section class="content-wrapper"></section>
<!-- Grid wrapper class for content. 
This class adds a min-max width contraint on its children elements. 
The maximum width is 99ch units or 100% on smaller screens -->

.full-bleed

use as a class

<section class="content-wrapper">
   <section class="full-bleed">I will be the full width of the screen</section>
   <section >I will be the full width of the screen only on mobile</section>
</section>
<!-- For content that should span the entire width of the screen while being a child of the content-wrapper, use the class full-bleed. 

.content-container

use as a class

<section class="content-container"></section>
<!-- container class for content with similarities to .content-wrapper. 
This class adds a min width contraint on its children elements. 
And uses margin: auto to position children elements in the center of the screen 
The maximum width is 99ch units  -->

---