Data display

tables · stats · avatars · accordion

Structured content primitives. Tables carry tabular numerals and a hairline rhythm; stats lead with the figure; the accordion needs no JavaScript.

Table

Token provenance — what the seed derives.
TokenRoleValue
colorPrimaryBrand accentseed
fontSizeBody type basederived
borderRadiusCorner roundingderived
controlHeightPointer targetderived

Header row is uppercased and muted; the body keeps full ink. Numeric columns use tabular figures so digits align.

Stats

10k+Teams onboard
99.9%Uptime SLA
4.9/5Average rating

The figure is the headline; the label sits beneath it in muted ink. Never colour the figure alone — the label always travels with it.

Avatars

DE OP EN SU +4 design, ops and 2 others

Initials only, 34px, circular. One accent avatar marks the owner; the rest stay neutral. The overflow count is muted, not accented.

Accordion

What is a seed token?

The ~20-field input every other token is derived from. Change one field and the whole system follows.

Can I theme dark mode separately?

No need — dark is the same seed run through a different algorithm, so the two appearances cannot drift apart.

How do I change the brand colour?

Edit the accent role in brand.json and rebuild. Every component referencing the accent updates together.

Native <details> — keyboard accessible and works with JavaScript disabled.