Color System

Color space: OKLCh

All color tokens are authored in OKLCh (Oklab Lightness, Chroma, Hue). This perceptually uniform color space ensures consistent lightness and contrast across palettes.

Each color token stores dual values:

Format	Usage
oklch(L C H)	Web (CSS) — native browser support
#RRGGBB (hex)	Figma, Flutter — no OKLCh support

Parity between oklch and hex is enforced by deltaE CIEDE2000 tests (max deviation < 1.0).

Three-layer taxonomy

1. Primitives

Raw color palettes. Never used directly in UI code.

• color.green.50 → color.green.900 (10 stops)
• color.lime.50 → color.lime.900
• color.neutral.50 → color.neutral.900
• Status palettes: red, amber, orange, blue, purple
• Brand-specific: slate, teal (GetPlants)

2. Semantic

Functional aliases that map to primitives. These are what UI code references.

Token	Verdanta	GetPlants
color.surface	white	white
color.text-primary	neutral.600	slate.900
color.action-primary	green.600	slate.800
color.status-success	lime.600	teal.700

3. Component

Tokens scoped to specific components. Reference semantic tokens.

• button.primary.bg → color.action-primary
• card.border → color.border-default
• input.border-focus → color.action-primary

Multi-brand: overrides

GetPlants overrides only the semantic and component layers. Primitives are shared.

Override file: src/brands/getplants.json

Brand tokens are applied via CSS [data-brand="getplants"] selector, which overrides :root values at runtime. No build-time duplication.

Figma integration

Tokens are pushed to Figma Variables API as hex values with namespaced paths:

• primitive/color/green/600
• semantic/color/action/primary
• component/button/primary/bg

Two modes in a single “Design Tokens” collection: verdanta and getplants.