Cool greens. Warm gold.
Sixteen colors built on a deliberate temperature contrast. Cool, desaturated greens create the composed foundation. A warm gold is the only warm element—isolated for maximum impact.
Green Scale
Neutrals & Accent
System Alerts
Contextual colors that communicate state. Never used decoratively. The progression tells a story: cool (safe) → warm (attention) → hot (danger).
Usage Rules
Lead with dark
Hero sections, above-the-fold, proposal covers, social media, vehicle wraps, apparel, business cards, pitch deck title slides, and any first-impression moment. The five greens create layered depth: Deep Root as the base, Undergrowth for elevated cards, Canopy for borders and transitions.
Shift to light for reading
Body text sections, monthly reports, proposal detail pages, case study narratives, and any surface where someone needs to read more than a few sentences. Limestone and Chalk backgrounds with Charcoal text follow professional typographic standards for comfortable reading.
Gold is the focal point
CTAs, pricing, stat numbers, section labels, badges of trust, and any element that needs to command immediate attention. The power of Ore comes from scarcity—keep it to 5–10% of any surface. If everything is gold, nothing is gold.
Bedrock is the escape valve
Stats bars, footer backgrounds, email system chrome, legal text, or any context where green-tinted backgrounds would feel too branded. The neutral black creates breathing room without breaking the system.
Semantic Tokens
Components reference semantic tokens—never raw color values. This means a rebrand or theme switch only requires changing the token mapping, not every component.
| Token | Dark Mode | Light Mode | Purpose |
|---|---|---|---|
--color-bg-primary | Deep Root | Chalk | Page background |
--color-bg-secondary | Undergrowth | Limestone | Cards, surfaces |
--color-bg-tertiary | Canopy | Shale | Nested/inset elements |
--color-bg-light | Limestone | Chalk | Light section background |
--color-bg-surface | Chalk | #FFFFFF | Cards on light sections |
--color-bg-neutral | Bedrock | Charcoal | Non-green dark |
--color-text-primary | Chalk | Charcoal | Primary text |
--color-text-secondary | Silver Fern | Sage | Secondary text |
--color-text-muted | Sage | Silver Fern | Captions, meta |
--color-text-body | Charcoal | Charcoal | Body on light sections |
--color-text-accent | Ore | Ore | Emphasis, links |
--color-border-default | Canopy | Shale | Default borders |
--color-accent | Ore | Ore | CTAs, emphasis |
--color-accent-dim | Ore Dim | Ore Dim | Subtle gold |
Section Color Schemes
Beyond light/dark mode, sections use data-scheme attributes for distinct color contexts. Every scheme has both dark and light variants—when a user toggles mode, all sections respond coherently.
Default
The base color context. No data-scheme needed.
Undergrowth
Slightly elevated dark surface for secondary sections.
Card surface Get StartedBedrock
Neutral black for stats bars, footers, and breathing room.
Card surface Get StartedSage
Mid-tone green for feature sections and visual variety.
Card surface Get StartedLimestone
Light warm surface for body text and reading sections.
Card surface Get StartedChalk
Lightest surface for maximum contrast on reading-heavy content.
Card surface Get Started