Color
Greenhouse uses a minimalist neutral foundation for structure, with chlorophyll greens reserved for meaning — actions, focus, and emphasis. Accents are supporting tones used sparingly.
Token layers
Colors are organized into three layers so components stay stable as the theme evolves. Components should always consume semantic tokens, never raw hex values or scale steps directly.
1. Scales
Raw color ramps with no assigned meaning — for example --neutral-0 through --neutral-900. Light and dark mode swaps happen primarily at this layer.
2. Palette
Named tokens using Greenhouse language — surfaces, text, borders, actions, and accents. These map scale values to design intent.
3. Semantic tokens
UI-facing roles that components consume directly — like --color-surface, --color-text, --color-border, and --color-primary.
Usage rules
Neutrals first
Use neutrals for most UI structure — surfaces, typography, and borders.
Green for action
Use chlorophyll greens for primary actions, interactive emphasis, and focus indication.
Accents are intentional
Moss, soil, and leaf are supporting tones. Use them sparingly and never for interactive elements.
Accessibility
Primary text on surfaces is designed to meet WCAG AAA. Borders use a subtle/strong split — subtle for separators, strong for interactive control boundaries.
Scales
Raw color ramps that power light and dark mode. These have no assigned meaning — palette and semantic tokens reference them so components never need to touch scale values directly.
Neutral
The structural backbone. Surfaces, text, borders, and dividers all pull from this ramp.
Chlorophyll
The action ramp. Primary buttons, links, focus rings, and interactive emphasis.
Soil Red
Error and destructive states.
Amber
Warning states and caution signals.
Slate Blue
Informational states and neutral callouts.
Palette
Greenhouse vocabulary tokens that map scale values to design intent. These sit between the raw ramps and the semantic layer — useful for understanding how the system is wired, but components should still prefer semantic tokens.
Surfaces
Text
Borders
Actions
Accents
Supporting tones used sparingly. Never for interactive elements.
Semantic tokens
The tokens components should consume directly. These cascade automatically in dark mode — no component-level overrides needed.
Core
Surfaces, text, borders, and primary action — the essentials for any component.
Selection & focus
Used by checkboxes, radios, toggle switches, and focus rings.
Accents
Semantic aliases for the accent palette. Use intentionally.
Status
Semantic status colors grouped by meaning. Each status has a background, border, and foreground token — enough to build badges, alerts, and inline validation without reaching for raw scale values.
Success
Confirmations, completed actions, and positive states.
Warning
Caution states and non-blocking alerts.
Error
Destructive actions, validation failures, and blocking states.
Info
Neutral informational callouts and contextual guidance.
Component tokens
Scoped tokens that individual components consume. These reference semantic tokens under the hood, so dark mode cascades automatically. Showing them here makes it easy to audit the full color contract each component depends on.