Two files, no build step. Tailwind users take the bridge instead; either way the gate suite runs on your build.
<link rel="stylesheet" href="node_modules/@verseva/design/tokens.css">
<link rel="stylesheet" href="node_modules/@verseva/design/components.css">
<!-- consumer surfaces boot light (law 9): -->
<html data-theme="light">
<!-- enforce before you ship: -->
npx verseva-gate --tokens node_modules/@verseva/design/tokens.css src
<!-- React, source-distribution (the shadcn model): components land in
YOUR project as source you own -->
npx verseva init
npx verseva add button field toast console-nav
npx verseva block add quote-toolThe seam law's handrail: margin, padding, and gap straight off the scale as classes (mt-5 = var(--s-5) = 24px), so a seam between a control row and its content is never left to memory. Vertical and gap only; horizontal rhythm comes from layout.
Equal-sized pairs; the fill says which leads (law 8). Press sits the control down 1px. All states ship or it's unfinished.
Label, input, quiet help line. The error state recolors the border and the help, and says how to fix it.
The word carries the state; the color only agrees with it (law 10).
Product card at --r-md (law 7). Header divides, footer holds the actions, right-aligned.
Always a word, never a dot alone. Small text on tints still clears 4.5:1.
One at a time, bottom-right, gone in about two seconds. The word does the work; the dot just nods.
At --r-lg (law 7). The overlay is yours; the modal is the contract's. Cancel never sits primary.
Every line carries provenance. This sends it to the client.
Mono uppercase headers, hairline row splits, .num for tabular right-aligned figures.
| Quote | Client | Status | Amount |
|---|---|---|---|
| Q-2081 | Northline Foods | Verified | 48,220.00 |
| Q-2080 | Harbor Botanics | Pending | 12,940.00 |
Display-face numerals, quiet label under. The accent italic carries a unit, not emphasis.
Single-hue magnitude, mono microlabels, and the takeaway caption is mandatory: label the meaning, not the axis.
One selected at all times; aria-selected carries it.
Multi-select filters with counts; aria-pressed carries the state.
The kbd hint is a machine artifact, so it's mono.
The identity pattern: initials avatar, bold name over quiet meta, value right in tabular figures.
Loading is a state of the real layout, not a spinner page. Skeleton bars mirror what will load.
Same contract as the input: 40px, quiet borders, the focus ring, the fix-it error state.
In-page section tabs. The active underline is the accent, never a hairline (law 11). React: npx verseva add tabs.
Inverse ground, hover or focus, one short label. Never load-bearing content. React: npx verseva add tooltip.
Quiet trail; the current page carries weight and aria-current.
Tabular numerals, the current page on the accent tint, dead ends disabled.
Single-hue fill on the surface track; always paired with the real number (never color-alone).
A paragraph-weight status. The bold lead names the situation; the tint agrees with it.
Says what belongs here and hands over the first action. Never a blank region.
Native details/summary: works with zero JS, full keyboard support for free. React: npx verseva add accordion.
Mobile bottom sheet: 26px top corners, grab handle, full-width paired actions.
Every line carries provenance.