A notebook of small patterns

This sample pairs a design note with code and a reusable callout.

Notice what repeats

A row of windows, the ruled lines in a notebook, and the handles on a chest of drawers all make a small promise: once you understand one, the next should feel familiar.

A publication makes the same promise. A date belongs in the same place on each card. A category link should behave like its neighbors. Familiar patterns let the reader spend less time learning the page and more time reading it.

Keep the useful part

For a paper exercise, imagine a small collection of labeled shapes:

const shapes = [
  { label: 'Window', shape: 'square' },
  { label: 'Moon', shape: 'circle' },
  { label: 'Roof', shape: 'triangle' }
];

const labels = shapes.map(({ label }) => label);
console.log(labels.join(' / '));

The labels change. The structure stays steady. That is the useful part of a pattern: a shared shape with enough room for different content.

Allow a little variation

Repetition does not require every page to look identical. A large cover can introduce a feature story. A short note may need only a few paragraphs. Both can share the same type, metadata, and reading width.

What belongs in the pattern notebook?

Keep the pieces you have used more than once: a title treatment, a useful list, a clear caption. A notebook is most helpful when it records what already works.

The final sketch was a row of circles, with one left open. It still belonged to the row. It simply gave the eye a place to stop.