📋 What was this drill?

Drill: 8 states: one table component, all 8 states (loading skeleton, empty, error, partial, filtered-empty, sorted, selected, overflow). Each state must be correct.

Interpretation: Built as an org's API access-token list — a developer-tool surface where all 8 states map naturally onto the token lifecycle (skeleton fetch, first-run onboarding, 504 timeout, partial-stream, filtered-empty, sorted-by-last-used, batch-select with action bar, 47-row pagination). Light Stripe-dashboard aesthetic: warm-neutral canvas, hairline dividers, mono hashes/timestamps/counts, right-aligned numerics, one indigo accent reserved for primary actions + active sort + selection only. Same column layout across all 8 panels so the eye compares state-vs-structure.

Design Gym · 2026-08-05 · Density — 8 States

Access Tokens — one table, eight states

A single component (the org's API access-token list) rendered in every state it must survive. 13px text, hairline dividers, right-aligned mono numerics, one indigo accent. Each panel is the SAME table at a different moment in its lifecycle.

01 Loading Skeleton rows, real layout

	Token	Scope	Status	Created	Last used	Usage

02 Empty First-run onboarding

No access tokens yet

Tokens let your services and CI call the API. Create your first one to start scripting deploys, syncs, and webhooks.

03 Error Fetch failed, recoverable

	Token	Scope	Status	Created	Last used	Usage
Nothing to show until the list loads.

04 Partial Streaming, more arriving

	Token	Scope	Status	Created	Last used	Usage
	deploy-botsk_live ·a3f9	prod	Active	Mar 04	2m ago	184,302
	analytics-syncsk_live ·7c21	read	Active	Feb 18	1h ago	52,019
	staging-runnersk_test ·0e44	staging	Scoped	Jan 30	3d ago	9,841
Loading 4 more of 7…

05 Filtered empty Filters active, no match

scope: prod × status: expired ×

No expired tokens in production

All production-scoped tokens are active or scoped. Try widening the filters.

06 Sorted By Last used, descending

Token	Scope	Status	Created	Last used	Usage
deploy-botsk_live ·a3f9	prod	Active	Mar 04	2m ago	184,302
webhook-relaysk_live ·f1d8	prod	Active	Feb 27	11m ago	76,540
ci-nightlysk_live ·2b77	read	Expired	Dec 12	14h ago	3,210
legacy-mobilesk_live ·9a02	prod	Revoked	Sep 05	6d ago	0

07 Selected Batch action bar visible

2 selected

Token	Scope	Status	Created	Last used	Usage
deploy-botsk_live ·a3f9	prod	Active	Mar 04	2m ago	184,302
analytics-syncsk_live ·7c21	read	Active	Feb 18	1h ago	52,019
webhook-relaysk_live ·f1d8	prod	Active	Feb 27	11m ago	76,540
staging-runnersk_test ·0e44	staging	Scoped	Jan 30	3d ago	9,841

08 Overflow Pagination, many rows

Token	Scope	Status	Created	Last used	Usage
deploy-botsk_live ·a3f9	prod	Active	Mar 04	2m ago	184,302
analytics-syncsk_live ·7c21	read	Active	Feb 18	1h ago	52,019
webhook-relaysk_live ·f1d8	prod	Active	Feb 27	11m ago	76,540
billing-exportsk_live ·5c6e	read	Active	Feb 09	38m ago	281,774

Showing 1–8 of 47 …

Discipline. One component, one accent (indigo — primary actions, active sort, selection only), mono for every hash / timestamp / count with tnum + zero so decimals never jitter. Hairline row dividers, no vertical gridlines, numbers right-aligned, 13px text at ~10px cell padding. Each of the eight states uses the SAME column layout so the eye can compare what changes (state) against what doesn't (structure).