Tagline
The brand tagline lives in CSS variables, not component markup. Read it via var(--brand-tagline) in CSS, or getComputedStyle(document.documentElement).getPropertyValue('--brand-tagline') in JS.
Three forms
Title case — prose
Complete your mission.
All caps — banner
COMPLETE YOUR MISSION
Mid-dotted mono — navigation rails, footer
COMPLETE · YOUR · MISSION
Light and dark — banner form
COMPLETE YOUR MISSION
COMPLETE YOUR MISSION
Token bindings
| Token | Example |
|---|---|
--brand-tagline | "Complete your mission" |
--brand-tagline-caps | "COMPLETE YOUR MISSION" |
--brand-tagline-mono | "COMPLETE · YOUR · MISSION" |
Type rule
Funnel Display is reserved for the wordmark. The tagline never uses Funnel Display — it renders in Geist Sans (title case) or Geist Mono (banner / mid-dotted). The tagline never competes with the wordmark.
Auto-caps utility
.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 — change the token, ship everywhere.
Wire components to
var(--brand-tagline) so a single edit propagates.Don't paste the literal string. The token is the contract.