SYSTEM

Spacing

One 24px module: every gap is a multiple or a half of it.

Foundations

Writing

The pipeline, end to end

On average it would take me about four hours to scan in a roll of 36 photos and complete edits. It requires delicacy in handling film, especially to avoid dust or scratches.

Converting negatives

So I began looking for ways I could cut some time across my personal digital lab.

View all October 2, 2026

Tokens

--module 1.5rem
--gutter var(--module); from md, 2rem
--section-pad calc(var(--module) * 2); from md, calc(var(--module) * 3)
--prose-break calc(var(--module) * 2); from md, calc(var(--module) * 3)
--control 2.5rem
--control-sm 2rem

Read from src/styles/global.css at build time.

Relationships

Page gutter 24px, 32px from md (--gutter), on every page
Section padding (home) 48px top and bottom (2 modules), 72px (3) from md (--section-pad)
Section head → content 48px (2)
Rule → section head text 12px (½)
Grid gap between cards 24px (1)
Paragraph ↔ paragraph 24px (1)
Above h2 / below 48px (2), 72px (3) from md (--prose-break) / 24px (1)
Above h3 / below 48px (2) / 12px (½)
Above h4 / below 36px (1½) / 12px (½)
Figures, images, tables, pre, blockquote 48px (2) above and below
hr 48px (2), 72px (3) from md (--prose-break), above and below
List indent; list item gap 24px (1); 12px (½)
Image → caption 12px (½)

Read from the guide’s Spacing table at build time.

Decisions

  • One module

    Every gap is a multiple or a half of 24px. In Tailwind that is 3, 6, 12, 18 and 24; 10, 5 and 7 stay out of new work.

  • Section padding

    Two modules on a phone, three from md (Oct 2026). It was four at every width, 192px between sections, which left the page loose and worst on a phone.

  • One gutter

    Every page reads --gutter (Oct 2026). Posts sat 16px in on a phone and 48px on a tablet, so the hero title and the body stood on different edges.

  • Headings belong to what follows

    A heading always has more space above than below.