Skip to content

What the axis values actually look like

`02-variant.md` lists forty-two values across seven axes. In a markdown file they are words — warm-earth, mixed-cut, mask-wipe — and a word cannot show a colour or a corner. This page renders them on the real site.css, which is the one case where documentation has to be executable to be documentation at all.

Everything below inherits from the same stylesheet a generated site loads. Nothing is mocked. If a swatch looks wrong here, it is wrong in production.

Count drift, and how it happened. Two palettes were added to site.css without updating the inventory list beside them, so the combination count stayed at 158,760 when it had become 204,120. The stale figure survived in three places on the alxw page and in the inventory file itself; both are now corrected. The lesson is kept here rather than deleted with the bug: adding a CSS block feels like a stylesheet edit rather than an inventory change, and it is both. Four things move together — the block, the list, the count, and this sheet.

Axis 3 · data-palette · 9 values

Palette

Ground, ink, muted ink, panel, line and one accent. The accent appears only where an action is possible; a palette that cannot reach 4.5:1 on body text is a bug in the palette, not a licence to ship low contrast.

Aa muted

Action

ink-on-paper

Aa muted

Action

night-neon · an AI default, use deliberately

Aa muted

Action

warm-earth

Aa muted

Action

cold-steel

Aa muted

Action

duotone-split · swim-window

Aa muted

Action

high-key-pastel · kiln-slot

Aa muted

Action

mono-accent

Aa muted

Action

paper-ink · this site

Aa muted

Action

slate-oxide

Missing from the inventory and wanted: a palette pairing pastel panels with a warm accent. kiln-slot's brief asked for exactly that and had to run on high-key-pastel, whose accent is violet. Recorded in its variant.json as a candidate rather than resolved by rewriting the brief.

Axis 2 · data-type · 7 values

Typography

Three roles: a display face for h1 and h2, a sub face for h3 and the brand mark, and a label face for eyebrows, captions and data. The sub face exists because a face chosen for a 5rem lead is not automatically legible at 1.1rem — that mistake shipped once and was reported as an unreadable card heading.

Display 24

Sub heading

Body text at reading size, one line of it.

Label · 06:42

grotesk-mono

Display 24

Sub heading

Body text at reading size, one line of it.

Label · 06:42

serif-sans

Display 24

Sub heading

Body text at reading size, one line of it.

Label · 06:42

condensed-lead · sub face overridden

Display 24

Sub heading

Body text at reading size, one line of it.

Label · 06:42

slab-geometric

Display 24

Sub heading

Body text at reading size, one line of it.

Label · 06:42

system-neutral

Display 24

Sub heading

Body text at reading size, one line of it.

Label · 06:42

display-narrow · sub face overridden

Display 24

Sub heading

Body text at reading size, one line of it.

Label · 06:42

mono-only

Axis 4 · data-shape · 6 values

Shape

Panel radius, button radius and shadow, as one decision. hairline-frame makes panels transparent with a 1px frame; blocky-shadow uses a hard offset with no blur.

Go

sharp-0

Go

soft-24 · this site

Go

pill-999 · swim-window

Go

mixed-cut

Go

hairline-frame · an AI default

Go

blocky-shadow · kiln-slot

Axis 6 · data-texture · 6 values

Texture

A fixed background treatment on the page ground. Every one is CSS or an inline SVG data URI — no image files, so nothing to load and nothing to cache-bust.

flat

grain-noise · kiln-slot

grid-lines

gradient-mesh · swim-window

dot-matrix · this site

Frosted panel over the ground

glass-blur

These six swatches are the one thing on this page that is not the production stylesheet. In site.css the texture rules target body as a descendant, so a nested swatch cannot inherit them, and specimen.css carries copies. The clean fix — set --surface on the attribute itself and let body inherit — is written at the top of that file so it does not have to be rediscovered.

Axis 5 · data-motion · 5 values

Motion

The entrance signature, applied to sections and panels as they come into view. All five sit inside prefers-reduced-motion: no-preference and animate only opacity, transform and clip-path, so layout shift stays at zero.

fade-rise

Opacity 0 to 1 with a 16px rise, staggered 55ms per element.

translateY(16px)

fade-rise

mask-wipe

