Each palette is a 12-step scale designed for consistent contrast across light and dark appearances.
| Step | Typical use | |------|-------------| | 1–2 | App backgrounds | | 3–5 | Component backgrounds (hover/active) | | 6–8 | Borders and separators | | 9–10 | Solid accents / primary actions | | 11–12 | Text on color and high-contrast text |
Gray scales pair with accents: set gray_color on Theme to choose the neutral ramp (slate, mauve, …).
Accent scales power color props on Button, Badge, and other components, and data-accent-color on Theme.
See the interactive grids on /colors.