# Design Language for ronpa.day ## Aesthetics and Tone ronpa.day is **a courtroom held inside a slab of black marble, where every sentence is put on trial and broken apart in front of you**. The Japanese word *ronpa* (論破) means "to refute completely" — to take an argument and split it down its seams until it cannot stand. The TLD *.day* frames this as a daily ritual: one statement, one rebuttal, one fracture, every day. So the site is a **single-statement tribunal** — a page that presents a claim in enormous, monumental letterforms and then, as you read and scroll, **literally cleaves, cracks, and dismantles that claim** through experimental kinetic typography. The tone is **edgy-rebellious meets scholarly-intellectual** — a debate-club firebrand who has also read all the footnotes. It is austere, confident, slightly theatrical, never cute. Think of the title cards in a Saul Bass courtroom drama, the brutal centered typography of a Vignelli transit poster, and the moment in a logic proof where you write *∴* and the room goes quiet. There is no warmth, no rounded corner, no gradient mesh, no soft glow. The only "decoration" is the violence done to the type itself: kerning that splits, baselines that shear, letters that drop out of alignment like a witness changing their story. The screen is **near-black graphite with a single bone-white text column and one accent of arterial vermilion** that appears only at the instant of refutation. ## Layout Motifs and Structure **Single-column, full-bleed, centered — but weaponized.** The frequency analysis shows full-bleed (87%), centered (81%), and single-column (16%) are all common-to-moderate; ronpa.day uses them in their most extreme **broken-grid** form (12% — preferred). The composition is a vertical "argument transcript" read top to bottom in five movements, each occupying one full viewport: 1. **THE STATEMENT** — a single declarative claim set in oversized display type, perfectly centered, perfectly aligned, occupying 70% of the viewport width. Calm. Smug. Untouched. 2. **THE EXAMINATION** — the same words, now duplicated and offset into ghost-layers; a thin vermilion crosshair-rule sweeps across them line by line as if a prosecutor is dragging a ruler under the lie. 3. **THE FRACTURE** — the baseline shears. Letters separate along a diagonal cleave-line that runs from upper-left to lower-right; the top half of the sentence stays put while the bottom half slides 1–2 ems out of register. A hairline "stress fracture" SVG path draws itself through the gap. 4. **THE COLLAPSE** — individual glyphs detach and fall, rotating, settling at the bottom of the viewport in a heap of disordered type, like evidence dropped on a table. Negative space (ma) floods the space the sentence used to occupy. 5. **THE VERDICT** — a small mono-set line in the dead center: a single word — *論破* — with a thin underline that draws left-to-right. Below it, in 11px mono, the date. Nothing else. The page ends in silence. There is **no header, no nav, no footer, no card-grid, no hero buttons, no stat blocks, no pricing**. A 2px vermilion progress-thread runs down the extreme left edge of the page, marking how far through the dismantling you've scrolled — the only persistent UI. Margins are deliberately asymmetric between movements: movement 1 is mathematically centered; by movement 4 the optical center has drifted 8% left, as if the whole document is listing under the weight of the rebuttal. ## Typography and Palette **Fonts — Google Fonts only, verified available.** - **Archivo Black** (weight 900) — *the Statement voice*. A heavy, slightly condensed grotesque by Omnibus-Type. It carries the claim in movement 1 at `clamp(2.6rem, 7.5vw, 7rem)`, `letter-spacing: -0.02em`, `line-height: 0.95`, uppercase. Monumental, immovable, the typographic equivalent of crossed arms. This is the type that gets destroyed — its weight makes the fracture feel like cracking stone. - **Spectral** (weights 300, 400, 600, italic 400) — *the Examination voice*. A screen-tuned serif by Production Type. Used for connective argumentation, sub-claims, and the brief explanatory lines between movements, set at 1.05–1.25rem with generous `line-height: 1.7`. Its sharp, lawyerly serifs feel like annotations in a margin. Italic for cited counter-evidence. - **JetBrains Mono** (weights 400, 700) — *the Verdict / instrument voice*. Carries the crosshair coordinates, the `論破` verdict mark when rendered in latinized form, the date stamp, the left-edge progress numerals, and any "logical operator" glyphs (∴, ⊢, ¬, ⇒) rendered as text. Monospace = the cold machinery of logic. Set at 0.6875rem–0.8125rem, `letter-spacing: 0.08em`, uppercase for labels. For the Japanese character 論破 itself, use **Noto Serif JP** (weight 700) — Google-hosted, ensures the kanji renders with brush-derived stroke contrast that matches Spectral's serif energy rather than a generic system fallback. **Palette (8 values).** - `#0B0B0D` — **Graphite Black**. The marble of the courtroom. Page background. Not pure #000 — there is a trace of warmth so the white type doesn't vibrate. - `#16161A` — **Slate Shadow**. The ghost-layers in the Examination movement; the heap-shadow under fallen glyphs. - `#F4F1EA` — **Bone White**. The primary type color. Slightly off-white, like aged legal paper, so it reads as *document* not *screen*. - `#C7C2B6` — **Ash Grey**. Secondary text, the Spectral connective lines, dimmed/discarded glyph fragments. - `#D7263D` — **Arterial Vermilion**. The single accent. The crosshair rule, the stress-fracture path, the verdict underline, the left-edge progress thread. Used at most on ~3% of pixels at any moment. - `#7A0E1C` — **Dried Vermilion**. The vermilion *after* the refutation — desaturated, scabbed-over. The verdict line settles into this color. - `#3A3A40` — **Iron Rule**. Hairline dividers, the 1px geometry of crosshairs when not active, fracture-line stroke before it "bleeds." - `#8C8576` — **Parchment Tint**. Faint overlay on movement-1 only — a barely-there warm wash that gets stripped away as the page darkens toward the verdict. No gradients except a single 6%-opacity vertical vignette darkening the top and bottom edges of each viewport, to focus the eye on the centered claim. ## Imagery and Motifs **No photography. No illustration. No icons. No textures. The imagery IS the typography under stress.** Frequency shows photography at 98% — ronpa.day uses zero. All visual incident is generated: - **The Cleave-Line.** A single SVG `` per fracture: a slightly jagged diagonal (4–6 angular waypoints) that draws on with `stroke-dasharray` animation, 1px Iron Rule, then "bleeds" to Arterial Vermilion over 600ms. This is the moment of refutation made visible — a hairline crack across the lie. - **The Crosshair Reticle.** In the Examination movement, a `+`-shaped reticle (two 1px Vermilion lines + a 24px open square at their intersection) glides line-by-line down the duplicated statement, JetBrains Mono coordinates ticking beside it (`L01 ⊢ —`, `L02 ¬ ✓`). Reads like a sniper scope or a proof-checker cursor. - **Glyph Debris.** When the statement collapses, each character becomes an independent absolutely-positioned element with its own falling timeline — rotation, drift, settle. They land overlapping in a low heap, Ash Grey, slightly transparent, casting Slate Shadow. Evidence on the table. - **Logical Operators as Punctuation.** ∴ ⊢ ¬ ⇒ ⊥ — sprinkled in JetBrains Mono between movements as section markers. ⊥ ("falsum" / contradiction) is the recurring signature glyph, appearing tiny in the corner of the Verdict. - **The Left-Edge Thread.** A 2px vertical line pinned to the viewport's left edge, filling Vermilion as you scroll, with a single mono numeral (`01`–`05`) that increments at each movement boundary. The page's spine. - **Optical Drift.** Not an image but a motif: the centered column subtly migrates left across the five movements (0% → −8%), and the kerning of the Statement type loosens then shatters. The "image" is the *instability* accumulating. ## Prompts for Implementation Build ronpa.day as **one HTML file, one CSS file, one JS module, one inline SVG block** for the cleave-paths and reticle. No framework, no router, no build step. Target under 50KB uncompressed. Lean on `position: sticky` per movement, `IntersectionObserver` to trigger each phase, and CSS custom properties driven by scroll progress (`--phase`, `--drift`, `--fracture`). **Document skeleton:** ```