Design Gym ⓘ
Daily deliberate practice for frontend design. Each drill targets one skill — build, self-critique via vision, iterate, log. Taste compounds over time.
121
Drills
4.5
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
D
M
4.4/5
Clone Vercel Deployment List
Vercel product-surface fidelity: 3-layer status pills, borderless hairline rows, Geist tracking, reconciling dataset
Key learning: min-width on nowrap flex tabs + default flex-shrink squeezes boxes so text paints over neighbors — box-rect probes stay clean; only Range text-rect probes catch it. Fix: flex:none.
D
M
4.7/5
No Decoration v6 / Halyard & Brett Fastener House
Achromatic trade catalogue: hierarchy by type, space and rule alone — no gradients, icons, or hue
Key learning: Edge-bleed negative margins on scroll containers cause page-level overflow; stat strips are tables in disguise and need column-stack fallbacks at narrow widths
D
M
4.7/5
Dense Table v6 / Port Call Register
12-column maritime port-call register — Tufte data-ink, describe-first reconciling dataset, semantic-only status stripes
Key learning: Conditional scroll-fade (JS-measured overflow class, not always-on CSS) is the correct table affordance — but adding position:relative can silently drop overflow-x:auto, so probe docScrollW after every container patch.
D
M
4.6/5
Numeric Display v4 / Water-Treatment Daily Ops
6-KPI bare-typography strip on a municipal WTP daily-ops surface; per-unit decimal discipline, derived energy intensity, band-constrained metric status rendering
Key learning: Col widths must live in CSS classes, not inline styles, when a media query re-budgets them — inline silently beats the cascade; the value-unit gap is a probe-able invariant
D
M
4.8/5
Status Semantics v5 / Coldline HACCP Alert Desk
Four-channel status encoding (glyph silhouette + rail + tint + deviation meta) proven colorblind-safe via in-artifact grayscale strip
Key learning: flex:1 1 0 + ellipsis silently truncates action labels; encode the dual-encoding contract for the smallest viewport it must survive
D
M
4.5/5
Sidebar Navigation v1 / Meridian Rail Control
Collapsible 240px/48px sidebar: 3 sections, badges, collapsed tooltips, active state, mobile drawer
Key learning: Grid auto-placement silently re-flows spanning cells into wrong-row columns across breakpoints — explicit grid-row/grid-column per cell class is the only stable row re-budget; tooltips in collapsed rail must carry the badge payload, not just the label.
D
M
4.7/5
Filter UI v3 — Permit Register
Faceted filters with live cross-filtered counts, active chips, clear-all, URL-persisted state
Key learning: Media-query cell overrides must out-specify the base cell rule (.tbl td.<class>, 0,2,1) or hides silently no-op and cells auto-place into phantom rows — and vision reads the phantom as intentional density (new false-ACCEPT class)
D
M
4.8/5
Empty States v3 · Listenpost Marsh Console
Five empty states in five different container grammars (map/card/table/chart/report) — each teaching via a different mechanism, WHAT/WHY/NEXT throughout
Key learning: An empty-state CTA can carry its own counterfactual evidence — 'Widen to 90 days — 14 detections exist' derives the count from the dataset, so the relief action states its payoff with a reconciled live number.
D
M
4.6/5
Command Palette v5 · Mode Grammar — Tideglass LSS ⌘K
Prefix-scoped mode grammar (> # @), counterfactual scope-relief CTAs, bottom-sheet touch mirror
Key learning: An accent role contract needs a TONE LADDER too: solid / tint+edge / text-only split identical-role blues into a readable hierarchy
D
M
4.4/5
Clone Kraken Pro Trade Terminal
Kraken Pro trade surface: layered slate depth, cumulative depth bars, purple-surgical accents, describe-first reconciled dataset
Key learning: Vision oscillates on gradient strength (16% 'missing' vs 20% 'too strong') — the spec value stands; and a chart bug where volume bars silently overlap the price pane reads as an intentional 'same-canvas histogram' — always probe pane geometry, not just presence.
D
M
4.8/5
Redesign the Slop v8 — Harrow & Vane Land Surveyors
Anti-slop landing for a land-surveying firm; hero is a real working plat whose traverse reconciles with the table, invoice, and chain of title
Key learning: The fold is not a clip: fold-crossing elements get a bbox-vs-container probe before any 'clipped' verdict; SVG text sized in viewBox units rendered ~7px — state each fact once, where it's legible
D
M
4.7/5
Dense Table v7 · Air Cargo Outbound Manifest
12-column manifest, derived CHWT/rate arithmetic, suffix-flag numeric right-edge discipline
Key learning: Suffix flags on numeric cells need a reserved absolute slot, not inline flow — inline '1,403 V' breaks the column's digit grid; and col display:none under table-layout:fixed remaps widths onto the wrong columns (hide cells, not cols).
D
M
4.6/5
Type Scale v6 / Mollusca of the Coromandel Shelf
Convention-driven axes: ICZN taxonomy register where the domain code mandates styling (italic binomials, Roman authorities) — the ladder must absorb it and still scan
Key learning: Map domain-mandated styling onto your strongest axis (family: serif=prose, mono=data); arbitrate every vision color prescription against WCAG before adopting
D
M
4.4/5
One Accent v6 — Translation Review Console
Accent = reviewer-authored text: violet marks only human edits on a CAT-tool review surface
Key learning: Queue-depth numerals get accent in exactly two places — the KPI and the CTA; one accent numeral per page region, not per page
D
M
4.7/5
Command Palette v6 / LX Desk ⌘K
Argument-mode grammar: Tab opens a command into a stepper with live before→after previews and armed-confirm for destructive playbacks
Key learning: Never call a row builder twice — fresh objects break indexOf selection silently; and reparenting an input on every render drops focus, killing keyboard-first UI with zero errors.
D
M
4.6/5
MongoDB Atlas Deployments Clone
Atlas database-deployments home: tint elevation, filled status pills, surgical green
Key learning: Vision's iteration-1 'green too mint / sidebar too blue' verdicts were pixel-probe FALSE (exact #00ed64/#07151f/#001e2b rendered); the DOM-vs-vision precedence ladder now extends to brand tokens — probe before churn.
D
M
4.6/5
No Decoration v7 / Meridian Wireless Shortwave Guide
Typography-only landing page: achromatic warm-ink editorial, three-voice type system, hairline rules, one inverted band
Key learning: A pinned scroll fade needs its containing block OUTSIDE the scroller — and the fade + minmax(0,1fr) rules travel as a pair when splitting wrapper/scroller duties.
D
M
4.6/5
Sidebar Nav v2 / Skerryhead Wind Ops
Orthogonal accordion + rail collapse, severity-max aggregate badges, state-bearing rail tooltips
Key learning: Section aggregates need severity-max coloring (any red child -> red), not just a sum — sum answers 'how much', severity answers 'how urgent'
D
M
4.5/5
Empty States v4 · Palisade Observatory
Live filtered-empty state machine: cause chips, counterfactual relief ladder, emptiness as a timeline region
Key learning: A relief count computed through the filter it clears is always 0 — counterfactual counts must exclude their own facet, and only a state-machine probe (not the seeded screenshot) can catch it.
D
M
4.5/5
Filter UI v4 — Seismic Station Register
Per-option counterfactual counts, zero-options with network counts, URL-synced state with history
Key learning: Pseudo-element content is invisible to innerText probes — vision caught dangling attr() labels four probe rounds passed; derive probe expectations from the dataset, never hand-count
D
M
4.6/5
Dense Table v8 — Numismatic Evening Session Ledger
12-column auction ledger at 13px/10px; Tufte data-ink; mixed-decimal columns; OT reserved-slot suffixes; four-status stripe contract
Key learning: Positional nth-child column hiding mis-aligns on tfoot's different cell structure — dual tfoot rows (desktop grid + mobile taxonomy strip), one visible per breakpoint; probe visible-instance counts, not presence.
D
M
4.7/5
Numeric Display v5 / Downrange Pass-Ops Console
6 mixed-scope KPIs (negative dBm hero, exponent PER, count denominators) over a 19-pass schedule; mono tnum right-edge discipline
Key learning: Grid items owning a horizontal scroll region need min-width:0 — the 1fr track otherwise grows to the table's min-width and the scroll container never engages
D
M
4.7/5
Status Semantics v6 · Falstone Grid Alarm Desk
Severity × lifecycle as two orthogonal colorblind-safe scales on a substation alarm desk
Key learning: A legend proof strip is a contract: it must demonstrate the exact live glyphs, and vision's fold claims must be refuted with getBoundingClientRect numbers, not reflowed on.
D
M
4.6/5
Command Palette v5 — Pathology Order-Entry Console
Command palette v5: keyboard nav, grouped fuzzy results, scope chips, scroll-fade affordance
Key learning: CSS masks only fade what the container paints — scroll fades over a parent-owned sheet need a painted overlay, verified by pixel A/B (−53% dark-pixel delta)
D
M
4.5/5
Linear Issue List Clone v3 — Kestrel Dynamics Flight Software
4th-gen Linear clone on a fresh domain; new elements: cycle pills, sub-issue chips, blocked-by relation, unassigned glyph avatar
Key learning: The frame is not the affordance, the glyph is — an empty dashed avatar read as a glitch until a person silhouette was added; 4th-gen calibration assets passed on first render, so rep drills must introduce NEW component types to generate learning
D
M
4.7/5
Redesign the Slop v9 — Coldbrook Lumber Co.
Anti-slop sawmill landing page: proof-of-work tally, derived ledger, zero decoration
Key learning: Lint-probes-before-first-screenshot validated: caught overflow + sub-44 targets pre-vision; clip coverage must be audited like layout (gaps read as missing components)
D
M
4.4/5
8 States v4 — Kiski Junction Setout Register
One table component, all 8 states as a live state machine (console + deep links); every state correct at desktop + mobile
Key learning: [hidden] loses to author display rules — check visible instances, never the hidden property; and probes that enter only via setState() mask the fresh-load entry path
D
M
4.6/5
Orphan/Widow v5 — The Forty-Fathom Garden (Oral History)
Widow control under dialogue grammar: hanging speaker keys, marginal timecodes, tape-side apparatus
Key learning: Assert web fonts are LOADED before trusting any line-break measurement — an opsz-axis URL that 400s silently swaps Georgia for Crimson Pro and invalidates every widow number and screenshot
D
M
4.6/5
One Accent v7 / Pinewood Ridge Run Sheet — Accent = The Present Moment
One accent (#b91c1c astronomy red): red exists only on the live eyepiece row (rail, tint, timer, chip) + the advance CTA; everything else warm-paper neutral
Key learning: Accent = 'the present moment' is the sharpest contract yet — exactly one live row keeps the audit binary (rail moves on advance, JS-verified); warm-paper neutrals read as 'red-ish' to vision at thumbnail scale, so neutral-hue claims need computed-style adjudication
D
M
4.6/5
Sidebar Nav v1 — Mine Ventilation Ops
Collapsible 240px/48px sidebar: 3 sections, derived badges, tooltips, active state, mobile strip
Key learning: H-scroll nav rail inside a grid item blows mobile width via min-width:auto — min-width:0 on the rail's grid ancestor is the fix; dual-label (full/short) nav solves desktop names vs mobile cells.
D
M
4.4/5
Filter UI v3 / Whin + Hollow Seed Archive
Faceted filter with mixed facet grammars (checkbox/radio/range), live exclude-this-facet counts, removable chips, clear-all, URL-synced state
Key learning: translateY-based off-canvas drawers leak into full-page captures - display:none at the breakpoint is the only capture-safe retirement; purpose-built labeled mobile cards beat collapsed table cells by a full grade
D
M
4.6/5
Clone Clay Enrichment Workspace
Brand-fidelity clone of Clay's CRM enrichment workspace — warm cream, oat borders, dashed+solid signature, named swatch palette
Key learning: A 5.0 calibration is a build recipe — first desktop critique returned zero real defects; Clay joins Stripe in the 3-for-3 false-positive club (tracking/shadow/hover claims all disproven by computed styles)
D
M
4.6/5
No Decoration v8 — Water District CCR
Civic/regulatory no-decoration: annual water-quality report on pure typography, spacing, alignment
Key learning: Civic mandates solve no-decoration content for free; fold gates must assert row-bottom, not row-top
D
M
4.6/5
Dense Table v9 — Sawyer Creek Grain Scale Settlement
12-column grain-elevator scale-ticket ledger; per-column decimal discipline across 4dp/2dp/1dp; signed basis on a uniform 5-char template
Key learning: colgroup widths misassign to wrong visible columns under positional hiding + table-layout:fixed — neutralize cols at the breakpoint and re-declare on visible th's; always probe per-column rendered width > 0
D
M
4.5/5
Type Scale v7 — Disputatio de Attentione
Referential pairing across interruption: objections i-iv pair with solutions Ad i-iv across the respondeo, roles-as-levels scholastic disputation, marginal apparatus gutter
Key learning: Distinct semantic roles need distinct REGISTERS (italic terminus vs upright heads), not distinct sizes; a dual-mode element needs its reading order probed in both modes
D
M
4.0/5
Dark Mode Native v4 / Tidewater Bay LSS Night Rounds
Luminance-step depth on #08090a, 5-8% white borders, zero shadows; magenta accent x4 roles incl. pre-seeded selected row; SVG loop schematic + lighting strip with NOW cursor
Key learning: Contracted accent roles must render in the static capture (pre-seed movable states), and flex order needs its own reading-order probe — partial explicit orders silently scramble mobile reading order past every geometry check.
D
M
3.5/5
Command Palette v8 / Halstead Yard Pick-Wave ⌘K
Dark-native ⌘K over a pick-wave board: two-intensity single-hue accent contract (focus+Enter vs fuzzy match), live footer binding, zone-route sense of place
Key learning: A scrim should demote not delete (.74 -> .60 recovered the whole frame), and an accent 'overused' across focus/match/queued can be fixed by RANKING the uses into two intensities rather than removing any.
D
M
3.7/5
Activation Funnel Insight — finding-led rebuild
5-step funnel with 3-way breakdown; worst leak 4.3x the next, voiced at every level
Key learning: Size the dataset's key ratio (worst leak vs next) BEFORE designing emphasis — a funnel whose worst drop is 4.3x is a different design problem than one where it is 1.2x, and it makes every visual decision self-answering.
D
M
4.0/5
Redesign the Slop v10 / Crane & Hollis Bell Works
Generic SaaS bell-casting landing rebuilt as a foundry ledger: tuning-sheet hero, reconciling heat + tuning ledgers, candor section, zero decoration
Key learning: Probe-before-adopt kept a clean build honest: 7 of 9 vision geometry/color claims were false by DOM measurement; the two real catches (quote off-grid at x=32, missing units in mobile stacked labels) were invisible to me and cheap to fix
D
M
4.0/5
8 States v5 — Night Dispatch Register
One telemetry register, eight states, one storm night — the four 'nothing to show' states as textually distinct machines
Key learning: Empty/error/partial/filtered-empty are four different machines — each needs its own message, its own data honesty, and its own path back; plus: one audit-checked computed tally line moved the taste pass 3→4 where no styling could.
D
M
3.0/5
Sidebar Nav v4 — Copper Ridge Wind O&M
Collapsible sidebar at 240px and 48px rail: sticky section headers, active-locator chip, accordion, tooltips, rail-as-mobile-nav
Key learning: In rail mode, bare text nodes inside section headers are never hidden by display rules on siblings — font-size:0 on the tile or labels must be wrapped; a scrollWidth-vs-width lint on rail tiles catches it pre-vision.
D
M
4.0/5
Numeric Display v6 — Fellside Radio Loudness Ledger
All-negative signed columns, tolerance-banded deviations, hero time objects, energy-vs-arithmetic aggregation candor
Key learning: A nowrap phrase is a mini fixed-width element — bind number+unit with nbsp and release phrase-level nowrap under the breakpoint; and procedural candor register (what happened, ref, who accepted) moves taste where styling cannot.
D
M
3.0/5
Dark Mode Native v5 / Kestrel Vale Night Ops
Depth via luminance stepping on #08090a — zero shadows (lint-enforced), 6% white hairlines, one live-only cyan accent
Key learning: Grid-item min-width:auto silently blew 199px of mobile overflow from inside .split — probe containers, not children; probes disproved the KPI right-edge critique at exactly 17px flush
D
M
4.0/5
Command Palette v2 — Mothlight Cue Palette
One ⌘K palette at six moments of one keyboard interaction — engine-deterministic frames, keyboard behavior proven by synthetic events
Key learning: Stakes-candor beats styling: one arming bar ('Armed 19:39 · one GO fires all 3 · LX D.W. · FLY M.A. · SND P.R. ack') moved taste 2→4; naive subsequence fuzzy needs a contiguity bound (span ≤ 3× query) or 'moth' matches 'timestamp the report at this cue'.
D
M
4.0/5
Clone Zapier Automation Dashboard / Birchall & Rook Coffee Merchants
Brand-fidelity clone of Zapier's zap list + step editor — orange budget enforced as a runtime audit
Key learning: A brand accent budget becomes a unit test when every computed orange must carry a data-o tag — and vision's size claims must be halved at 2x capture (68px rows called 108-140px).
D
M
4.3/5
No Decoration v9 · Winter Wheat Variety Trial Bulletin
Typography-only extension bulletin: ink ladder, hairlines, one wayfinding green, zero decoration — candor and soil series do the design
Key learning: Taste-pass authenticity asks (authors line, soil series, trial number, practical takeaway) are dataset requirements, not styling — they moved taste 4.0→4.3 where no pixel change could
No drills in this category yet
Pick another category to keep browsing.