Tokyo Grid, Low Latency Thinking

Published on: 2026-03-09

There is a specific kind of city energy that works for notes UIs: compressed, layered, and easy to scan from a distance. Tokyo signage gets close to that feeling because it is information-dense without looking sterile.

What translates well

• Strong vertical rhythm
• Narrow metadata bands
• Repeated visual motifs
• Restraint on body copy until someone asks for more

Density is fine when the hierarchy is obvious.

A code reminder

The same rule shows up in layout code: set the system, then get out of the way.

.post-list a {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 1rem;
}

One link worth keeping

I keep a note pointing back to MDN’s CSS Grid guide because it is still the quickest way to check whether a layout idea is clean or just noisy.