From one accent to a full palette
Logo purple arrives. Someone calls it a design system. Your job is backgrounds that recede, borders that separate, and errors that read as errors — not mauve confusion.
You do not need a dozen accent hues. You need a disciplined neutral ladder, one or two supporting hues, and semantic colors everyone agrees mean the same thing in the product — not just in the brand PDF.
Let harmony tools propose, not decide
Complementary, analogous, triadic presets break blank-page paralysis. Treat them as sketches. The palette generator works best when you iterate: lock a hue family, steal a secondary for charts or tags, then spend political capital on neutrals because that is what users stare at for hours.
Reference palettes like Tailwind or Material Design are sanity checks for step spacing, even when your brand looks nothing like them.
Build the ladder before the hero image
Numeric scales (50–950) are a shared language between design and engineering. Generate with sRGB mixes or OKLCH ramps from our token exporters — same goal: predictable steps you can name in conversation. “Brand-700 for the sticky border” beats “slightly darker purple than Tuesday.”
Pull dominant swatches with the image color extractor, pick an accent, then grow the ladder — do not ship every extracted pixel as-is.
Semantic colors deserve boring meetings
Success, warning, and error only work when product agrees when they appear. Pick conservative hues, test on real surfaces, document allowed combinations. Destructive actions should never rely on accent purple alone — color reinforces meaning already spelled out in words and layout.