Theme zeroUI with its tokens
zeroUI's look comes from a handful of tokens: one slant angle, three outline weights, one accent and a set of timings. Override them on :root in your own stylesheet and every component follows, with nothing else to edit.
Where the tokens live
Installing any zeroUI component writes the foundation into your project's main stylesheet: each token is declared once on :root under a --zero- name, and Tailwind's theme points at it, so bg-zero-accent reads --zero-accent. To change one, set the same name again on :root, after the foundation. Override the --zero- name, not the --color-zero- one: the utilities read the first.
The main tokens
| Prop | Type | Default | Description |
|---|---|---|---|
| --zero-slant | angle | 14deg | Every slanted cut: slab edges, the lean of fills and marks. |
| --zero-stroke-thin / --zero-stroke / --zero-stroke-thick | length | 2px / 3px / 4px | Outline weights. |
| --zero-accent (-hi, -lo) | colour | #cde31c | The one bright colour, with its hover and pressed shades. |
| --zero-focus | colour | #f2e74b | The selection frame around whatever has focus. |
| --zero-dur-fast / -base / -slow | time | 140ms / 240ms / 420ms | Hover, release and reveal timings. |
| --zero-rarity-common … -legendary | colour | The five tiers of worth (see Rarity). |
Change the slant
Every cut is worked out from --zero-slant and the element's height, and every outline is the shape moved inward exactly, so a different angle re-cuts buttons, tabs, inputs and badges together and their outlines stay even. Lettering keeps its own italic, so stay near the default (between 8 and 18 degrees) if you want the cuts to sit with the type.
:root { --zero-slant: 8deg; /* a gentler cut than the default 14deg */}Change the accent
The accent is the fill of primary buttons and selected tabs, with ink-black text on it, so pick a bright colour that keeps that text readable (zeroUI's lime is 13.8 : 1 against ink). Keep it clear of the focus yellow, or a focused primary button loses its frame, and of the red that means danger. Mix the hover and pressed shades from it:
:root { --zero-accent: #2ee6d6; --zero-accent-hi: color-mix(in oklab, #2ee6d6, white 22%); /* hover */ --zero-accent-lo: color-mix(in oklab, #2ee6d6, black 18%); /* pressed */}Speed up or slow down the motion
Durations are tokens too, so scaling them changes the feel of the whole set: presses, popups, tabs sliding, a gauge's trail. Under reduced motion zeroUI already drops the decorative ones (the sheen, the glitch, the waiting loops) to zero, whatever you set here.
:root { /* everything a little quicker */ --zero-dur-fast: 110ms; --zero-dur-base: 190ms; --zero-dur-slow: 330ms;}