BREAK! Foundations

Colors

Primary Colors

bg-red
#F0515A
bg-green
#25B98F

Complementary Colors

bg-red-01
#C24149
bg-green-01
#1B8566

Neutral Colors

bg-black
#18181A
bg-grey-01
#3A3B3D
bg-grey-02
#5C5D61
bg-grey-03
#E3E6F0
white
#FFFFFF

Text Colors

Primary Colors

Red
Green

Complementary Colors

Red-01
Green-01

Neutral Colors

Black
Grey-01
Grey-02
Grey-03
Grey-03
White

Typography

Font sizes

09-XXXL-Bold
70px/1.095em
09-XXXL-Regular
70px/1.095em
08-XXL-Bold
50px/1.095em
08-XXL-Regular
50px/1.095em
07-XL-Bold
40px/1.2em
07-XL-Regular
40px/1.2em
06-L-Bold
28px/1.3em
06-L-Regular
28px/1.3em
05-M-Bold
24px/1.3em
05-M-Regular
24px/1.3em
04-S-Bold
18px/1.4em
04-S-Regular
18px/1.4em
03-XS-Bold
16px/1.45em
03-XS-Regular
16px/1.45em
02-XXS-Bold
14px/1.5em
02-XXS-Regular
14px/1.5em
01-XXXS-Bold
12px/1.55em
01-XXXS-Regular
12px/1.55em

Headings sizes

Heading H1

Heading 1 - 58px/1.3em

Heading H2

Heading 2 - 52px/1.3em

Heading H3

Heading 3 - 46px/1.35em

Heading H4

Heading 4 - 38px/1.45em
Heading H5
Heading 5 - 24px/1.6em
Heading H6
Heading 6 - 20px/1.6em

Rich Text

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.

Paragraph Default - 18px/30px

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.

Paragraph Large - 24px/36px

Bold - Lorem ipsum dolor sit amet

Bold Text
“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lacus semper morbi egestas elit mauris. Vulputate mattis vestibulum tempus, fringilla posuere sem.“
Block Quote
  1. Veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
  2. Arcu cursus euismod quis viverra nibh. Amet aliquam.
  3. Fringilla urna porttitor rhoncus dolor purus non enim praesent.
Numbered List
  • Veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
  • Arcu cursus euismod quis viverra nibh. Amet aliquam.
  • Fringilla urna porttitor rhoncus dolor purus non enim praesent.
Bullet List
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Senectus.
Figure & Figure Caption

Others

Nav Items - 16px/1em

Text styles

Text

text-left
text-right
text-center
caps
no-caps
900-Black
italic
no-decoration

Display

Block
flex-hc
flex-h-left
flex-h-sb
flex-vc
flex-v-left
flex-v-sb
inline-block
inline
hidden

Size

width-auto
width-100
width-100vh
height-100
height-100vh

Position - Float

float-left
float-right

Spacing - Margins

no-margin
no-side-margin
no-upper-margin
margin-side-auto
margin-side-auto
mt-0
mt-4
mt-8
mt-16
mt-24
mt-32
mr-0
mr-4
mr-8
mr-16
mr-24
mr-32
mb-0
mb-4
mb-8
mb-16
mb-24
mb-32
ml-0
ml-4
ml-8
ml-16
ml-24
ml-32

Spacing - Paddings

no-padding
no-side-padding
no-upper-padding
pt-0
pt-4
pt-8
pt-16
pt-24
pt-32
pr-0
pr-4
pr-8
pr-16
pr-24
pr-32
pb-0
pb-4
pb-8
pb-16
pb-24
pb-32
pl-0
pl-4
pl-8
pl-16
pl-24
pl-32