Color: setting up your system
Before a color system exists, the Color page offers four ways to start. All four land in the same place: a staged review of candidate colors, where nothing is written until you keep it.
The four ways to start
| Lane | What it does |
|---|---|
| Start from a template | Pre-configured palettes (neutral first, brand forward, status complete) staged as candidates. |
| Describe it | Say what the product should feel like; AI proposes seed colors. An optional brand hex anchors the proposal. |
| Import what exists | Paste CSS custom properties, a Tailwind config, or a tokens JSON export; or choose a file. Your authored values become named, scaled candidates. |
| Start from a hex | One brand color generates a palette skeleton: a near-neutral anchored to your hue, the brand scale, and the status set. |
The lanes are equal: none of them is the "right" way, and every one ends in the same review.
The staged review
Each candidate arrives:
- Named. A name is proposed from the color's hue family (like "iris" or "ember"). Rename anything inline; the name is the color's identity, and the system suggests alternatives without ever forcing one.
- Scaled. Twelve steps for light mode and twelve for dark, generated with perceptual OKLCH math. Step 9 is the solid: the canonical expression of the color.
- Unassigned, with suggested feeds. Some candidates carry a suggested role ("feed accent · 9"). Each suggestion is a per-row checkbox you can decline; a color without a feed simply lands in your palette, ready for later.
Imported values are kept as-is and pinned to their nearest steps; pinned steps carry a dot and survive regeneration. Contrast figures shown in the review are measured against the app background, never estimated.
Set aside anything that does not belong; bring it back if you change your mind. The footer states exactly what will be written before you commit.
What gets written
Make this your palette writes:
- every kept color as a named palette color with both scales, and
- a semantic role for each feed you opted into.
Nothing else. Declined feeds and set-aside colors write nothing, and the baseline roles you did not feed wait in the studio with suggested feeds.
Names and scales
- Scales are fixed at 12 steps for both modes: a system property, shared by every color, so that "step 9" means the same thing everywhere.
- Names are proposed at creation. If you later change a color's value across hue families, the studio suggests a rename and never forces one.
Tips
- The import lane accepts CSS variables, Tailwind configs, Figma variable exports, Tokens Studio files, and Style Dictionary output. Auto-detection picks the parser.
- The describe lane proposes seeds only; every scale is generated locally with the same math as every other lane.
- If you only have one brand color, the hex lane builds a complete working skeleton you can refine in the studio.