# Design Language for ronpa.day ## Aesthetics and Tone ronpa.day is a **high-stakes argument chamber** — the digital salon of a Venetian oligarch who has wired their candlelit palazzo with neon fiber-optic veins. The visual premise: a debate society has commandeered a black-marble counting house, draped the walls in cathode-ray purple, and left one pillar of beeswax candles burning in the corner while the monitors flicker. The tension between centuries — baroque richness and terminal-screen urgency — is the site's entire personality. The tone is **opulent-grand**: every typographic choice is a gesture of authority, every transition a deliberate theatrical beat. This is not a startup landing page or a portfolio. It is the manifesto chamber of someone who has already won the argument before you arrived. The site does not explain itself. It performs. Cyberpunk here does not mean neon-on-black with rain effects. It means **infrastructure made visible** — the HUD-style status bars, the glitched data headers, the anomaly pulse that crosses the screen every forty seconds like a cosmic ray hitting a sensor array. But the infrastructure is draped in silk: the HUD elements are set in a serif typeface that feels like it was chiseled into the chrome, and the glitch effects run across content that reads like an 18th-century pamphlet. The mood is **dark-opulent**: primary ground is near-black (#0A0709) with a faint red-black undertone like dried lacquer. Accent is phosphor-gold (#C9A84C), not brass, not mustard — gold as a command-line escape sequence, as something dangerous. The third structural color is deep cinnabar (#8B1A1A), used like a wax seal: sparingly, with weight. The fourth is a cool electric violet (#5C2D8E) — a single hue that reads as both Tyrian purple and neon backlight. Text primary is #EDE0CC, a bone-ivory that suggests vellum under UV light. --- ## Layout Motifs and Structure The layout is a **command dashboard** — but a dashboard designed by someone who studied the compositional logic of Rembrandt before they studied grid systems. The page is divided into three vertical zones: **Zone 1 — The Ledger Column (left, 280px):** A fixed sidebar that functions as a status manifest. Contains the site's navigation as a series of line items with left-aligned glyphs, a live "debate status" indicator (a thin animated bar that cycles between PENDING / ACTIVE / RESOLVED), and three data readouts formatted like telemetry — three short numbers or fragments that scroll through values. The ledger column has a 1px right border in #C9A84C at 30% opacity, bleeding off the top and bottom viewport edges. **Zone 2 — The Stage (center, flexible, ~65vw minus sidebar):** The main content area. Not a card grid — a **sequential dramatic space**. Content sections are separated not by horizontal rules but by a 4px gap of absolute darkness, making each section feel like a tableau in a shadow-box theatre. The stage top begins with a title block that occupies 80vh — large, theatrical, set in the display serif with tracking opened to +6px, the text rendered in bone-ivory against the near-black ground. **Zone 3 — The Marginalia Rail (right, 180px, hidden under 1200px):** On large screens, a narrow fixed rail shows floating annotations — 4-6 lines of small italic text, like marginalia in a Renaissance manuscript, describing what is happening in Zone 2. These annotations shift position as the user scrolls, tracking the current section. They are set in 11px italic, color #C9A84C at 60% opacity. **Spatial logic:** All three zones share the same near-black ground. The visual hierarchy is purely typographic and chromatic — no card backgrounds, no rounded-corner boxes, no drop shadows. Depth is achieved through opacity and scale variation, not layering backgrounds. **Scroll behavior:** The page uses **parallax-modulated depth** within the Stage — section backgrounds shift at 0.85 viewport rate while text content shifts at standard rate, creating 3-5% of apparent parallax depth. This is subtle, not theatrical. The sidebar and marginalia rail are position:fixed. **Navigation:** None visible as a traditional nav bar. Navigation is the Ledger Column. On mobile (<768px), the Ledger Column collapses into a 44px left-edge toggle drawer. --- ## Typography and Palette **Type System (all Google Fonts, verified available):** **Display — `Playfair Display`** (wght 400–900, italic variants). The primary voice of the site. All titles, hero text, section headers. Set at 96px for the hero with letter-spacing +0.03em and word-spacing +0.05em. Used at weight 700 normally, 900 for the most loaded structural claims. The italic cut is deployed for block-level emphasis — a whole sentence in italic Playfair reads as spoken in a different register, not just stressed. This font is the candle in the cyberpunk machine: a serif that pre-dates electricity by two centuries, forced to render inside a terminal. **UI/Mono — `JetBrains Mono`** (wght 100–800). All data readouts, status labels, telemetry fragments in the Ledger Column, the "ACTIVE / PENDING" cycling indicator, timestamps. Set at 11–13px, weight 400. This is the chrome underneath the silk — the machine-language of the dashboard surfacing through the grand display type. **Body — `Lora`** (wght 400–700, italic). All flowing prose content. Set at 18px / 1.72 line-height on a 60-character measure. The serif body creates a continuous thread of readability beneath the theatrical display type. At weight 400, Lora has a warmth that suggests ink on paper rather than pixels on glass. **Accent/Labels — `Space Grotesk`** (wght 300–700). Used only for the marginalia annotations, section labels that appear in the data-rail style, and navigation items in the Ledger Column. Set at 11–12px, letter-spacing +0.08em, all-caps for labels. The geometric sans acts as the cartographic legend — it tells you what the territory is called without being the territory. **Palette:** | Role | Hex | Name | Usage | |------|-----|------|-------| | Ground | `#0A0709` | Lacquer Night | Full-bleed page background | | Bone Ivory | `#EDE0CC` | Vellum Glow | Primary text, major headlines | | Phosphor Gold | `#C9A84C` | Command Gold | Accents, borders, active states, data readouts | | Cinnabar | `#8B1A1A` | Wax Seal | Decorative emphasis, error states, key callouts | | Tyrian Violet | `#5C2D8E` | Neon Vesper | Glitch color, active animation underlays, hover states | | Smoke | `#2A1F28` | Deep Smoke | Section dividers, secondary surfaces | **Color application rules:** - Background: only `#0A0709` and `#2A1F28` — nothing lighter as a surface - Never use white (#ffffff) — ivory `#EDE0CC` is the lightest value in the system - Gold used at 100% for live/active states, 40% opacity for structural lines - Violet used only in motion — never static fills, only glitch-frames and hover transitions --- ## Imagery and Motifs **Imagery is glitch-art — exclusively.** The frequency report shows glitch-art at only 2% across the corpus. ronpa.day leans into this with precision: There are four visual panels on the site. Each is a glitch-treated photographic fragment — not a full photograph, but a **cropped strip** (16:3 aspect ratio, full-width) that behaves like a data-corruption artifact displayed in a scientific visualizer. The technique: 1. **Panel 1 — The Opening Tear:** A glitch-composite of a baroque candlelight painting (Caravaggio-style chiaroscuro) crossed with a CRT scan-line pattern. The scan-lines drift: every 8 seconds, 3–5 adjacent rows shift +12px horizontally for 80ms then snap back, as if the data is unstable. The color channels are split: the red channel sits +2px right, the blue channel sits -2px left, producing persistent chromatic aberration at edges. The image is desaturated to 40% then tinted with the Lacquer Night background to integrate it visually. 2. **Panel 2 — The Data Burn:** A glitched fragment showing text that has been corrupted — characters replaced with box-drawing symbols, lines misaligned. This is a deliberately constructed image that mimics a terminal buffer overflow on a screen showing a historical document. Pure graphic design, no stock photography. Created from the CSS: a `
` with multiple layers of `clip-path` animation, `mix-blend-mode: screen`, and a pseudo-random character-swap animation that triggers on scroll-entry. 3. **Panel 3 — The Candle Signal:** A single candle flame rendered in phosphor-gold SVG, with animated SVG path variation that makes the flame tip waver at 0.3Hz (natural candle frequency). The flame has a color-bleed: at the tip, the gold dissolves into violet via `feGaussianBlur` in an SVG filter. On hover, the glitch trigger fires — the flame splits into 3 channel-separated copies for 200ms. 4. **Panel 4 — The Judgment Panel:** A full-width strip that is a mosaic of text fragments — argument propositions, 6–8 words each, laid out in a broken-grid arrangement and rendered as if photographed on a physical corkboard that has been digitized with scan artifacts. Color: bone ivory text on near-black cards, each card at a slight tilt (±2°), with a violet drop-glow. **Candle-Atmospheric Motif:** The site's persistent atmospheric element is **candlelight breathing** — not a literal candle animation on screen, but a slow opacity pulse on the page background. The near-black ground cycles between `#0A0709` (0% brightness) and `#0F0A0D` (+3% brightness) on a 4-second sinusoidal curve. This is imperceptible as a conscious element but creates the subliminal sense that the room is lit by something that breathes. It is the atmospheric ghost of the candle motif — the glow without the source. Additionally, in the Marginalia Rail, a thin vertical line of `#C9A84C` at 15% opacity pulses with the same 4-second rhythm, creating the impression of a single candle flame's light traveling across a stone wall. --- ## Prompts for Implementation **The site is a single-page debate chamber** — the content is the argument for ronpa.day's existence, delivered as a sequence of claims, evidence, and rebuttals. There are no links to other pages. The entire experience is one vertical scroll from opening statement to verdict. **Structural anatomy (top to bottom):** 1. **The Title Tableau (100vh):** Full-viewport opening. Background `#0A0709`. Center of the Stage: the site name rendered in Playfair Display 900 at 96px (desktop), bone ivory, with the letter-spacing animation — on page load, letters expand from 0em tracking to +0.03em over 1.2s with an ease-out. Below the title, a subtitle in Space Grotesk 12px all-caps, letter-spacing +0.1em: `A DAILY ARGUMENT`. Beneath that, JetBrains Mono 11px in gold: `SESSION OPEN · [current date] · DOCKET 001`. The Ledger Column is visible and active from this first tableau. 2. **The First Claim (80vh):** Large-type block. Playfair Display italic at 48px, maximum 4 lines, bone ivory. The claim is a declarative statement about the site's domain (debate, argument, reason). On scroll-enter, the text appears via a mask animation — the text is pre-rendered but hidden behind a clipping mask that slides up from the baseline at 800ms per line. 3. **The Evidence Strip (Panel 1 glitch image, full-width):** The 16:3 ratio glitch panel, full Stage width. Below it, a 2-column inset in body Lora at 18px — left column a paragraph of supporting text, right column a counter-argument in italic. These columns have no separating element except 40px of empty space. 4. **The Data Manifest:** A table-like structure rendered in JetBrains Mono — 3 columns of fragments (not real data, but logically structured fragments about the argument) separated by thin 1px gold lines. Each row is 48px tall. On hover, the row background fills to `#5C2D8E` at 12% opacity and the row shifts 4px up — this is the **hover-lift** pattern, implemented as `transform: translateY(-4px)` with `transition: 200ms ease-out`. This is the primary hover-lift implementation. 5. **Panel 2 (Data Burn) and Panel 3 (Candle Signal):** The two CSS-generated visual panels, full Stage width, 160px tall each with 60px gap between them. 6. **The Rebuttal Column:** Single-column body text in Lora, 60-character measure, bone ivory, 18px / 1.72. This is the longest text block on the page — 400–600 words. Set against the near-black ground with no border, no card, no visual container. The text itself is the container. 7. **The Judgment Panel (Panel 4):** Full-width, the mosaic of argument fragments. On scroll-enter, individual cards animate in via `transform: translateY(20px) rotate(var(--tilt))` to final position — staggered by 60ms per card. 8. **The Verdict Tableau (60vh):** Closing tableau. Large Playfair Display 900 text: the verdict word, 120px, centered in the Stage. Below it, JetBrains Mono: `SESSION CLOSED · DOCKET 001`. The Marginalia Rail annotation for this section reads: *"The argument is complete. Whether you agree is not the point."* **Animation contracts:** - **Glitch trigger:** `@keyframes glitch-shift` fires on hover for all glitch panels. Duration 180ms, 3 frames: frame 1 channel-separates (red +3px, blue -3px), frame 2 collapses, frame 3 normal. Uses CSS `filter: hue-rotate()` and `transform: translateX()` on pseudo-elements. - **Hover-lift:** All interactive elements use `transform: translateY(-4px)` on hover, 200ms ease-out. This applies to nav items in the Ledger Column, rows in the Data Manifest, and the Judgment Panel cards. - **Ledger status pulse:** The ACTIVE/PENDING indicator in the Ledger Column cycles via a `setInterval` that replaces text content every 3.5s. The transition is: fade-out over 300ms, text swap, fade-in over 300ms. Uses JetBrains Mono, gold color. - **Candle breathe:** `@keyframes candle-breathe` on `:root` — adjusts a CSS custom property `--bg-luminance` between 0% and 3% over 4s sinusoidal. Applied as a `box-shadow: inset 0 0 400px rgba(201,168,76, var(--bg-luminance))` on the body — this creates the barely-perceptible warming glow. **AVOID:** - CTA buttons with rounded corners and fill colors - White backgrounds anywhere - Pricing tables or feature grids - Sans-serif as the dominant voice (Playfair Display must dominate) - Particle.js or generic particle effects - Any animation faster than 180ms (the site is deliberate, not frenetic) --- ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic = **cyberpunk**, layout = **dashboard**, typography = **playfair-elegant**, palette = **high-contrast**, patterns = **hover-lift**, imagery = **glitch-art**, motifs = **candle-atmospheric**, tone = **opulent-grand**. **Differentiators from the corpus:** 1. **Serif dominance in a cyberpunk aesthetic.** The corpus shows cyberpunk almost exclusively paired with geometric sans or mono typefaces. ronpa.day inverts this: Playfair Display (a classical newspaper-heading serif from 1800s optical tradition) is the primary voice. The dissonance — baroque letterforms carrying cyberpunk content — is the site's central visual argument. No other site in the corpus uses playfair-elegant (3%) paired with cyberpunk aesthetic. 2. **Candlelight as a technical specification.** The candle-atmospheric motif (3% in corpus) is usually implemented as a visual decoration — a candle icon, a warm-tone color scheme. Here it is implemented as a **breathing function**: a 4-second sinusoidal luminance oscillation on the page background, calibrated to match actual beeswax candle flicker frequency. The candle is not shown; it is felt as ambient light variation. This is the rarest form of motif implementation in the corpus. 3. **Glitch-art as generated CSS, not photography.** The 2% glitch-art imagery in the corpus is almost always photographic — stock images with glitch filters applied. ronpa.day's glitch panels are constructed from CSS layers, SVG filters, and JavaScript character-swap — the glitch is native to the medium, not imported from photography. This makes the glitch semantically coherent with the cyberpunk-terminal aesthetic. 4. **Tripartite dashboard without cards.** Dashboard layouts in the corpus use card-based information containers with background fills, borders, and box-shadows. ronpa.day's dashboard uses three zones with no card surfaces — depth is purely typographic and chromatic. This subverts the expected dashboard vocabulary while preserving the dashboard's spatial logic. 5. **Avoided patterns from frequency analysis:** full-bleed single-column (overused), warm-gradient palette (89% of corpus uses warm, ronpa.day uses cool-dark with gold accents only), nature/circuit motifs (most overused at 14% and 13% — ronpa.day uses neither).