Colors
Style Guide
BASE LIGHT
#FFFFFF
BASE DARK
#020201
BRAND PRIMARY
#F8E695
BRAND SECONDARY
#FAF1C8
NEUTRAL 01
#F4F3EF
NEUTRAL 02
#A6A6A4
NEUTRAL 03
#282828
Fonts
Style Guide
Primary
BDO Grotesk
Lokal Container OFL
Secondary
Playfair Display
GOOGLE FONT
Typography
Style Guide
Display
Display 4XL
164PX - 10.25REM | 120%
Display 3XL
112PX - 7REM | 120%
Display 2XL
80PX - 5REM | 120%
Display XL
64PX - 4REM | 120%
Display LG
56PX - 3.5REM | 120%
Display MD
32PX - 2REM | 140%
Display SM
24PX - 1.5REM | 140%
Display XS
20PX - 1.25REM | 140%
Display 2XS
16PX - 1REM | 140%
Heading
Heading H1
112PX - 10.25REM | 120%
Heading H2
80PX - 5REM | 120%
Heading H3
64PX - 4REM | 120%
Heading H4
56PX - 3.5REM | 120%
Heading H5
32PX - 2REM | 140%
Heading H6
24PX - 1.5REM | 140%
Body
Body XL
40PX - 2.5REM | 120%
Body LG
32PX - 2REM | 140%
Body MD
24PX - 1.5REM | 140%
Body SM
20PX - 1.25REM | 140%
Body XS
16PX - 1REM | 160%
Label
Label MD
16PX - 1REM | 100%
Label SM
14PX - 0.875REM | 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
