# Design Language for kaigenrei.com ## Aesthetics and Tone kaigenrei.com is a **luxurious anti-design dossier** — imagine a museum-grade declassified folder, hand-set in classical Garamond, that has been deliberately *un-art-directed*: papers stacked at the angle they fell, captions typed wherever there was room, a curatorial mind that refuses to "compose" because composition would be a lie about the material. The word *kaigenrei* (戒厳令) means **"declaration of martial law"** — the moment a state suspends its own ordinary grammar — and this site treats that moment the way an estate jeweler treats a recovered relic: with reverence, deep velvet shadow, and zero decoration. The result is the rare pairing of **anti-design (only 2% of the corpus) and a genuinely luxurious tone (4%)** — not "ugly on purpose," but *expensively undesigned*: thick uncoated paper, intaglio-pressed type, hairline rules that don't align to any grid because the events they annotate didn't align to any grid either. The mood is **a hushed reading room at 3am** — a single brass lamp over a long table, the rest of the room a duotone of midnight indigo and bone. Nothing pulses. Nothing solicits. The page behaves like a person who has decided to tell you something difficult, slowly, and trusts you to stay. Where most "luxury" sites perform opulence through gold gradients and glassmorphism, kaigenrei.com performs it through **restraint, weight, and the confidence to leave things crooked**. The anti-design isn't chaos — it's the absence of the salesman. There is no hero, no CTA, no "learn more." There is a folder, and you open it, page by page. ## Layout Motifs and Structure The site is a **single vertical descent through nine "leaves"** — each leaf a sheet of off-white stock laid onto a dark indigo table, and *no two leaves share the same margin, rotation, or column logic*. This is the asymmetric layout (46% in the corpus, but here pushed to a deliberate anti-grid extreme) wedded to anti-design's refusal of templated rhythm. - **The crooked stack.** Each leaf is rotated by a small, irregular amount (between −2.4° and +1.9°, hand-picked per leaf, never algorithmic), as if dropped onto the table. Leaves overlap slightly at their top and bottom edges — the bottom of leaf N is visible as a 12–20px sliver beneath leaf N+1 as it scrolls in. The stack has *physical depth*: a soft, long-cast shadow under each sheet (offset 0 28px 60px at 22% indigo). - **No master column.** Leaf 01 is a single 52ch text block parked hard against the right edge. Leaf 02 is two unequal columns (61% / 31%) with a 8% gutter that is *empty on purpose*. Leaf 04 is a full-bleed wave field with one caption floated in the lower-left "negative" of the wave. Leaf 06 is a centered 38ch column but offset 9vw left of true center. The reader never settles into a pattern — that disorientation is the point: martial law is the suspension of pattern. - **The annotation margin.** A persistent ~14vw left margin runs the whole page, *mostly blank*, holding only occasional hand-typed marginalia in monospace at 11px — page numerals (LEAF 01 … LEAF 09), a date, a redaction note ("[ excised ]"), a single underlined word. It is the only thing resembling navigation. - **The seam.** Between leaves 05 and 06 the indigo table itself becomes visible for a full 60vh — a dark intermission, just a faint wave-line drawn across it and the word *戒厳令* set very large and very dim. This is the "ma" — the breath. Then the leaves resume. - **Footer = the back of the folder.** The page ends not with links and a newsletter box but with the *underside of the last sheet* — a blank cream rectangle, a single embossed-looking circular seal (SVG), and the line "this dossier is closed" in Garamond italic. No social icons, no copyright clutter, no "made with." ## Typography and Palette **Type system (Google Fonts only — garamond-classic is just 2% of the corpus):** - **Primary text & display — `EB Garamond`** (regular 400, medium 500, italic). This is the closest faithful revival of Claude Garamond's 16th-century romans available on Google Fonts: humanist axis, generous serifs, a calligraphic 'e', true old-style figures. Used for *everything that matters* — the running narrative (set at 21px / 1.62 line-height, measure capped at 52–61ch), the leaf titles (set huge: 64–112px, weight 400 only, never bold — luxury type does not shout), and the large dim 戒厳令 mark in the seam. Italic Garamond carries all asides, dates, and the closing line. Letter-spacing stays at the metal-type default (0) for body; titles get a faint −0.012em. - **Marginalia & system labels — `IBM Plex Mono`** (regular 400) — the typewriter/clerk voice. Only ever at 10–12px, only ever in the left annotation margin or as inline [ bracketed ] redaction marks. It is the bureaucratic hand annotating the Garamond — the friction between the eternal book-face and the dated stamp. - **Numerals for leaf-markers — `EB Garamond` old-style figures** at 13px tracked +0.18em, uppercase-styled "LEAF 0X". No third display face. Anti-design discipline: two families, full stop. **Palette — duotone (16% of corpus) plus two whisper-tints. Strict.** - `#15192E` — **midnight indigo**, the table, the dominant dark. Nearly black but unmistakably blue-violet under the lamp. - `#F4EFE3` — **bone / uncoated stock**, the paper. Warm off-white, never pure #fff — pure white would read as screen, not sheet. - `#1C2138` — **indigo-2**, a half-step lighter than the table, used only for the seam intermission and the deepest sheet-shadows. Keeps the duotone "two-color" honesty while adding depth. - `#9A8C6E` — **tarnished brass**, the single accent — the lamp's reflection. Used *extremely sparingly*: the hairline rules on the leaves, the embossed seal stroke, the underline beneath one marginal word per leaf. Never a button, never a link-blue. - `#7C3B34` — **dried-bloodroot**, a deep oxblood reserved for exactly two appearances: the [ excised ] redaction bars and one single full-stop-sized dot on the final seal. It is the only true "warning" color and it never raises its voice. Body text on paper is `#15192E` on `#F4EFE3`. The seam reverses it: `#F4EFE3` glyphs at 14% opacity on `#1C2138`. Contrast is high where it must be (text), velvet-soft everywhere else. ## Imagery and Motifs **No photography. No 3D. No stock anything.** Every visual is SVG, hand-built, and confined to the duotone + brass + bloodroot ramp. Two motif families only: **wave-forms (3% of corpus)** and **nature-elements (1% of corpus — among the rarest imagery tags in the entire dataset)** — used not as ornament but as the *only illustrations the dossier contains*. 1. **The wave-forms** appear as **long, low, hand-traced contour lines** — think a tide chart, a seismograph at rest, the grain of old water-stained paper, the way smoke lies flat under a low ceiling. They are drawn as multi-stroke `` bundles (5–9 nearly-parallel curves, each slightly displaced, hairline weight, brass at 30–60% opacity) that run *across* leaves, sometimes off the edge of the sheet onto the indigo table and back. On the full-bleed Leaf 04 they fill the sheet edge-to-edge as a still sea. In the seam they reduce to a single 1px brass line. They never animate aggressively — at most they *settle*, drawn once on scroll-in with a slow path-draw-svg (28% in corpus, used here at funeral pace, 2.8s ease). 2. **The nature-elements** are pressed, herbarium-style specimens — a single bowed reed, a pair of dried river-grass blades, one curled leaf, a thin spray of seed-heads — each rendered as a delicate SVG line-drawing in indigo, scaled to ~340px, and *laid on the paper at the angle a specimen would actually fall*, never centered, never paired symmetrically. They are the "nature" that outlasts the decree: grass through pavement. One specimen per text-leaf, lower corner, small. 3. **The seal** — appearing only at the very end — a circular intaglio-style SVG mark: two concentric brass rings, a ring of old-style numerals around the rim, a single wave-line through the middle, and one bloodroot dot. It looks pressed *into* the paper (inner drop-shadow trick), not printed on it. It is the closest the site comes to a "logo," and it appears exactly once. 4. **Redaction bars** — short bloodroot rectangles with very slightly ragged ends (hand-pathed, not rect), sitting over phantom words in the marginalia. Anti-design texture: the document admits it is incomplete. 5. **Paper texture** — a faint, large-scale SVG turbulence filter at ~3% opacity baked into the sheet fill so the bone stock has tooth. The indigo table gets an even fainter (~2%) cool grain. No glossy gradients anywhere. ## Prompts for Implementation Build kaigenrei.com as **one HTML page, one CSS file, one ES module** — no framework, no build step, no service worker, no analytics. The page is a slow, two-to-three-minute descent through a crooked stack of nine sheets on a dark table. **There is no CTA, no pricing block, no stat grid, no testimonial row, no feature cards, no email capture, no contact form, no FAQ accordion, no logo wall, no newsletter, no chatbot, no cookie banner.** If you feel an urge to add a "Get Started" button, that urge is the salesman the anti-design is built to exclude — delete it. **Storytelling structure (nine leaves, vertical scroll, brass-slow reveals):** 1. **Leaf 01 — The folder opens.** Black indigo. A single bone sheet slides up from the bottom with weight and a long shadow, rotated −1.6°. On it, in Garamond, just two lines: the romanized title *kaigenrei* and below, smaller italic, "戒厳令 — a declaration of martial law." Left margin types "LEAF 01" in Plex Mono, then a date, then nothing. Hold. Let the reader breathe before scrolling. 2. **Leaf 02 — What the word does.** Two unequal columns, the wide one carrying the narrative (what it means to suspend ordinary law — written as careful, literary prose, never bulleted, never "tips"), the narrow one empty save for one dried-reed specimen at its foot, rotated +12°. A bundle of wave-lines runs off the right edge of the sheet. 3. **Leaf 03 — The hours.** A single right-aligned text column. A faint timeline implied only by Garamond numerals down the left of the column (not a graphic timeline — a *typographic* one). Marginalia: one underlined brass word. 4. **Leaf 04 — The still sea.** Full-bleed sheet, edge to edge. Wave-forms fill the entire surface as a flat tide — drawn slowly on scroll-in. A single caption floated in the lower-left "trough" of the waves: one Garamond italic sentence about silence. No body text. This leaf is almost entirely image. 5. **Leaf 05 — [ excised ].** A leaf that is mostly blank paper with three bloodroot redaction bars over phantom marginal lines and one surviving fragment of Garamond text, mid-sentence, with no beginning and no end. The document admits its gaps. 6. **— THE SEAM —.** The leaves stop. 60vh of bare indigo-2 table. One 1px brass wave-line drawn across it. The mark 戒厳령 set at 18vw, weight 400, at 12% opacity, slightly left of center. Absolute quiet. (CSS: `position: relative`, dark band, the only place the page reverses to light-on-dark.) Then — 7. **Leaf 06 — Aftermath.** A narrow centered-ish column (38ch, offset 9vw left), narrative continuing in a calmer register — what is left when the decree lifts. A curled-leaf specimen low-right, rotated −7°. 8. **Leaf 07 — The grass.** Two stacked unequal text blocks with a river-grass specimen pair *between* them (the only place two specimens appear together, and even then not symmetric). Wave-lines settle along the bottom edge. 9. **Leaf 08 — A name kept.** A single short Garamond paragraph, large (28px), generous leading — a closing meditation, slow. Left margin types "LEAF 08", then "[ closing ]". 10. **Leaf 09 / Footer — The folder closes.** A blank bone rectangle. The intaglio seal (SVG), pressed-in, with its one bloodroot dot. Below, Garamond italic: "this dossier is closed." Nothing else. No links. The page ends. **Motion (ES module, IntersectionObserver-driven, deliberately undramatic):** - Each leaf: on first intersection, animate from `translateY(40px) rotate() opacity 0` to rest, over **1.4s, cubic-bezier(.16,.84,.44,1)** — a settling, not a pop. Stagger inner elements by 90ms each, max 4 steps. - Wave-form ``s: `stroke-dasharray` path-draw on scroll-in, **2.8s ease-out**, each path in the bundle offset 120ms — a tide coming in once and stopping. - Specimens: fade + 0.4° micro-rotation on scroll-in, 1.6s. - The seam mark: opacity 0 → 12% over 3s as it enters; no parallax, no scaling. - Cursor: none. No cursor-follow, no magnetic buttons, no tilt-3d, no spring overshoot. The anti-design rejects the "interactive toy" reflex. The single permitted hover: an underlined marginal word brightens its brass from 60% → 100% over 200ms. That is the entire interaction budget. - Respect `prefers-reduced-motion`: everything snaps to rest state, waves draw instantly, the dossier still reads perfectly. **Layout craft:** use CSS Grid per-leaf with *intentionally mismatched* templates leaf to leaf; rotations via per-leaf custom property `--rake`; sheet shadows via layered `box-shadow`; paper tooth via an inline SVG `feTurbulence` filter referenced from CSS; the seam as a plain dark `
`. Type-render with `font-feature-settings: "onum" 1, "liga" 1` on the Garamond. Keep the whole thing under three files. Build it like a book, not an app. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **Anti-design rendered as luxury, not as ugliness.** Anti-design sits at 2% in the aesthetic frequency analysis, and luxurious tone at 4% — pairing them is itself rare, but the *interpretation* is what's unique: most anti-design reads as brutalist clutter or ironic web-1.0. kaigenrei.com is "expensively undesigned" — thick paper, intaglio type, velvet shadow, crooked-on-purpose — closer to a Steidl photobook than to a Geocities page. No other site in the corpus treats anti-design as a luxury register. 2. **A crooked physical stack instead of a grid.** Where 88% of the corpus uses card-grid and 86% centers everything, this design's nine leaves each carry a different, hand-picked rotation and a different, mismatched column template — an anti-grid where the misalignment is the meaning (the decree suspends pattern). Layered-depth (9%) and asymmetric (46%) are common as labels; an *irregular hand-rotated overlapping sheet stack with a 60vh dark "seam" intermission* is not. 3. **The two rarest imagery tags carry the whole visual load.** nature-elements (1%) and wave-forms (3% motifs) are near the bottom of the dataset. Here they are not garnish on top of photography (98% of the corpus uses photography — this site uses none) — they are the *only* illustrations: pressed herbarium specimens laid at fallen angles, and hand-traced tide-contour bundles that run off the sheet edges. Combined with garamond-classic typography (2%) and a strict midnight-indigo/bone duotone (16%), the visual fingerprint is unlike anything else here. 4. **An interaction budget of essentially zero.** Against a corpus where parallax (96%), cursor-follow (88%), spring (86%), magnetic (82%), and stagger (79%) are near-universal, this site permits *one* hover effect and *one* slow path-draw, with no cursor-follow, no magnetic, no tilt, no spring overshoot — zoom-focus and blur-focus only conceptually, in the reverent slowness of the reveals. The restraint is the brand. **Chosen seed/style:** *aesthetic: anti-design, layout: asymmetric, typography: garamond-classic, palette: duotone, patterns: zoom-focus, imagery: nature-elements, motifs: wave-forms, tone: luxurious* **Avoided patterns from frequency analysis:** hand-drawn (96%) and glassmorphism (71%) aesthetics; photography (98%) and gradient-mesh imagery; card-grid (88%) / centered (86%) / full-bleed-as-default layouts; warm (98%) + gradient (97%) palettes; parallax (96%) / cursor-follow (88%) / spring (86%) / magnetic (82%) / stagger (79%) interaction patterns; mono (94%) and humanist (53%) as primary type; pastoral-romantic (36%) / warm-inviting (28%) tone.