# Design Language for martialaw.quest ## Aesthetics and Tone martialaw.quest is built as **a declassified dossier that prints itself in front of you** — the visual world of a national-archive reading room at 03:00, where a single banker's lamp throws a cone of warm light across a desk covered in carbon-copy memoranda, telex ribbons, gazette proofs, and a wall clock that refuses to advance. The subject is the experience of martial law itself: the abrupt overprint of "EMERGENCY" across an ordinary day, the cold typographic violence of a decree, the way a state communicates by *withholding* — black bars, redaction blocks, "FURTHER DETAILS TO FOLLOW." So the entire site reads like an evidence binder rather than a website. There is no brand cheerfulness anywhere. The tone is **authoritative, archival, forensic, and quietly chilling** — the calm of a curator who has read every page and is now turning them, one at a time, for a visitor who has not. Crucially this is *not* the cottagecore-watercolor "hand-drawn" texture that saturates 96% of the registry, and *not* glassmorphism's frosted optimism. It is **ink on cheap government stock**: hard letterpress impression, registration-mark crosshairs, the slightly-off second-color of a two-plate print job that has drifted 0.4mm. Where most sites want you to feel welcomed, this one wants you to feel *summoned* — handed a folder, told to read it standing up. The mood sits between a Cold-War situation report and a museum's vitrine label: grave, exact, unhurried, and faintly accusatory toward the act it documents. The "quest" in the domain is reframed as a *records request* — the site is the answer to a freedom-of-information petition. You did not come to be sold to. You came to be shown. ## Layout Motifs and Structure The page is a **single continuous vertical dossier — a "spool" of documents that scrolls like a long telex ribbon being pulled off a drum.** Not a card grid, not a bento box, not a dashboard, not a hero-then-features stack. The structure is a sequence of **document plates**, each one styled as a distinct physical artifact laid on the same desk: 1. **Cover sheet** — a buff manila folder tab with a typed case label, a rubber-stamped date, and a string-and-button closure rendered in SVG. The folder "opens" on scroll. 2. **The Proclamation** — a full-bleed gazette page: heavy masthead rule, all-caps decree body set in narrow columns with a hanging indent, an official seal embossed (CSS `box-shadow` deboss, not a flat PNG) in the lower right. Certain phrases are struck through with a single typewriter strike-line; certain nouns are blacked out with solid redaction bars that the cursor can *lift* on hover to reveal the word beneath. 3. **Timeline ledger** — a vertical timeline rendered as a **bound logbook**: ruled rows, a left margin column of stamped times in monospace, each entry written as if by a duty officer ("2347 — TELEPHONE LINES TO LEGISLATURE REPORTED UNAVAILABLE"). The book's gutter shadow runs down the page center. 4. **The map plate** — a flat tactical map (no Google Maps, no satellite tiles): a hand-inked street schematic of a capital, with unit markers and time-coded arrows drawn in the second print color, annotated in a draughtsman's stencil hand. 5. **Telex feed** — a vertical perforated ribbon of incoming wire bulletins, each torn at a dotted line, scrolling at its own pace inside a clipped strip; the most recent torn off and lying loose at the bottom. 6. **Marginalia / annotations** — a two-column "reading copy" where the right column is a narrow strip of pencilled archivist's notes and arrows pointing back into the left column's official text. 7. **The redaction wall** — a near-full-screen field of stacked black bars with only a handful of words surviving between them; the kinetic centerpiece (described below). 8. **Disposition** — the closing plate: a single stamped word, a signature line, a "FILE CLOSED — RETENTION: PERMANENT" footer. Everything is pinned to a **strict 12-column print grid with visible non-printing guides** — faint cyan column rules and crop marks in the page corners, the way a print designer's working proof looks before the guides are turned off. Generous outer margins (the "binding edge" is wider on the left). The whole composition obeys *typewriter rhythm*: a baseline grid locked to a fixed line-height so every block of body text aligns row-for-row across plates, like pages stacked in a folder. ## Typography and Palette **Type stack — Google Fonts only:** - **Special Elite** — the typewriter face, used for every "typed" element: the case label, the duty-officer log entries, the telex bulletins, pencilled marginalia transcriptions, captions, and form-field labels. Set at 15–17px with slightly loose tracking (0.01em) and an *uneven baseline jitter* applied per-character via CSS so it reads like a real platen impression. This is the voice of the *clerks* — the people who recorded. - **Oswald** — a tall, narrow grotesque used for the gazette masthead, decree headlines, plate titles, and the redaction-wall surviving words. All-caps, condensed, letter-spacing 0.04–0.08em at display sizes (clamp(40px, 7vw, 132px)). This is the voice of the *state* — the cold mechanical authority. Its compression evokes broadsheet headline type and official forms. - **Spectral** — a robust serif (Production Type) for any longer-form expository or curatorial prose: the museum-label introductions to each plate, the "editor's note" framing. Used at 19–21px, generous leading. This is the voice of the *historian* — measured, retrospective, human. Three-voice typography is the architecture: clerk (Special Elite), state (Oswald), historian (Spectral). - Optional accent: **Cutive Mono** for the telex header lines and time stamps where Special Elite's organic wobble would hurt legibility of dense numerals. **Palette — monochrome two-plate print, deliberately *narrow*:** - `#1A1714` — **iron-gall ink**: near-black with a faint brown undertone, the primary text and rule color. Not pure #000 — old ink never is. - `#E8E2D4` — **government buff stock**: warm oat-paper background for cover and ledger plates; slightly foxed at the edges via radial vignette. - `#F4F1E8` — **gazette newsprint**: a lighter, cooler cream for the proclamation plates, so the two paper stocks read as different documents. - `#7E2C1E` — **second-plate oxblood**: the drifted second print color — used *only* for seals, registration crosshairs, the "EMERGENCY" overprint, map arrows, and the rubber stamps. Always offset 0.4mm from its outline to mimic misregistration. - `#0A0908` — **redaction black**: solid, matte, slightly darker than the ink — for the censorship bars. - `#2E5C6E` — **non-printing cyan**: ~12% opacity, for the print guides, column rules, and crop marks only — never for content. No gradients except the lamp-cone vignette and paper foxing. No warm-orange dopamine accent. The page is, by design, the least colorful thing in the registry. ## Imagery and Motifs **No photography. No watercolor. No 3D renders. Everything is print-shop ephemera, drawn or composited in SVG/CSS:** - **Rubber stamps** — "RECEIVED", "DECLASSIFIED", "EMERGENCY", "FILE CLOSED", date wheels — rendered as SVG with broken-edge masking and slight rotation (±3°), in oxblood, with ink-bleed at the strokes. They *land* on the page (a brief scale-down + dust-puff) when scrolled into view. - **Redaction bars** — the signature motif. Solid black rectangles over phantom text; on hover the bar slides up like a window-shade to reveal the word, then drops back when the cursor leaves. Some bars are *welded shut* and reveal only "[ REDACTED — §3(b) ]". - **Registration crosshairs & crop marks** — tiny oxblood circles-with-cross at plate corners; the recurring "this is a printed proof" tell. - **Perforation lines** — dotted tear-lines on the telex ribbon and at plate seams; the ribbon visibly *tears* with a jagged SVG path when a bulletin is dismissed. - **Carbon-copy ghosting** — second and third copies of a memo shown as faint, slightly-offset duplicates behind the top sheet (the literal "cc:"). - **Draughtsman's map symbols** — stencil-hand unit markers, time-coded arrows, hatched cordon zones; all linework, no fills. - **Banker's-lamp light cone** — a soft elliptical highlight that follows scroll position down the page, brightest at the plate currently in the viewport, edges falling into a warm-brown gloom — the only "lighting" effect. - **String-and-button folder closure** — an SVG wound-string detail on the cover plate that unwinds on the open animation. - **Typewriter platen wobble** — the per-character baseline jitter on Special Elite text is itself a recurring texture. ## Prompts for Implementation Build martialaw.quest as **one long HTML document** — a single `
` containing eight `
` elements, scrolled top to bottom. No SPA router. No framework required (vanilla JS + CSS is ideal; if a library is used, keep it to a scroll-observer + a small tween helper). **No CTA buttons, no pricing tier blocks, no testimonial carousel, no logo cloud, no animated stat counters, no newsletter capture, no "get started" hero.** This is an archive, not a funnel. If a stat must appear (e.g. "6 hours, 2 minutes"), it appears *as a stamped annotation in the margin of a document*, never as a big number in a grid. **Storytelling spine.** The page is a *reading*, in order: you arrive at a closed folder → it opens → you read the proclamation → you walk the timeline → you study the map → the wire bulletins come in → the historian annotates → the file closes. Each plate should feel like turning a heavy page. Use a generous amount of vertical space; let plates *breathe* with wide margins. The visitor should be able to scroll the whole thing and feel they have *been shown a record*, with a beginning and an end. **Key build notes:** - **Print-proof chrome.** Render the page background as buff/newsprint paper with a CSS radial vignette for foxing at the corners. Overlay fixed crop marks in the four viewport corners and faint cyan vertical column rules behind everything. A subtle paper-grain via an SVG `feTurbulence` overlay at ~4% opacity. - **The banker's lamp.** A fixed `radial-gradient` "spotlight" `div` whose vertical position lerps toward the scroll position (eased), brightening `--lamp-y` so the in-view plate is well-lit and the rest sinks into `#1A1714`-tinted shadow. This is the single most atmospheric move — get it smooth (rAF, no scroll-jank). - **Folder open.** On first scroll, the cover plate's "manila tab" lifts and the string closure unwinds (SVG `stroke-dashoffset` + a small 3D `rotateX` on the flap), revealing the proclamation beneath. Once. - **Redaction interactions.** Each `.redacted` span has a black `::after` bar; `:hover` (and `:focus` for keyboard) translates the bar up `100%` over 220ms `cubic-bezier(.2,.8,.2,1)` to expose the word, then returns. A few bars carry `data-locked` — those shake `2px` and never open. On scroll-in, run a one-time *redaction pass*: bars sweep across a few words and *stay*, as if a censor just walked through. - **Stamp landings.** IntersectionObserver triggers each `.stamp` to animate from `scale(1.4) rotate(-8deg)` opacity 0 to its resting `scale(1) rotate(±3deg)` opacity 1 in 180ms, plus a quick radial "dust" pseudo-element that fades. Stagger multiple stamps on a plate by 120ms. - **Typewriter delivery.** The duty-officer log entries and telex bulletins *type themselves in* (character-by-character, ~28ms/char, a faint mechanical tick is optional and muted by default) when their row enters view. Each rendered character gets a randomized `transform: translateY(-0.5px..0.5px)` baked in so the finished line has authentic platen wobble — don't animate the wobble, just freeze a random seed per glyph. - **The telex ribbon.** A vertically clipped strip; bulletins are `
`s separated by dotted perforation borders. The strip scrolls *internally* a touch slower than the page (mild parallax). The bottom-most bulletin sits "torn off," lying at a slight angle on the desk below the strip. - **The timeline logbook.** A two-column ruled table: left = monospace `HHMM` stamps, right = Special Elite entry text. Horizontal hairlines every row, a center "gutter" shadow, and as each row enters view a tiny oxblood checkmark stamps into the left margin (it has been *logged*). - **The redaction wall (centerpiece).** A near-viewport-height plate that is ~85% solid black bars in an irregular masonry of rectangles, with maybe 9–14 words surviving between them in Oswald caps. As the visitor scrolls *through* it, the surviving words drift up at varied parallax speeds and, read top-to-bottom in arrival order, form one quiet declarative sentence — the thesis of the whole page. A few bars near the bottom slide open on hover to reveal one more word each, slightly changing the sentence's weight. - **Disposition close.** Final plate: the folder visually *closes* (reverse of the open), a "FILE CLOSED — RETENTION: PERMANENT" stamp lands, a typed signature line draws itself, and the lamp dims to near-black, leaving only the closed folder lit. End on stillness, not a button. - **Motion discipline.** All animation is *mechanical and weighted* — short durations (160–260ms), eased like a stamp or a typebar, never bouncy/elastic, never floaty. Respect `prefers-reduced-motion`: keep the lamp static-lit-on-current-plate, reveal redactions instantly on focus, drop the typewriter delay, but keep stamps as instant state changes. The page must be fully readable as a static document. - **Type scale.** Lock a baseline grid (e.g. `--lh: 1.6rem`); body text, log rows, and captions all snap to it so stacked plates align like real pages. Display headlines (Oswald) can break the grid intentionally for emphasis. ## Uniqueness Notes Distinct departures from the other 324 designs in the registry and from default "civic/news/legal" web aesthetics: 1. **Redaction-as-interaction.** No other registry design (per the frequency report — no "redaction", "censorship", or shade-reveal pattern appears) makes the *withholding of information* its core interactive verb. Black bars that the cursor lifts, censorship sweeps that occur on scroll, "welded" bars that never open — the UI *enacts* the subject (martial-law information control) rather than merely describing it. 2. **Two-plate misregistration monochrome.** Against a registry that is 96% warm and 96% gradient, this is a deliberately *narrow* iron-ink + buff-paper + oxblood-second-plate scheme with everything offset 0.4mm to mimic a drifted print job. The "color" of the site is the *absence* of color, plus one bruised oxblood used only for seals and stamps. 3. **Three-voice typography (clerk / state / historian).** Special Elite, Oswald, and Spectral are each assigned a *speaker* — the people who recorded, the power that decreed, the historian who looks back — so type changes carry narrative meaning, not just hierarchy. Frozen per-glyph platen wobble on the typewriter face is a texture the registry's 93%-mono typography never attempts. 4. **The page is a physical dossier, not a screen.** Print-proof chrome (crop marks, non-printing cyan guides, foxing vignette), a scroll-tracking banker's-lamp light cone, a folder that opens and closes, a tearing telex ribbon, carbon-copy ghosting — the metaphor is "you have been handed a binder," which directly contradicts the dominant card-grid / hero-dominant / dashboard layouts (89% / 12% / 34%). 5. **No funnel anywhere.** Zero CTAs, zero pricing, zero stat-grids, zero testimonials — the only "conversion" is "you have read the record." Stats appear only as stamped marginalia. Avoided patterns from the frequency analysis: **hand-drawn** (96% — replaced with letterpress/print-ephemera linework), **glassmorphism** (73% — none), **photography** (98% — none), **warm palette / gradient palette** (98%/96% — replaced with narrow monochrome + one oxblood second plate), **card-grid** (89% — replaced with a vertical document spool), **cursor-follow / spring / magnetic / elastic** softness (replaced with weighted mechanical stamp-and-typebar motion), **pastoral-romantic / warm-inviting tone** (35%/27% — replaced with archival-forensic authority). Chosen seed/style: *aesthetic: editorial, layout: magazine-spread, typography: condensed, palette: monochrome, patterns: typewriter-effect, imagery: paper-aged, motifs: vintage, tone: authoritative — a declassified-dossier / vintage-gazette reading-room aesthetic.*