07 Tokens
Design System
What every surface in the kit is painted from — color, type, radius, glass and the glyph set every component reaches for — gathered in one place so every surface wears the same ones.
The palette this kit paints with — every color with what it is for and its value in each theme, in hex, rgb, hsl and oklch, so a consumer installs the set rather than reading it back out of the stylesheet.
The typefaces this kit is set in — one for everything a person reads and one for everything the machine wrote, named as the variables the theme fills.
How the kit lays its colors down — the glass a control sits on, the one a menu floats over the page on, the opaque fallback, the muted fill of a control at rest, and the red a removing row is tinted with — as class strings a component merges rather than utilities it can't adjust.
The glyphs this kit draws — a curated slice of Hugeicons, re-exported so a consumer installs the set rather than the whole library.
The type layer: the family stacks the utilities read, the size scale with a line height on every step, and nine weights of the kit's own — normal at 350, bold at 500. Import it from your globals.css.
The utilities the kit adds to Tailwind's own: the dotted ground plates sit on, the shimmer it pulls in from tw-shimmer, and the scroll-fade and no-scrollbar that come with shadcn's sheet. Import it from your globals.css.
The kit's corner scale — seven steps, each a multiple of one --radius, so changing that single value rounds everything in proportion. Import it from your globals.css.