Colors
Style Guide
BASE LIGHT
#FFFFFF
BASE DARK
#000000
NEUTRAL 01
#F3F3F3
NEUTRAL 02
#E7E7E7
NEUTRAL 03
#DDDDDD
NEUTRAL 04
#8C8C8C
NEUTRAL 05
#747474
NEUTRAL 06
#262626
Fonts
Style Guide
Primary
BDO Grotesk
Lokal Container OFL
Secondary
Playfair Display
GOOGLE FONT
Monospace
Geist Mono
GOOGLE FONT
Typography
Style Guide
Display
Display XL
128PX - 8REM | 100%
Display LG
96PX - 6REM | 120%
Display MD
80PX - 5REM | 120%
Display SM
64PX - 4REM | 120%
Display XS
36PX - 2.25REM | 120%
Display 2XS
16PX - 1REM | 120%
Heading
Heading H1
80PX - 5REM | 120%
Heading H2
20PX - 1.25REM | 120%
Heading H3
36PX - 2.25REM | 120%
Heading H4
18PX - 1.13REM | 120%
Heading H5
16PX - 1REM | 120%
Heading H6
14PX - 0.88REM | 120%
Body
Body XL
36 PX - 2.25REM | 120%
Body LG
18PX - 1.13REM | 160%
Body MD
16PX - 1REM | 160%
Label
Label 2XL
48PX - 3REM | 100%
Label XL
24PX - 1.5REM | 100%
Label LG
20PX - 1.25REM | 100%
Label MD
18PX - 1.13REM | 100%
Label SM
16PX - 1REM | 100%
Label XS
14PX - 0.88REM | 100%
Label 2XS
12PX - 0.75REM | 100%
HTML Tags
Style Guide
Paragraph
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.
15PX - 1.25REM | 160%
Link
Primary
16PX - 1REM | 120%
Block Quote
“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.”
20PX - 1.25REM | 160%
Unordered Lists
Lorem ipsum
Lorem ipsum
Lorem ipsum
16PX - 1REM | 160%
Ordered Lists
Lorem ipsum
Lorem ipsum
Lorem ipsum
16PX - 1REM | 160%
Richtext
Style Guide
Heading
Heading span
Body
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
This is a block quote
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
This is a link inside of a rich text
- List item
- List item
- List item
- List item
- List item
- List item
