Principles

The product does not take a file on trust because it was already there. A page does not take its content on trust from a script that is expected to run later: content earns its place from the HTML the server sends. That HTML is the finished state: every word readable, every visual drawn.

The shared reveal adds motion on top of that state only after its script has run, and only when the visitor has not asked for less motion. So a reveal is never the way content appears; it is the way content that is already there moves. The home hero and the two scroll scenes set their own starting pose instead, and return to the finished state when scripting is off or less motion is asked for.

html.motion [data-r] {
  transform: translateY(14px);
  transition: transform 0.8s var(--ease-out-quart);
}
html.motion [data-r].in { transform: none; }
html.motion [data-r="rule"] { transform: scaleX(0); transform-origin: left; }
html.motion [data-r="rule"].in { transform: none; }

What rule 01 forces in design

• With scripting off, every page still shows every drawing, and no revealed block is left waiting in its pre-state.

  WhyA script can fail, be blocked or be switched off. The page still has to say everything it claims.

  TestEnforced by a test on every change.

• Under reduced motion, no page adds html.motion, every revealed block sits in its final place and no loop starts, so nothing needs a pause control.

  WhyAsking for less motion is asking for the content without the choreography, not for a lesser page.

  TestEnforced by a test on every change.

• The shared reveal writes its pre-state only under html.motion, a class that a script adds only when reduced motion is off.

  WhyIf that pre-state lived in the default styles, a script that never ran would leave content hidden.

  TestEnforced by a test on every change.

• Nothing on the site animates opacity. Reveals move by transform, clip-path or a drawn stroke, so text stays at full contrast in every frame.

  WhyPartial opacity lowered measured contrast in the middle of a transition. Any frame a visitor can see is a frame that has to pass.

  TestEnforced by a test on every change.

A design rule is held the way the product's evidence is: by a check that runs on every change, not by anyone's word. Every rule card on these pages says whether a test enforces it or only review keeps it. A guideline that nobody runs is a claim.

Numbers follow the same rule. Values on these pages are computed from their source files at build time, never typed, and a contrast ratio is cut to two decimals, never rounded up, so a pair just under a threshold never appears to pass it.

What rule 02 forces in design

• A rule says what holds it: a test that runs on every change, or review. Where no test exists, the card says so.

  WhyA test fails the pipeline before deploy on the day the rule is broken; review catches only what a reviewer notices. This page checks its own cards: every card marked as tested is tied to a test that exists under that name, so renaming or deleting the test fails the pipeline too.

  TestEnforced by a test on every change.

• Contrast ratios are computed from the token values and cut to two decimals, never rounded up.

  WhyA typed number drifts away from the token it describes. A rounded ratio can show a failing pair as a passing one.

  TestEnforced by a test on every change.

• The percent sign is reserved for one contractual figure. The build fails on any other number written next to it, in visible text or in a text attribute such as alt, title or a meta description.

  WhyA percentage reads as a measurement. The one that appears is a commitment written into the contract; any other number next to the sign would be a claim.

  TestEnforced by a test on every change.

• A visual that cannot measure says less, not more. Without its script, the integrity line shows no count and its dot stays unlit.

  WhyThe count comes from the page's own security header. A count from anywhere else would be a claim.

  TestEnforced by a test on every change.

In the product, every change is weighed before it may become an alert, and most never do. On the site, colour is spent in the same order. The token file gives two colours a meaning: in the evidence scene on the home page, raw draws the raw, unverified changes and the accent draws the signal left after triage, one alert. Raw is a muted brick rather than an alarm red. In use elsewhere, the accent also marks scan lines, progress, link underlines and the focus ring, and raw marks flagged files and findings. Everything else is ink on warm paper.

Motion follows the same economy. A visual moves to explain something, then holds its result, and a loop that keeps going never erases that result and can always be paused.

What rule 03 forces in design

• The palette is closed. Tailwind's default colours are wiped, so colour utilities exist only for the tokens in one file: the 11 colours, plus transparent and current.

  WhyA default Tailwind colour cannot arrive through a utility class. Arbitrary values and raw colours written into component styles are a matter for review, not for a test.

  TestEnforced by a test on every change.

• In the evidence scene, raw draws every raw change and the accent draws only the signal left after triage.

  WhyA scene drawn in one colour reads as a single chart. Noise needs its own colour, and the token file keeps that colour a muted brick rather than an alarm red.

  ReviewKept by review, not by a test.

• The accent never carries small text. Text in the accent's hue is set in accent-deep; the accent itself marks lines, rings and dots.

  WhyOn paper the accent computes to 4.38:1, below the AA minimum for small text. The accessibility scan runs on every page and fails on any text it can measure below the threshold.

  TestEnforced by a test on every change.

• Every loop the reveal engine starts has a visible pause control on the same page.

  WhyA loop is noise unless the visitor wants it. The choice to pause carries to every page, and loops also stop off screen and in a background tab.

  TestEnforced by a test on every change.

The product keeps every detection running with no route out, and the site holds itself to the same rule. A page needs nothing from another origin to render: both typeface families are files in this repository, share images are drawn at build time, and the token values, ratios and file sizes on this page are read from files during the build, not fetched from a service.

One exception is written into the gate rather than hidden: the bot check on the contact form loads its script from its provider, on that page and no other. The policy on every page still names that provider for scripts, frames and connections; the gate is what keeps the script on the contact page.

default-src 'self';
img-src 'self' data:;
font-src 'self';
object-src 'none';
base-uri 'self';

What rule 04 forces in design

• Type is served from this origin. Both families are local files, and the security policy allows fonts from this origin only, so a page could not load a font service even if it named one.

  WhyA page that waits on a font service renders differently, or not at all, where that service cannot be reached.

  TestEnforced by a test on every change.

• Share images are drawn at build time, and every page's image has to exist in the build before the page can name it.

  WhyA preview card is part of the page. It is made from files in the repository, not requested from an image service.

  TestEnforced by a test on every change.

• Pages include scripts from this origin only. The one exception is the contact form's bot check, and the build gate names it: that script, from that provider, on the contact page only.

  WhyA network behind an air gap cannot reach another origin. An exception the gate names cannot spread: the same script on a second page, or a script from a second provider, fails the build.

  TestEnforced by a test on every change.

• This page asks nothing of another origin. Its own test records every request the page makes and fails on any that leaves.

  WhyA rule is checked where it is stated.

  TestEnforced by a test on every change.

One language speaks in two registers, and each is chosen for the people who read it.

The site has a few seconds to make its case, so it speaks in the assertive register: display type at full weight, warm paper, one accent for the signal and motion that explains. Zero Door is a working tool, read for long stretches, so it speaks in the calm register: a dark theme by default, saturated colour kept for status, short motion that confirms an action and density for data.

The registers differ on purpose, but they are one family. Under both sit the four rules, the glyph, the ease-out curve and the medium radius. The product's light theme also uses the site's neutral ramp of paper, hairlines and secondary text; its default dark theme does not. The tables below compare the two token files directly: every match is computed, not asserted.

Both files are published: the site's token file and the Zero Door token snapshot.

What both registers share

Where they differ on purpose