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.