# Design Language for martiallaw.wiki ## Aesthetics and Tone martiallaw.wiki is an immersive archival experience — a digital museum of a specific political rupture, rendered with the weight of a water-damaged government dossier found behind a false wall. The aesthetic is **blobitecture meets classified archive**: organic, pressurized forms — like military-grade waterproofing silicone seals bulging under bureaucratic strain — push against the rigid geometry of stamped document pages and redacted incident reports. It is as if the liquidity of an oceanic deep trench has seeped into a manila folder stamped RESTRICTED. The palette draws from the ocean's deepest zones: bioluminescent abyssal blues, midnight-ink pressures, and the faint luminescent green of deep-sea organisms — punctuated by the sepia warmth of paper degraded by salt water and time. The overall mood is **solemn luxury**: expensive stillness, the hush of deep water, the oppressive cost of silence. Not horror, not propaganda — the site occupies the register of a museum that treats the subject with the gravity of a war crimes tribunal combined with the visual language of a high-end publishing house. The tone is **luxurious and authoritative**: silk-weight typography, no wasted space, every decorative element earning its placement through narrative necessity. The user should feel they are handling something rare — a document that survived when it was not supposed to. ## Layout Motifs and Structure The layout is **single-column with pressurized blob margins**: one uninterrupted vertical narrative spine, but the page edges breathe with slow-morphing blob silhouettes that serve as section dividers. There are no hard horizontal rules — instead, organic SVG blobs (rendered with `filter: blur(40px)` glow) mark the transition between chapters. The single column is deliberately narrow — a 640px measure — floating in a full-viewport canvas of abyssal darkness, leaving enormous lateral breathing room occupied only by the blob forms. **Structural logic:** - **Opening: Full-viewport submersion.** The page opens on a near-black deep-ocean gradient with a single cluster of glowing bioluminescent particles drifting upward. The title `martiallaw.wiki` fades in character by character, set in a high-weight variable font that collapses in weight as the word completes — as if light pressure is draining from it. - **Chapter spine:** Seven vertical sections, each a discrete archival unit — Decree, Parliament, Uprising, Rescission, Aftermath, Trial, Memory. Each chapter is introduced by a blob form that morphs between reading that chapter and the next: the blob's silhouette shifts like a tide-pool anemone reacting to pressure. - **Card-flip reveals:** Key primary-source quotations are presented as physical card objects floating in the column. The front face shows a redacted portion in sepia; hovering or scrolling to the card flips it (CSS 3D perspective flip, Y-axis) to reveal the full unredacted text in deep-ocean blue. Each flip is its own micronarrative. - **Grid-lines as depth markers:** A very faint grid of horizontal lines — like the acoustic range rings used on submarine sonar — is permanently visible at 4% opacity across the full canvas, creating a subliminal sense of measured depth. The grid does not align to content; it is the ocean floor structure beneath everything. - **Margin annotations:** Narrow vertical ribbons on each side of the column carry timeline tick-marks and date stamps in a small condensed font, reading like the sonar log of the night in question. ## Typography and Palette **Palette — ocean-deep, paper-aged warmth:** - `#03080F` — Hadal black (deepest background, full-viewport) - `#071428` — Abyssal navy (section backgrounds) - `#0B2D5C` — Pressure blue (mid-depth blobs, secondary surfaces) - `#1A5F8A` — Bioluminescent blue (blob glow centers, active card faces) - `#2BBFB8` — Abyssal teal (accent, date stamps, link underlines) - `#F0E6C8` — Salt-aged vellum (body text, unredacted card text) - `#C4A97D` — Damp manila (secondary text, marginalia, timestamps) - `#7A5C38` — Archive sepia (redacted card fronts, paper-texture overlays) **Typography — expressive variable, single axis of gravity:** - **Display / chapter headings:** [Fraunces](https://fonts.google.com/specimen/Fraunces), variable axes `wght 100-900` and `WONK`. Headlines set at 6–10vw. As the user scrolls into each chapter, the heading's weight variable-animates from 100 (hairline, barely visible in the dark) up to 800 (black, fully present) — as if the word is surfacing from deep water into pressure. Italic optical size used for sub-headings. - **Body text:** [Source Serif 4](https://fonts.google.com/specimen/Source+Serif+4), variable, `wght 300`, 17px / 1.8 line-height on the 640px column measure. This is the voice of the archive: neutral, legible, authoritative. - **Marginalia / timestamps / redaction labels:** [Space Grotesk](https://fonts.google.com/specimen/Space+Grotesk), `wght 300`, 11px, letter-spacing 0.12em, uppercase. The mechanical precision of this font reads as bureaucratic. - **Card-flip revealed text:** [Fraunces](https://fonts.google.com/specimen/Fraunces) italic, `wght 500`, `WONK 1` — the revealed quotation feels organic, alive, not bureaucratic. ## Imagery and Motifs **Paper-aged imagery — the archive as physical object:** All visual texture comes from simulated degraded paper: CSS `background-blend-mode: multiply` layers a noise SVG grain over every card surface, producing the tactile sensation of foxed, salt-damp paper. No photographs of people. No stock imagery. All visual content is documentary in nature. **Imagery corpus:** 1. **Declassified document fragments** — scanned-style rectangular panels in `#7A5C38` sepia with `filter: sepia(0.7) brightness(0.85)`, partial text visible, the remainder obscured by a rectangle in `#03080F` that has feathered edges. These appear as background textures in section intros, never as foreground objects. 2. **Bioluminescent particle fields** — clusters of 40–80 radial-gradient dots in `#2BBFB8` and `#1A5F8A` with opacity 0.3–0.7, animated with a slow random drift using `cubic-bezier(0.45, 0, 0.55, 1)` and individual `animation-delay` values. They read as deep-sea life suspended in the column margins. 3. **Grid-line motif** — the sonar-ring grid described in the layout section. Implemented as a single SVG `` tiled across `::before` pseudo-elements, with horizontal lines every 48px in `rgba(43, 191, 184, 0.04)`. 4. **Blob forms** — organic SVG `` elements generated with Blobmaker-style cubic bezier waypoints (eight control points, radially distributed), filled with radial-gradient from `#1A5F8A` to transparent, blurred via `filter: blur(60px)`. Each blob morphs its `d` attribute on a 12-second loop using GSAP `morphSVG` or a keyframe animation between two pre-computed path strings. 5. **Card flip objects** — the front face carries a textured grain rectangle with sepia text fragments; the back face carries the bioluminescent blue treatment with vellum-colored revealed text. 6. **Timeline tick-marks** — hairline vertical lines 1px wide in `rgba(192, 169, 125, 0.4)`, with date labels in Space Grotesk caps, running along the left margin of each section. ## Prompts for Implementation Treat this as a **single seven-chapter archival dive**, experienced in one unbroken vertical scroll, never interrupted by navigation prompts or calls to action. The experience is reading a classified document on the ocean floor with a bioluminescent torch. **Opening sequence — full-screen submersion:** Begin with `#03080F` full-viewport. Bioluminescent particles drift upward at 0.4px/s. After 1.2s, the title `martiallaw.wiki` begins building character by character using a typewriter-style `clip-path: inset(0 100% 0 0)` that removes itself one character at a time. The font is Fraunces `wght 800` at 7vw. After the title completes, it immediately eases its weight variable to `wght 200` over 800ms — the word deflates, goes cold. Subtitle: "An archive of Korea's 2024 martial law declaration and its six-hour life" in Source Serif 4, vellum color, fades in at `opacity: 0.6` after the title deflates. **Chapter scroll behavior:** Each chapter heading sits at `position: sticky; top: 20vh` until the next chapter's heading pushes it out. As it sticks, Fraunces weight variable-animates from 100 to 700 over 300ms. When it unsticks (pushed by next chapter), weight eases back to 200 over 600ms. This creates a continuous breathing rhythm: chapters rise into legibility, then retreat. **Card-flip interaction:** Each card is `perspective: 800px` on its container. The card element has two child faces: `.card-front` and `.card-back`, both `position: absolute; backface-visibility: hidden`. The front face shows sepia-tinted paper grain with a partial quotation ending in a redaction rect. When the card enters the viewport (Intersection Observer, threshold 0.6), it auto-flips via `transform: rotateY(180deg)` over 700ms with `cubic-bezier(0.68, -0.55, 0.27, 1.55)`. The back face reveals the full quotation in Fraunces italic on deep-ocean blue background. Cards do not un-flip — once revealed, the document stays open. There are 5–7 cards per chapter. **Blob morphing:** Two large blob SVGs (400×400px) sit fixed at `left: -80px` and `right: -80px` of the column — visible in the lateral negative space. They use `@keyframes` animating between two distinct path strings over 14 seconds with `animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate`. Their fill is a radial gradient from `#0B2D5C` at center to transparent. They serve as chapter-transition markers: when an IntersectionObserver fires for the next chapter heading, a new blob path is set as the animation target via a CSS custom property swap. **Grid-line depth markers:** A full-viewport fixed `::before` pseudo-element on `body` carries the sonar grid. CSS `background-image: repeating-linear-gradient(180deg, rgba(43, 191, 184, 0.035) 0px, rgba(43, 191, 184, 0.035) 1px, transparent 1px, transparent 48px)`. It does not scroll — it is the ocean floor geometry of the whole experience. **Parallax is deliberately NOT used** — the grid is fixed, the column scrolls over it. This creates the sensation of descending through a fixed grid structure, not of layers moving past each other. It is the key spatial inversion of the site. **Tone of body copy:** Written in the register of a serious long-form journalism archive: factual, precise, no hyperbole. Datelines, source attributions, verbatim quotations. The luxury is in the restraint — everything is sourced, everything is calm. **AVOID:** No hero images of politicians. No flags. No call-to-action buttons. No "subscribe" forms. No stat counters. No testimonials. No pricing. No social proof. The site is a primary-source archive, not a publication with an agenda. ## Uniqueness Notes 1. **Parallax inversion as spatial metaphor.** Most designs in the corpus (79% use parallax) create depth through layer movement. This design does the opposite: the sonar grid is fixed, and the content column descends through it. The user is the submarine; the grid is the ocean-floor geometry. This is not a parallax design — it is an anti-parallax design that creates more spatial conviction than parallax does. 2. **Card-flip as the primary revelation mechanic.** Card-flip appears in only 4% of the corpus. Here it is not decorative — it is the site's central epistemological gesture: redacted information becoming visible as the reader descends into the archive. Every flip is a disclosure event, not an animation flourish. The flip itself carries meaning. 3. **Variable font weight as surfacing/submersion metaphor.** Using Fraunces' `wght` axis to animate headings from hairline (submerged, invisible) to black (surfaced, legible) is not in any existing design. The typography performs the theme of emergence and suppression — the same words that martial law tried to suppress literally surface from the dark as the reader arrives at them. 4. **Bioluminescent particle field as the only ambient decoration.** The corpus is dominated by warm (90%) and gradient (77%) palettes and vintage (43%) motifs. This design uses the ocean-deep palette (1% frequency) and grid-lines motifs (3% frequency) with paper-aged imagery (5%). The bioluminescent teal `#2BBFB8` against hadal black is a palette not present in any current design — it is simultaneously cold and alive, clinical and eerie. 5. **Blobitecture as structural divider, not decoration.** In the corpus, blob forms (organic-blobs: 4%) appear as decorative background elements. Here, the lateral blobs are load-bearing section dividers that morph in response to chapter transitions — they are the only non-textual structural element on the page, performing the work that most sites give to horizontal rules, cards, or image headers. Chosen seed: aesthetic: blobitecture, layout: single-column, typography: expressive-variable, palette: ocean-deep, patterns: card-flip, imagery: paper-aged, motifs: grid-lines, tone: luxurious Avoided from frequency analysis: parallax (79% — explicitly inverted), stagger (55%), warm palette (90%), gradient palette (77%), vintage motifs (43%), hand-drawn aesthetic (61%), editorial aesthetic (51%), photography imagery (90%).