Colors:
Dark
#000000
rgb(0, 0, 0)
$color-dark
Light
#ffffff
rgb(255, 255, 255)
$color-light
Dark Blue
#0d2b3d
rgb(13, 43, 61)
$color-dark-blue
Bold Beige
#ececda
rgb(236, 236, 218)
$color-bold-beige
Bold Peach
#ffa68a
rgb(255, 166, 138)
$color-bold-peach
Italic Mint
#9fffda
rgb(159, 255, 218)
$color-italic-mint
Italic Blue
#013646
rgb(1, 54, 70)
$color-italic-blue
Italic Gray
#eaecf0
rgb(234, 236, 240)
$color-italic-gray
Headings:
H1
80px to 48px
$font-5xl
H2
60px to 36px
$font-4xl
H3
48px to 28px
$font-3xl
H4
30px to 20px
$font-2xl
H5
24px to 18px
$font-xl
H6
20px to 16px
$font-lg
Paragraphs:
Large
20px to 16px
$font-lg
Default
Medium
18px to 14px
$font-md
Small
16px to 14px
$font-sm
X-Small
14px
$font-xs
Families:
Freight Text Pro
$font-serif
Freight Sans Pro
$font-sans
Leading (line-height):
Small
0.925em
$leading-sm
Medium
1em
$leading-md
Large
1.25em
$leading-lg
X-Large
1.5em
$leading-xl
Default (p)
XX-Large
1.75em
$leading-xxl
Tracking (letter-spacing):
None
$tracking-none
Narrow
-0.02em
$tracking-narrow
Wide
0.03em
$tracking-wide
Weight:
Medium
500
$font-medium
Default (p)
Bold
600
$font-bold
Heavy
900
$font-heavy
Max Widths:
XX-Small
300px
$max-w-xxs
X-Small
350px
$max-w-xs
Small
400px
$max-w-sm
Medium
450px
$max-w-md
Large
500px
$max-w-lg
X-Large
550px
$max-w-xl
XX-Large
750px
$max-w-xxl
Breakpoints:
Small
480px
$breakpoint-sm
Medium
768px
$breakpoint-md
Large
1024px
$breakpoint-sm
X-Large
1200px
$breakpoint-xl
Spacings:
2px
$space-2
4px
$space-4
6px
$space-6
8px
$space-8
10px
$space-10
12px
$space-12
16px
$space-16
18px
$space-18
20px
$space-20
24px
$space-24
32px
$space-32
40px
$space-40
48px
$space-48
64px
$space-64
80px
$space-80
96px
$space-96
120px
$space-120
Responsive Spacings:
16px to 8px
$space-r-16
18px to 9px
$space-r-18
20px to 10px
$space-r-20
24px to 12px
$space-r-24
32px to 16px
$space-r-32
40px to 20px
$space-r-40
48px to 24px
$space-r-48
64px to 32px
$space-r-64
80px to 40px
$space-r-80
96px to 48px
$space-r-96
120px to 60px
$space-r-120
Patterns:
Text Image Row:
Each variant also has a reverse style toggled via the Columns block.
Insert Eyebrow Text
Insert Header Text
Insert Copy Text
Insert Eyebrow Text
Insert Header Text
Insert Copy Text
Insert Eyebrow Text
Insert Header Text
Insert Copy Text
Insert Eyebrow Text
Insert Header Text
Insert Copy Text
Insert Eyebrow Text
Insert Header Text
Insert Copy Text
Insert Eyebrow Text
Insert Header Text
Insert Copy Text