Design system inventory @usersfirst/ui 0.2.0 · 2026-10-18 20:09 · markdown

53 tokens · 5 controls · targets: game (..\tandemonium-ui), lab (.)

Adoption

gamelab
tokens.css linked✓✓
kit loaded✓✓
uf-* elements in HTML4598
uf-* created in JS461
raw <button> still in HTML870
raw buttons still created in JS80
var(--uf-*) references in page CSS99318
literal hex colours in page CSS (distinct / total)50 / 14674 / 121
literal font stacks in page CSSui-monospace, SFMono-Regular, Menlo, monospace
Georgia, 'Times New Roman', serif
system-ui, -apple-system, "Segoe UI", Roboto, sans-serif
'Noteworthy', 'Bradley Hand', fantasy		var(--mono)
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
ui-monospace, SFMono-Regular, Menlo, monospace

Tokens (53)

colour · surfaces

tokenvalueused bynote
--uf-color-bg#0b0d120lab: page gradient base
--uf-color-surface#1a1a2e0game: panels / cards
--uf-color-surface-2rgba(255,255,255,.10)2game .lobby-btn fill
--uf-color-surface-3rgba(255,255,255,.04)1
--uf-color-linergba(255,255,255,.40)1game .lobby-btn border
--uf-color-line-softrgba(255,255,255,.16)2
--uf-color-scrimrgba(0,0,0,.60)1

colour · text

tokenvalueused bynote
--uf-color-fg#ffffff4game: 61 uses of #fff
--uf-color-fg-muted#8a93a63
--uf-color-fg-on-accent#06140c2

colour · semantic (game accent = the 37-use #44ff66 green)

tokenvalueused bynote
--uf-color-accent#44ff663
--uf-color-accent-softrgba(60,200,80,.25)1game .lobby-btn-accent fill
--uf-color-accent-linergba(60,200,80,.60)1
--uf-color-accent-2#ffd23f0game gold, 26 uses
--uf-color-warnvar(--uf-color-accent-2)1
--uf-color-danger#ff44442
--uf-color-danger-softrgba(255,68,68,.18)2
--uf-color-info#4488ff0shared by game + lab
--uf-color-info-softrgba(103,193,245,.16)1game .cta-btn fill
--uf-color-info-linergba(103,193,245,.50)1
--uf-color-info-fg#bfe6ff1
--uf-color-versus#c898ff1game .lobby-btn-versus
--uf-color-versus-softrgba(160,64,255,.18)1
--uf-color-versus-linergba(160,64,255,.65)1

colour · seats & teams (game values; the lab's lobby adopts them)

tokenvalueused bynote
--uf-color-captain#7ae09a1
--uf-color-stoker#ff9e6b1
--uf-color-team-a#4c7dff1game --versus-team-a · P1/P3 lightbar blue
--uf-color-team-b#ff45601game --versus-team-b · --tandem-player2

type

tokenvalueused bynote
Tandemonium Ride Together--uf-font-ui'Helvetica Neue', Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif3
Tandemonium Ride Together--uf-font-monoui-monospace, 'Cascadia Mono', SFMono-Regular, Menlo, monospace2
Ag--uf-size-xs10px324 uses
Ag--uf-size-sm12px311px+12px+13px = 100 uses in the game: collapse to one
Ag--uf-size-md16px1game .lobby-btn
Ag--uf-size-lg18px1
Ag--uf-size-xl22px1
Ag--uf-size-2xl28px0
Ag--uf-size-hero64px0

spacing (4px grid)

tokenvalueused bynote
--uf-space-14px2
--uf-space-524px1

radius (game today: 50%, 10px, 999px, 8px, 3px, 6px, 2px, 12px … 29 distinct)

tokenvalueused bynote
--uf-radius-sm6px3
--uf-radius-md10px1
--uf-radius-lg14px1game .lobby-btn
--uf-radius-pill999px0

elevation / focus

tokenvalueused bynote
--uf-shadow-card0 12px 34px -14px rgba(0,0,0,.8)1
--uf-focus-ring0 0 0 3px var(--uf-color-accent)1
--uf-glow-accent0 0 18px -4px var(--uf-color-accent)0

motion

tokenvalueused bynote
--uf-motion-fast120ms1
--uf-motion-base180ms2
--uf-easecubic-bezier(.2,.8,.2,1)2

layering (game today: ad-hoc 11 / 56 / 100 …)

tokenvalueused bynote
--uf-z-hud100
--uf-z-sheet500
--uf-z-modal600
--uf-z-toast900

Overrides

tokenvaluewhen
--uf-size-sm14px@media (min-width: 1600px)
--uf-motion-fast0ms@media (prefers-reduced-motion: reduce)

unused by any element: --uf-color-bg --uf-color-surface --uf-color-accent-2 --uf-color-info --uf-size-2xl --uf-size-hero --uf-radius-pill --uf-glow-accent --uf-z-hud --uf-z-sheet --uf-z-modal --uf-z-toast

Controls (5)

<uf-button> the one button: every CTA, menu entry and option in both repos.

UfButton · packages/ui/src/elements/uf-button.js · 139 lines · owns its DOM · 12 gallery states · 28 tokens
propattributetypedefault
labellabelstring""
variantvariantprimaryaccentghostdangerversusprimary
sizesizexssmmdlgmd
disableddisabledbooleanfalse
selectedselectedbooleanfalse

events: —
methods: click()
data attributes: —

usage: game 45 html + 4 js (4 files) · lab 74 html + 18 js (17 files)

<uf-chip> a small status tag (READY, ASSIGNED, AVAILABLE, P1).

UfChip · packages/ui/src/elements/uf-chip.js · 45 lines · owns its DOM · 5 gallery states · 14 tokens
propattributetypedefault
labellabelstring""
tonetoneneutralaccentinfowarndangerneutral

events: —
methods: —
data attributes: —

usage: game 0 html + 0 js · lab 9 html + 7 js (4 files)

<uf-flow> hosts uf-steps; exactly one is active; go()/back() with history.

UfFlow · packages/ui/src/elements/uf-flow.js · 164 lines · keeps authored children · 1 gallery states · 0 tokens
propattributetypedefault
currentcurrentstring""

events: uf-flow:change
methods: steps() step(id) go(id, opts = {}) back() reset() attachFocus(controller) refreshFocus()
data attributes: data-flow-back data-flow-go

usage: game 0 html + 0 js · lab 2 html + 12 js (6 files)

<uf-seat> a seat in the lobby: who sits here, on what controller, and whether they are ready.

UfSeat · packages/ui/src/elements/uf-seat.js · 86 lines · owns its DOM · 5 gallery states · 19 tokens
propattributetypedefault
seatseatstringCaptain
whowhostringOPEN
devdevstring""
statestateopenjoinedreadylockedopen
tonetonecaptainstokerteam-ateam-bcaptain
badgebadgestring""

events: —
methods: —
data attributes: —

usage: game 0 html + 0 js · lab 6 html + 15 js (4 files)

<uf-step> one screen of a flow: optional prompt above and hint below the authored content.

UfStep · packages/ui/src/elements/uf-step.js · 90 lines · keeps authored children · 3 gallery states · 9 tokens
propattributetypedefault
promptpromptstring""
hinthintstring""
activeactivebooleanfalse

events: —
methods: focusables()
data attributes: data-focusable

usage: game 0 html + 0 js · lab 7 html + 9 js (6 files)

Generated by tools/ui-inventory/ui-inventory.mjs. Literal colours in the wild are measured by npm run ui:audit; the gallery of live states is packages/ui/gallery.html.