UI Kits
Reusable color decisions for buttons, cards, alerts, charts, and form states.
Patterns
8
States
24
Best for
Design systems
A useful UI kit is less about decoration and more about repeatable roles: surfaces, borders, text, actions, feedback, and data colors.
Curated Resources
Actions and interaction states
Primary, secondary, destructive, and disabled button color roles with contrast-first defaults.
Color values
Validation and input states
Consistent colors for success, warning, error, info, focus rings, and helper text.
Color values
Analytics and comparison views
A categorical chart set tuned to remain distinct in common color-vision simulations.
Color values
Lists, cards, and resource layouts
Surface, border, shadow, and text colors for dense card grids and article indexes.
Color values
- Name colors by role before naming them by hue, because roles survive palette changes.
- Document hover, active, focus, disabled, and loading states alongside the default component.
- Keep chart colors separate from status colors so data categories do not imply accidental meaning.