Style Guide

Styles, typography, color, images... all the available styles to customize the site. All the changes you make here will be applied throughout the entire website.
Typography
Global Classes
Text 9xl
Font size: 128px
Line height: 128px
Letter spacing: 0px
Weights: Regular, Medium, Bold
Text 8xl
Font size: 96px
Line height: 96px
Letter spacing: 0px
Weights: Regular, Medium, Bold
Text 7xl
Font size: 72px
Line height: 72px
Letter spacing: -0.5px
Weights: Regular, Medium, Bold
Text 6xl
Font size: 60px
Line height: 60px
Letter spacing: -0.5px
Weights: Regular, Medium, Bold
Text 5xl
Font size: 48px
Line height: 52px
Letter spacing: -0.5px
Weights: Regular, Medium, Bold
Text 4xl
Font size: 36px
Line height: 40px
Letter spacing: -0.5px
Weights: Regular, Medium, Bold
Text 3xl
Font size: 30px
Line height: 36px
Letter spacing: -0.5px
Weights: Regular, Medium, Bold
Text 2xl
Font size: 24px
Line height: 32px
Letter spacing: -0.5px
Weights: Regular, Medium, Bold
Texl xl
Font size: 20px
Line height: 28px
Letter spacing: -0.5px
Weights: Regular, Medium, Bold
Text Large
Font size: 18px
Line height: 28px
Letter spacing: -0.5px
Weights: Regular, Medium, Bold
Text Base
Font size: 16px
Line height: 24px
Letter spacing: -0.5px
Weights: Regular, Medium, Bold
Text Small
Font size: 14px
Line height: 24px
Letter spacing: -0.5px
Weights: Regular, Medium, Bold
Text XS
Font size: 12px
Line height: 16px
Letter spacing: -0.5px
Weights: Regular, Medium, Bold
Text alignment
Text align left
Text align center
Text align right
Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Buttons
Variants
Button Text
Style: Primary
States: Default, Hover, Focused
Button Text
Style: Secondary
States: Default, Hover, Focused
Button Text
Style: Secondary
States: Default, Hover, Focused
Button Text
Style: Brand
States: Default, Hover, Focused
Colors
Neutral Grey
50
100
200
300
400
500
600
700
800
900
950
Cream
50
100
200
300
400
500
600
700
800
900
950
States
500
500
500
Forms
Default Input Form
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Newsletter Input Form