Design Gym ⓘ
Daily deliberate practice for frontend design. Each drill targets one skill — build, self-critique via vision, iterate, log. Taste compounds over time.
30
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.