Brand Color Kit

Palette vs color system: why roles beat raw swatches

A palette is a bag of pretty swatches. A color systemis a set of decisions: which color means “primary action,” which means “something went wrong,” and which quiet grays carry your body text. The difference matters the moment more than one person touches the product. With a raw palette, every developer reaches for #3B82F6by eye and hopes it's the right blue. With a system, they reach for --color-primary-500 and the meaning travels with the value.

That is the whole job of this tool. You give it one brand color and it builds a complete, role-based system: a brand primary, a brand-tinted neutral family, and the four semantic roles every interface needs — success, warning, error and info. Each role is a full 50–950 ramp, and the whole thing exports as CSS variables, a Tailwind theme object, or design tokens. You stop shipping swatches and start shipping a contract.

Semantic color roles explained

Semantic roles name a color by its job, not its hue. That indirection is what lets you re-theme an app without a find-and-replace across thousands of lines.

• Primary — your core brand color. Buttons, links, active tabs, focus rings and selection states all pull from this ramp.
• Neutral — grays that carry the bulk of the UI: text, borders, dividers, cards and backgrounds. Here they keep a hint of the brand hue so they never look dead next to your primary.
• Success, warning, error and info— the feedback colors. These stay anchored to conventional hues (green, amber, red, blue) on purpose: users have learned that red means danger, and a clever “on-brand” error color only adds risk.

Because the names are stable, a redesign becomes a re-mapping. Point primary at a new hue and every button, link and focus ring moves with it — no hunting for stray hex codes.

The 50–950 token scale & how it maps to UI

Each role is expressed as eleven steps — 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 — walking from near-white to near-black while holding the hue steady. This is the same scale popularized by Tailwind and Radix, and it exists so that “a bit lighter” is a number, not a guess. The 500 step is the canonical mid-tone you'd name the color by.

Mapping components to step numbers instead of raw values keeps a product consistent: a primary button is always primary-600, its hover is always primary-700, and that rule reads the same in code, in Figma and in a code review.

Design tokens & handoff (CSS vars, Tailwind, JSON, Figma)

Design tokens are the platform-agnostic source of truth for these decisions — a flat list of name/value pairs that every tool can read. The emerging standard is the W3C Design Tokens Community Group format, where each token carries a $value and a $type. Export that JSON once and a build step can fan it out into every platform you ship to.

This tool gives you three ready-made handoffs. The CSS variables block drops straight into a :root rule. The Tailwind theme object slots into theme.extend.colors per the Tailwind color docs, so utilities like bg-primary-600 and text-neutral-700 just work. And the design-tokens JSON is what you hand to a design-tool importer or a token pipeline like Style Dictionary, keeping designers and engineers reading from the same file.

Keeping it accessible

A pretty ramp is useless if no one can read text on it. The relationship that matters is contrast: the WCAG 2.1 guidelines ask for a ratio of at least 4.5:1 between normal text and its background (3:1 for large text). The 50–950 structure makes this easy to reason about — light steps (50–300) want dark text from the 700–950 range, and dark steps (700–950) want light text. As a rule of thumb, a step and its “mirror” (100 against 800, 200 against 900) clear AA comfortably, while neighbours rarely do.

• Test the pairs you actually ship — primary-600 on white, white on primary-600 — rather than assuming the ramp guarantees it.
• Don't lean on hue alone. Pair your error red with an icon or label so color-blind users get the message too.
• Re-check in dark mode. Swapping surfaces to the 900–950 end flips which text steps pass, so verify both themes.

Learn more

For the formal token spec, read the W3C Design Tokens Format Module, and for theming utilities see the Tailwind CSS color documentation. For the contrast math behind the accessibility notes above, the WCAG contrast guidance is the canonical reference.