Live components for building HTML prototypes. View source to copy any snippet. Tokens come from pai.tailwind.js; component classes from pai.css. The exhaustive reference is the sticker sheet.
pai.css is now the atlas stylesheet: 337 component classes and 226 tokens, up from 133 and 124.
Everything that already existed renders exactly as before — all 103 protos were screenshotted before and after and
diffed, and the ones that survive are pinned in the compatibility layer at the foot of pai.css.
New work should say class="pai pai-next" on <body>. A few atlas rules size icons by
context, and they sit behind that class so they cannot reach work built before the migration.
template.html already has it.
pai-next.
Spacing, radius, icon size, elevation and layer. One scale for padding, margin and gap; several rungs are deliberately absent, and reaching for the neighbour is the point of having a scale.
--space-*, and the stock Tailwind step where the system publishes nothing--rounded-*. Our corners are sharper than most product UI, and the scale stops at 2xl on purpose--icon-*. Size an icon, never inherit it--elevation-01…04. How far off the page a surface sits, not a border
new-04 is Figma effect style 471:2410, used by the newer dashboard modals.
Reach for it where a modal needs to sit clearly above a scrim.
The base face is white with a soft ring. Tone recolours the label and ring only; selected takes the stroke from the label colour, and neutral adds a whisper of tint to stay legible.
One bar slides between tabs rather than each tab toggling its own border. On a tracked strip it drops 1px so the underline and the hairline read as a single line. Each label reserves its medium-weight width, so neighbours do not shift when the selection moves.
With a subtitle the row top-aligns, so the leading slot sits against the title line rather than the centre of the title and subtitle together.
The menu surface, its four placements, headings, search, items and dividers are ported. Split triggers, the cascade stagger and expandable rows are behaviour-heavy and stay in the app.
Lightness steps evened out in OKLCH, so the ramp reads as even progress rather than
bunching in the middle. app-600 is the load-bearing step: it is
text-brand and bg-brand.
The product greyscale, and the most-reached-for ramp after brand. Not Tailwind's
gray: the app aliases gray to Tailwind's neutral, then overrides
most steps with these.
The four ramps the state tokens are built from. Every danger token is a red
step, warning is amber, info is blue, and success
maps to green. Green is the one that was re-derived: each step's perceived lightness is
pinned to the red/blue/purple mean so it stops reading fluorescent. It is aliased
success-*, the same ramp under a second name.
No semantic role attached. Available if a proto needs a hue beyond brand and the state colours, but nothing in the product currently leans on them.
Two steps between bg-primary and bg-tertiary. Shown on a grey
field because the difference is invisible against white, which is rather the point of them.
Reach for these before any raw ramp step above.