# Design Language for renai.studio ## Aesthetics and Tone renai.studio — *renai* (恋愛, "romantic love") and *studio* — is **a working studio that treats love as a discipline**: something you draft, measure, annotate, revise, and pin to a wall. Where the rest of the `renai.*` family leans into surreal moonlit dreamscapes, this site does the opposite on purpose. It is **cold, bright, and ruthlessly structured** — the visual language of a Swiss design office, a typographic atelier, an architecture critique room. The premise: love is not a fog you wander through; it is a *project file* — full of false starts, redlined drafts, hairline measurements, and one or two decisions you will defend forever. The site is that project file, laid out flat on a white table under even northern light. The mood is **scholarly-intellectual, precise, quietly emotional underneath the rigour**. Inspirations: Josef Müller-Brockmann grids and Akzidenz-Grotesk; the Ulm School's instructional diagrams; Massimo Vignelli's Unimark manuals; the editorial spreads of *Émigré* and *Dot Dot Dot*; Tschichold's *Die neue Typographie*; the way an architect's working drawing is beautiful precisely because nothing on it is decorative. The emotional weight is smuggled in *through* the system, not against it — a love letter typeset as a specification sheet still says everything. The visitor should feel they have been handed a clipboard and invited to read someone's private case study on a person they could not stop thinking about. No hearts. No pink. No glow. Just black ink, white paper, a single channel of signal-red, and a grid that holds everything the way good love holds a life: visibly, structurally, on purpose. ## Layout Motifs and Structure A **visible, load-bearing modular grid** — 12 columns on desktop, hairline column rules drawn faintly in the margin gutters (0.5px, #C8C8C2) so the reader can *see* the scaffold the content sits on. The grid is not always obeyed; it is deliberately **broken** at three or four moments per page (an image bleeding two columns past its cell, a caption set rotated 90° in the margin, a paragraph that overshoots the baseline grid by exactly one line) — and each break is annotated, like a draftsman's correction. - **Section numbering as architecture.** Every section is a numbered "sheet": `01 / PREMISE`, `02 / FIELD NOTES`, `03 / REVISIONS`, `04 / SPECIFICATION`, `05 / ERRATA`. Numbers set huge, condensed, top-left of each sheet, in #E4002B. - **The clipboard hero.** First viewport: a single sheet of white, a thin red rule across the top, a project number (`renai.studio / case 14`), a date stamp, and one line of the brief set in large serif italic — the only italic on the whole site. Below it: a faint grid fading in, column by column, left to right. - **Margin as a working surface.** The left and right margins are never empty: footnote numbers, revision marks (`△ rev. 2`), measurement annotations (`↔ 64px`), and short marginalia in 10px mono live out there, the way an editor scribbles in the white space of a proof. - **Horizontal "drawing set" band.** One full-width section scrolls *sideways* through a set of "plates" — each plate a square white field containing one line-drawing diagram (see Imagery). Scroll-snap between plates; a thin progress rule at the bottom shows `plate 03 / 07`. - **Errata footer.** The page ends not with a CTA but with an `ERRATA` block: a numbered list of "things this study got wrong," set small, in two columns, like the corrections page bound into the back of a manual. No card-grid. No bento. No centered hero stack. The composition is **left-aligned, ragged-right, asymmetric, and gridded** — a manual, not a marketing page. ## Typography and Palette **Typography** (all Google Fonts): - **Display / numerals / section headers:** *Archivo Expanded* — wait, use *Archivo* at its widest weight, paired with **Anton** for the giant sheet-numbers (Anton is the condensed-poster contrast against Archivo's neutrality). Sheet numbers in Anton, 96–180px, #E4002B. - **Headlines & running heads:** *Archivo* (Black / SemiBold) — a clean grotesk standing in for Akzidenz; tight tracking, set in sentence case, never centered. - **Body & long-form "field notes":** *Newsreader* — a warm, readable serif with a true italic; this is where the emotional copy lives. The single large *italic* line in the hero is Newsreader Italic. Body 18–20px, generous leading (1.6), measure capped at ~62ch. - **Annotations, marginalia, measurements, captions, errata:** *Spline Sans Mono* — 10–12px, letter-spaced +0.04em, used for everything that behaves like a draftsman's hand-lettering on a drawing. **Palette:** - `#FAFAF7` — paper white (background; not pure #FFF — it's drafting-vellum warm-white) - `#15151A` — ink near-black (all primary text, all rules unless noted) - `#E4002B` — signal red (section numbers, revision marks, the one underline that draws on, ~3% of pixels — rationed like red ink on a proof) - `#C8C8C2` — grid grey (the hairline column rules and baseline grid) - `#6B6B63` — graphite (marginalia, captions, secondary mono text) - `#0C2340` — *one* deep navy, used **once**, for a single full-bleed "blueprint" plate where the white/black inverts to navy/cyan-line (the emotional climax sheet — the one decision defended forever) - `#9FB7C9` — pale blueprint cyan (line work on that single navy plate only) High contrast, near-monochrome, one warm-white, one red, one navy event. No gradients anywhere except the navy plate's faint vignette. ## Imagery and Motifs - **Technical line drawings, not photographs.** Every illustration is a single-weight black line diagram on white: a "exploded view" of a shared apartment with callout leaders; a "wiring diagram" of how a conversation routes from one person to another; an orthographic "plan view" of two chairs and the distance between them, dimensioned (`↔ 0.9m → 0.2m`); a "stress test" graph of a year, plotted as a jagged line with annotated peaks. Done in inline SVG so the lines can **draw themselves** on scroll. - **Grid-lines as the recurring motif** (registry frequency ~8% — claimed as the structural protagonist). Faint column rules in the gutters, a baseline grid that one paragraph deliberately violates, crop marks (⌐ ⌙) in the page corners like a print proof, registration targets (⊕) used as section dividers. - **Revision marks.** Triangles (△), carets (∧), strike-throughs, and circled numbers scattered through the body text — every one of them a real annotation pointing at a real word, never decorative. - **Stamps & date marks.** A few rubber-stamp-style elements: `DRAFT`, `KEPT`, `REVISED 14×`, set in Spline Sans Mono inside a thin rectangle, slightly rotated (1–2°), in #E4002B at low ink. - **Data-viz, hand-drawn-in-SVG.** Small honest charts: a bar of "days I checked my phone," a timeline of revisions, a single scatter plot — all rendered in the line-drawing vocabulary, axes labelled in mono, never glossy. - **No people, no hands, no hearts, no flowers, no bokeh, no gradient mesh.** If a human appears, they appear as an architect's scale figure: a flat silhouette next to a dimension line. ## Prompts for Implementation - Build it as **one long vertical "sheet set"** — full-screen sections, each a numbered sheet, scroll-paced like turning pages of a working manual. The narrative arc: `01 PREMISE` (the brief, in serif italic) → `02 FIELD NOTES` (long-form, emotional, set in Newsreader, margins full of mono annotations) → `03 REVISIONS` (the sideways-scrolling drawing set of 7 line-diagram plates) → `04 SPECIFICATION` (a "spec sheet" — two-column definition list typeset like a technical schedule, the closest thing to a feature list but rendered as deadpan specification) → `05 / SHEET A-1` (the single full-bleed navy "blueprint" plate — colour inverts, cyan line work draws itself, one sentence is the only text) → `ERRATA` (numbered corrections footer). - **Animation = drafting in real time, not motion graphics.** SVG paths `stroke-dashoffset` from hidden to drawn as each plate enters (path-draw-svg). The grid fades in **column by column**, left to right, on load. The one red underline under the hero brief draws left-to-right over ~600ms. Numbers count up where a real count exists (`REVISED 14×`). Marginalia fade in *after* the body text they annotate, with a short stagger. Everything **scroll-triggered**; nothing autoplays, nothing loops. Easing: linear or a very slight ease — this office does not bounce. - **The grid must be visible and real.** Render the column hairlines as actual elements (`#C8C8C2`, 0.5px). Snap content to it. Then break it intentionally 3–4 times and **annotate the break** with a mono note (`overshoot +24px — kept`). - Cursor: a thin crosshair (⊹) instead of an arrow inside the drawing-set section, with live `x,y` readout in mono in the corner — like a CAD viewport. No magnetic buttons, no tilt-3D cards, no parallax depth layers. - Type does the heavy lifting: huge Anton sheet-numbers in red, neutral Archivo running heads, warm Newsreader body, mono marginalia. Let whitespace and the grid be the "design"; resist adding texture, shadow, or glow. - **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids-as-decoration, hero→features→testimonials→pricing scaffolds, glassmorphism, hand-drawn doodles, warm gradient washes, dreamy fog, hearts, photography. Also avoid the surreal-dreamscape register the sibling `renai.*` sites use — this one is the cold, lucid counter-statement. ## Uniqueness Notes Differentiators from other designs in the corpus and the `renai.*` family: 1. **Anti-dreamscape renai.** Every other `renai.*` site (`.club`, `.dev`, `.moe`, `.monster`, `.day`, `.bar`) is a soft surreal moonlit dreamscape with warm jewel/burgundy palettes and Magritte/Carrington references. This one is the deliberate inverse: Swiss-grid, cold warm-white, near-monochrome, one signal-red, scholarly-intellectual — love rendered as a working drawing, not a dream. 2. **The grid is the content, not a layout convenience.** Visible 0.5px column hairlines, a baseline grid that one paragraph violates *on the record*, crop marks and registration targets as dividers, and every grid-break annotated in mono. `grid-lines` (~8% in the registry) is elevated to the design's structural protagonist rather than a background flourish. 3. **Emotion smuggled through specification.** The most personal copy is typeset as field notes and a deadpan spec sheet with mono marginalia — a love letter as a technical schedule. The single navy "blueprint plate" is the only colour event and the only emotional crescendo, set against an otherwise clinical black-on-warm-white system. 4. **No marketing scaffold at all.** Numbered "sheets" (`01/PREMISE … ERRATA`), a sideways drawing-set of line-diagram plates, a corrections footer instead of a CTA. Animation is "drafting in real time" (stroke-dashoffset path draws, column-by-column grid fade, one red underline) with linear easing — no bounce, no parallax depth, no magnetic hover, no tilt-3D. Chosen seed/style: **"swiss typography clean"** (from `seeds.json`) — extended to `aesthetic: swiss + editorial`, `layout: broken-grid + immersive-scroll (sheet set) + horizontal-scroll (drawing plates)`, `typography: condensed (Anton) + sans-grotesk (Archivo) + serif-revival (Newsreader) + mono (Spline Sans Mono)`, `palette: monochrome + high-contrast + a single midnight-blue event`, `patterns: path-draw-svg + scroll-triggered + underline-draw + counter-animate + stagger`, `imagery: line-illustration + data-viz (drawn in SVG)`, `motifs: grid-lines`, `tone: scholarly-intellectual`. Avoided patterns from the frequency analysis: hand-drawn (95%), glassmorphism (82%), warm palette (98%), gradient (94%), card-grid (91%), parallax (90%), cursor-follow (89%), spring (84%), magnetic (79%), photography imagery (98%), pastoral-romantic tone (34%) — none of these appear here. Underused vocabulary preferred: swiss aesthetic (~6%), broken-grid (12%), grid-lines motif (~8%), scholarly-intellectual tone (~8%), data-viz imagery (~6%), midnight-blue palette (~7%), line-illustration (~14%), Anton/condensed display (~3–14%).