A robust design system needs more than just a primary and secondary color. When engineering real-world applications with modals, tooltips, data tables, badges, and interactive form states, you need a predictable scale of tints and shades.
The 10-Step Scale (50 to 950)
Popularized by Tailwind CSS and Material Design, the numeric 50–950 naming convention has become the industry standard: - 50–100: Subtle background washes, hover tints, and table zebra striping. - 200–300: Card borders, divider rules, and disabled input backgrounds. - 400–500: Secondary icons, placeholder text, and active indicators. - 600: The primary brand anchor for buttons, links, and key highlights. - 700–800: Hover and active button states; high-contrast headings. - 900–950: Deep charcoal typography and solid background surfaces in dark themes.
Decoupling Primitives From Semantics
One of the most common mistakes when authoring CSS is hardcoding brand names directly into component classes (e.g. .btn-blue).
Instead, structure your tokens in two distinct layers:
1. Primitive Tokens (Raw values):
--blue-500: #3b82f6;
--emerald-500: #10b981;
- Semantic Tokens (Intent & Context):
--color-interactive: var(--blue-500);--color-success: var(--emerald-500);--surface-card: #ffffff;--border-subtle: #e2e8f0;
When you decide to rebrand or introduce a dark theme, your components remain untouched—you simply swap the semantic token references at the root.