A working catalog of layouts for people who design websites, landing pages, portfolios, and long reading.
Each specimen shows the structure, when it earns its keep, and the kind of content it wants. Steal the bones. Write your own words.
Browse the catalogClay
held
still.
Two planes, one entrance.
A full-viewport opening split into complementary halves — typically type against image, or product against proof. The seam does the work: it forces a decision about hierarchy before a visitor scrolls.
12
6
4
1
Harbor light
A grid that refuses to sit still.
A twelve-column field where modules span irregular tracks — 7/5, 4/8, 3/6/3 — so the eye travels on a diagonal rather than a supermarket aisle. Rhythm comes from repeating the offset, not from equal columns.
No. 14
32
Oil
Bench
Shelf
A family of surfaces, not a row of tiles.
Cards that share a language — rule, type scale, gutter — but vary in size, crop, and density. One card may hold only a number; another a long caption; a third a full image. The system is the pattern, not the rectangle.
The garden is a sequence, not a view.
One side holds still while the other moves.
A sticky column (usually the argument) stays in view while a scrolling column (usually the evidence) advances. The visitor reads a continuous claim against changing proof — chapters, images, quotes, metrics.
The first kiln
Moved the shed
Opened Saturdays
Time, drawn as a line you can walk.
A vertical (or horizontal) spine with dated nodes. Each node is a complete beat — year, title, a short paragraph, sometimes an artifact. The line is the argument: this happened, then this, and the distance between them matters.
A magazine page that happens to scroll.
Print composition translated to the viewport: a dominant image, a deck, a drop cap, pull quotes that break the measure, captions that sit in the margin. Columns are for reading, not for equalizing boxes.
Kiln A
Kiln B
Brick arch
Cast iron
7
11
$4,280
$6,140
Two offers, held to the same light.
A paired composition where both sides share a skeleton — same rows, same type scale — so difference is the only thing that moves. A center rule or gutter acts as the hinge. Labels run once; values run twice.
The shop
The yard
Image, type, reverse, repeat.
A stack of full-width bands that flip orientation — visual left, then visual right — so a long page never settles into a single rhythm. Each band is a complete thought with its own crop and measure.
Pictures hung by eye, not by module.
An irregular hang: mixed aspect ratios, staggered baselines, captions that tuck under some frames and run beside others. Closer to a gallery wall than a CSS masonry demo — scale changes for emphasis, not for filling holes.
Lanterns over the quay.
Planes that refuse to stay in their lanes.
Type, image, and rules overlap on the z-axis. A headline sits on a photograph; a caption card breaks the crop; a running footer peeks from underneath. Depth replaces the need for a second column.
Study I
Study II
Study III
Study IV
Study V
A corridor of work that moves sideways.
A horizontal sequence inside a vertical page. Panels are wider than they are tall; the visitor pages with wheel, trackpad, or a discreet control. It is a filmstrip, not a carousel with dots.
01
Harbor light
02
The first kiln
03
Oak trestle
04
Night market
A table of contents that is the page.
A numbered, ruled index: each row is a destination with a short gloss, a meta field, and a page-like number. It treats navigation as typography. Hierarchy is weight and measure, not cards and shadows.
One claim, one visual, a reason to stay. Split horizons, overlay stacks, pinned columns.
Work that has a shape. Salon walls, rivers, mosaics that refuse equal tiles.
Essays, journals, indexes. Folio spreads and spines built for reading, not scanning.
Comparisons that can lose, bands that flip, ledgers that share a skeleton.