Tokens
Every style prop in the kit takes a token: p="$md", gap="$sm", br="$lg",
fz="$sm". Tokens are what make spacing consistent, theming possible, and a
design change a one-line edit.
The tables below are generated from
packages/core/src/config/scales.ts,
so they are the values your components actually resolve.
One key, several scales
A token key resolves per property. $md on height is size.md; on
padding it is space.md; on fontSize it is fontSize.md; on borderRadius
it is radius.md. That is why a single size="md" can set a control's height,
padding, font and radius coherently.
<Box p="$md" br="$md" height="$md" />
// padding 12 · radius 8 · height 40space
padding · margin · gap
| Token | Value | Scale |
|---|---|---|
$xxs | 2px | |
$xs | 4px | |
$sm | 8px | |
$md | 12px | |
$lg | 16px | |
$xl | 24px | |
$xxl | 32px |
size
width · height · control heights
| Token | Value | Scale |
|---|---|---|
$xxs | 18px | |
$xs | 24px | |
$sm | 32px | |
$md | 40px | |
$lg | 48px | |
$xl | 64px | |
$xxl | 96px |
radius
borderRadius
| Token | Value | Scale |
|---|---|---|
$xxs | 1px | |
$xs | 2px | |
$sm | 4px | |
$md | 8px | |
$lg | 16px | |
$xl | 32px | |
$xxl | 64px |
fontSize
fontSize
| Token | Value | Scale |
|---|---|---|
$xxs | 12px | |
$xs | 14px | |
$sm | 16px | |
$md | 18px | |
$lg | 20px | |
$xl | 24px | |
$xxl | 28px |
lineHeight
multiplier applied to fontSize
| Token | Value |
|---|---|
$xxs | 1.35× |
$xs | 1.45× |
$sm | 1.5× |
$md | 1.45× |
$lg | 1.4× |
$xl | 1.35× |
$xxl | 1.3× |
Line height
Line height is a multiplier, resolved against the font size. The ladder is a hump rather than a climb, and the reasoning is worth reading:
Unitless line-height multipliers (resolved to px against each font size). The ladder is a HUMP: it rises to 1.5 at `sm` and then TAPERS to 1.3, because the right amount of leading depends on what a size is used for, not just how big it is. The bottom steps are captions, labels and dense UI chrome — short strings where a tall line box just pads the control — so they run tighter. The middle is prose read over many lines, which wants the most air. The top steps are display copy, where a body ratio reads as a gap between lines rather than leading. A ladder that only climbs (the previous shape here, 1.35 → 1.65) inverts the top half: it made `$xxl` headings 46px tall, double-spaced. This matches the systems the kit draws from, which agree on the shape even though they express it differently. Mantine ships two scales — body `lineHeights` that climb 1.4 → 1.65 across 12–20px, and `headings.sizes` that taper 1.5 → 1.3 across 14–34px; our single 12–28px font scale spans BOTH ranges, so it has to be the union of the two, which is this hump. Tailwind's built-in pairings trace the same curve: 12/16 (1.33), 16/24 (1.5), 18/28 (1.56), 24/32 (1.33), 48/48 (1.0). Against the `font` scale above this resolves to 16 / 20 / 24 / 26 / 28 / 32 / 36 — every value even (so a `(height − lineHeight) / 2` centering gap stays on whole pixels), the first four on a 4px grid, and each one equal to the leading Tailwind or Mantine gives that same font size. Retuning here moves every derived line height at once — `config/fonts.ts`, `createTheme`'s font scales, and `getLineHeight`.
| Token | Value |
|---|---|
$xxs | 1.35× |
$xs | 1.45× |
$sm | 1.5× |
$md | 1.45× |
$lg | 1.4× |
$xl | 1.35× |
$xxl | 1.3× |
zIndex
| Token | Value | Typical use |
|---|---|---|
$0 | 0 | in-flow content |
$1 | 100 | raised surfaces — sticky headers, affixed controls |
$2 | 200 | dropdowns and popovers |
$3 | 300 | overlays and drawers |
$4 | 400 | modals |
$5 | 500 | tooltips and toasts — always on top |
Breakpoints
| Breakpoint | Min width | Media query |
|---|---|---|
$xxs | 480px | (min-width: 480px) |
$xs | 576px | (min-width: 576px) |
$sm | 768px | (min-width: 768px) |
$md | 992px | (min-width: 992px) |
$lg | 1200px | (min-width: 1200px) |
$xl | 1408px | (min-width: 1408px) |
$xxl | 1920px | (min-width: 1920px) |
Use them through useMedia() or @knitui/mediaquery —
see Responsive.
Colour tokens
Colour comes from the active theme rather than a fixed scale, so it lives on its own page: Color & themes.
The short version: $color1 … $color12 is a 12-step ramp of the active theme,
plus semantic aliases ($background, $borderColor, $color, $placeholderColor)
and state variants ($backgroundHover, $borderColorFocus, …).
Shorthands
The kit registers shorthand props for the properties you reach for constantly:
| Shorthand | Property |
|---|---|
p px py pt pr pb pl | padding and its axes/sides |
m mx my mt mr mb ml | margin and its axes/sides |
bg | backgroundColor |
c | color |
br | borderRadius |
fz | fontSize |
maw miw mah mih | max/min width and height |
They are typed identically to their long forms, and both are always available.
Adding to the scales
Extend rather than replace — see
Theme builder, which takes preset names
(radius: "rounded", space: "comfortable") or explicit overrides
(size: { md: 18 }) and rebuilds the config around them.