FOUNDATIONS · GOVERNANCE

Token governance

The rules that keep design intent stable across brands, themes, Figma, and production code.

Current decision

Two token layers. One shared language.

The current architecture contains primitive and semantic tokens. Components consume semantic tokens directly. A component-specific layer will only be introduced when proven decoupling needs arise.

01 / ARCHITECTURE

From raw value to product intent

Layer 01

Primitives

CarBrain/deep-blue/600

Raw brand and palette values. Never consumed directly by components.

Layer 02

Semantics

color/action/primary/base

Stable purpose and hierarchy. The alias changes between modes.

Consumer

Components

Button · Link · Checkbox

Components use the appropriate semantic token for each visual property.

02 / THEMING

Product and appearance are separate dimensions

A theme is the combination of a product identity and an appearance. Semantic names remain stable while their primitive aliases change.

CarBrain · LightProduction theme

CarBrain · DarkProduction theme

BrandX · LightExperimental theme

03 / NAMING

A predictable naming contract

color/category/role or hierarchy/optional variant

Use singular categories: icon, not icons.
Do not include a brand name in semantic tokens.
Prefer purpose-based names for text, icon, stroke, and background.
Use intensity names only when intensity is the family’s main dimension.
Intensity is not interaction state; component behavior defines hover, pressed, focus, and disabled.