# Design Language for martiallaw.quest ## Aesthetics and Tone martiallaw.quest is a **cinematic memorial of suspended democracy** — a visual document of the moments when military order replaces civil law, rendered as a slow-burn editorial experience. The aesthetic is cinematic restraint meeting archival intimacy: the visual grammar of a classified document folder left open on a reading table, where each scroll reveals another layer of the official record. The visual register draws from three simultaneous sources: the cold-cream paper of declassified government memos, the bruised-fog palette of military documentary photography, and the severe elegance of Garamond-set legal text. Nothing shouts. Everything presses. The tone is **quiet dread rendered in soft light** — creamy parchment surfaces that feel like they should be safe and institutional, but carry text that is anything but. The contrast between the gentle palette and the weight of the subject matter is the entire emotional argument. The site does not editorialize; it presents the record. Visitors are invited to feel the cognitive dissonance themselves. No hero image. No infographic. No call to action. The experience is a continuous vertical scroll through materials — each section a "document" within a growing case file, the whole page feeling like one long exhibit in a quiet archive room with fluorescent lights that hum faintly. ## Layout Motifs and Structure The structural metaphor is the **dossier opened flat** — not a website, but a case file being read. The layout uses **organic-flow** composition: sections do not snap to a rigid grid but settle into place like papers arranged on a table, some slightly overlapping in the z-axis, others offset to the right margin as annotations. **Columnar logic.** A primary reading column sits at 680px wide centered at desktop (1200px viewport), with a 240px annotation gutter on the right that floats "margin notes" — dates, classification codes, source citations in smaller type. On mobile, the gutter collapses into inline callout blocks. **Document layering.** Sections are rendered as distinct "document cards" — off-white panels with a subtle drop shadow and a faint top border in `#C5B89A` (aged paper edge). Each card appears to rest on a slightly darker background surface (`#E8E2D5`), creating the illusion of papers on a desk. **Organic offsets.** Every third document card is nudged 12px left or right from center, with a 1.5° rotation to suggest a document that was set down at a slight angle. CSS `transform: rotate(-1.2deg)` or `rotate(0.8deg)` alternating. **Staggered reveals.** As the user scrolls, document cards drift upward from 24px below their final position, opacity fading from 0 to 1 over 600ms with `cubic-bezier(0.22, 1, 0.36, 1)`. The motion feels like a document sliding into view from beneath a stack. **No fixed navigation.** A thin progress-bar stripe at the very top of the viewport (4px height, color `#8B7D6B`) shows scroll depth. Section anchors appear only as marginalia on desktop. **Page structure (top to bottom):** 1. **Masthead** — domain name as stamp, date of declaration, classification mark in Garamond italic 2. **Preamble card** — a single long paragraph establishing context, typeset like a legal preamble 3. **Timeline document cards** — five to seven cards, each representing a key moment, with a date stamp in the upper left corner 4. **Evidence panels** — two-column layout within a card: noise-textured image area (left 40%) + dense text (right 60%) 5. **Witness account block** — blockquote styled as a typewritten statement, slightly yellowed background 6. **Closing declaration card** — the final document, wider than others, centered, with a red "DECLASSIFIED" stamp watermark at 20% opacity ## Typography and Palette **Typography (Google Fonts only — garamond-classic system):** The type system is built on a single serif family operating in two registers — formal legal text and urgent marginalia: - **Display / Headings:** [`Cormorant Garamond`](https://fonts.google.com/specimen/Cormorant+Garamond) — a refined high-contrast serif with deep historical roots. Used for document titles, section headings, and the masthead. Set at `clamp(28px, 4vw, 64px)` for headings, 500 weight italic for formal titles. Optical kerning enabled. - **Body / Legal Text:** [`EB Garamond`](https://fonts.google.com/specimen/EB+Garamond) — the open-source Garamond revival with authentic old-style figures. Used for all body text at 18px/1.8 line-height. Generous letter-spacing at `0.01em`. The reading experience feels like a printed legal brief. - **Marginalia / Annotations:** [`Cormorant Garamond`](https://fonts.google.com/specimen/Cormorant+Garamond) at 13px, 400 weight, `#8B7D6B`, uppercase tracking `0.12em`. Used for dates, source codes, footnotes, and classification markers in the annotation gutter. - **Stamps / Codes:** [`Courier Prime`](https://fonts.google.com/specimen/Courier+Prime) — monospaced typewriter face. Used exclusively for classification stamps, document ID codes, and the "DECLASSIFIED" watermark. Creates a bureaucratic-authentic counterpoint to the flowing Garamond. **Palette — creamy-pastel with military shadow:** ``` --cream-document: #F5F0E8 /* primary background, aged paper */ --parchment-mid: #EDE6D6 /* document card surface */ --parchment-edge: #C5B89A /* card borders, divider lines */ --fog-shadow: #E8E2D5 /* desk surface behind cards */ --ink-primary: #2C2416 /* primary text, near-black sepia */ --ink-secondary: #5C4F3A /* body text, softer sepia */ --annotation-gray: #8B7D6B /* marginalia, metadata */ --stamp-red: #8B2020 /* classification stamps, urgency markers */ --fog-blue: #7A8E99 /* military-cold accent for dates and codes */ --deep-shadow: #1A160F /* section titles, masthead */ ``` The palette refuses dramatic contrast. Everything is warm cream and sepia shadow — except for the stamp-red (`#8B2020`) which appears only for classification markers and urgency stamps. The fog-blue (`#7A8E99`) enters only for dates and official codes, suggesting the cold bureaucratic distance of military administration. ## Imagery and Motifs **Noise-texture as the primary image treatment.** No photography is sourced or displayed directly. Instead, all "image" areas are CSS-generated noise textures — a dense grain overlay at 65% opacity on a gradient base that simulates the look of a poorly-photocopied photograph in a declassified dossier. The illusion of an image without the image. **Noise texture implementation:** - SVG `` filter with `baseFrequency="0.65"` and `numOctaves="4"` generating monochrome grain - Applied over a radial-gradient base using the palette's sepia range - Each "image" area is a unique grain pattern (different `seed` value per SVG filter) to suggest different source documents **Particle effects — floating document fragments:** - Very slow-drifting particles across the page background: 18 to 24 tiny rectangles (3–8px wide, 1–2px tall) in `#C5B89A` at 30–50% opacity - These simulate fragments of torn or shredded document paper, drifting in an imperceptible air current - Animation: `keyframes` looping over 40–80s each, random start positions, diagonal drift paths at `translate(-20px, -40px)` to `translate(20px, 40px)` range, no two particles sharing the same timing - Canvas or CSS-only approach both valid; particles must be barely visible — presence felt, not seen **Counter-animate motifs:** - When the user scrolls DOWN, document cards slide UP into view (standard direction) - The background desk surface moves at 0.3× scroll speed (subtle parallax) - The annotation gutter marginalia items move at 1.1× scroll speed (slightly faster than content) — a subtle counter-animation suggesting the annotations are layered on top of the documents, not part of them - The masthead stamp "DECLASSIFIED" rotates counter-clockwise 0.3° per 100px of scroll, creating a slow drift effect **Decorative stamps and seals:** - A circular seal motif in `#C5B89A` at 15% opacity watermarks certain document cards — rendered in SVG as a ring with text around the circumference ("RESTRICTED ACCESS" or "OFFICIAL RECORD") and a central emblem of geometric lines - Red ink-stamp rectangles with rough edges (achieved via SVG filter `feTurbulence` on the border) mark key documents **Typewriter redaction bars:** - Certain phrases in the body text are "redacted" — overlaid with a solid `#2C2416` bar (95% width of the text run) that obscures the underlying words - On hover, the redaction bar slides right by 100% over 300ms, revealing the text beneath - This is the primary interactive motif of the site ## Prompts for Implementation Build martiallaw.quest as a **scrolling case file** — one long page where each section is a discrete document appearing to rest on a shared surface. There is no navigation, no hero CTA, no pricing, no testimonials. The page is the exhibit. The visitor is the reader of the record. **Technical requirements:** 1. **Document card component.** Each card: `background: #EDE6D6`, `border-top: 3px solid #C5B89A`, `box-shadow: 0 4px 24px rgba(44, 36, 22, 0.12), 0 1px 4px rgba(44, 36, 22, 0.08)`. Max-width 680px, centered. Padding `48px 56px`. Some cards use `transform: rotate(-1.2deg)` or `rotate(0.8deg)`. Cards alternate between full-width and 80% width for visual rhythm. 2. **Scroll-triggered entry animation.** Use `IntersectionObserver` to add `is-visible` class when a card enters the viewport. CSS: `.document-card { opacity: 0; transform: translateY(24px); transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1); } .document-card.is-visible { opacity: 1; transform: translateY(0); }` 3. **Noise texture areas.** For each "image" area: `` overlaid on a CSS `radial-gradient(ellipse at 40% 50%, #C5B89A, #8B7D6B, #5C4F3A)`. 4. **Particle drift system.** Generate 20 `
` elements in JS at page load with random `top`, `left`, `width` (3–8px), `height` (1–2px), `background: #C5B89A`, `opacity: random(0.3, 0.5)`, `border-radius: 1px`. Animate with CSS custom properties: `--drift-x` and `--drift-y` set via JS, using `@keyframes drift { from { transform: translate(0, 0); } to { transform: translate(var(--drift-x), var(--drift-y)); } }` with `animation-duration: random(40s, 80s)`, `animation-iteration-count: infinite`, `animation-direction: alternate`. 5. **Redaction hover effect.** `.redacted { position: relative; color: #2C2416; } .redacted::after { content: ''; position: absolute; inset: 0; background: #2C2416; border-radius: 2px; transform: scaleX(1); transform-origin: left; transition: transform 300ms ease; } .redacted:hover::after { transform: scaleX(0); }` 6. **Annotation gutter.** On desktop (>1200px), a `position: sticky`-adjacent column floats at `left: calc(50% + 360px)` with `width: 200px`. Contents: date stamps in Courier Prime, source codes in Cormorant Garamond small-caps. `scroll-timeline` or JS to slightly advance gutter items faster than scroll. 7. **Progress bar.** Fixed top, `height: 4px`, `background: #8B7D6B`. Width driven by `window.scrollY / (documentHeight - windowHeight) * 100%`. 8. **Masthead.** Full-width, `background: #F5F0E8`, `padding: 80px 0 64px`. Domain name in Cormorant Garamond Display 700, 5vw, letterspaced +0.05em. Below: a "date of declaration" in Courier Prime 14px `#8B7D6B`. A stamp-red diagonal watermark "DECLASSIFIED" at 20% opacity rotates counter-clockwise as scroll advances using `transform: rotate(calc(-0.003deg * var(--scroll-y)))`. 9. **Tone and forbearance.** Resist the temptation to add color, motion, or drama beyond what is specified. The quietness is intentional. The weight should come from the content and the archival form, not from animation intensity. ## Uniqueness Notes 1. **Creamy-pastel palette used as institutional dread, not comfort.** The frequency report shows `creamy-pastel` at only 3% of the corpus. No existing design uses this palette in combination with a martial/legal subject — typically it appears in pastoral or artisanal contexts. martiallaw.quest deliberately subverts the palette's gentle associations by applying it to documentation of state violence. The dissonance between the soothing cream tones and the content weight is the central aesthetic argument. 2. **Garamond-classic typography at 6% frequency, deployed as bureaucratic instrument.** Where most Garamond designs use the typeface for warm academic or literary elegance, this design uses EB Garamond's old-style figures and traditional spacing as evidence of institutional authority — the letterforms of official proclamations, not of personal essays. The pairing with Courier Prime stamps creates a bureaucratic tension absent from all other Garamond designs in the registry. 3. **Counter-animate scroll pattern at 1% frequency combined with particle-effects motifs at 1%.** These two underused patterns combine uniquely: the annotation gutter moves slightly faster than the body (counter-animation), while document fragments drift in the opposite direction from scroll. No other design in the registry uses counter-animation as a documentary layer-depth signal. 4. **Noise-texture as the sole imagery, with no photography.** At 5% corpus frequency, noise-texture is used here not as decoration or background enrichment but as the actual image stand-in — the entire "visual" content of the site is CSS and SVG noise filters simulating photocopied documents. This is a structurally distinct use of the pattern. 5. **Redaction as primary interactive motif.** The hover-to-reveal redaction bar is the only interactive gesture on the page. It requires the visitor to choose to see. No other design in the registry treats text reveal as the central UX metaphor. **Chosen seed:** aesthetic: cinematic, layout: organic-flow, typography: garamond-classic, palette: creamy-pastel, patterns: counter-animate, imagery: noise-texture, motifs: particle-effects, tone: minimal **Avoided overused patterns from frequency analysis:** `centered` layout (94% corpus — avoided in favor of organic-flow offset cards), `warm` palette character (95% — avoided the generic warmth by pairing cream with cold fog-blue and stamp-red), `parallax` pattern (87% — avoided standard parallax in favor of counter-animation gutter), `photography` imagery (94% — replaced entirely with noise-texture generation), `vintage` motifs (67% — avoided in favor of particle-effects and redaction interaction).