Styleguide
Color Global
Basic
Basic White
#FFFFFF
Basic Black
#000000
Dark Blue
Dark Blue 00
#021B34
Dark Blue 01
#05498C
Dark Blue 02
#0976E4
Dark Blue 03
#4FA4F8
Dark Blue 04
#A7D1FC
Slate Blue
Slate Blue 00
#405169
Slate Blue 01
#556885
Slate Blue 02
#7085A4
Slate Blue 03
#94A3BB
Slate Blue 04
#B8C2D1
Slate Blue 05
#DBE0E8
Taupe
Taupe 00
#D7D2CC
Taupe 01
#DFDBD6
Taupe 02
#E7E4E0
Taupe 03
#EFEDEB
Taupe 04
#7656FF
Orange
Orange 00
#F54A00
Orange 01
#DC632F
Orange 02
#E38259
Orange 03
#EAA182
Orange 04
#F1C1AC
Orange 05
#4263EB
Color Light
Content Light
Content 1
Basic Black
Text
Content 1
Gray 07
Text
Content 1
Gray 06
Text
Content Inverse
Basic White
Text
Buttons
Button 1
Standard
Label Here
Button 2
Primary
Label Here
Button 3
Secondary
Label Here
Button 1 Outline
Standard
Label Here
Button 2 Outline
Primary
Label Here
Button 3 Outline
Secondary
Label Here
Color Dark
Content Dark
Content 1
Basic White
Text
Content 1
Gray 03
Text
Content 1
Gray 05
Text
Content Inverse
Basic Black
Text
Buttons + Icons
Button 1
Standard
Label Here
Button 2
Primary
Label Here
Button 3
Secondary
Label Here
Button 1 Outline
Standard
Label Here
Button 2 Outline
Primary
Label Here
Button 3 Outline
Secondary
Label Here
Typography Global
Font Family
Font Family Primary
Silka
Silka
HTML Tags
H1 Title
64px

I’m a Title XL

H2 Title
56px

I’m a Title L

H3 Title
48px

I’m a Title M

H4 Title
40px

I’m a Title S

H5 Title
32px
I’m a Title XS
H6 Title
24px
I’m a Title XXS
Paragraphs
16px

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse varius enim in eros elementum tristique.

Block Quote
16px
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse varius enim in eros elementum tristique.
Font Weight
Font Weight Light
300
Regular
Font Weight Medium
500
Medium
Font Sizes
Font Size 1
10px
Size 1
Font Size 2
12px
Size 2
Font Size 3
14px
Size 3
Font Size 4
16px
Size 4
Font Size 5
18px
Size 5
Font Size 6
20px
Size 6
Font Size 7
24px
Size 7
Font Size 8
28px
Size 8
Font Size 9
32px
Size 9
Font Size 10
36px
Size 10
Font Size 11
40px
Size 11
Font Size 12
48px
Size 12
Font Size 13
56px
Size 13
Font Size 14
64px
Size 14
Font Size 15
72px
Size 15
Font Size 16
80px
Size 16
Typography Specific
Body
Body S
12px
I’m a Body S.
My font family is Primary and my font weight is Regular.
My font size is 12px and my line height is 16px.
Body M
14px
I’m a Body M.
My font family is Primary and my font weight is Regular.
My font size is 14px and my line height is 20px.
Body L
16px
I’m a Body L.
My font family is Primary and my font weight is Regular.
My font size is 16px and my line height is 22px.
Heading
Heading XS
14px
I’m a Heading XS
Heading S
16px
I’m a Heading S
Heading M
20px
I’m a Heading M
Heading L
24px
I’m a Heading L
Title
Title S
32px
I’m a Title S
Title M
40px
I’m a Title M
Title L
56px
I’m a Title L
Title XL
64px
I’m a Title XL
Rich Text

Title H1 goes here

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.

Title H2 goes here

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.

Title H3 goes here

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.

Title H4 goes here

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Title H5 goes here

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Title H6 goes here

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system. A link looks like this.

Normal list

  • List element goes here
  • List element goes here

Number list

  1. Number element goes here
  2. Number element goes here

Blockquote

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!