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 button text

Insert Eyebrow Text

Insert Header Text

Insert Copy Text

Insert button text

Insert Eyebrow Text

Insert Header Text

Insert Copy Text

Insert button text

Insert Eyebrow Text

Insert Header Text

Insert Copy Text

Insert button text

Insert Eyebrow Text

Insert Header Text

Insert Copy Text

Insert button text

Insert Eyebrow Text

Insert Header Text

Insert Copy Text

Insert button text