§

Colophon

The Materials

This room documents the studio in its own materials: the type, color, space, and motion 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. 03
02

Color

Monochrome on warm paper, with a single accent: blueprint blue.

  • 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

  • Blueprint

    #1C4A7A

    The single accent

  • Blueprint tint

    #E7EDF5

    Wash / selection

  • Blueprint line

    #9DB4D2

    Annotation

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 first artifact of product architecture is no longer a wireframe. It is understanding.”

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