01 / Typography

Global type tokens

The shared storefront type system is token-owned: uppercase interface text, regular paragraph copy, and editorial title and heading scales all resolve from global CSS variables.

Uppercase UI

Navigation Label Price Action Filter

Used for: Navigation, actions, prices, filters, product labels
Selectors: .hcs-eyebrow, .hcs-nav, .hcs-utility, .hcs-price, .hcs-filter-inner, .hcs-playground-ui-sample
Font token: --hcs-ui-font
Size token: --hcs-ui-size
Color token: --hcs-ink
Font size: var(--hcs-ui-size), minimal-gallery 0.625rem
Font weight: 400
Letter spacing: 0
Line height: 1.15
Text transform: uppercase
Color: var(--hcs-ink), minimal-gallery #000

Regular copy

Paragraphs stay regular case, compact, black in the minimal gallery direction, and owned by the shared token system.

Used for: Editorial copy, product story, notes, form help text
Selectors: .hcs-copy, detail copy, accordion copy, form inputs, footer copy, playground copy rows
Font token: --hcs-copy-font
Size token: --hcs-copy-size
Color token: --hcs-ink
Font size: var(--hcs-copy-size), minimal-gallery 0.75rem
Font weight: 400
Letter spacing: 0
Line height: 1.45
Text transform: none
Color: var(--hcs-ink), minimal-gallery #000

Editorial title

Material memory in quiet sequence

Used for: Campaign titles, template titles, media-first page leads
Selectors: .hcs-template-title
Font token: --hcs-editorial-font
Size token: --hcs-editorial-title-size
Line token: --hcs-editorial-line-height
Color token: --hcs-ink
Font size: var(--hcs-editorial-title-size), current 2rem
Font weight: 650
Letter spacing: 0
Line height: var(--hcs-editorial-line-height), current 1.02
Text transform: none
Color: var(--hcs-ink), minimal-gallery #000

Editorial heading

Three-column story rhythm

Used for: Template section headings and editorial module titles
Selectors: .hcs-template-heading
Font token: --hcs-editorial-font
Size token: --hcs-editorial-heading-size
Line token: --hcs-editorial-line-height
Color token: --hcs-ink
Font size: var(--hcs-editorial-heading-size), current 1.625rem
Font weight: 650
Letter spacing: 0
Line height: var(--hcs-editorial-line-height), current 1.02
Text transform: none
Color: var(--hcs-ink), minimal-gallery #000