Theme
All 31 themes with 12-step color scales. That's 372 color styles in light and dark mode.
With documentation. And link styles.
I threw in some text styles as well (but they are not documented).
"I'm doing this so you don't have to."
Steps 1
and 2
are designed for app backgrounds and subtle component backgrounds. You can use them interchangeably, depending on the vibe you're going for.
Steps 3
, 4
, and 5
are designed for UI component backgrounds. Step 3
is for normal, step 4
is for hover and step 5
is for pressed or selected states.
Steps 6
, 7
, and 8
are designed for borders. Step 6
is designed for subtle borders on components which are not interactive. For example sidebars, headers, cards, alerts, and separators. Step 7
is designed for subtle borders on interactive components. Step 8
is designed for stronger borders on interactive components and focus rings.
Steps 9
and 10
are designed for solid backgrounds. Step 9
has the highest chroma of all steps in the scale. In other words, it's the purest step, the step mixed with the least amount of white or black. Because 9
is the purest step, it has a wide range of applications: Website/App backgrounds, Website section backgrounds, Header backgrounds, Component backgrounds, Graphics/Logos, Overlays, Coloured shadows, Accent borders. Step 10
is designed for component hover states, where step 9
is the component's normal state background.
Steps 11
and 12
are designed for text. Step 11
is designed for low-contrast text. Step 12
is designed for high-contrast text.