TYPOGRAPHY

SYSTEM

Bases:

Base Color: White
Base Alignment: Left

Color Classes:

Color Warm Sand

Color Sea Green

Color Navy

Color Navy

Color Black

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: 4.5rem
Line Height: 0.95
Weight: 600 - Semibold
Letter Spacing: -0.02em

Mobile

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

heading 1

Class: Color Orange

heading 1

Class: Color Yellow

heading 1

Class: Color Green

heading 1

Class: Color Blue

heading 1

Class: Color Black

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 - Semibold
Letter Spacing: -0.015em

Mobile

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

heading 2

Class: Color Orange

heading 2

Class: Color Yellow

heading 2

Class: Color Green

heading 2

Class: Color Blue

heading 2

Class: Color Black

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: 2.5rem
Line Height: 1.1
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 Orange

heading 3

Class: Color Yellow

heading 3

Class: Color Green

heading 3

Class: Color Blue

heading 3

Class: Color Black

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: 2.25rem
Line Height: 1.05
Weight: 700 - Bold
Letter Spacing: 0

Mobile

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

heading 4

Class: Color Orange

heading 4

Class: Color Yellow

heading 4

Class: Color Green

heading 4

Class: Color Blue

heading 4

Class: Color Black

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.5rem
Line Height: 1.2
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 Orange

Heading 5

Class: Color Yellow

Heading 5

Class: Color Green

Heading 5

Class: Color Blue

Heading 5

Class: Color Black

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: 700 - 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 Orange

heading 6

Class: Color Yellow

heading 6

Class: Color Green

heading 6

Class: Color Blue

heading 6

Class: Color Black

Class: Paragraph Large

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

Desktop

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

Mobile

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

paragraph large

Class: Paragraph Large + Color Orange

paragraph large

Class: Paragraph Large + Color Yellow

paragraph large

Class: Paragraph Large + Color Green

paragraph large

Class: Paragraph Large + Color Blue

paragraph large

Class: Paragraph Large + Color Black

HTML Tag: Paragraph

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

Desktop

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

Mobile

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

Paragraph default

Class: Color Orange

Paragraph default

Class: Color Yellow

Paragraph default

Class: Color Green

Paragraph default

Class: Color Blue

Paragraph default

Class: Color Black

Class: Paragraph small 2

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

Desktop

Font Size: 0.8rem
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: Color Orange

Paragraph small

Class: Color Yellow

Paragraph small

Class: Color Green

Paragraph small

Class: Color Blue

Paragraph small

Class: Color Black

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: Color Orange

CAPTION - LABEL

Class: Color Yellow

CAPTION - LABEL

Class: Color Green

CAPTION - LABEL

Class: Color Blue

CAPTION - LABEL

Class: Color Black