§

Colophon

The Materials

This room documents the studio in its own materials: the type, color, space, motion, and mark every other room is built from.

01

Typography

Serif · IBM Plex Serif

The architect holds the relationships.

Sans · IBM Plex Sans

The architect holds the relationships.

Mono · IBM Plex Mono

The architect holds the relationships.

display 4.5rem / 1.02
Products are my medium.
h1 3rem / 1.05
Architecture is a discipline.
h2 2rem / 1.10
The first artifact is understanding.
h3 1.5rem / 1.15
Should this exist?
h4 1.25rem / 1.20
Does it belong?
body-lg 1.25rem / 1.60
Is this making the system simpler or more complex?
body 1rem / 1.60
What happens five years from now?
small 0.875rem / 1.50
How does this affect everything else?
label 0.75rem / 1.30
§ Colophon · Rev. 04
02

Color

Monochrome on warm paper, with a single accent: cone orange. Two safety colors, green and amber, mark state and nothing else.

  • Paper

    #F5F4F0

    Ground

  • Paper raised

    #FBFAF7

    Lifted

  • Paper sunken

    #EDEBE4

    Recessed

  • Ink

    #1A1917

    Near-black

  • Ink 700

    #3B3A35

    Prose

  • Ink 500

    #6E6A61

    Labels

  • Ink 300

    #A8A399

    Muted

  • Ink 200

    #D3CFC5

    Rules

  • Ink 100

    #E4E3DE

    Hairlines

  • Cone orange

    #C0431A

    The single accent

  • Cone vivid

    #E1521C

    Ticks / marks

  • Cone tint

    #F7E7DF

    Wash / selection

  • Cone line

    #E0A183

    Annotation

  • Status · live

    #3FA80A

    Published / open

  • Status · draft

    #E0A400

    Coming / reserved

03

Space & rhythm

A 4px base unit. Whitespace is generous and deliberate.

  • space-1 4px · 0.25rem
  • space-2 8px · 0.5rem
  • space-4 16px · 1rem
  • space-6 24px · 1.5rem
  • space-8 32px · 2rem
  • space-12 48px · 3rem
  • space-16 64px · 4rem
  • space-24 96px · 6rem
04

Motion

Motion is scroll-driven and quiet. Content is revealed as you scroll. It is progressive: where the browser can’t drive animation from scroll, the content simply renders, and it yields entirely to a reduced-motion preference.

The mark keeps its own two beats: it assembles on load — strokes rising, tittles dropping into place — and types on hover, the four dots lifting in sequence like a message being written.

“The first artifact of product architecture is no longer a wireframe. It is understanding.”

↑ Revealed on scroll · animation-timeline: view()

05

The mark

The signature is iiii. Four slanted strokes crowned by four tittles. The strokes are the numeral IV; the dots make it read as letters, not a tally. It stands for the fourth of the name, drawn so the counting and the naming are the same shape.

The four strokes walk one ramp — lightest to darkest, then the single accent. The fourth stroke and its tittle land on cone orange, so the mark resolves on the one color the whole system reserves for arrival. The gradient is the argument: the last of four is the one that matters.

  • 1 Ink 300

  • 2 Ink 500

  • 3 Ink

  • 4 Cone

↑ Lightest to cone · the fourth of the name lands on the accent