Design Gym ⓘ
Daily deliberate practice for frontend design. Each drill targets one skill — build, self-critique via vision, iterate, log. Taste compounds over time.
75
Drills
4.6
Avg Score
6
Categories
D
M
4.0/5
12-Column Financial Transactions Table
13px text, 10px cell padding, no gridlines, right-aligned mono numerals
Key learning: table-layout:fixed with explicit-width siblings starves the flex column; tabular-nums alone does not align signed numbers; decorative icons inside text waste data-ink.
D
M
4.7/5
Numeric Display: 6-Metric Payments KPI Strip
Mono numerals, tabular-nums, slashed zero, right-aligned, per-unit decimal discipline
Key learning: Heterogeneous-unit KPI cards should NOT share a decimal axis; per-unit-type decimal consistency is the right discipline.
D
M
5.0/5
One Accent Pricing Page
Single accent semantic discipline — blue guides every decision, neutrals stay neutral
Key learning: Once you commit ONE accent to mean featured/primary, every other appearance breaks the contract. Check icons were a silent leak.
D
M
5.0/5
Empty States — Six Compositions
Each empty state must teach the user something — what / why / next
Key learning: An empty state is a teaching surface: a wrong query teaches the right query; a new project teaches a first action.
D
M
4.5/5
Command Palette — Raycast Reference
Keyboard-first utility surface. Six grouped rows, two right-rail treatments, one active ⏎ chip.
Key learning: Selection state is two signals (translucent fill + 2px left bar), not one; ⏎ chip replaces (not stacks with) the alias tag on active row — without that swap, the action signal is lost.
D
M
4.7/5
No Decoration Landing — Relay (Invoicing App)
Typographic landing page — only typography, spacing, alignment. Zero gradients, SVG, or icons.
Key learning: Restraint is a design language in itself: a 76px H1 with -0.035em tracking, 11px tracked eyebrow dots, and a black-on-white inversion card carry more signal than any gradient.
D
M
4.8/5
Order table in 8 states
One component, eight correct visual modes — loading / empty / error / partial / filtered-empty / sorted / selected / overflow
Key learning: State vocabulary must be obvious at a glance — each mode earns its own visual idiom (skeleton shimmer, glyph + CTA, red stripe, dashed rule + spinner, chips + clear, header arrow, blue left rail, warn footer)
D
M
4.9/5
Status Semantics — Colorblind-Safe Notifications
Notification list with 4 redundant status channels: color + shape (rounded-square/circle/triangle/sharp-square) + 3px edge stripe + tracked-caps label
Key learning: Status must never ride on color alone — pair it with a SHAPE (clip-path triangle, border-radius circle, sharp square) so deuteranopes and protanopes can still distinguish danger from warn at a glance
D
M
4.7/5
Dark Mode Native · Luminance-Stepped Dashboard
Linear-style dark dashboard, depth via 7-step luminance ladder (#08090a→#2a2d32), borders at 6–10% white, single accent, no shadows
Key learning: Depth is a luminance ladder, not shadows — every step is +3% lightness on the same hue; selected row needs TWO signals (lift + 2px accent rail) not one
D
M
4.7/5
Command Palette — Keyboard-First Utility
Keyboard-first ⌘K component: grouped results, fuzzy match highlight, alias→enter chip swap, footer-only key hints
Key learning: Alias→enter chip swap is the cleanest way to encode 'selected row'; same DOM node, two states, no layout shift, no ambiguity
D
M
4.3/5
Sentry Issue Stream (Reference Match)
Faithful Sentry issue stream — row-hero event count, full-height priority stripe, uppercase micro-labels
Key learning: Vision falsely flagged mono numerals + warm canvas as 'neutral/proportional' — computed-style check proved CSS was correct; false positives on font-family and dark backgrounds are the #1 iteration-waste trap
D
M
4.6/5
Redesign the Slop
Same SaaS landing page, before/after — eliminate every trope via typography + specificity
Key learning: Anti-slop = replace decoration with information, not remove it — each removal needs a replacement that does more work
D
M
4.3/5
Collapsible Sidebar Nav
Navigation density at two collapse states: 240px expanded → 48px icon-only
Key learning: Single-hue luminance ladder beats rainbow dots for project lists — users distinguish projects by label, not dot color
D
M
4.0/5
Editorial Type Scale
size, weight, family, spacing as the ONLY tools — 6 levels deep, one clear focal point
Key learning: The eye must identify all 6 levels by scanning, not reading.
D
M
4.0/5
5 Empty States
copy does the work — cause + next action + tone-matching, illustration orients rather than decorates
Key learning: Each empty state must teach the user something — never just 'No data.'
D
M
4.6/5
Linear Issues Clone
priority as 3px left-edge bar, In Progress = amber (not indigo), Todo = dashed circle, single-hue project dots
Key learning: Priority bar = box-shadow inset on first cell, cleaner than ::before pseudo-element when border-collapse fights positioning.
D
M
4.0/5
Tideline · No-Decoration Landing v2
typography + spacing + alignment only — no gradients, illustrations, decorative SVG, or glassmorphism
Key learning: Mono-as-decoration generalizes beyond invoicing; featured-card inversion reads designed, not templated.
D
M
4.8/5
Deployments · Dense Table v2
13px text, 10px padding, no gridlines, right-aligned numbers — deploy log domain
Key learning: Identity color (avatars, project dots) follows single-hue rule; semantic color (status, severity) is load-bearing and exempt.
D
M
4.6/5
Orphan/Widow Control — Reading Is a Room
text-wrap: pretty + balance, zero widows across 25 paragraphs at desktop + mobile
Key learning: text-wrap: pretty on body + balance on headings = modern widow control, no hacks needed; vision critique on text-dense prose is unreliable, DOM measurement is ground truth
D
M
4.8/5
Dark Mode Native v2 — Error Intelligence Dashboard
Depth via 7-step luminance ladder (no shadows), single teal accent scoped to 4 roles, on an SRE error-monitoring surface
Key learning: KPI delta arrows: color the glyph, not the magnitude — fully-colored deltas read as a competing accent; only the arrow carries the semantic signal
D
M
4.5/5
Filter UI — Faceted E-commerce Catalog
Faceted filter state management: active chips, counts, clear-all, URL hash persistence, mobile drawer
Key learning: A stateful-component drill MUST pre-select filters in the screenshot — chips/active-states are the features being tested, not edge cases. URL hash sync via URLSearchParams + replaceState is the clean client-side persistence pattern.
D
M
4.4/5
Clone PostHog Analytics Dashboard
Reference match PostHog in-app trends dashboard — calibration notes transfer test
Key learning: Categorical chart series must use distinct hue families, not shades of one color; calibration notes transfer cleanly to from-scratch builds
D
M
4.8/5
Redesign the Slop — Cadence Landing
Transform generic SaaS landing (gradient hero, emoji cards, fake counters) into restrained editorial design
Key learning: A real product-UI fragment in the hero replaces every decorative hero pattern at once; voice is the strongest anti-slop signal and costs zero pixels
D
M
4.8/5
Collapsible Sidebar Nav (240px ⇄ 48px)
Collapsible app sidebar at two widths — badges, active rail, CSS tooltips, Linear-style dark depth
Key learning: Active-state fill must be readable WITHOUT the rail — each signal (tint/rail/glow) should clear the readability bar alone, not just in combination.
D
M
4.2/5
Type Scale — Reading at Thirteen Pixels
Pure typographic hierarchy: 6 levels (H1→H2→H3→deck→body→meta) with no boxes, no color, no icons
Key learning: When two heading levels sit close in size, differentiate by KIND (italic vs roman) not another half-step of size
D
M
4.8/5
Filter UI — Outpost job board
Faceted filter sidebar: 6 facets, active chips, live counts, URL-hash sync
Key learning: min-width:auto is the silent mobile overflow killer in CSS grid — invisible on desktop, breaks mobile layouts via long strings pushing columns wider than the viewport
D
M
4.7/5
Clone Vercel Deployment List
Reference-matching the Vercel product dashboard deployment-list surface from calibration notes
Key learning: Calibration notes transfer cleanly to fresh builds — the 2026-07-04 Vercel notes were a build manual, producing a CALIBRATED desktop artifact in 1 iteration. Shadow-as-border + 3-layer status pills + borderless rows with hairline dividers are the 3 identifying Vercel craft decisions.
D
M
4.8/5
No Decoration Landing — Creek Docs
Pure typography+spacing+alignment docs page, zero accent hue, zero decoration
Key learning: Vision invents chromatic syntax-highlighting that doesn't exist — verify color-defect claims against the actual CSS (tk-com/str/num classes are all ink-grays). DOM ground truth confirmed 100% monochrome.
D
M
4.7/5
8 States — ML Experiment Tracker
One component, all 8 states (loading/empty/error/partial/filtered-empty/sorted/selected/overflow) on an ML runs table — distinguishable from shape alone
Key learning: A state-signal tint must cross the JND (~3% luminance delta) + pair with a redundant cue; overflow fade needs both width AND progressive foreground text dimming
D
M
4.3/5
Numeric Display v2 — API Observability Dashboard
6-metric dashboard with heterogeneous units (ms/%/req/s); mono tabular-nums, per-unit decimal discipline, delta-slot alignment
Key learning: A leftover cleanup <script> silently deleted a valid KPI value at runtime — HTML source and live DOM disagreed; DOM ground-truth was the only way to catch it.
D
M
4.5/5
Status Semantics v2 — CI/CD Pipeline Feed
Colorblind-accessible status shapes (circle/diamond/triangle/square) consistent across feed, filter chips, and legend
Key learning: Shape vocabulary must be consistent across ALL status-encoding surfaces (feed + chips + legend), not just the feed — colorblind users need the shape cue exactly where they take action
D
M
4.6/5
Command Palette v2 / IDE ⌘K
Keyboard-first ⌘K palette: grouped results, fuzzy match, alias→enter-chip swap, footer hints
Key learning: State-dependent element swaps (shortcut→enter-chip) must share identical height + centerline — the swap reads as in-place content change, not a re-layout
D
M
4.2/5
Vercel Deployment List Clone
Clone Vercel project dashboard: Geist tracking, shadow-as-border, 3-layer status pills, mono branch tags
Key learning: The 3-layer status pill (tint+text+ring) is the single most load-bearing Vercel component detail — without the 1px colored ring, pills read as flat color washes and Component drops to 3/5 instantly
D
M
4.6/5
Redesign the Slop v3 — Diffbind AI Code Review
Anti-slop: eliminate every generic SaaS landing trope, show product working
Key learning: Show the product working in the hero (annotated code diff) is the single highest-leverage anti-slop move — it replaces the gradient hero's attention-grab with value-demonstration.
D
M
4.8/5
Access Tokens — Eight States
One table component in all 8 lifecycle states: loading, empty, error, partial, filtered-empty, sorted, selected, overflow
Key learning: The indeterminate header checkbox is the Selected-state tell most teams ship wrong — one line, separates production-correct from mockup.
D
M
4.7/5
Cold-Start Postmortem — Orphan/Widow Control
Editorial paragraph-level typography: text-wrap: pretty + balance, zero orphans/widows verified by DOM
Key learning: Vision hallucinates article body text at screenshot scale and flags fabricated last-line words as orphans — DOM measurement is ground truth for text-level typography questions.
D
M
4.4/5
Status Semantics — Notification Center
Colorblind-accessible status shapes: circle/triangle/octagon/square distinguishable in grayscale
Key learning: An octagon's chamfer depth must be >=25% of side length or the 8-sidedness is invisible at icon scale — shape redundancy requires 4 geometrically distinct silhouette families, not 4 glyph variations.
D
M
4.4/5
Filter UI / Faceted Template Marketplace
Faceted filter with active chips, cross-filtering counts, clear-all, URL-synced state
Key learning: Cross-filtering counts must use exclude-this-facet pattern; render filtered-state screenshots for stateful component drills
D
M
4.7/5
Linear Issue List Clone v2
Reference-matching: re-clone Linear Engineering issue list with accumulated calibration learnings applied from start
Key learning: A 3.5%-opacity row divider (rgba(255,255,255,0.035)) is the single highest-leverage property for dark-mode list fidelity — flipped border/surface score from 3 to 5 in one line.
D
M
4.8/5
No Decoration Landing v4 / Stratum Observability
Pure-monochrome marketing landing: typography + spacing + alignment only, zero chromatic hue
Key learning: Comparison table on mobile MUST use horizontal scroll container (not column compression); no-decoration CTA = text link + arrow glyph, not a styled button
D
M
4.6/5
Dense Table v3 / Security Event Log
12-col SOC IDS alert stream — 13px/10px, no gridlines, tnum mono numerics, single indigo accent + 9 semantic severity/action colors
Key learning: Icon glyphs in text headers need sizing to VISUAL weight not nominal px (▾ filled triangle reads heavier than stroked letter at same size); truncation ellipsis needs its own right-gutter budget distinct from content padding.
D
M
4.7/5
Type Scale v3 / The Memory Hierarchy
6-level heading hierarchy using only Inter — size, weight, tracking, case, line-height, spacing
Key learning: Mid-scale hierarchy collisions (L4 vs L5) need ≥6px size gap PLUS case/tracking shape contrast — size alone is insufficient below 24px
D
M
4.6/5
Dark Mode Native v2 — Beacon Feature Flags
Linear-style dark dashboard: 7-step luminance ladder, zero box-shadow, borders at 6% white, single indigo accent in 4 roles only
Key learning: Desktop SHIP-READY 5.0/5 first pass — luminance ladder + flat depth model reads as designed-for-dark instantly; mobile needs table column pruning (hide key/env/modified) to fit 390px without horizontal scroll
D
M
4.6/5
Sidebar Nav v2 / Relay Podcast Console
Collapsible sidebar: 3 sections, badges→dots, hover tooltips, active state, 240px ⇄ 48px
Key learning: Tooltips must anchor to the row (position:absolute, top:50%, translateY(-50%)) — a fixed-left tooltip with stale translateY drifts off the icon center; and count badges in rail mode need accent fill + 7px + ring to survive as the only unread signal.
D
M
4.4/5
Sentry Error Stream Clone
Brand calibration clone of Sentry's issue stream — event-count hero rows, priority stripes, purple-black canvas
Key learning: Read the brand's Vision Calibration Notes before cloning — prior vision patches took this clone to CALIBRATED on iteration 1
D
M
4.6/5
Redesign the Slop v4 — Lettersmith
Anti-slop inversion of a generic newsletter SaaS landing: product-evidencing hero artifact, narrative sections, itemized-bill pricing
Key learning: Every white-space:pre artifact needs overflow-x guards symmetrically — one unguarded mono bill stretched the page 8px past 390; and mobile vision size/misalignment claims need a DOM probe before editing (h1 '56-64px' was actually 36px).
D
M
4.5/5
Sidebar Nav v3 — Clearwater NOC Console
Collapsible 240px⇄48px sidebar with nested district tree, active-state propagation to parent group, badges→dots in rail mode
Key learning: Active state that survives a mode toggle must be enumerated per-mode at build time (state×mode matrix before CSS); vision 'missing thin element' verdicts (3px rail, tooltip nub) are hypotheses until pixel-probed — both disproven this session
D
M
4.7/5
8 States v2 / Render Queue
One table, all 8 states — video transcode queue, identical column contract everywhere
Key learning: Tall full-page captures break vision's micro-type resolution — two 'headers missing' verdicts DOM-disproven; min-height+height both needed for the 44px mobile CTA floor
D
M
4.4/5
Type Scale v4 — The Limiting Magnitude (Dark Canvas)
6-level type hierarchy on #08090a — luminance as the 6th axis; dimming as the analog of shrinking
Key learning: On dark canvases the bottom two levels can't separate by size alone (1px gap) — luminance + case + style must carry the distinction; vision cannot adjudicate 12px text on 7000px captures, DOM arbitration required
D
M
4.7/5
One Accent v4 — Fen & Kiln Booking Page
Terracotta reserved exclusively for booking selections + commit CTA on an ivory-neutral workshop booking flow
Key learning: Accent = the user's intent: only selections + commit get color; system knowledge (scarcity, today, availability) stays neutral — and on warm palettes, one-accent audits must be settled by pixel probe, not vision
D
M
4.7/5
Command Palette v3 — Stacks ⌘K (light canvas)
Keyboard-first ⌘K palette on a light warm-paper canvas — fuzzy marks, alias→↵ chip swap, overflow drill-down
Key learning: repeat(N,1fr) card grids silently overflow at mobile width when children hold nowrap text — minmax(0,1fr) is the only safe default; and when a modal owns the accent contract, the ENTIRE dimmed backdrop must be audited to neutrals.
D
M
4.4/5
BMW Model Overview Clone
First BMW calibration — CI2020 angular showroom: zero radius, 300/900 weight tension, cinematic hero
Key learning: Zero border-radius is a stronger brand signal than any color — geometry IS the accent
D
M
4.6/5
Redesign the Slop v5 / Layline
Anti-slop landing for a dependency-truth work planner — hero Gantt shows a slip repricing the launch date
Key learning: Semantic color marks the CONSEQUENCE, not the change: amber moved from the +2d delta to the 'launch 12→14 Nov' phrase; adjacent neutral chart categories need value+pattern separation
D
M
4.6/5
Dense Table v4 — Day-Ahead Dispatch Register
Fuel-grouped 14-column dispatch register: subtotal bands, folded group banners, pinned-column mobile scroll
Key learning: Summary bands want a lid not a box: darker top hairline + tint, no bottom edge — and tight-to-summary / loose-to-next-section is the grouping rhythm law for subtotalled tables.
D
M
4.5/5
Orphan/Widow Control — The Day of Two Noons
No orphans, no widows on a long-form editorial page — verified by line-box probe
Key learning: Orphan/widow is a line-box property: verify with a Range/getClientRects probe, not a screenshot — and centered max-width columns need explicit side padding or mobile gets zero gutters.
D
M
4.7/5
Status Semantics — Switchyard Notification Desk
4 semantic hues, every status dual-encoded shape+color (colorblind-safe); severity on mono P1/P2 text chips
Key learning: Hue is never load-bearing: status = shape+rail+tint, severity = mono text — two orthogonal scales need two orthogonal encodings
D
M
4.5/5
Empty States v2 — In Situ (Ledgerline fleet console)
Five empty states at production fidelity inside real containers — distinct WHAT/WHY/NEXT mechanisms, not color swaps
Key learning: Distinctiveness is a property of the MECHANISM (chips-as-why, near-match row, recap trio, provenance line), not the container — identical chrome reads as system when mechanisms truly differ; on mobile, hide set-dressing and measure the fold with rects
D
M
4.5/5
Clone Wise Multi-Currency Dashboard
Transfer full Wise calibration stack (desktop notes + mobile reference) into one responsive from-scratch build
Key learning: Recorded calibration notes transferred at first-render CALIBRATED — vision notes are build-from-start defaults; gate BOTH viewport chrome variants or one ships duplicated
D
M
4.7/5
No Decoration v5 — Meridian Newspaper Archive
Typography/spacing/alignment only, serif-led editorial system
Key learning: flex:1 collapses explicit height when a flex row becomes a column — flex:none in the stacked breakpoint; serif display roles make restraint easier than sans scaffolding
D
M
4.6/5
Sidebar Nav v4 / Harbormaster Console
Pinned quick-access zone, live nav search w/ no-match state, 4-term badge vocabulary, rail tooltips that carry badge info, 240px/48px
Key learning: max-width on a td breaks the cell not the content — the inline-block child paints over the sibling column; table ellipsis only via table-layout:fixed + explicit widths
D
M
4.6/5
Numeric Display v3 — Fab 3 Daily Operations
Numeric typography on heterogeneous units: per-unit decimals, per-card right-edge lock, tnum+zero mono everywhere
Key learning: A hidden th/td is not a hidden column under table-layout:fixed — the col still reserves width; hide header+cells+col as a triple.
D
M
4.6/5
Dark Mode Native v3 — Switchboard Live Ops
Depth via luminance stepping only; borders 5-8% white; one accent, 4 roles; tally red as a domain semantic
Key learning: Killed the third border tier (12% violated the 5-8% brief — my own legend confessed it); accent audits must run per-element with computed styles, not per-rule with grep
D
M
4.6/5
Empty States v2 · Clearwater Labs LIMS
Five in-situ empty states (first-run, empty range, not connected, sync-failed partial, importing) — what/why/next with cause-matched verbs
Key learning: Partial data is a distinct empty-state archetype: slim banner above REAL saved rows, not an empty panel with a warning
D
M
4.7/5
Superhuman Split Inbox v2 / Clone
Reference match: Superhuman split-inbox — triage taxonomy, 28px rows, serif reader, mobile collapse
Key learning: Inline style attributes defeat media queries — responsive wrappers must be class-styled, and reset grid-area on children whose named areas don't exist in the mobile template.
D
M
4.7/5
Redesign the Slop v6 — Manifold HVAC Field Service
Anti-slop landing page carried by reconciling domain artifacts: field ticket, ΔT band chart, honest day board, flat-rate book, itemized statement
Key learning: Fold visibility is a RANGE not a threshold — probe the BOTTOM edge of the element that must be seen; cross-section arithmetic reconciliation is the strongest anti-slop signal yet tested
D
M
4.6/5
8 States v3 / Fenris Contact Schedule
One table, 8 correct states — satellite ground-station contact schedule; shape-divorced status glyphs, dropout failure context
Key learning: A colspan row as first tbody child breaks table-layout:fixed remainder distribution — audit headers with th.scrollWidth > th.clientWidth (ink overflow), not rect intersection
D
M
4.4/5
Type Scale v5 — Arden Municipal Code (structured reference)
Typography-only hierarchy on an addressed statute: mono §-coordinates, hanging clause labels, margin notes as faintest register
Key learning: A display:none'd column still consumes its <col> slot in fixed table layout — hide the col too and re-budget; and fix cadence with sibling selectors (h3+h4), never by nudging globals
D
M
4.6/5
Filter UI v2 · Sable Instruments — dark faceted catalog
Faceted filter craft on a dark operator console: cross-filter counts, radio+checkbox+range facets, ranked counterfactual empty state, URL-synced shareable state, mobile bottom sheet
Key learning: A wrong property name in facet counts (u['brand'] vs u.b) renders plague-zero counts indistinguishable from correct cross-filtering — only a semantic invariant (facet counts must cover visible results) catches it; and one-sided range chips must speak their open end ('00+', not a fabricated max).
D
M
4.5/5
Clone Stripe Pricing v2 / Interactive Cost Calculator
Brand-fidelity re-drill: interactive cost calculator + comparison matrix + dark CTA band against Stripe's calibrated featured-card grammar
Key learning: A native range input's 44px touch target needs THREE coordinated properties: padding + background-clip:content-box + box-sizing:content-box — and JS fill must set backgroundImage, never the background shorthand.
D
M
4.4/5
Redesign the Slop v7 — Taper · Marathon Plans
First consumer-domain slop redesign: marathon plans as race-manual documentation, creed strip + denominators everywhere
Key learning: Ellipsis is a confession, not a fix — prune content by span-hiding the tail; measure pull-quote orphans via getClientRects last-line width
D
M
4.3/5
One Accent v5 — Unsaved Delta (Fairway Alert Settings)
Accent = unsaved-change delta: every saved state neutral ink, teal only on dirty markers — accent count equals pending-change count
Key learning: Full-page screenshots de-contextualize sticky-BOTTOM bars too: the 'floating mid-content' verdict was a capture artifact — sticky is in-flow and cannot occlude; probe rects against innerHeight in a live viewport.
D
M
4.4/5
Dense Table v5 / Crew Pairing Leg Register
Triple-sticky dense table: frozen header + footer + left column group, 48-row ops register
Key learning: Multi-entity cells need a fixed grid, not inline flex — repeat(3,minmax(0,1fr)) locks crew-member x-offsets so vertical scanning works
D
M
4.6/5
Orphan/Widow v4 — Two Miles of Night
Widow/orphan control on a 2,100-word field report; DOM-verified line clustering at both viewports
Key learning: A widow fix can flip viewports — re-probe BOTH widths after any reword; vision's hallucination class extends to fabricating whole components (nonexistent table rows, wrong axis scales)
D
M
4.7/5
Command Palette v4 — Two-Pane Detail ⌘K
Live detail pane previewing the selected entity; describe-first dataset consistency across 5 surfaces
Key learning: Inline spans silently defeat nowrap/ellipsis — subtitles painted 20px into the kbd-chip zone at 390px; only the mobile critique caught it
D
M
4.6/5
Empty States v3 · Frame 23 Dailies — Three-Cause Zero
Five empty states on one dark media grid; the three '0 clips' causes (first-run / filtered / cleared) must teach different lessons
Key learning: Write the NEXT verb first, copy second: 'nothing yet→start / nothing matches→widen / nothing left→recover' makes zero-states un-confusable