( SYSTEM )

The system, describing itself.

Every number here is read out of the repository at build time. Nothing is transcribed.

( 00 ) THE CONSTITUTION

FIVE RULES

01
One type ratio. A perfect fourth from 180px, eleven rungs, floor 11px.
Ladder in tokens.ts
1.333
02
Space and grid are tokens. 4px base, ten steps, twelve columns, four verticals.
Grid and Space in tokens.ts
12 COLUMNS
03
Contrast has floors. Text 19.13:1, metadata 5.52:1, decoration 3.23:1 and no words.
Palette in tokens.ts
5.52:1
04
Reduced motion is a rest state. Every animation holds its finished frame.
globals.css
0.001MS
05
The gate runs before the build. Raw colour, off-ladder size, bracket length.
scripts/gate.mjs
3 CHECKS

The gate runs on this page too.

( 01 ) TYPE

11 RUNGS, ONE RATIO

One ratio, anchored at 180px, stepped down eleven times. A minor third puts three rungs between 76 and 135. This puts one.

180PXSTEP 01 OF 11ANCHORTHE LADDER IS ANCHORED HEREsky-title-lg
135PXSTEP 02 OF 11INTERVAL 1.333THE PERFECT FOURTH, ROUNDEDsky-display, sky-title
101PXSTEP 03 OF 11INTERVAL 1.337THE PERFECT FOURTH, ROUNDEDNO KEY
76PXSTEP 04 OF 11INTERVAL 1.329THE PERFECT FOURTH, ROUNDEDsky-heading
57PXSTEP 05 OF 11INTERVAL 1.333THE PERFECT FOURTH, ROUNDEDsky-title-xl, sky-title-lg, sky-display, sky-statement
43PXSTEP 06 OF 11INTERVAL 1.326THE PERFECT FOURTH, ROUNDEDsky-title, sky-statement-sm
32PXSTEP 07 OF 11INTERVAL 1.344THE PERFECT FOURTH, ROUNDEDsky-heading, sky-subheading
24PXSTEP 08 OF 11INTERVAL 1.333THE PERFECT FOURTH, ROUNDEDsky-statement, sky-statement-sm
18PXSTEP 09 OF 11INTERVAL 1.333THE PERFECT FOURTH, ROUNDEDsky-subheading, sky-step
14PXSTEP 10 OF 11INTERVAL 1.286THE PERFECT FOURTH, ROUNDEDNO KEY
11PXSTEP 11 OF 11INTERVAL 1.273THE RATIO GIVES 10.16. 11PX IS THE FLOOR.sky-meta, sky-mono

Ten rungs are that ratio rounded to a whole pixel. The last is not. 1.333 gives 10.16, and 11px is the floor.

THE LETTER-SPACING LAW

Tracking is never increased. Solve for size. Seven values, five of them tighten, and the two at 11px sit at zero.

-0.05emTHE TOP FOUR RUNGSTIGHTENS
-0.045emTHE HERO WORDMARKTIGHTENS
-0.035emA CHAPTER'S ONE STATEMENTTIGHTENS
-0.03emSUBHEADINGSTIGHTENS
0em11PX SANS METADATAZERO
0em11PX MONO METADATAZERO
-0.12emTHE TWO-DOT MARKTIGHTENS

( 02 ) SPACE AND GRID

10 STEPS, 12 COLUMNS

sky-14PXBASE
sky-28PX2.000 OF THE STEP BELOW
sky-312PX1.500 OF THE STEP BELOW
sky-416PX1.333 OF THE STEP BELOW
sky-524PX1.500 OF THE STEP BELOW
sky-632PX1.333 OF THE STEP BELOW
sky-748PX1.500 OF THE STEP BELOW
sky-864PX1.333 OF THE STEP BELOW
sky-996PX1.500 OF THE STEP BELOW
sky-10128PX1.333 OF THE STEP BELOW

Within a group, 24px. Between groups, 64px. Three steps apart, and the gap belongs to the wrapper.

THE GRID, WITH ITS VERTICALS SHOWING

LABEL1 / span 2

CONTENT4 / span 9

RAIL 37 / span 3

ASIDE10 / span 3

Twelve columns, a fluid gutter, a 4vw margin. Content stands on four of the twelve and nothing stands anywhere else.

( 03 ) COLOUR AND THE HAIRLINE

7 TOKENS, 0 ACCENTS

No accent colour. Hierarchy is four steps of grey, one rule, the space scale and the ladder. Every ratio below is computed from the palette.

