Web design
Type, grids, motion and the thousand small decisions that make a page feel inevitable — written by the designers who sweat them.
Article indexes people actually browse
Most blog indexes are a reverse-chronological conveyor belt. Here's how we design journal indexes that invite real browsing — lead stories, rhythm, and honest pagination.
Hover states with purpose
Hover is the most abused state in interface design — decoration where it should teach. A taxonomy of hover states that do a job, plus the focus-parity rules.
Scrollytelling with restraint: narrative pages that respect the scrollbar
The production playbook for scrollytelling that earns its keep: a one-pin budget, chapter navigation, a designed reduced-motion variant, and a print-test honesty check.
Reading progress indicators: craft or clutter?
The reading progress bar is the most faked detail on the web. The honest version: when long-form needs one, how to build it without jank or lies, when to skip it.
Bento grids: when the box layout earns its keep
A fair assessment of bento layouts: what they do well, where they collapse, span systems that survive real CMS data, and typography rules for mixed-size tiles.
Anchor navigation on long pages: TOCs that get used
Tables of contents are either the hardest-working furniture on a long page or pure decoration. How we design anchor navigation that earns its pixels.
Design the footer like someone reads it — because someone does
Beyond the sitemap taxonomy: the footer design review as its own ritual — contact confidence, newsletter fields, legal rows and the details that signal craft.
Focus-visible: designing the ring, not removing it
Keyboard focus styles are a design problem most teams delete instead of solve. How to design focus rings that are visible, beautiful and part of the identity system.
Focus states are a design system feature, not a browser default
Stop inheriting the browser's focus ring. Design it: tokens, 3:1 contrast on every surface, dark-theme variants, and the overrides that silently break keyboards.
Seasonal theming without pretending it's a rebrand
How to theme a site for a season or campaign with token overrides, not panic: scoped palettes, motion swaps, expiries, and where festive becomes confusing.
Social proof design without the cringe
Logo soup and 'trusted by 10,000 teams' burn the credibility they mean to build. Proof that persuades is specific, placed next to the claim, and defensible.
Landing-page anatomy: nine sections, one job
Landing-page anatomy section by section: the above-the-fold promise, objection order, proof stacking, demo moments and the end-of-page CTA ladder.
Icon systems: SVG discipline for the web
Most icon sets decay into a junk drawer of mismatched SVGs. Grid rules, stroke discipline, sprite strategy and the build-time pruning that keeps an icon system honest.