← Back to the screen

Design system portfolio

radix-shadcn — `Meterbox` — the record

The four direction lines behind this page, the generator command that produced its tokens, and the pairs it was measured against.

Usage-based billing for one account: this month's meter, the projection, and the draft invoice.

Direction

Archetype : Shell. A persistent rail, a sticky account bar, one content well.

Data stance : Tile-first. Four reads carry the period, each with its comparison, and the projection takes the larger tile. Meters and the invoice sit under them as evidence.

Density : Compact. A 4px spacing step, 32px controls, 13px secondary text, tabular figures wherever numbers stack.

The one bold thing : The Radix scale used as roles, visibly and labelled. Step 3 hovers, 5 selects, 6 rules, 9 fills, 11 sets secondary text, 12 draws the overage segment. The accent is a hue whose step 9 actually carries white text.

Generator commands, verbatim

radix_tokens.py --shadcn zinc          # emitted tokens.css (not edited)
radix_tokens.py --solid                # chose the accent
radix_tokens.py --guide                # the step-to-role table
radix_tokens.py --hue iris             # the accent scale, in the page's token layer

The generator wrote tokens.css. The page links it and never edits it. The iris scale is --hue iris verbatim, re-expressed under :root, @media (prefers-color-scheme: dark) :root:not([data-theme="light"]), and :root[data-theme="dark"].

Why iris

--solid measures white on step 9 for all 31 hues. Five clear 4.5:1: indigo 5.21:1, iris 5.37:1, plum 4.75:1, purple 5.18:1, violet 5.39:1. Blue measures 3.26:1 and fails. Iris carries a billing product's seriousness, and it is not the generated-design violet.

Measured pairs

White on --iris-9 #5b5bd6, the solid button label at 15px/600 : 5.37:1, needs 4.5:1. APCA reads Lc −81.7 and passes at 15px/600

--muted-foreground #71717b on --background #ffffff, all secondary text in the light theme : 4.83:1, needs 4.5:1. APCA reads Lc 73.5 and allows it from 24px/400

--muted-foreground #9f9fa9 on --background #09090b, the same text in the dark theme : 7.58:1, needs 4.5:1

--iris-9 on --muted #f4f4f5, the meter fill in the light theme : 4.88:1, needs 3:1

--iris-11 #b1a9ff on --muted #27272a, the meter fill in the dark theme : 7.08:1, needs 3:1

--iris-11 #5753c6 on --background #ffffff, the accent link : 6.07:1, needs 4.5:1

The two meter segments against each other, within allowance and billed : 2.48:1 light, 1.62:1 dark. Each clears 3:1 against the track and a 3px gap of track sits between them, so no pair on the bar is adjacent. The percentage, the money and the 100% mark all repeat what the colour says.

Two step swaps, both measured

Radix names step 8 as the focus ring. It measures 2.46:1 on white, under SC 1.4.11's 3:1, so the ring takes step 9 in light (5.37:1) and step 11 in dark (9.46:1 on --background).

Steps 9 and 10 keep their colour across themes, so step 9 falls to 1.95:1 on the dark meter track. The fill takes step 11 there.

Control edges

shadcn's --border measures 1.27:1 on white. It rules between reads, meter rows, and table rows, where it decorates. Anything bounding a control — the outline button, the account picker, the segmented control — takes --muted-foreground at 4.83:1.

Second state

The reading dated 8 September, 14:20 carries a meter that stopped reporting. Selecting it swaps every figure derived from that meter rather than adding a footnote under one of them. A notice names the meter and links to it. All four reads print the figures that exclude it — $48,962 projected, $17,952.89 accrued, 44.9% of the commitment drawn, $8,962 forecast overage. The meter row shows its last count and a dashed void in place of a bar. The invoice line reads Held, and the usage subtotal and the amount due fall with it. Zero (within allowance), held (not reporting), and Not yet (tax, calculated at close) are three visibly different marks.

What stays at the default

The radius. --radius is shadcn's own 0.625rem and the page derives its two smaller steps the way shadcn does. Colour, the absence of shadow, rules in place of cards and a monospace numeric voice carry the difference instead.

Deviation from the contract

CONTRACT.md §5 asks for the dark set under :root:not([data-theme="light"]) and :root[data-theme="dark"]. The iris scale does exactly that. The generated zinc set publishes its dark values under .dark, which is shadcn's own contract and which §1 forbids editing, so a synchronous head script sets the class and the attribute together before first paint.