Brand Colors
Your primary color drives the whole system. Secondary should complement it — use the harmony suggestions or choose your own.
Suggestions based on your Primary
Calculated in OKLCH — perceptually matched, not just mathematically offset.
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.