# Design Language for martiallaw.quest ## Aesthetics and Tone martiallaw.quest is **a national emergency broadcast frozen at the exact second the test pattern dissolves into a human face** — the design lives in that uncanny three-second gap between the SMPTE colour bars and the anchor's first word, when the screen is still humming with engineering noise but the building outside has already gone quiet. The reference image is not "cyberpunk dashboard" and not "terminal hacker green"; it is the **municipal-grey of a 1970s civil-defence bunker control room**, lit by a single sodium-vapour bulb, where a teleprinter is still chattering out a decree that nobody in the room wants to read aloud. The mood is **bureaucratic dread rendered as calm typography** — the violence of an order is never shown, only its paperwork: the article number, the signature block, the timestamp, the comma that separates the verb "is" from the noun "suspended." The tone is **authoritative and mysterious-moody at once** — it speaks in the flat, declarative register of a government gazette ("Pursuant to Article 77, the following measures take effect at 23:00") but the layout keeps slipping, the way a proclamation read at midnight slips between sounding official and sounding like a hostage statement. There is no panic in the type. The panic is in the **margins** — in the way the page breathes a half-beat too slow, in the curfew clock that counts the wrong direction, in the redaction bars that the visitor can drag aside but that immediately re-seal. This is a site about the *aesthetics of suspension itself*: of habeas corpus, of the legislature, of the ordinary Tuesday. It is grave without being gothic, archival without being dusty, and it treats the reader as a **witness taking notes by torchlight**, not a customer. ## Layout Motifs and Structure The spine of the site is a **vertical timeline (timeline-vertical, ~2% of corpus)** rendered as a literal **teleprinter ribbon** — a single 4px-wide vertical rule running down the dead-centre of the viewport, perforated like continuous-feed paper, with content panels alternating left and right of it like dispatches torn off and pinned. Time moves *downward*: 22:00, 22:23, 23:00, 02:00, 04:30, "indefinitely." Each timestamp is a fixed station on the ribbon; scrolling is travelling through the night of the decree. Cross-cutting that spine are **diagonal-sections (~4% of corpus)** — every major panel is sheared at a shallow 4–7° angle, as if the broadcast signal were tearing, or as if the document had been photographed on a tilted desk. The diagonals never all lean the same way; they alternate, so the page reads like a stack of papers shuffled by a hand in a hurry. Where a diagonal meets the central ribbon, the ribbon **kinks** — a deliberate jog of 12–20px — and a small monospace annotation appears in the gutter ("§3", "amended 03:14", "[illegible]"). Negative space is institutional, not airy: wide grey margins like the unprinted edge of an official form, with a faint **registration-mark grid** (corner crop marks, a 5mm tick scale down the left edge) so the whole page feels like a printer's proof of a gazette page that was never published. The header is **minimal-navigation**: just a wordmark stamped like an ink seal in the top-left, a live clock in the top-right counting *up* from an unmarked zero, and nothing else — no menu, no hamburger, no CTA bar. The footer is a **signature block**: ruled lines awaiting names, a place for the seal, a "witnessed by ___" field that stays blank. ## Typography and Palette **Fonts — all confirmed available on Google Fonts:** - **Libre Caslon Text** — the *voice of the decree itself*. A workhorse transitional serif with the slightly brittle, official feel of statute books and old broadsheets. Used for all proclamation body text (1.0625rem / 1.7 line-height) and for the giant article numbers set at clamp(3rem, 11vw, 9rem) with -0.02em tracking. It is the only "warm" thing on the page, and even it is printed in cold ink. - **Spectral SC** (small-caps companion) — used *only* for section labels, the curfew word "CURFEW", and the legal preamble lines ("BE IT KNOWN THAT"). Letter-spacing +0.14em. Small caps make the page sound like it is being *read into a microphone*. - **Spline Sans Mono** — the *engineering layer*: timestamps, article references (§77 ¶2), the teleprinter annotations, the clock, the redaction-bar labels, and the chattering ticker. 0.8125rem, +0.02em tracking, weight 400. Mono here is not "hacker" — it is the typeface of the timecode burnt into a surveillance tape. **Palette — institutional grey + emergency sodium + redaction black, high-contrast:** - `#15171A` — **Bunker** (primary background): a near-black warm graphite, the colour of a powered-down monitor. - `#1F2226` — **Console** (panel background): one stop lighter, for the dispatch cards. - `#C9CBC5` — **Newsprint** (primary text): a faintly green-grey off-white, like recycled gazette paper under fluorescent light. - `#E0A92E` — **Sodium** (the single accent): the amber of a streetlight and an old CRT phosphor warning — used for the central ribbon glow, active timestamps, the curfew clock, and exactly one underline at a time. - `#7A8A82` — **Verdigris** (secondary text, ticks, crop marks): the oxidised-bronze grey of an official seal gone old. - `#0B0C0E` — **Redaction** (the censor bar): the truest black on the page, reserved for the draggable redaction strips and the diagonal section seams. - `#8B2E2E` — **Stamp** (rare alarm accent, < 5% of pixels): a dried-blood maroon for the "EFFECTIVE IMMEDIATELY" stamp and the kink-markers on the ribbon. ## Imagery and Motifs No photography. No gradient-mesh. No glassmorphic cards. No hand-drawn anything. The entire visual world is built from **the furniture of official paper and broadcast engineering**, all hand-keyed in SVG and CSS: - **Redaction bars** — solid `#0B0C0E` rectangles laid over fragments of the decree text. The visitor can grab one and drag it 30–60px aside; underneath is *another* line of redacted text, or a single uncensored word ("indefinite", "all", "no court"). Release it and a CSS transition slides it back, slightly off its original position each time, so the page slowly accumulates the *evidence of having been censored*. - **The teleprinter ribbon** — the central perforated rule, with a faint amber bloom and a continuous-feed sprocket-hole pattern (8px circles, 16px pitch) running its length. - **Registration & crop marks** — corner ticks, a millimetre scale down the left margin, a faint "DRAFT — NOT FOR DISTRIBUTION" diagonal watermark behind the longest panel, set in Spectral SC at 6% opacity. - **The seal** — a single circular emblem in the wordmark and footer: a ring of small-caps Latin (BY ORDER OF · STATE OF EMERGENCY ·) around an empty centre where a coat of arms should be. The centre stays empty. That emptiness *is* the logo. - **The ticker** — a single line of Spline Sans Mono crawling along the very bottom edge, repeating article fragments and timestamps, the way an emergency channel scrolls text it cannot afford to stop showing. - **Curfew clock** — a numeric (not analogue) display in Sodium amber, fixed top-right, counting upward from `00:00:00` from the moment the page loads: "you have been under this measure for ___." - **Signature lines** — ruled fields, `1px` Verdigris, with the leader dots and "(seal)" placeholder of a document waiting to be made real. Motif keywords carried through: **vintage** (gazette/broadsheet paper), **city-urban** (the sodium-streetlight palette, the implied empty avenues), **grid-lines** (registration marks, the tick scale) — none of these as decoration, all as *the texture of an official night*. ## Prompts for Implementation Build martiallaw.quest as **one HTML file, one CSS file, one ES module** — no framework, no build step, no bundler. The page is **a single downward scroll through the night a decree took effect**, and it must never once behave like a product page. **Page shell.** `
` contains: `
` (ink-stamp wordmark left, upward-counting curfew clock right); then `
` — the fixed central teleprinter rule, drawn with a repeating radial-gradient for the sprocket holes and a thin amber `box-shadow`; then six to eight `
` panels alternating `.dispatch--left` / `.dispatch--right`, each sheared with `transform: skewY(var(--lean))` where `--lean` alternates `4deg` / `-6deg` / `5deg`; then `