Brand Colors
Identity colors — Primary drives the whole system. Secondary and Tertiary extend it.
Pick a role for your Secondary
Each role tunes lightness and chroma for its purpose — not just the hue.
Extended Colors
Functional colors — Accent for UI highlights, Data Viz for charts and graphs.
No extended colors yet — add Accent or Data Viz.
Neutral Tint
Greys are never truly neutral — they have a temperature that affects the mood of your entire UI.
Adds a subtle brand tint to your grey scale.
Status Colors
Pick a preset to get started, or set your own colors. Each status color automatically generates a full scale from light to dark — use the generated light shades for backgrounds, dark shades for text, and mid shades for icons and borders.
Avoid yellow-greens that could be confused with Warning
Avoid orange-reds that overlap with Warning
Avoid pure yellow — it fails contrast at small sizes
Use a calm blue — should feel informational, not urgent.
How your color scales are generated. This affects all scales at once — try switching to see the difference live.
Generated Color Scales
Brand Colors
Primary
Secondary
System Colors
Neutral
Success
Error
Warning
Info
Copies a 3-collection JSON — Primitives, Semantic/Color, and Semantic/Sizing — ready to paste into the Tokenry Figma plugin.