Design Tokens
Colors
The full Hive color system. Every value derives from the token spec. Click a swatch to copy the CSS variable name.
Surfaces
Background layers from page base to elevated cards.
surface.base
--surface-base
#f6f7f3
Page background — warm off-white
surface.elevated
--surface-elevated
#ffffff
Cards, modals
surface.sunk
--surface-sunk
#eef0ea
Subtle alt band
surface.glass
--surface-glass
rgba(255, 255, 255, …
Accent — Evergreen
Brand accent scale from glow to deep.
accent.DEFAULT
--accent
#1e5a3f
Evergreen brand accent
accent.glow
--accent-glow
#2e7a55
Hover / emphasis
accent.soft
--accent-soft
#4d9a74
accent.deep
--accent-deep
#0f3a2a
accent.dim
--accent-dim
rgba(30, 90, 63, 0.08)
accent.border
--accent-border
rgba(30, 90, 63, 0.22)
Ink
Text colors from primary headings to muted metadata.
ink.primary
--ink-primary
#0f1a14
Headings
ink.secondary
--ink-secondary
#4a544a
Body copy
ink.dim
--ink-dim
#7d887e
Muted / meta
rule
--rule
rgba(15, 26, 20, 0.1)
Default hairline border
Semantic
Status and system colors.
semantic.error
--color-error
#c45e5e
Form validation border (Layout.astro)
semantic.themeMeta
--color-themeMeta
#f6f7f3
meta theme-color; matches surface.base
Decorative
Gradients, glows, and scrim overlays.
decorative.heroGlowAccent
--decorative-heroGlowAccent
rgba(30, 90, 63, 0.06)
decorative.heroGlowSage
--decorative-heroGlowSage
rgba(107, 158, 114, …
decorative.headerScrim
--decorative-headerScrim
rgba(246, 247, 243, …
decorative.headerScrimScrolled
--decorative-headerScrimScrolled
rgba(246, 247, 243, …
decorative.bannerVignette
--decorative-bannerVignette
rgba(246, 247, 243, …
decorative.canvasFill
--decorative-canvasFill
rgba(30, 90, 63, 0.28)
Hero constellation (Layout.astro)
decorative.canvasStrokeAccent
--decorative-canvasStrokeAccent
rgba(30, 90, 63, 0.6)
Multiplied by alpha in JS
decorative.canvasStrokeGlow
--decorative-canvasStrokeGlow
rgba(46, 122, 85, 0.…
Legacy aliases
These names exist for backward compatibility. Prefer canonical names.