Bento grids
Bento grid in CSS and Tailwind v4: responsive, accessible and in the right order
Build a responsive bento grid with CSS Grid and Tailwind v4: template areas, container queries, motion, and the reading-order bug that is easy to ship.
Blog
Design & front-end notes
Long-form notes on interface layout, design tokens and front-end craft, with live demos and code you can run.
Bento grids
Layout, hierarchy and accessibility for bento-style interfaces.
Bento grids
Bento grid design: how to build hierarchy without losing the reader
How bento grids create hierarchy, when they fail, and how to collapse them on phones. Principles, live examples and an accessibility checklist.
Design tokens
Token architecture, Tailwind CSS v4 and color in OKLCH.
Design tokens
Design tokens in Tailwind CSS v4: from DTCG JSON to @theme, in OKLCH
A working design token pipeline for Tailwind CSS v4: W3C DTCG JSON in, @theme CSS out, OKLCH colors with measured contrast, and the @theme inline trap.
Design tokens
OKLCH color palette for Tailwind v4: build a 50 to 950 scale that holds up
How to build an OKLCH color palette for Tailwind v4: what the default scale really does, fitting chroma to sRGB, contrast per step, and an @theme export.