Bento Grid Layouts

Build a personal blog home page as a single bento board: every piece of content, including the navigation and the footer, is a rounded tile in the same grid on a cool grey ground. Tiles differ in size and fill, never in border, and the mix of big image tiles with small stat tiles is what gives the page its rhythm.

Make the board a 6-column grid with a 14px gap and 24px tile radius, inside a wrap of about 1240px. Place the home tiles with explicit `grid-template-areas`: a four-column, two-row intro tile beside a two-column portrait tile that runs three rows tall; three stat tiles and a location tile under the intro; a three-column featured post beside a three-column AI list tile, both two rows; two three-column image cards; then a two-column Digital Garden list beside two photo tiles for the pattern library and the fiction series; then two small article tiles, a projects list and a dark work-with-me tile; then connect and newsletter. At 1100px switch to a 4-column map, and below 680px drop the areas, span every tile two columns and let only the stats, location and two small article tiles sit side by side. Keep source order equal to the phone stack and never use dense packing. Follow the home board with a second board for open-source projects: a label tile, one large four-column feature with inline metric chips, two-column screenshot cards, a slate stat tile for the most-starred repo and one-column cards for the rest.

Set display text and stat figures in **Bricolage Grotesque** at 700 to 800 weight with tight `-0.03em` tracking: the hero headline around 4rem and stat numbers near 3.5rem. Use **Inter** for body at 17px and **JetBrains Mono** in small uppercase for eyebrows, dates and meta lines.

The ground is `#e9ebef`, tiles are white with a soft two-part shadow (`0 1px 2px` plus a long `0 12px 28px -18px` drop). Carry meaning with fills: brand slate `#364f6a` with white text for the key stat and the newsletter tile, near-black `#0e131a` for work-with-me and the footer brand tile, lilac `#e8e5fb` with violet ink for AI, sage `#e0eee5` with green ink for the Digital Garden. Photo tiles put white text over the image on a bottom gradient scrim. In dark mode the ground becomes `#050607`, tiles `#14171c`, the shadow swaps to an inset 3% white top edge with a black drop, and the tints go deep (`#1c1a34` for AI, `#11241a` for garden) with light inks.

The nav is a strip of separate small tiles: a logo tile with a slate `Aj` square and stacked name, a links tile where the active link is a black pill and AI is always a lilac pill, a search tile with an inline button, and a square theme tile. Track the section in view and move the black pill to the matching link. Below 760px collapse it to logo, theme and a 2x2-grid menu button that opens the links as their own tiles.

Inside the board, the intro tile holds a green status dot eyebrow, the headline, lede and three buttons. The location tile draws a small line-art mountain sparkline. List tiles are compact rows of title and mono date separated by hairlines. Photo tiles and cards carry a small round arrow badge in the top right corner.

Keep motion to hover only: lift link tiles 3px with a deeper shadow over 180ms and scale their images to 1.03 over 400ms. Do not animate the board itself. Under `prefers-reduced-motion`, remove all transitions. At 400px wide the board is two narrow columns of tiles, the portrait keeps a 420px minimum height, and nothing scrolls sideways.