Plain CSS
Install Zazz in any project that supports CSS imports.
Zazz is three CSS files. Variables hold the token surface. Reset sets sensible element defaults. Utilities ship Tailwind-style helper classes. None of them require JavaScript or a build step. Any project that can import CSS can run Zazz.
1. Get the files
The files live at app/zazz/ in the Zazz repo:
- variables.css: every Zazz token, organized into eight collections
- reset.css: box-sizing, element defaults, native dialog enhancements
- utilities.css: display, flex, grid, spacing, type, radius, shadow, and layout utility classes
- main.css: the recommended entry point. Imports the other three into CSS
@layerrules with the right cascade order
Copy all four into your project. A common location is /styles/zazz/.
variables.css declares the token surface in this order: theme (base, overlay, brand, status), corporate scales (primary, secondary, tertiary), grayscale (neutral, shade, tint), typography, spacing, radius, layout, effects.
reset.css sets box-sizing: border-box on everything, removes default margins and padding, normalizes form element styling, and adds spring-eased transitions to native <dialog> elements.
utilities.css ships Tailwind-style atomic classes for flex, grid, gap, padding, margin, radius, shadow, text styles, container, and ring. Every class consumes Zazz tokens, so changes to the variables propagate through the utilities automatically.
main.css is a thin entry point that wraps the other three into CSS @layer rules. Three lines total.
2. Import
The simplest path is a single import:
@import "./zazz/main.css";That file wraps the three files into named CSS layers:
@import url("./variables.css") layer(variables);
@import url("./reset.css") layer(reset);
@import url("./utilities.css") layer(utilities);Layers apply in declaration order. Later layers win conflicts, so utility classes override reset declarations, which override anything in variables. Your own CSS sits outside any layer and wins over all of them.
Importing the files directly
If you want to control layer ordering yourself (or your build chain doesn't support @layer), import each file separately:
@import "./zazz/variables.css";
@import "./zazz/reset.css";
@import "./zazz/utilities.css";When you skip layers, order matters:
- Reset first. Its declarations sit at the bottom of the cascade so component CSS overrides them.
- Variables second. Tokens need to be defined before utilities reference them.
- Utilities third. Utility classes consume the variables and apply on top of the reset.
3. Verify
Drop a button on the page that uses Zazz tokens and utility classes:
<button
class="p-md radius-md text-md"
style="background: var(--primary); color: var(--primary-foreground);"
>
Confirm
</button>A rounded button in your primary brand color with 1.5rem of padding. If the button is unstyled, your imports failed. If the colors are missing, check the variables file path.
Dark mode
Zazz responds to system preference (prefers-color-scheme: dark) and to a .dark class on any ancestor. Force a mode at the root:
<html class="dark">
...
</html>See Theme: How modes work for the full pattern, including how to add a third mode.