Design System

We created this page so we could consolidate the design inside the website, and make sure everything is following the brand guidelines.

Fonts

Element (class name)
Size
Class name

Header 1

48
header1

Header 2

40
header2

Header 3

32
header3

Header 4

28
header4
Header 5
24
header5

Large paragraph

20
paragraph-large

Bold Paragraph

16
paragraph-bold

Paragraph

16
paragraph

Padding & margin

Padding relationships

We will create a padding relationship document that works as follows:
1. Acquantances - 48px
2. Friends - 32px
3. Close friends - 16px
4. Best friends - 8px

This is a sample heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Button Text

Margin relationships

By default, this class will have:
- 16px padding all arround
- Center and Middle Flex vertically distributed
-

Grid

The grid element will have by default 16px between elements

Elements

Section

Section is the element that makes content:
By default this element has 56px padding

Section
Container

Container

By default, DIV will become the house of all elements

Div

By default, DIV will become the house of all elements

Button

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lists

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Flex Container

By default, this class will have:
- 32px padding all around
- Center Text align
- Center and Middle Flex vertically distributed

This is a Flex Card

Is created to keep a vertical alignment in the middle and center of the card.

Button Text