Design System

One brand color in, get primary/secondary/accent/semantic + neutral scales out, ready to export.

Design system

success/warning/danger/info carry fixed meaning — don't reuse danger for emphasis.

Most UI is neutral; a consistent gray scale is what reads as professional.

Related tools

Enter a base color and get a full 50–950 shade scale for design systems.

Split any color evenly by lightness into a light-to-dark ramp; export CSS variables.

A balanced neutral scale with a warm or cool cast; export CSS variables.

📘

Design system starts from a brand color and auto-generates primary, secondary, accent and semantic neutral ramps.

Enter a brand color and the tool derives primary / secondary / accent and a neutral ramp.
Review what each semantic color is for (background, text, border, etc.).
Export CSS variables straight into your design system or component library.

💡