Color, named by purpose.
A small reference for the semantic palette that powers the brand site. Each token maps to a role, not just a hue — so every surface stays intentional.
Atmosphere, shaped.
The same semantic tokens produce an entirely different mood when the background flips from obsidian to ivory.
Elevated container using the card token.
Atmosphere, shaped.
The same semantic tokens produce an entirely different mood when the background flips from obsidian to ivory.
Elevated container using the card token.
obsidian
--obsidianoklch(0.135 0.004 270)
The foundation. A true near-black with a cool, neutral cast. Used for page backgrounds and the deepest surfaces.
Used for
- Page background
- Hero base
- Footer ground
- Primary button text
surface
--surfaceoklch(0.175 0.005 270)
A slightly elevated obsidian for cards, navigation, and inset surfaces. Creates depth without contrast shock.
Used for
- Card backgrounds
- Popover panels
- Header ground
- Input fields
ivory
--ivoryoklch(0.915 0.035 85)
Warm, cream-forward text and primary-action color. The brand's light side; readable and soft against obsidian.
Used for
- Body text
- Headings
- Primary buttons
- Logo wordmark
bronze
--bronzeoklch(0.82 0.055 82)
The signature accent. Warm champagne-bronze used sparingly for focus, emphasis, and the hero glow.
Used for
- Focus rings
- Eyebrow text
- Hover states
- Hero radial glow
- Selection highlight