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
- 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.
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
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
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
