Client Foundations
1. Colors
1.1. Primary Colors
bg-black
#000000
bg-neu-01
#656565
bg-neu-02
#E5E4E4
bg-neu-03
#E3E6F0
bg-white
#FFFFFF
2. Text Colors
2.1. Primary Colors
black
white
neu-01
neu-02
neu-03
3. Typography
3.1. Font sizes
Apercu (default)
09-XXXL-Bold
58px/1.095em
09-XXXL-Regular
58px/1.095em
08-XXL-Bold
46px/1.095em
08-XXL-Regular
46px/1.095em
07-XL-Bold
36px/1.095em
07-XL-Regular
36px/1.095em
06-L-Bold
28px/1.095em
06-L-Regular
28px/1.095em
06-L-Light
28px/1.095em
05-M-Bold
24px/1.095em
05-M-Regular
24px/1.095em
05-M-Light
24px/1.095em
04-S-Bold
18px/1.095em
04-S-Regular
18px/1.095em
04-S-Light
18px/1.095em
03-XS-Bold
16px/1.095em
03-XS-Regular
16px/1.095em
03-XS-Light
16px/1.095em
02-XXS-Bold
14px/1.095em
02-XXS-Regular
14px/1.095em
02-XXS-Light
14px/1.095em
01-XXXS-Bold
12px/1.095em
01-XXXS-Regular
12px/1.095em
01-XXXS-Light
12px/1.095em
Playfair Display
09-XXXL-PF-Bold
58px/1.095em
09-XXXL-PF-Regular
58px/1.095em
08-XXL-PF-Bold
46px/1.095em
08-XXL-PF-Regular
46px/1.095em
07-XL-PF-Bold
36px/1.2em
07-XL-PF-Regular
36px/1.2em
06-L-PF-Bold
28px/1.3em
06-L-PF-Regular
28px/1.3em
05-M-PF-Bold
24px/1.3em
05-M-PF-Regular
24px/1.3em
04-S-PF-Bold
18px/1.4em
04-S-PF-Regular
18px/1.4em
03-S-PF-Bold
16px/1.45em
03-S-PF-Regular
16px/1.45em
3.2. Headings sizes
Heading H1
Heading 1 - 60px/1.313em
Heading H2
Heading 2 - 54px/1.286em
Heading H3
Heading 3 - 46px/1.778em
Heading H4
Heading 4 - 38px/1.778em
Heading H5
Heading 5 - 24px/1.636em
Heading H6
Heading 6 - 20px/1.111em
3.3. Other elements
3.4. 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
Links
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
4. Text styles
4.1. Text
text-left
text-right
text-center
caps
caps
no-caps
900-Black
italic
no-decoration
strikethrough
4.2. Display
Block
flex-hc
flex-h-left
flex-h-sb
flex-vc
flex-v-left
flex-v-sb
inline-block
inline
hidden
txt-no-wrap
hidden
hidden
4.3. Size
width-auto
width-100
width-100vh
height-100
height-100vh
4.4. Position - Float
float-left
float-right
4.5. Spacing - Margins
no-margin
no-side-margin
no-upper-margin
no-top-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-12
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
4.6. 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