# Design Language for kaigenrei.com ## Aesthetics and Tone kaigenrei.com (戒厳令 — "martial law," "state of emergency") is a long-form editorial archive masquerading as a clandestine constitutional law journal. The conceit: a fictional, century-spanning publication called **The Verdant Bureau** that has chronicled every declaration of martial law in modern history from the perspective of constitutional scholars who have, by tradition, kept their offices in a forest-green-paneled Meiji-era reading room. The site is the digital edition of their archive — a single, authoritative voice speaking from a chamber where the lamps never quite go out and the walls glow faintly emerald in the dark. The mood is **opulent-grand** but never decorative for its own sake. Picture the entrance hall of a private legal library at 3 AM: brass fixtures dimmed to embers, the green of malachite reading lamps casting long fringe-shadows across burled walnut, a single neon sign behind frosted glass spelling 戒厳令 in slow, breathing electric verdigris. The site does not shout its subject. It treats martial law the way a forensic curator treats a relic — gloved, deliberate, beautifully lit, and unmistakably dangerous. Where most editorial sites attempt warmth, kaigenrei.com cultivates **stately green-tinged hush**. The aesthetic vocabulary draws from: - The deep oxidized greens of antique map cabinets and pre-war legal compendia - Neon-tube signage in old Tokyo administrative districts seen through rain - Constitutional commentary as a literary genre — Schmitt, Agamben, Maruyama Masao — rendered as a magazine instead of a tract - The sharp triangular spotlights of theater proscenium lighting on a single document at center stage - The "opulent restraint" of Aman hotel interiors crossed with the deliberate severity of a war-cabinet briefing room The tone is **opulent-grand** with an undercurrent of dread. Every element should feel as if it were placed there by someone who takes martial law seriously enough to study it for thirty years and craft enough to make that study beautiful. ## Layout Motifs and Structure **Primary layout: minimal-navigation** — a near-empty chrome surrounding extraordinarily dense, slow-moving editorial flow. The entire navigation system collapses to **three persistent elements** and nothing else: 1. **The Seal** — top-left, a small (32px) etched mark combining a rotated square (a sharp-angled lozenge) and the stylized character 戒. Click to return to the index. This is the only "logo" on the site. 2. **The Spine** — a vertical 1px verdigris line down the left margin (24px from edge), interrupted only by tiny diamond-shaped index ticks at 25%, 50%, 75% scroll progress. Hovering a tick reveals the section name in a small caps tooltip. This is the only progress indicator and the only secondary navigation. 3. **The Folio** — bottom-right, a tiny rotating brass-style numeral (e.g., "fol. xvii") indicating the current article folio. Click to open the table of articles in a full-screen takeover. There are **no navigation bars, no menus, no hamburger icons, no breadcrumbs, no footers in the conventional sense**. Reading is the interface. **Page composition** uses a **strict 12-column editorial grid** but only fills 7 columns at any given moment. The remaining 5 columns are negative space — the chamber's air. Article body lives in columns 4–10 at desktop; column 1–3 holds running marginalia (citations, dates, classified-document reference numbers in micro type); columns 11–12 hold a thin vertical "smoke trail" of micro-interactions (an emerald cursor-following dot, tiny glowing tick marks for paragraph anchors, the breathing 戒 watermark). **Sections, top to bottom, full-bleed-vertical:** 1. **The Frontispiece** — full viewport. Centered: the masthead "THE VERDANT BUREAU" set in Commissioner Light at extreme letter-spacing, with "An Archive of States of Exception · Vol. CII" beneath. A single sharp-angled emerald lozenge pulses softly behind the text with a subtle neon-glow halo. No CTA, no scroll cue except the spine ticks. 2. **The Standing Order** — an editorial "letter from the editor" set as a single slow-fade column of justified prose, ~600 words, with a hand-set drop cap in deep emerald that catches a faint neon shimmer on hover. 3. **The Index of Declarations** — not a card grid. A vertical typographic list of historical martial-law declarations rendered as folio entries: date in oldstyle figures, jurisdiction in small caps, duration in italic, all separated by hairline rules. Hovering an entry causes a thin horizontal emerald light-bar to draw across the row from left to right (path-draw-svg, ~600ms ease-out). No images, no thumbnails — only typography. 4. **The Plate** — a single full-bleed black-velvet-textured panel containing one centered specimen: a sharp-angled emerald geometric figure (a rotated octagon composed of eight needle-thin triangles) lit from within with neon-glow, slowly rotating at 0.05 rpm. Caption beneath in micro caps: "Plate I — The Architecture of Suspension." This is the site's only "hero image" and it is not an image; it is CSS and SVG. 5. **The Marginalia** — a long-form three-up footnote spread, each footnote occupying one screen-height, set in small editorial type with the footnote numeral rendered enormous (clamp(8rem, 16vw, 14rem)) in Commissioner ExtraLight at 6% opacity behind the text. 6. **The Colophon** — instead of a footer, a quiet single-screen page: the publication's typographic credits, a list of contributors as a vertical column of names in small caps separated by sharp emerald lozenges, and the Bureau's address rendered as a postal-style block. Final element: a single line — "Composed in the Bureau, in the green hours." The overall composition rejects the dashboard, the bento, the card grid. The site reads like a **literary review with the navigation surgically removed** — a **minimal-navigation** experience where the architecture is felt rather than seen. ## Typography and Palette **Typography** - **Display & Masthead:** **"Commissioner"** (Google Fonts) — the seed-mandated typeface. A versatile contemporary serif-influenced sans by Kostas Bartsokas that carries both editorial gravitas and quiet warmth. Used in **Light (300)** at extreme letter-spacing (0.32em) for the masthead, and in **Thin (100)** at clamp(8rem, 16vw, 14rem) for marginalia numerals. The variable axes are exploited for subtle hover transitions: weight shifts from 300 → 400 over 400ms when an interactive element is approached. - **Body & Long-form:** **"Commissioner"** at **Regular (400)**, 18px, line-height 1.7, measure 62ch. Justified with hyphenation on for that authentic legal-journal feel. Body copy uses tabular oldstyle figures (`font-variant-numeric: oldstyle-nums tabular-nums`). - **Small Caps & Marginalia:** **"Commissioner"** at **Medium (500)**, 11px, letter-spacing 0.18em, uppercase. Used for jurisdictions, dates, file references, and section labels. - **Editorial Italics:** **"Cormorant Garamond"** Italic (Google Fonts) — used sparingly for emphasis, foreign terms (kaigenrei, état d'urgence, Ausnahmezustand), and pull quotes. Provides a single moment of classical contrast against Commissioner's modernity. - **Numerals & Folio Marks:** Commissioner with `font-feature-settings: "onum" 1, "smcp" 1` for oldstyle small-cap effects. This mono-typeface (with one italic accomplice) discipline reinforces the editorial-archive feeling. The site never uses a display face, never uses a sans-grotesk poster type — it trusts Commissioner to carry every register. **Palette** A disciplined **forest-green** palette with two neon accents and three near-blacks. No gradients in the conventional sense — color transitions occur only as glow halos. - `#0B100D` — **Bureau Black** — primary background. Not pure black; tinted faintly green, the color of a reading room with the lamps off. - `#11241B` — **Court Verdant** — section backgrounds, panel fills. The color of oxidized bronze and old leather book spines. - `#1F4A35` — **Malachite Lamp** — primary accent for rules, hairlines, the spine, and lozenge fills. The deep green of a banker's lamp shade. - `#3F7D5C` — **Verdigris** — secondary accent, used for the drop cap and small marks. - `#7BE0A1` — **Neon Verdant** — the single high-luminance accent used exclusively for neon-glow effects (hover halos, the breathing watermark, the rotating Plate). Used at 30–60% opacity, never as solid fill larger than 8px. - `#C9D6CA` — **Verdant Bone** — primary text color. A faintly green-tinted off-white that reads as ivory on dark green. - `#E8EFE6` — **Reading Lamp** — high-emphasis text and the masthead. The color of paper under green glass. - `#8A9A8C` — **Folio Grey** — marginalia, captions, secondary text. A green-cooled grey. - `#1A0F0B` × `#3A2418` accents — **Walnut Shadow** and **Brass Patina** — used only in the Plate's velvet texture and the postal-block colophon, providing a single warm counter-note in an otherwise green chamber. The palette never deviates. There is no "error red," no "success blue." If a state must be communicated, it is communicated through letterspacing, weight, or the brightness of Neon Verdant. ## Imagery and Motifs **Core motif: sharp-angles.** The entire decorative vocabulary is built from a single primitive — the **rotated square / lozenge / acute triangle**. No circles. No soft blobs. No organic curves. The site's geometry is the geometry of a writ. 1. **The Lozenge Mark** — a 16×16px rotated square (45°) in Malachite Lamp with a 1px Neon Verdant inner stroke. Appears as: bullet markers in lists, separators between contributor names, the Bureau's seal core, and the centerpiece of the Frontispiece. It pulses with a 4s breathing animation that shifts only its inner stroke opacity from 30% to 80% — never its size, never its position. 2. **The Octagonal Plate** — the site's single centerpiece object. A sharp-angled octagon constructed from eight needle-thin triangles meeting at a central point, rendered in pure SVG with `filter: drop-shadow(0 0 24px #7BE0A1)`. It rotates at 0.05 rpm — slow enough that you only notice the change when you return. On hover, a second concentric octagon fades in at 60% rotation offset, creating a four-pointed star moiré. 3. **Neon-Glow Hairlines** — every horizontal rule and the vertical Spine carry a subtle `box-shadow: 0 0 6px rgba(123, 224, 161, 0.18)`. The glow is never garish; it is the light of a distant sign through fog. Glow intensity increases on hover/focus by 2.5×. 4. **The 戒 Watermark** — the Japanese character 戒 ("admonition," "vigilance") rendered at 60vw, positioned bottom-right at 8% opacity in Court Verdant, fixed to the viewport. It does not move with scroll. It breathes — opacity oscillating between 6% and 10% over a 12s cycle. It is the room's silent witness. 5. **Folio Tickmarks** — tiny sharp-angled diamond marks (2×2px rotated squares) appear at the start of every paragraph in the left margin, in Folio Grey. On scroll-trigger, they brighten to Neon Verdant for 800ms then fade back. This is the most visible micro-interaction. 6. **The Velvet Field** — a CSS-only noise + radial-gradient texture used exclusively as the Plate's background, simulating dark green theatre velvet. Generated with a layered `radial-gradient` and `background-blend-mode: multiply` over an SVG turbulence noise filter. 7. **Document Sigils** — small (24px) abstract glyphs at the head of each article, composed of 3–5 sharp lozenges arranged in unique patterns. Each declaration in the index has its own sigil. They are decorative-but-systematic — a typographer's flourish, not random ornament. There are **no photographs, no portraits, no illustrations of historical figures**. The site refuses to put a face on martial law. It is a place of typography and geometry. Imagery (in the conventional sense) is replaced entirely by extraordinarily considered typographic detail and the single rotating Plate. ## Prompts for Implementation **Implementation Philosophy** Build kaigenrei.com as a single long-scrolling vertical document with **no traditional navigation chrome whatsoever**. The reader enters and is held in the chamber. The interface gets out of the way. Every implementation decision should answer: "Does this preserve the hush?" **HTML structure** - One `
` containing six `
`s corresponding to the six layout movements. Each section has `min-height: 100vh` except the Index and Marginalia which are deliberately longer. - Use semantic editorial markup: `
`, `