sky-bg#000000
1.00:1ON SKY-BG. BELOW AA LARGE
1.09:1ON SKY-CARD. BELOW AA LARGE
THE GROUND.
sky-text#f2f5f3
19.13:1ON SKY-BG. AAA
17.62:1ON SKY-CARD. AAA
EVERY WORD A READER HAS TO READ.
sky-muted#7f8481
5.52:1ON SKY-BG. AA
5.08:1ON SKY-CARD. AA
METADATA, CAPTIONS, LABELS.
sky-dim#5a5f5d
3.23:1ON SKY-BG. AA LARGE
2.97:1ON SKY-CARD. BELOW AA LARGE
DECORATION. NEVER A WORD.
sky-hairline#191b1a
1.21:1ON SKY-BG. BELOW AA LARGE
1.12:1ON SKY-CARD. BELOW AA LARGE
THE ONE LINE WEIGHT, AT 1PX.
sky-card#0d0e0d
1.09:1ON SKY-BG. BELOW AA LARGE
1.00:1ON SKY-CARD. BELOW AA LARGE
UNDER A PLATE WITH NO PICTURE IN IT.
sky-ghost#131514
1.15:1ON SKY-BG. BELOW AA LARGE
1.05:1ON SKY-CARD. BELOW AA LARGE
THE FOOTER WORDMARK.

THE HAIRLINE

One line weight. 1px at #191b1a, 1.21:1 on the ground. It is a solid token. The site has one ground, and an alpha would buy nothing against it.

( 04 ) COMPONENTS, LIVE

3 OF 11 PRIMITIVES

Three components, running. Props parsed from their own types, signatures read from their files.

META THE PRIMITIVE

Every piece of metadata on the site. 11px, tracked, 500, three tones. No weight prop, and there will not be one.

THREE TONES, TWO FACES, ONE SIZE

TEXT. EVERY WORD A READER HAS TO READ.MUTED. METADATA, AND IT CLEARS AA.DIM. DECORATION, AND NEVER A WORD.MONO. FIGURE LABELS AND SECTION LABELS.MONO MUTED. THE LABEL ON EVERY SECTION HERE.

PROPTYPEWHAT IT ISREQUIRED

children: ReactNode; NOT DOCUMENTED IN THE FILE.
tone: "text" | "muted" | "dim"; text is primary, muted is secondary and carries real information, dim is decorative and must never carry anything a visitor needs to read, it sits at 3.2:1.
font: "sans" | "mono"; Sans for eyebrows and rails; mono for identity columns and figure labels.
as: ElementType; NOT DOCUMENTED IN THE FILE.
className: string; NOT DOCUMENTED IN THE FILE.

src/components/site/primitives/Meta.tsx

