The argument and the artifact are the same claim, made twice.

Curated excerpt. The full file is one click away.

## The framework decision

Build on Astro.

Astro is the right tool because the site is content-first, and Astro ships zero JavaScript by default, produces the cleanest static HTML, and gives you type-safe content collections for the pillars and an islands model for the one piece of interactivity. For the requirement that the source read as pristine, that matters concretely: an Astro page ships the HTML and the CSS you write and nothing else, with no framework runtime to clutter view-source.

Curated excerpt. The full file is one click away.

So the rule is simple: do not redesign, port. The design files are the source of truth for markup, tokens, type, motion, and behavior. Recreate them as Astro components on the real token pipeline.

## The lock

Locked and approved. Reproduce faithfully. Do not restyle, re-lay-out, or refactor the look:
- the homepage, including the kinetic stack signature
- the four pillar pages (one template, four layers)
- the token reference page
- the audio player
- the design language end to end: the monochrome system, the two type voices, inversion-only emphasis, the sharp 2px radius

Curated excerpt. The full file is one click away.

The short version: a design system used to be documentation a human read and interpreted. Now it is infrastructure an agent reads and executes against. When you formalize design decisions into structured, version-controlled data, design stops being a pile of static assets and becomes a source of executable intent. The truth of the system moves out of a fragile codebase and into an architecture built for machines to act on. Four layers make that real: design tokens, machine-readable logic, spec-driven development, and runtime context standards. Each layer hands the next the context it needs, and the whole chain is what turns AI from a guessing intern into a partner you can rely on.

Curated excerpt. The full file is one click away.

Different people learn differently, so forcing everyone through one format is how a learning site fails. The strategy is to take one curated body of knowledge and offer it through several on-ramps, then let each person choose the depth and the format that fits them. The skimmer, the listener, the deep reader, and the question-asker each get their own door into the same curated knowledge.

This is what makes the site a complete, self-directed learning environment rather than a links page with extras bolted on.

Curated excerpt. The full file is one click away.

### Monochrome on purpose

True monochrome, a single grayscale ramp from a warm paper to a cool, blue-black ink, with no chromatic accent anywhere. This is not a style preference, it is an argument. Tokens begin life as a grayscale ramp before any color decision is made, and stripping color out forces structure, type, and motion to carry the design. A site that leaned on a brand accent could hide weak structure behind it. This one cannot, which is the point: the discipline is visible.

Emphasis is inversion, never a second color. A block that needs weight flips from ink-on-paper to paper-on-ink. The only chroma in the whole system is the faint temperature difference, paper kept slightly warm and ink kept slightly cool, and that is deliberate. If a reviewer cannot name a single accent color, the system is working.

Curated excerpt. The full file is one click away.

## Drift alarms, self-correct when you catch these

- A centered hero. Use left-aligned and asymmetric, with the kinetic stack as the hero.
- Inter, Roboto, or system-ui. Use the characterful sans plus the designed mono.
- A gradient, or any single bright accent color. Stay fully monochrome; inversion is the only emphasis.
- Rounded cards in a three-column grid with soft drop shadows. Use the exposed grid and real structure.
- Fade-in-on-scroll on every element. One orchestrated signature, everything else static.
- Buzzword copy, meaning unlock, seamless, empower, elevate. Use the thesis voice, plain and specific.

Curated excerpt. The full file is one click away.

Three rules that always apply, restated here so they are never missed:

1. Never use em dashes or en dashes, anywhere, in the UI or in copy. Use commas, colons, parentheses, or periods.
2. Every visual value comes from a design token. Never hardcode what a token should own.
3. Pristine naming and structure are a feature. Write the repository so it reads as deliberate to anyone who opens it.

Curated excerpt. The full file is one click away.

## Two voices, one answer each

The human voice is N27, licensed from atipo. It carries the argument: prose, headlines, annotations, labels, and UI chrome. Weights carry the hierarchy: Bold (700, with 600 declared into the same cut) for page titles and primary headings, Medium (500) for subheads, nav, labels, and chrome, Regular (400) for body copy at 17px with 1.7 leading, and Light (300) reserved for display sizes above 40px, never for body. The wordmark ("tokens", an arrow, "agents", all lowercase) is set in this voice at medium (500), in the header and the footer alike.

The machine voice is Basier Square Mono, licensed from atipo, shipped in Regular (400) only. It carries everything that is, or represents, structured data: code, token names and values, file paths, and structured-data excerpts, set at 0.9em against the surrounding sans. The two faces share the same cap height and x-height, so no size-adjust is needed; the 0.9em compensates for the mono's wide set. font-synthesis is off on every mono surface, so a weight the family does not ship is never faked. It is consumed only through the font.family.mono token, never as a hardcoded family, so a future swap propagates in one edit.

There are no candidates and no alternatives in this file on purpose. Earlier drafts listed options, three files disagreed, and an agent caught the conflict mid-build. This file is the fix. One canonical answer per decision, every earlier draft superseded.