# Design Language for martiallaw.wiki ## Aesthetics and Tone martiallaw.wiki is **a declassified case file laid open on a steel reading-room table — a documentary archive that treats martial law as a recurring human event with a paper trail, not as a slogan.** The governing image is not a battlefield and not a protest poster. It is a **manila folder, opened**: inside are carbon-copy memoranda, curfew proclamations stamped and counter-stamped, transcripts with whole paragraphs blacked out, telex strips, hand-annotated marginalia in a clerk's pencil, and a chronology card stapled to the inside cover. The tone is **forensic-calm and quietly insistent** — the voice of an archivist who has read every document twice, who never raises their voice, and who lets the redaction bars do the shouting. It documents proclamations from many countries and many decades (the 1933 enabling acts, the 1972 Yushin, the 1981 Polish stan wojenny, the 2024 December night in Seoul) as entries in one long ledger. The mood sits between **dark-academia** rigor and a **grainy-textured, mid-century state-document** materiality: tungsten-lit, slightly overexposed at the edges, the warm yellow of aging duplicator paper against the absolute black of censor's ink. Nothing is cute. Nothing is neon. There is exactly one accent of color and it is the dull oxide red of a rubber stamp. Restraint is the whole aesthetic: a martial-law page that screamed would be indistinguishable from the propaganda it archives — so this one whispers, footnotes, and timestamps. ## Layout Motifs and Structure The structural commitment is **timeline-vertical (2% in the registry — deliberately claimed) layered over a single narrow document column**, in flat refusal of the 89% card-grid reflex and the 91% full-bleed convention. There are **no cards**. There is one column, roughly 680px wide, set on a dark steel-grey ground that extends edge to edge — the table, not the paper. The paper itself is a single continuous strip of manila that scrolls past the viewport like a roll of teletype: the reader is *unspooling a file*, not browsing tiles. **The four registers of the page, top to bottom:** 1. **The Cover / Stamp Block.** First paint is the closed folder tab: the wordmark `martiallaw.wiki` set as a typed file title, beside a stamped classification box that on load animates from blank to `DECLASSIFIED — FOR PUBLIC REFERENCE` with a slight rotational thunk (the only forceful motion on the site). A run of small monospaced metadata sits beneath it like a docket line: jurisdictions covered, date span, entry count. 2. **The Chronology Spine.** A vertical hairline rule runs down the **left margin** of the document column for the entire length of the page — the binder's edge. Pinned to it at intervals are **chronology nodes**: a small filled square, a four-digit year, a one-line proclamation title. As the reader scrolls, the spine draws itself downward (an SVG path stroke) and the node nearest the viewport center brightens. This is the site's navigation: clicking a node scrolls to that entry's dossier. 3. **The Dossiers.** Each martial-law episode is one **dossier block** in the column: a typed header line, a `WHEN / WHERE / DECREE NO. / DURATION / LIFTED` field stack rendered as a stamped form, then body prose that runs as a single justified measure of typewriter text. Inside the prose, redaction is *real layout*: certain phrases are wrapped in a black bar with the text still selectable beneath (CSS `color: transparent; background: #0a0a0a`), and on hover the bar lifts a hair and the text fades through — the archive un-redacting itself for the careful reader. Pull-quotes from primary documents sit in the right margin as **paper-clipped slips**, rotated 1.5°, with a tiny SVG paperclip overlapping the top edge. 4. **The Marginalia Footer.** Sources, further reading, and contributor notes are set as a **pencil-annotation layer**: lighter weight, slightly slanted, in the faded-blue of carbon copy, as if a researcher wrote them in the bottom margin. A single line closes the file: a re-stamp animation putting the folder back in the drawer. Section transitions are **dossier dividers**: a full-width perforated dotted rule (`border-top: 2px dashed`) with a centered monospaced label `— ENTRY 07 —`, evoking the tear line between forms in a continuous-feed printer stack. ## Typography and Palette **Typefaces — Google Fonts only, all confirmed available:** - **`Special Elite`** (typewriter, 400) — the body and document face. Special Elite is Astigmatic's faithful revival of a worn American Typewriter strike: uneven inking, slightly battered serifs, the authentic ghost of a ribbon. It carries every dossier's prose and the stamped form fields, giving the whole site the texture of a page that went through a real machine. This claims the registry's **mono (93%)** family but in its rarest, most material register — not a coder's monospace, a *clerk's*. - **`Oswald`** (condensed sans, 500/600) — the headline and stamp-box face. A tight, upright condensed grotesque with the silhouette of mid-century government signage and newspaper standing-heads; used for dossier headers, the wordmark, and the classification stamp text. Serves **condensed (14%)**. - **`Spectral`** (transitional serif, 400/500 italic) — the editorial connective tissue: the site's own narration between dossiers, captions, and the chronology node titles. A screen-tuned Productype serif with genuine book bones; its italic carries the pull-quote slips. Serves **serif-revival (6%)**. - **`IBM Plex Mono`** (300) — the docket lines and metadata: jurisdictions, decree numbers, entry counts, timestamps. Cooler and more technical than Special Elite, it reads as the *system's* voice versus the typist's. **Palette — a censored state document, seven values:** - `#1c1d1f` — **Reading-table steel.** The page ground; cold, matte, slightly green-grey. - `#0a0a0a` — **Censor ink.** True near-black, reserved for redaction bars, the folder tab edge, and rule lines. Never used for body text — body text is never *quite* this dark, so the redaction bars sit visibly heavier than everything around them. - `#e8dcc0` — **Manila duplicator paper.** The document column ground; warm, aged, faintly mottled. - `#f4ecd8` — **Fresh carbon sheet.** A lighter paper tone for the stamped form fields and paper-clip slips, so they read as a second, crisper sheet laid on top. - `#2b2620` — **Typescript brown-black.** The body text color on manila — warm, like ribbon ink, never pure black. - `#9c2a1f` — **Stamp oxide red.** The one accent: the classification stamp, the active chronology node, the `LIFTED` field when a regime fell, link underlines. Used sparingly enough that it always means *official mark*. - `#5a6b78` — **Carbon-copy blue.** The marginalia layer and the chronology spine in its dim state — the faded blue of a second carbon, the color of pencil-on-bad-paper. ## Imagery and Motifs **Zero stock photography (against the 98% norm — its exclusion is the point), zero AI imagery, zero icon set.** Every visual mark is drawn from the bureaucratic-document vocabulary, hand-built as SVG or CSS: 1. **The Rubber Stamp.** The signature motif. An SVG of a rectangular stamp impression — slightly rotated, edges broken, ink uneven (achieved with `feTurbulence` displacement on the stroke). It appears once large at the top (`DECLASSIFIED`), and small throughout: `LIFTED 1988`, `STILL IN FORCE`, `CONTESTED`. Stamps never animate except their first appearance (the thunk). 2. **Redaction Bars.** Solid `#0a0a0a` rectangles inline in the prose, of varying lengths, covering selectable text. The defining interaction: hover to ghost-reveal. Some bars are *permanent* (the archive notes `[redaction not recoverable]` in tiny mono beneath) — a sober reminder that not every record survives. 3. **The Chronology Spine + Nodes.** A 1px vertical rule with small filled squares; the only line-drawing on the site. The spine is the binder edge and the time axis at once. 4. **Paper-Clip Slips.** Pull-quotes from primary sources (proclamation texts, dissents, diaries) on `#f4ecd8` slips, rotated, with a thin SVG paperclip. The closest the site comes to decoration — and it is still functional, holding a quote. 5. **Perforated Tear Rules.** Dashed full-width separators between dossiers — the continuous-feed printer's tear line. 6. **Telex Strip (footer flourish only).** A single thin band of monospaced uppercase running the contributor credit line, letter-spaced wide like a teleprinter readout. The only place text scrolls horizontally — slow, ticker-like. Texture: a faint paper-grain PNG multiplied over the manila column, and a barely-there vignette on the steel ground so the table edges fall into shadow. Grain stays subtle — this is a document, not a distressed-poster pastiche. ## Prompts for Implementation Build martiallaw.wiki as **one HTML document, one CSS file, one small ES module, a handful of inline SVGs (stamp, paperclip, spine), and one paper-grain PNG. No framework. No analytics. Total asset budget ≤ 230kb, network requests ≤ 14 including Google Fonts.** Treat the page as a single physical file the reader opens, unspools, and closes. **Storytelling spine.** First paint: the steel reading table, then the closed folder tab with the typed title `martiallaw.wiki` and an empty classification box. After ~600ms the box receives its stamp — `DECLASSIFIED — FOR PUBLIC REFERENCE` — with a single rotational `thunk` (a short scale+rotate keyframe, slight overshoot, then settle; one dull `clack` is the only sound, and only if the user has interacted). The docket line types itself in IBM Plex Mono: `JURISDICTIONS: 14 · SPAN: 1849–2024 · ENTRIES: 19`. The reader scrolls; the manila strip unspools; the chronology spine on the left margin draws downward via `stroke-dashoffset` tied to scroll progress. Each dossier enters with its stamped form fields settling in a tight stagger (8–12px rise, 40ms apart), prose already in place — restraint, not flamboyance. The redaction bars are the recurring micro-interaction: hover lifts the bar 2px and fades the covered text through to ~70% opacity over 240ms; mouse-out re-seals it. Permanent redactions don't respond — and that non-response is intentional and noted. The page closes with the re-stamp: `FILE CLOSED — RETURN TO ARCHIVE`, the folder tab sliding a few px as if back into a drawer. **Motion vocabulary:** `path-draw-svg` (the spine — claimed at 30%), restrained `stagger` (form fields), `fade-reveal` (redaction ghosting), one `bounce-enter`/overshoot used *exactly twice* (the two stamp impressions). Honor `prefers-reduced-motion`: spine appears fully drawn, stamps appear placed, redaction reveal becomes a click toggle. No parallax of imagery, no cursor-follow blob, no tilt-3d cards — the page should feel like paper under glass, not a video game. **Layout rules:** one ~680px document column on a full-bleed steel ground; left-margin chronology spine pinned for the column's full height; right-margin paper-clip slips that on narrow viewports fold inline beneath their paragraph; justified Special Elite body with generous leading (1.75); stamped form fields as a two-column `WHEN / WHERE` grid that collapses to one column on mobile. AVOID entirely: hero CTAs, "Get Started" buttons, pricing tiers, stat-counter grids, testimonial cards, signup bands. There is nothing to buy here — there is a record to read. ## Uniqueness Notes This design commits to the following differentiators, chosen to avoid duplicating other CMassC sites and to lean on the registry's underused patterns: 1. **Redaction-as-layout, not redaction-as-graphic.** Many sites use a black censor bar decoratively. Here the bars are *real DOM*, sit over genuinely selectable text, ghost-reveal on hover, and some are deliberately permanent and labelled unrecoverable — the central interaction of the entire site is the act of un-censoring a document, and the refusal of some bars to budge is part of the argument. 2. **A vertical chronology spine as the only navigation and the only line-art** — claiming `timeline-vertical` (2%) and `path-draw-svg` as a navigation primitive, not a decorative flourish. No nav bar, no menu, no card grid: you move through martial-law history by walking down a binder's edge. 3. **The clerk's typewriter, not the coder's monospace.** Where 93% of CMassC sites reach for IBM Plex Mono / JetBrains as a "tech" signal, this site uses `Special Elite` — a worn ribbon-strike face — to make the page feel *typed by a person on a machine in a back office*, with IBM Plex Mono demoted to the cold "system voice" of decree numbers. The mono family is claimed but in its rarest material register. 4. **One steel ground, one manila sheet, one oxide-red stamp** — a deliberately near-monochrome document palette where the single accent always and only means "official mark," in flat contrast to the registry's 96% gradient / 98% warm sunset reflex. The warmth here is the warmth of *aging paper under tungsten*, not of a sunset hero. 5. **Forensic-calm tone over a politically loud subject.** No fists, no flags, no shouting type. The design's restraint is itself the thesis: a martial-law page that screamed would look like the propaganda it archives. Chosen seed/style: **"sepia toned history"** (fallback selection — no seed supplied in assignment), reframed as a *declassified state-document case file* — combining the registry's `dark-academia` / `grainy-textured` aesthetics, `timeline-vertical` + `single-column` layout, `condensed` + `serif-revival` + `mono` typography, and `book-scholarly` / `paper-aged` motifs. Avoided patterns from frequency analysis: hand-drawn (96%), glassmorphism (73%), card-grid (89%), full-bleed-everything (91%), photography (98%), warm-gradient palettes (96–98%), parallax (95%), cursor-follow (89%), spring/magnetic (86/79%), bento-box, dashboard, stat-grids, CTA hero blocks.