TYPOGRAPHY

SYSTEM

Bases:

Base Color: Black
Base Alignment: Left

Color Classes:

Color Black (default)

Color Yellow

Color Chestnut

Color Green

Color Blue

Color Silver

Color White

Alignment:

Align Left

Align Center

HTML Tag: All H1 Headings

Font: Roc Grotesk
Text Transform: Uppercase
Use: Main hero headlines, strongest brand statements. Best for short, punchy lines.

Desktop

Font Size: 5.5rem
Line Height: 0.95
Weight: 600 - Semi Bold
Letter Spacing: -0.02em

Mobile

Font Size: 2.5rem
Line Height: 0.95
Weight: 400 - Normal
Letter Spacing: 0em

heading 1

Class: Color Yellow

heading 1

Class: Color Chestnut

heading 1

Class: Color Green

heading 1

Class: Color Blue

heading 1

Class: Color Silver

heading 1

(default)

heading 1

Class: Color White

HTML Tag: All H2 Headings

Font: Roc Grotesk
Text Transform: Uppercase
Use: Major section titles

Desktop

Font Size: 3.5rem
Line Height: 1
Weight: 600 - Semi Bold
Letter Spacing: -0.015em

Mobile

Font Size: 2.5rem
Line Height: 1.1
Weight: 400 - Normal
Letter Spacing: -0.02em

heading 2

Class: Color Yellow

heading 2

Class: Color Chestnut

heading 2

Class: Color Green

heading 2

Class: Color Blue

heading 2

Class: Color Silver

heading 2

(default)

heading 2

Class: Color White

HTML Tag: All H3 Headings

Font: Anth
Text Transform: Title Case
Use: Editorial section headings.
More refined and historic in tone than H1/H2

Desktop

Font Size: 3.25rem
Line Height: 1.3
Weight: 700 - Bold
Letter Spacing: -0.01em

Mobile

Font Size: 1.75rem
Line Height: 1
Weight: 700 - Bold
Letter Spacing: 0.01em

heading 3

Class: Color Yellow

heading 3

Class: Color Chestnut

heading 3

Class: Color Green

heading 3

Class: Color Blue

heading 3

Class: Color Silver

heading 3

(default)

heading 3

Class: Color White

HTML Tag: All H4 Headings

Font: Anth
Text Transform: Title Case
Use: Subsection headings. Good for content modules and text-led sections.

Desktop

Font Size: 1.8rem
Line Height: 1.3
Weight: 400 - Normal
Letter Spacing: -0.005em

Mobile

Font Size: 1.45rem
Line Height: 1.05
Weight: 400 - Normal
Letter Spacing: 0.02em

heading 4

Class: Color Yellow

heading 4

Class: Color Chestnut

heading 4

Class: Color Green

heading 4

Class: Color Blue

heading 4

Class: Color Silver

heading 4

(default)

heading 4

Class: Color White

HTML Tag: All H5 Headings

Font: Bahnschrift
Text Transform: Sentence case
Use: Card titles, smaller section header. Cleaner and more functional.

Desktop

Font Size: 1.3rem
Line Height: 1.35
Weight: 700 - Bold
Letter Spacing: 0em

Mobile

Font Size: 1.15rem
Line Height: 1.1
Weight: 700 - Bold
Letter Spacing: 0.08em

Heading 5

Class: Color Yellow

Heading 5

Class: Color Chestnut

Heading 5

Class: Color Green

Heading 5

Class: Color Blue

Heading 5

Class: Color Silver

Heading 5

(default)

Heading 5

Class: Color White

HTML Tag: All H6 Headings

Font: Bahnschrift
Text Transform: Uppercase
Use: Utility headings, micro-sections, support headers

Desktop

Font Size: 1.125rem
Line Height: 1.3
Weight: 600 - Semi Bold
Letter Spacing: 0.02em

Mobile

Font Size: 0.95rem
Line Height: 1.15
Weight: 700 - Bold
Letter Spacing: 0.08em

Heading 6

Class: Color Yellow

Heading 6

Class: Color Chestnut

Heading 6

Class: Color Green

Heading 6

Class: Color Blue

Heading 6

Class: Color Silver

Heading 6

(default)

Heading 6

Class: Color White

Class: Paragraph Large

Font: Anth
Text Transform: Sentence case
Use: Intro copy, featured storytelling, opening text blocks

Desktop

Font Size: 1.4rem
Line Height: 1.5
Weight: 400 - Normal
Letter Spacing: 0

Mobile

Font Size: 1.125rem
Line Height: 1.5
Weight: 400 - Regular
Letter Spacing: 0

Paragraph large

Class: Paragraph Large + Color Yellow

Paragraph large

Class: Paragraph Large + Color Chestnut

Paragraph large

Class: Paragraph Large + Color Green

Paragraph large

Class: Paragraph Large + Color Blue

Paragraph large

Class: Paragraph Large + Color Silver

Paragraph large

(default)

Paragraph large

Class: Paragraph Large + Color White

HTML Tag: Paragraph

Font: Anth
Text Transform: Sentence case
Use: Standard body copy

Desktop

Font Size: 0.95rem
Line Height: 1.6
Weight: 400 - Regular
Letter Spacing: 0

Mobile

Font Size: 1rem
Line Height: 1.55
Weight: 400 - Normal
Letter Spacing: 0

Paragraph default

Class: Color Yellow

Paragraph default

Class: Color Chestnut

Paragraph default

Class: Color Green

Paragraph default

Class: Color Blue

Paragraph default

Class: Color Silver

Paragraph default

(default)

Paragraph default

Class: Color White

Class: Paragraph Small

Font: Anth
Text Transform: Sentence case
Use: Secondary copy, card descriptions, footer text

Desktop

Font Size: 0.75rem
Line Height: 1.45
Weight: 400 - Regular
Letter Spacing: 0

Mobile

Font Size: 0.875rem
Line Height: 1.45
Weight: 400 - Normal
Letter Spacing: 0em

Paragraph small

Class: Paragraph Small + Color Yellow

Paragraph small

Class: Paragraph Small + Color Chestnut

Paragraph small

Class: Paragraph Small + Color Green

Paragraph small

Class: Paragraph Small + Color Blue

Paragraph small

Class: Paragraph Small + Color Silver

Paragraph small

(default)

Paragraph small

Class: Paragraph Small + Color White

Class: Caption - Label

Font: Bahnschrift
Text Transform: Uppercase
Use: mage captions, dates, metadata, supporting details

Desktop

Font Size: 0.875rem
Line Height: 1.4
Weight: 700 - Bold
Letter Spacing: 0.04em

Mobile

Font Size: 0.75rem
Line Height: 1.1
Weight: 400 - Normal
Stroke: 1.125px
Letter Spacing: 0.06em

caption - label

Class: Caption - Label + Color Yellow

caption - label

Class: Caption - Label + Color Chestnut

caption - label

Class: Caption - Label + Color Green

caption - label

Class: Caption - Label + Color Blue

caption - label

Class: Caption - Label + Color Silver

caption - label

(default)

caption - label

Class: Caption - Label + Color White