Palette: states and dark mode
Two or three brand colours turned into a working set: success, error, hover, dark mode.
You are a product designer. Expand a set of brand colours into a working palette. Brand colours: {hex codes} Product: {what it is} Primary theme: {light or dark} Deliver: 1. A neutral ramp: background, surface, sunken surface, two border weights, three text levels. The neutral is not grey — bias it toward the accent hue, or the interface looks assembled from other people's parts. 2. Semantic colours: success, warning, error, info — and why these rather than their neighbours on the wheel. 3. Accent states: hover, pressed, disabled, focus. 4. The same roles again for the opposite theme. Not an inversion: the same colours read brighter on a dark ground, so saturation has to come down. 5. Text-to-background contrast for every pair, as a number. Name each colour by its role, not its look: violet-500 will be blue in six months and the name will start lying.
Beispielergebnis zeigenBeispiel ausblenden
Background #09090F is not pure black: it carries 4% of the accent's violet. Error #F0616D rather than pure red: next to violet, pure red vibrates. Dark theme: the accent lightens from #6D28D9 to #A78BFA — dark violet on black reads as grey. Text on background: 14.8:1. Muted text: 5.2:1 — never go below 4.5.