Color tokens

The Colors tab is the most-used panel in the editor. Every token here ships as both a CSS custom property and a Tailwind theme color when you export.

Required roles

• primary — the brand color. Buttons, links, focus rings, brand chrome.
• ink — body text. Should pass AA against bg (4.5:1).
• bg — body background. White / near-white in light themes; near-black in dark themes.
• accent — secondary brand color. Used for highlights, chips, callouts. Often the same as primary for monochrome brands.
• muted — secondary text. Captions, helper text, timestamps. Should pass AA against bg (4.5:1).

Optional roles

You can add more roles via the + Add token button. Common additions:

• border — explicit hairline color (defaults to a tint of ink).
• success, warning, danger — semantic status colors.
• surface — a slightly raised background for cards / panels.
• Brand-specific roles like brand-coral, brand-amber.

The editor doesn't constrain the names — invent whatever your design system needs.

Light + dark themes

Toggle the theme picker at the top of the panel to flip between light and dark editing modes. Tokens are independent per theme: edit primary in dark mode and only the dark output changes.

A token defined in light must also be defined in dark when dark is enabled, or the validator reports a parity warning. The editor pre-populates dark from light when you enable it for the first time, then nudges you to refine.

Contrast warnings

Every text/background pair shows a real-time contrast ratio next to the field. Targets:

• AA body — 4.5:1 (ink ↔ bg, muted ↔ bg).
• AA large — 3.0:1 for ≥ 18pt or ≥ 14pt bold (ink ↔ accent).
• AAA body — 7.0:1 (aim for this when the brand is reading-heavy).

Pairs that fail get a red badge; pairs that pass AA but fail AAA get a yellow badge. Click any badge to jump to a recommended adjustment that lifts the ratio just past threshold.