Foundation of your design system

Define structure (entities, modes, conditions, interactions) and let math compute every token. Colour today — layout, typography, and numbers next. Push to Figma as multi-mode variables.

Get started

HCT-perceptual

Built on Material's HCT colour space — every step in your scale is perceptually uniform, not RGB-uniform. Hue and chroma interpolate from 1–6 seed stops along a configurable curve.

Real contrast control

Per-entity, per-level contrast ratios with a live WCAG and APCA readout. Bridge-PCA conversion preserves visible tones across model switches.

First-class states

Two axes — interactions (hover, focus, press, long-press, drag, release) × conditions (Enabled, Disabled, Selected, …) — composed via factor multiplication.

Inverse tokens

Full `inv-content` and `inv-container` tokens for every level. Direct + inverse merged into the same Figma collection via path prefixes.

Multi-mode Figma variables

Push tokens as native Figma variables with mode columns. Compact / Balanced / Granular collection layouts, optional `VARIABLE_ALIAS` aliasing.

AI agents

Four-agent design-system chat (Architect / Engineer / Educator / Brand). Patches the theme via `apply_theme_patch`, accepts screenshots as context.