A/    SYSTEM00 / 07
CLOSE
( 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

01
02
03
04
05
06
07
08
09
10
11
12
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.
REQUIRED
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.
OPTIONAL
font
"sans" | "mono"
Sans for eyebrows and rails; mono for identity columns and figure labels.
OPTIONAL
as
ElementType
NOT DOCUMENTED IN THE FILE.
OPTIONAL
className
string
NOT DOCUMENTED IN THE FILE.
OPTIONAL

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 ).
REQUIRED
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.
REQUIRED
count
number
Optional 01 TO 05 style counter under the name.
OPTIONAL
id
string
Anchor for the section's aria-labelledby.
OPTIONAL
as
"h2" | "h3"
Heading level. h2 for page sections, h3 inside them.
OPTIONAL
className
string
NOT DOCUMENTED IN THE FILE.
OPTIONAL

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.
REQUIRED
label
string
What belongs in the slot. Printed on placeholders only.
REQUIRED
src
string
Path under public/. Without it the plate stays a placeholder.
OPTIONAL
alt
string
What the photograph shows. Required wherever src is set.
OPTIONAL
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.
OPTIONAL
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.
OPTIONAL
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.
OPTIONAL
className
string
NOT DOCUMENTED IN THE FILE.
OPTIONAL
video
string
A clip to play in place of the picture; src becomes its poster.
OPTIONAL
controls
boolean
With video: the browser's player, started by the reader.
OPTIONAL

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.