Masonry Grid

Why a short list of spacing steps holds up better than a long one, and how to pick a base unit that keeps components in rhythm when the type changes.

A focus ring has to stand out on every surface you ship. How to test it in light and dark themes, and what to do when it sits on a photo.

Sizing headings with clamp(), where it breaks down on long words and narrow screens, and the two sizes still worth setting by hand.

Lightness in OKLCH follows what the eye sees, which makes hover states, borders, and a dark theme much easier to tune by number.

Short durations, quick exits, and a reduced motion plan that keeps the meaning of an animation without the movement.

Moving a card from viewport breakpoints to its own width, and the layout bugs that went away once it stopped guessing.

Width and height on every picture, lazy loading below the fold, and why the first image on the page should never wait its turn.

Token names that describe a purpose instead of a value, so a new theme is one file to edit rather than a search across the codebase.

Tab order, skip links, and arrow key movement in a grid of charts, worked out with the mouse unplugged.