Style Guide

Display

USAGE: Section headers, still stylistic

Display Large

Display Medium

Display Small

Headings Caps/Sentence

USAGE: Hero banners / Campaign messaging / Landing page statements / High-impact marketing sections / Page titles (PDP, PLP, account) / Main section headers/ Checkout steps (“Shipping”, “Payment”)/ Product category titles

Heading Caps Large

Heading Caps Medium

Heading Caps Small

Heading Sentence Large

Heading Sentence Medium

Heading Sentence Small

Heading Sentence Extra-Small

Subheadings

USAGE (Medium): Supporting text under headings / Section introductions / Group descriptions
USAGE (Small): Secondary grouping labels / Helper titles in components / Minor section separators

Subheading Medium

Subheading Small

Body

USAGE (Large): Intro paragraphs / Key product descriptions / Important readable content
USAGE (Medium): Default body text / Product descriptions / General UI content / Form descriptions
USAGE (Small): Helper text / Metadata (dates, categories) / Secondary details
USAGE (Extra-Small): Legal disclaimers / Terms & conditions / Footer notes

Body Large

Body Medium

Body Small

Body Extra-Small

Links/Labels

USAGE (Medium Standard): Inline links in body text/ Primary navigation links (if not styled as headings)
USAGE (Small Standard): Secondary actions / Less prominent navigation / Supporting links
USAGE (Extra-Small Standard): Dense UI / Footers / Legal or low-priority links
USAGE (Medium Underlined): Accessibility-critical links / Long-form content where links must be obvious
USAGE (Small Underlined): Dense text areas/ Legal or content-heavy sections
USAGE (Extra-Small Underlined): Dense text areas/ Legal or content-heavy sections

Link Medium Standard

Link Small Standard

Link Extra-Small Standard

Link Medium Underlined

Link Small Underlined

Link Extra-Small Underlined

Label Medium Standard

Label Small Standard

Label Extra-Small Standard

Label Medium Underlined

Label Small Underlined

Label Extra-Small Underlined

Form Elements

Buttons

Primary - Medium

Primary

Disabled

Hover

Primary - Small

Primary

Disabled

Hover

Secondary - Medium

Secondary

Disabled

Hover

Secondary - Small

Secondary

Disabled

Hover

btn--full

Button Links

Primary

Disabled

Hover

Primary

Disabled

Hover

Colors

Primary Colors

Brand Color

Neutral Colors

UX Colors