The black gap

Look closely at the home page and you will notice thin black lines between every tile. They are not borders drawn on the cells — they are gaps showing through to the black background behind the grid.

Once you see the trick, you can reproduce it anywhere: light cells on a dark canvas, with spacing as the only divider.

One token controls everything

The entire system hangs on a single CSS custom property in globals.css:

@theme {
--spacing-bento-gap: 8px;
}

@media (min-width: 768px) {
:root {
  --spacing-bento-gap: 16px;
}
}

Tailwind v4 maps that token to utilities like gap-bento-gap and p-bento-gap. Change the variable once and every grid, padding, and carousel accent updates together.

How the grid works

The home bento in home-bento.tsx stacks three layers:

1. Outer shell — bg-black p-bento-gap wraps the whole grid. The padding creates a black frame around the edge.
2. Main grid — gap-bento-gap bg-black on a 12-column layout. Gap space is transparent, so the black background shows through between cells.
3. Cells — each tile uses bg-bento-bg (a warm off-white). Only the cells are light; everything between them stays black.

The author / social block uses the same pattern as a nested sub-grid: gap-bento-gap bg-black inside a parent cell, so inner gaps match outer gaps exactly.

Carousel prev/next buttons in image-carousel.tsx reuse the token too — their border width is set to var(--spacing-bento-gap) so control chrome aligns with grid lines.

RWD reordering

On mobile the grid collapses to a single column. Tiles reorder with Tailwind order-* utilities so the reading flow makes sense (CTA and hero image land in sensible positions) while the gap token stays the same.

On desktop (md:grid-cols-12) tiles snap into a strict 50/50 split: 6 + 6 columns per row, with explicit col-span-* and row-start-* placement.

Try the gap yourself

Drag the slider or tap a preset to see how gap size changes the bento feel:

What is next

Return to the home page and resize your browser — watch the gaps step from 8px to 16px at the breakpoint. For the full stack behind this site, read Building this journal.