Revealed by a clip-path inset opening from the bottom edge.

inset(0 0 100% 0)

mask-wipe · swim-window

scale-settle

Settles from 0.965 to 1 — the quietest of the five.

scale(.965)

scale-settle · this site

slide-lateral

Horizontal entry, direction alternating by section and grid position.

translateX(±28px)

slide-lateral · kiln-slot

none-static

No entrance motion at all. Hover and focus states still apply.

opacity:1 !important

none-static

Axis 1 · data-layout · 6 values

Layout

The page skeleton. Diagrams below — the real rules are width, column structure and where the section heading sits.

stack-center · centred, 64rem

split-asym · 60/40 hero

editorial-rail · swim-window

panel-mosaic · kiln-slot

wide-band · 96rem

sidebar-index · this site

Axis 7 · data-rhythm · 3 values · sales only

Rhythm

Section order, and only these three permutations. All keep the conversion frame: attention, tension, resolution, action. nav, cta-final and footer never move, and the axis has no effect on the explainer, tool or data anatomies — a page that answers before it asks, buries its instrument, or shows a reading before its basis is broken rather than varied.

classic · alxw

hero
problem
solution
features
proof
offer
faq
cta-final

proof-early · swim-window

hero
proof
problem
solution
features
offer
faq
cta-final

offer-early · kiln-slot

hero
solution
offer
problem
features
proof
faq
cta-final

Token reference

Every visual decision is one of these. A generated page sets none of them directly — it sets seven data-* attributes and the axis blocks do the rest.

Token	Carries	Set by
`--ground --ink --ink-soft`	page ground, body text, muted text	palette
`--accent --accent-ink`	the one actionable colour, and text on it	palette
`--panel --line`	panel fill, hairlines and borders	palette
`--ff-display --ff-sub --ff-body --ff-label`	four type roles	type
`--fw-display --stretch-display --tr-display --lh-display`	display weight, width, tracking, leading	type
`--r-panel --r-btn --shadow --panel-cut`	corner and shadow language	shape
`--surface --surface-size`	ground treatment	texture
`--dur --ease`	entrance timing	motion
`--measure --pad-x --gap-s`	line length, side padding, section rhythm	layout
`--mx --my --tx --ty`	pointer spotlight and magnetic offset	`app.js` at runtime
`--ok --warn --bad`	claim grading in the explainer apparatus	fixed

Class contract

What each class expects. Getting the markup shape wrong is the usual reason a section looks unstyled.

Class	Expects	Used by
`.s`	a `<section>` with an id and `aria-labelledby`	all
`.bento`	4–6 direct children, each with an `h3`	sales
`.benefits .tiers`	2–4 direct children with `h3` and `p`	sales
`.pains`	a `<ul>` of 3 short `<li>`	sales
`.proof`	`<blockquote>` children, each with a `<cite>`	sales
`.faq`	native `<details>/<summary>`, never a JS accordion	sales
`.sticky`	`id="sticky"` and the `hidden` attribute	sales
`.verdict .contents .kicker .grade`	the explainer apparatus	explainer
`.sources .method .limits .timeline`	provenance blocks	explainer, data
`.instrument .readout .controls .presets`	the tool instrument	tool
`.hero__art` + `.figcap`	inline SVG with `role="img"` and a caption	any

Verbatim, or replaced

The scaffold is a filled instance, not a token skeleton. Inheriting its structure is the point; inheriting its sentences defeats it — gate A8 checks that.

Taken verbatim

assets/css/site.css, all seven axes
assets/js/app.js
assets/js/analytics.js apart from the slug
_headers and _redirects
the shape of wrangler.toml and 404.html

Replaced entirely

every word of body copy
title, meta, OG tags and JSON-LD
the seven data-* attributes on <html>
the host in robots.txt and sitemap.xml
the favicon initial and colours
brief.json and variant.json

Section ids, by archetype

Gate A2 checks the row belonging to brief.json.archetype. The anatomies differ because the jobs differ.

Archetype	Section ids
`sales`	nav hero problem solution features proof offer faq cta-final footer
`explainer`	nav hero verdict contents body apparatus limits sources method footer
`tool`	nav instrument controls presets help footer
`data`	nav reading basis change context coverage sources method footer