export function Meta({
  children,
  tone = "text",
  font = "sans",
  as: Tag = "span",
  className = "",
}: MetaProps) {

SECTIONINDEX THE COMPOSITE

The ( 0n ) NAME block, composed out of Meta, and a real heading. It sets every label on this page.

A LABEL, AND A LABEL WITH A COUNT

( 02 ) SPACE AND GRID

( 04 ) COMPONENTS, LIVE

01 — 03

PROPTYPEWHAT IT ISREQUIRED

no: string; Two digits, 01, 02. Rendered as ( 01 ).
name: ReactNode; The section's name. Uppercase; may contain a line break, and on the project chapters it is the brand's own mark rather than words, which is what this being a ReactNode is for.
count: number; Optional 01 TO 05 style counter under the name.
id: string; Anchor for the section's aria-labelledby.
as: "h2" | "h3"; Heading level. h2 for page sections, h3 inside them.
className: string; NOT DOCUMENTED IN THE FILE.

src/components/site/primitives/SectionIndex.tsx

export function SectionIndex({
  no,
  name,
  count,
  id,
  as: Tag = "h2",
  className = "",
}: SectionIndexProps) {

PLATE THE EMPTY STATE

A slot with no picture in it yet. It draws itself and names what belongs there. Rendering nothing would look finished.

A SLOT WITH NO SRC. THIS IS WHAT THE PAGE SHOWS.

FIG. 00.1
DROP HERE: A PHOTOGRAPH OF THE DELIVERED WORK

PROPTYPEWHAT IT ISREQUIRED

fig: string; Figure number, FIG. 01.1. Printed on placeholders only.
label: string; What belongs in the slot. Printed on placeholders only.
src: string; Path under public/. Without it the plate stays a placeholder.
alt: string; What the photograph shows. Required wherever src is set.
size: "standard" | "tall" | "band" | "fill" | "cover"; Height. tall for a lead image, standard for a supporting one, fill to take whatever vertical space the parent has left, cover to fill a positioned ancestor outright, a photograph that is the chapter.
kind: "photo" | "work" | "screen" | "phone" | "post" | "story"; What this plate is holding, which decides two things at once because they follow from the same fact.
priority: boolean; Load eagerly and at high priority. Exactly one plate per view should set this, the one above the fold, and none of the rest.
className: string; NOT DOCUMENTED IN THE FILE.
video: string; A clip to play in place of the picture; src becomes its poster.
controls: boolean; With video: the browser's player, started by the reader.

src/components/site/primitives/Plate.tsx

export function Plate({
  fig,
  label,
  src,
  alt,
  size = "standard",
  kind = "photo",
  priority = false,
  className = "",
  video,
  controls = false,
}: PlateProps) {

( 05 ) THE GATE

3 CHECKS, 0 DEPENDENCIES

308 lines of Node, no dependencies. It reads the ladder and the field size out of tokens.ts. Move a rung and the check moves.

scripts/gate.mjs, the three checks

 *   A  RAW COLOUR      a colour may be declared as a token, never used raw
 *   B  OFF-LADDER TYPE a font size is a rung of the ladder, the 16px field or
 *                      the 12px masthead
 *   C  BRACKET VALUE   a length written into a class name is not a token

npm run gate, over src/

$ npm run gate

gate: pass. 142 files, 21 exempt, no violations.
gate: ladder 180 135 101 76 57 43 32 24 18 14 11 · field 16px · masthead 12px · crown 240px

node scripts/gate.mjs scripts/fixtures, over a file with three faults in it

$ node scripts/gate.mjs scripts/fixtures

gate: FAIL. 3 violations in 1 file.

  scripts/fixtures/Violations.tsx:20
    bracket length: mt-[22px]
  scripts/fixtures/Violations.tsx:21
    raw colour: #191b1a
  scripts/fixtures/Violations.tsx:23
    off-ladder type size 13px: 13px

gate: ladder 180 135 101 76 57 43 32 24 18 14 11 · field 16px · masthead 12px · crown 240px

$ echo $?
1

Both runs are real, executed during this build. The fixture exists to be failed. Two hex values in its own comment go unreported.

( 06 ) MOTION

ONE CURVE

One curve for everything. It settles. It is written down twice: a string for CSS, four numbers for JavaScript.

THE CURVEcubic-bezier(0.16, 1, 0.3, 1)EVERY TRANSITION AND ANIMATIONease-sky

1.4SMotion.revealA SECTION ARRIVING

2.2SMotion.enterTHE MASTHEAD AND HERO, ON LOAD

0.5SMotion.hoverEVERY HOVER AND STATE CHANGE

600MSMotion.exitA CASE STUDY LEAVING

THE CURVE, ON THE ONE AFFORDANCE IT DRAWS. HOVER OR TAB TO IT.

SEE THE COMPONENTS

REDUCED MOTION IS A REST STATE

Durations go to 0.001ms. Reveals hold at opacity 1, no blur, no transform. Chapters become stacked blocks and no clip loads. Nothing is hidden.

( 07 ) THE RECORD

4 CORRECTIONS

Four places where a document about this system says something it does not do. This section is written by hand. It dates itself.

THE CLAIMThe display face is Geist, or Archivo.Two design documents outside this repository.
WHAT IS TRUEHelvetica Neue, from the system, never served. Geist ships and sets one string: the ( OPC ) mark inside .opc-surface. Geist Mono went with the surface that applied it. Archivo is not in the repository.
CHECKEDglobals.css, layout.tsx, the compiled stylesheet
THE CLAIMThe running order is 00 to 09, with fees and a checkout.README.md
WHAT IS TRUE00 to 07. Four chapters, the checkout and the contact form are deleted. useSceneEngine has not existed for several builds.
CHECKEDchapters.ts, app/page.tsx
THE CLAIMMuted is 2.9:1 over the hero cobalt.The Rupture note in tokens.ts
WHAT IS TRUE3.22:1. The other figure in that note, 11.16:1, is exact. One of a pair went stale.
CHECKEDcomputed from Palette
THE CLAIMThe hairline is an opacity on black.A working note for this page
WHAT IS TRUEA solid token. #191b1a, 1.21:1 on the ground. Nothing in the source applies an alpha.
CHECKEDglobals.css, a search of src/

A fifth closed while this page was written. CLAUDE.md said the rules were enforced by reading. ( 05 ) is the check.