/system · the operating manual
the system,
describing itself.
six chapters. each one shows a part of the language this site is built in — color, type, rhythm, motion, chapter, voice. the page reads itself.
the three colors.
ink
the surface. ~95% of pixels. never pure black.
paper
the type and the hairlines. never pure white.
signal
the accent. used sparingly, never decoratively.
red appears in five contexts and nowhere else — hover, active, single-character emphasis, important type moments, focus rings. if you reach for it and can’t name the context, don’t use it.
two faces, locked roles.
display
h1
h2
body
eyebrow
the spacing scale.
not a continuous range — eight named stops. additive, not fluid. spaces between content are decisions, not accidents.
four named choreographies.
curtain
clip-path sweep from below. 1.4s, gorix ease. chapter openings.
a chapter opens.
settle
fade + 12px translate. 0.8s, gorix ease. the body default.
most of the work happens in pacing.
spotlight
enters the reading band → siblings dim to 30%. attention as a system.
context above. dims when the spotlight is active.
the motion needed to feel invisible.
context below. also dims. notice it returning when you scroll the spotlight out of band.
hush
every chapter's bottom edge fades on scroll. you can feel it on this page — each chapter exhales as the next inhales.
scroll past this chapter to feel its tail.
this thing you're reading.
a chapter is the page-grammar primitive. every long-form page composes itself from chapters — auto-numbered, identically shaped, individually animated. you’re reading one right now.
the structural pulse is fixed: eyebrow, silence, display heading, silence, body, hush tail. the body inside is whatever the chapter is about — paragraphs, lists, media, spotlight groups, or any composition. the frame stays invariant.
source: components/system/Chapter.tsx · composer: components/system/ChapterSequence.tsx
how the writing reads.
i wanted the interface to feel quieter.
— concrete observation
most of the work happened in pacing.
— process > outcome
the challenge wasn’t complexity, it was clarity.
— negation as definition
the motion needed to feel invisible.
— paradox-as-truth
i kept removing things until the experience started breathing.
— reductive process
some projects teach craft. some teach restraint.
— parallel structure
the patterns are observable, not prescriptive. they describe the shape of sentences that read on-system. when writing for the site, aim toward these; don’t copy them.