Foundations
Colour, spacing, radius, type and motion, from one token file.
Every kit reads its look from tokens/tokens.json, in the W3C design-token
format. npm run tokens:build (the
@itshendri/kit-tokens package) turns it into the
CSS variables, the TypeScript theme, Figma variables and DESIGN.md.
Colour
Semantic names only, the shadcn vocabulary, each usable as bg-, text- and border-. Screens never
use hex or Tailwind's palette colours. These swatches use this site's variables, generated from the same
file, so they follow the theme toggle.
backgroundforeground- Aa
card+ card-foreground
- Aa
popover+ popover-foreground
- Aa
primary+ primary-foreground
- Aa
secondary+ secondary-foreground
- Aa
muted+ muted-foreground
- Aa
accent+ accent-foreground
- Aa
destructive+ destructive-foreground
- Aa
success+ success-foreground
- Aa
warning+ warning-foreground
- Aa
info+ info-foreground
borderinputring- Aa
sidebar+ sidebar-foreground
- Aa
sidebar-primary+ sidebar-primary-foreground
- Aa
sidebar-accent+ sidebar-accent-foreground
sidebar-bordersidebar-ringchart-1chart-2chart-3chart-4chart-5
The build checks every pairing the kit renders, in both themes: each fill and its -foreground, body and
muted text on every surface, each status colour used as text, and each status icon on its own tint.
Anything below WCAG AA fails the build.
Spacing
A 4-point grid, using Tailwind's numeric scale and only these steps:
0 1 2 3 4 5 6 8 10 12 16 (0 to 64 px). Screen edges px-5, between sections gap-5, inside cards p-4,
list rows py-3.
Radius
rounded-sm 6 · rounded-md 8 · rounded-lg 10 · rounded-xl 16 · rounded-2xl 20 · rounded-full.
Buttons are pills. Each class is an offset from one base radius, so changing semantic.radius.base reshapes
the whole kit.
Type
Three faces (heading, body and mono) and a typeset: the body text size, which every text-* size scales
with, the leading of running text, and for long-form text the flow (space between blocks) and measure (the
longest line). The specimen below is the live theme: pick another in the theme bar and it changes.
Heading
SystemBody
SystemMono
System mono- text-4xl 36Getting paid, on time
- text-3xl 30Getting paid, on time
- text-2xl 24Getting paid, on time
- text-xl 20Getting paid, on time
- text-lg 18Getting paid, on time
- text-base 16Getting paid, on time
- text-sm 14Getting paid, on time
- text-xs 12Getting paid, on time
Prose · 16px · leading 1.75 · flow 1.25em · measure 70ch
Send it the day the work ends
An invoice sent the same day is paid in 14 days on average; one sent a week later takes 23. The work is fresh, and the person who asked for it still remembers it.
Put the purchase order in reference, and name the project, not the month.
Screens use the Text variants (h1–h4, lead, large, p, small, muted, code) in the native kit and
the text-* classes on the web rather than raw sizes. Long-form text (an article, help, a rendered answer)
goes in Prose, which applies the flow and the measure. The kits' own Foundations show the scale as they
render it:
Motion
150 ms for small feedback, 200 ms for most transitions, 300 ms for sheets and large surfaces. Anything that moves stops when the operating system asks for reduced motion.