Layout patterns

Free layout patterns for AI agents.

7 structural blueprints — grids, dividers, section rhythm — packaged as drop-in PATTERN.md files. Use alongside any DESIGN.md system.

Pattern

Full-bleed Grid with Dividers

Vertical column hairlines that span the entire viewport height, paired with horizontal section dividers. Content sits inside a centered max-width while the grid lives in the page background.

layoutgrideditorialminimal
Full-bleed.
WorkJournalIndex
layout · grid

A clearer way to say less.

The structure does the talking. Typography, spacing, and one accent — nothing else competing for attention.

6 min · April 2026
01 — Foundation
02 — Rhythm
03 — Restraint
Pattern

Asymmetric Editorial Split

A 1/3 + 2/3 vertical split with a single hairline running the full page height. The narrow column carries metadata and eyebrow type; the wide column carries the lead. Classic magazine architecture for landing pages.

layouteditorialsplitasymmetric
Asymmetric.
WorkJournalIndex
layout · editorial

A clearer way to say less.

The structure does the talking. Typography, spacing, and one accent — nothing else competing for attention.

6 min · April 2026
01 — Foundation
02 — Rhythm
03 — Restraint