Brand tokens
The system, materialized
hero · 96matter
print · 40matter
nav · 26matter
app · 18matter
Every preset above resolves from a single --logo-size-* token. Edit the token, every consuming surface follows.
Voice · copy
| Token | Value |
|---|---|
--brand-name | "matter" |
--brand-name-cap | "Matter" |
--brand-tagline | "Complete your mission" |
--brand-tagline-caps | "COMPLETE YOUR MISSION" |
--brand-tagline-mono | "COMPLETE · YOUR · MISSION" |
--brand-domain | "matter.com" |
Wordmark · type
| Token | Value |
|---|---|
--logo-font | var(--font-funnel-display), 'Funnel Display', Arial Black, Helvetica Neue, sans-serif |
--logo-weight | 800 |
--logo-tracking | −0.045em |
--logo-leading | 0.78 |
Lockup · geometry (em ratios)
| Token | Ratio | Role |
|---|---|---|
--logo-asc-ratio | 0.78 | mark / em |
--logo-gap-ratio | 0.20 | gap / em |
--logo-tag-italic-ratio | 0.20 | title-case tag / em |
--logo-tag-caps-ratio | 0.105 | all-caps tag / em |
Surface presets (px)
| Token | Value | Use |
|---|---|---|
--logo-size-app | 18px | app shell top |
--logo-size-nav | 26px | marketing nav |
--logo-size-hero | 96px | brand splash |
--logo-size-print | 40px | print & PDF |
Production usage
Drop the canonical class hooks anywhere:
<a href="/" class="matter-lockup matter-lockup--app">…</a>.matter-tagline--auto-caps renders the all-caps tagline from the token via ::before { content: var(--brand-tagline-caps) } — no hard-coded string in markup. Color is always currentColor.
Edit the token; the wordmark, tagline, and every surface follow.
Don't bypass the tokens. Hard-coding the brand string in JSX is a drift bug waiting to happen.