Design bench / current vs proposed
A/B testing bench
Left is what ships today. Right is where a proposed variant lands. We drop a B into each slot, compare them frame-to-frame, then promote the winner — it becomes the new left.
Badge
badgeNeutral box, colour carried only by the dot. Every semantic tone.
Awaiting proposal
Describe the B variant and it gets built right here, side by side.
StatusSignal
status-signalOne primitive, four surfaces: dot, pill, glass pill, and inline label.
Awaiting proposal
Describe the B variant and it gets built right here, side by side.
Button
buttonPrimary / secondary / ghost across the two sizes, with and without an icon.
Awaiting proposal
Describe the B variant and it gets built right here, side by side.
Card
cardThe framed surface at three elevations and its accent / warning tones.
Base depth
Hairline frame, top catch-light.
Lifted depth
Deeper elevation shadow.
Accent tone
Tinted surface variant.
Awaiting proposal
Describe the B variant and it gets built right here, side by side.
DataPanel
data-panelSection shell: eyebrow, title, summary, header action, and a content body.
Section
Panel header
A framed section shell with a header row and a content body.
Awaiting proposal
Describe the B variant and it gets built right here, side by side.
RecordCard
record-cardA dense record container with eyebrow, action, body rows and a footer.
Runtime control card
A reusable record container for dense product summaries.
Awaiting proposal
Describe the B variant and it gets built right here, side by side.
RecordTable
record-tableCompact table rhythm — framed header strip, hairline rows, status pills.
| Flow | Kind | Load | Status |
|---|---|---|---|
| Intake router | Push | 82% | Live |
| Source sync | Pull | 48% | Queued |
| Live stream | Realtime | 91% | Live |
Awaiting proposal
Describe the B variant and it gets built right here, side by side.
ProgressCell
progress-cellMilled meter with a grooved track and a glossed fill, at several loads.
Awaiting proposal
Describe the B variant and it gets built right here, side by side.
StateBlock
state-blockLoading / paused / empty moments carried without changing page language.
Live preview running
Loading, empty, paused and error moments in one primitive.
Awaiting proposal
Describe the B variant and it gets built right here, side by side.
ToggleCell
toggle-cellThe binary control in both positions.
Awaiting proposal
Describe the B variant and it gets built right here, side by side.
GlassTag
glass-tagLiquid-glass label — shown over a dark frame where the refraction reads.
Awaiting proposal
Describe the B variant and it gets built right here, side by side.