Skip to content →
Colophon · Design system

The editorial atelier identity, on one page.

The fonts, sizes, colours, and editorial conventions that run across 140+ pages of Grid Maker Pro. Newsreader serif display + Inter body + a single warm orange — restrained enough to disappear into the work, characterful enough to be recognisable two clicks away from any tool surface.

§ I · Typefaces

Two faces, one voice.

Newsreader for display — a transitional serif drawn by Production Type for screen reading. Inter for body, used at 400 / 500 / 600 weights. JetBrains Mono only for code samples and accent labels.

Newsreader 600 · Display 1

Eighty-two grids, one promise.

Newsreader 600 · Display 2

How the figure is constructed.

Newsreader 600 · Display 3

Section heading at clamp(1.8rem, 3vw, 2.2rem)

Inter 400 · Body large · 1.18rem / 1.55

A composition overlay is a measured grid or geometric guide drawn on top of an image to help an artist or photographer place subjects in visually compelling positions.

Inter 400 · Body base · 1rem / 1.7

The classical canon since the Renaissance, available as live overlays for free. The eight composition systems that photographers, painters, and designers actually use, layered on any reference image you load.

Body small · .88rem / 1.6 · used for marginalia and captions.

Newsreader italic · 1.06rem / 1.6

Italic Newsreader is reserved for pull quotes, ledes beneath section headings, marginalia eyebrows, and "Notes from the studio" interstitials. It's the page's voice when the page is speaking, not just labelling.

Eyebrow · Newsreader italic 600 · .82rem · .14em tracking

Tier-S tool · Golden ratio

§ II · Colour

A single warm orange.

Every page across the catalogue uses the same warm orange, hardcoded to defeat OS dark-mode inversion. No secondary accent. The restraint is the point.

Warm orange #f55a23
Warm orange deep #c64a1f
Warm tint #fff5ed
Ink #0a0a0a
Ink 2 #525252
Ink 3 #737373
Surface #ffffff
Surface 2 #fafafa
§ III · Editorial conventions

The magazine, made tangible.

Recurring devices that signal a Grid Maker Pro surface at a glance.

Wavy SVG hairline

Hand-traced 124×6 SVG curve drawn beneath every H1 and every chapter-head H2.

Atmospheric grid texture

48px draftsman grid at 4% opacity, radial-masked at the hero. Adds depth without competing with the content.

Chapter-head pattern (§ N · Topic)
§ N · Section title Two artists · on working with the overlay

How working artists actually use the golden ratio.

§ IV · Spacing

Generous cadence, never crowded.

Editorial pages get clamp(80px, 9vw, 128px) top/bottom; hero gets clamp(96px, 12vw, 168px). Closing CTA stripes get clamp(80px, 11vw, 144px).

Vertical rhythm (px at 1440px viewport)
Hero168px
Closing CTA144px
Section128px
Sub-section80px
Card48px
Inline24px

The whole catalogue, in this voice.

Apply the design system across 140 pages, audit it, repeat. The free 82-overlay browser tool sits behind it.

Open Grid Maker Pro →