# Design Language for renai.works ## Aesthetics and Tone renai.works (恋愛 — *renai*, "romantic love") is treated as **the technical archive of a love that was engineered rather than fallen into**. The conceit: somewhere there exists an *atelier of attachment* — a quiet workshop where the mechanics of becoming-entangled-with-another-person are drafted, prototyped, stress-tested, and filed. The `.works` TLD is taken at face value: this is **a body of works**, a portfolio of romance as if romance were a discipline of making — joinery, hydraulics, cartography, letterpress. The aesthetic is **avant-garde** in the strict sense — the frequency analysis puts `avant-garde` at 2%, so the corpus is wide open here. It means: deliberate compositional violence, type that behaves like a moving part, blank space used as a structural beam, and a refusal of the soft-warm-gradient-pastoral mode that 98% of the archive defaults to. But the *content* is tender. The tension the whole site lives inside is **clinical surface, aching interior** — engineering drawings of the heart, drafted in a steady hand by someone who is clearly not steady at all. Mood references: the marginalia in a 1950s shipwright's manual; Eva Hesse's process notes; the patent diagram for the safety pin; a love letter written on graph paper because that was the only paper in the house; the way an architect dreams in section views. Nothing here glows. Things are **inked, scored, and pinned**. The page should feel like it could be folded along its visible crease lines and mailed. Tone register: **dreamy-ethereal** (7% in corpus) carried *underneath* a surface that reads as `scholarly-intellectual` — the dreaminess leaks through the seams, never sits on top. ## Layout Motifs and Structure The governing layout is a **broken grid drafted as a technical sheet** — `broken-grid` sits at 12%, and almost nobody pairs it with this register. The page is built like an oversized **drafting table**, A1 landscape proportions even on a phone (the mobile view becomes a *folded* drafting sheet — you scroll past the fold lines). Structural rules: - **A persistent title-block in the bottom-right corner.** Like every engineering drawing, the page carries a title-block: `WORK NO. ◊ / SHEET ◊ OF ◊ / DRAWN BY: — / SCALE: 1:1 (LIFE-SIZE) / REV. ◊`. It updates as you scroll — the sheet number ticks, the "drawn by" field stays a bare em-dash, the scale is *always* 1:1 because feelings do not scale down. This block is fixed, hairline-ruled, ~280px wide. - **Visible registration marks** at all four corners — the crop-mark crosshair (`+` inside a thin circle), 24px, in faded graphite. They never move. They imply the page is a *plate* about to be printed. - **The column structure is a 12-unit modular grid that is then deliberately fractured** — content blocks span 7+4, 3+9, 5+5+2, never the polite 6+6. Gutters are wide (≥64px desktop) and *ruled* — a 0.5px graphite line runs down each gutter like a fold mark, with tiny tick marks every 8mm equivalent. - **Section transitions are "revision clouds"** — that lumpy hand-drawn cloud outline engineers use to flag a changed area. Each new section is wrapped, on first scroll into view, by an SVG revision cloud that draws itself (`path-draw-svg`, used heavily in corpus at 45% — here it's used *literally* as a drafting convention, not decoratively). - **One full-bleed "exploded view" per page** — a single hero composition where a stylized object (a hinge, a knot, a folded paper crane, a key) floats apart into its component pieces, each labeled with a leader line pointing to a fragment of text. This is the emotional centerpiece: love, exploded into parts, annotated. - **No nav bar in the conventional sense.** Navigation is a **drawing index** pinned to the left margin — `001 · FIRST CONTACT`, `002 · TOLERANCES`, `003 · LOAD-BEARING`, `004 · MAINTENANCE`, `005 · DECOMMISSION` — set like a sheet manifest, vertical, hairline-ruled, current entry marked with a small filled square. ## Typography and Palette **Typefaces (Google Fonts only):** - **Spectral** — the body and the emotional voice. A serif with quiet warmth and a slightly literary cut; used at weights 300 and 400, generous leading (1.75). Long passages — the actual love-text — are set in Spectral, ragged-right, never justified. This is the "interior." - **Archivo Expanded** (the expanded optical width of Archivo, a variable family) — the **clinical surface**: all the drafting labels, the title-block, the drawing index, the leader-line callouts. Set in UPPERCASE, weight 500–600, tracked +120 to +200, *small* (10–13px). It should read like rub-down Letraset on a vellum sheet. This is the `expressive-variable` axis use — width is the expressive parameter, not weight. - **Fraunces** — for the three or four oversized display moments only: the page's single huge word per section (e.g. **TOLERANCES** rendered at 14vw), set in Fraunces at its highest optical-size axis, light weight, with the "soft" axis turned up so the serifs almost melt — display type that looks *engraved but tired*. - Numerals everywhere prefer **tabular lining figures** (drafting sheets are full of dimensions). **Palette — graphite, vellum, and a wound:** - `#1C1B1A` — **drafting graphite**. Near-black, warm-leaning. Primary ink. All hairlines, all clinical type. - `#F4EEE2` — **vellum**. The page ground. Not white — the colour of aged tracing paper held to a window. - `#E8DECB` — **second vellum / fold shadow**. Used for the reverse side of folds, the title-block fill, faint panel grounds. - `#6E1423` — **oxblood** — the deep-burgundy register (corpus 3%). Used *sparingly and only for the emotional layer*: the drawn-in revision clouds, the leader lines that point at love-text, the filled square in the index, hand-underlines under the tenderest sentences. It is the colour of the ink the draughtsman switched to when they stopped pretending. - `#9A8F76` — **faded pencil** — for registration marks, secondary tick marks, the dimension lines that aren't load-bearing. - `#3B4A3E` — **drafting-cloth green** (a whisper of `forest-green`, corpus 5%) — used once or twice as the colour of a "approved" stamp, the linen-backing edge. A cool counterweight so the oxblood doesn't drift sentimental. Contrast is high (graphite on vellum), but never pure black on pure white — everything is one half-step warm and tired. ## Imagery and Motifs Primary imagery mode: **line-illustration as engineering drawing** (`line-illustration` at 15%) — *no photography at all* (a deliberate break: photography is at 98%). Everything illustrative is a 0.5–1px ink line on vellum. The custom motif set — a **catalogue of "love-mechanisms"**, each drawn in plan/section/exploded views like a real parts catalogue: - **The mortise-and-tenon joint** — labeled "FIRST CONTACT — interference fit, no glue." - **The knot diagram** — a bowline drawn step-by-step, "TOLERANCES — holds under load, unties when you need it to." - **The hinge, exploded** — leaf, knuckle, pin — "LOAD-BEARING — the pin is the part nobody sees." - **The paper-fold crease pattern** — a Miura fold or crane, dotted mountain/valley lines — "MAINTENANCE — folds the same way every time, until it doesn't." - **The key & ward** — a warded key and its lock profile — "ACCESS — cut once, to a pattern only one door knows." - **A pressure gauge** with a hand-drawn needle and a small annotation "(reading is subjective)." - **A weld symbol**, a **dimension line with the measurement smudged out and re-written by hand**, a **"DETAIL A" callout circle** that, when you hover/scroll to it, zooms to reveal a single handwritten sentence. Recurring decorative grammar: **leader lines** (the thin line + dot + 30° elbow that points from a label to a thing) used as the connective tissue of the whole layout; **revision clouds**; **fold-line creases**; **registration crosshairs**; **a faded approval stamp** ("DRAWN IN GOOD FAITH — DATE: ————"). One small constant: a **graphite thumbprint** smudge in a corner of every section — the only un-ruled, un-clinical mark, evidence of the hand. ## Prompts for Implementation Build as a **single static HTML document**, one CSS file, a small vanilla-JS file for scroll and draw behaviours. Target ≤70KB before fonts. No SPA, no framework. Google Fonts: Spectral, Archivo (with width axis), Fraunces. **The storytelling spine — a drawing set, read sheet by sheet:** The page *is* a set of engineering drawings for a single relationship, presented as sheets 001 through 005. The visitor scrolls down through the set. Each "sheet" is a full viewport-plus section with the drafting grid, a big Fraunces title-word, a clinical Archivo header block, an ink line-drawing of that section's love-mechanism, and a column of Spectral body text that is the *actual writing* — short, plain, unbearably specific. The clinical scaffolding holds the writing the way a frame holds a painting it cannot understand. - **001 · FIRST CONTACT** — the mortise-and-tenon. Text about the first time. The exploded-view hero lives here: the joint floats apart, leader lines tagging each face with a fragment. - **002 · TOLERANCES** — the knot. What the relationship can take. Dimension lines, one of them smudged and re-drawn. - **003 · LOAD-BEARING** — the hinge. The invisible pin. The oxblood is used most here. - **004 · MAINTENANCE** — the fold pattern. Routine, repetition, the day it didn't fold right. - **005 · DECOMMISSION** — a single sheet, almost empty, an "approved for removal" stamp, a lot of vellum, the title-block's REV. field finally filled in. End on negative space and one handwritten line. **Animation & interaction (restrained, mechanical, never bouncy):** - **Revision clouds and leader lines draw themselves** via `stroke-dashoffset` on scroll-into-view (`path-draw-svg` used literally). Easing: linear or a very slight ease — these are *mechanical* draws, not springy. ~600–900ms. - **The title-block updates** on scroll: sheet number, section name, a hairline progress notch. `IntersectionObserver`, no scrubbing libraries. - **"DETAIL A" callout circles**: on hover (or on scroll-center on mobile) the circle's contents crossfade from a tiny illustration fragment to a handwritten sentence — a slow `blur-focus` (corpus 10%), 400ms, 6px→0 blur. - **Fold-line behaviour on mobile**: as you scroll past each ruled fold line, the section above it tilts ~1.5° in perspective and the `#E8DECB` "underside" colour briefly shows — the page literally unfolds. Subtle. `perspective` + `rotateX`, driven by scroll position, capped. - **The graphite thumbprint** fades in last in each section, ~1.2s, opacity to 0.5 — the human arriving after the machine. - **Cursor**: a faint crosshair reticle (two 16px hairlines + a 1px center gap) follows the pointer with a *slight* lag — `cursor-follow` (corpus 88%, so do it differently): no blob, no glow, just a draughtsman's sight. Hide entirely on touch. - **Type micro-behaviour**: hovering a clinical Archivo label nudges its width axis from expanded toward extra-expanded over 250ms — the label "stretches to be read." Hovering an oxblood-underlined sentence draws the underline left-to-right (`underline-draw`, used literally as a hand passing under the words). - Respect `prefers-reduced-motion`: all draws appear instantly, no fold-tilt, thumbprint static. **AVOID:** CTA buttons, pricing tiers, stat counters, testimonial carousels, signup forms, gradient meshes, photography, glassmorphism, pastel warmth, hero-with-two-buttons. There is nothing to buy here. It is a set of drawings of something that already happened. ## Uniqueness Notes Differentiators this design commits to — other CMassC sites should not duplicate these: 1. **Love rendered as an engineering drawing set.** The entire site is structured as numbered technical sheets (001–005) with a persistent drafting title-block, registration crosshairs, revision clouds, leader lines and dimension callouts — the visual grammar of a parts catalogue applied to romantic attachment. No other site in the corpus uses the "technical drawing / drafting sheet" frame, and pairing it with tender first-person writing is the whole point. 2. **Zero photography in a 98%-photography archive, and `avant-garde` (2%) as the controlling aesthetic** — deliberate compositional fracture, a 12-unit grid broken on purpose (7+4, 3+9 never 6+6), `expressive-variable` typography where the *width* axis (Archivo Expanded) is the expressive parameter rather than weight. 3. **Palette of graphite + vellum + oxblood + drafting-cloth-green** (`#1C1B1A` / `#F4EEE2` / `#6E1423` / `#3B4A3E`) — a high-contrast warm-tired ink-on-tracing-paper scheme that explicitly rejects the warm-gradient-pastoral default; oxblood is rationed strictly to the "emotional layer" (hand-drawn revision clouds, leader lines to love-text, the tenderest underlines). 4. **Corpus-frequency-aware re-use of common patterns, used *literally* instead of decoratively**: `path-draw-svg` (45%) becomes the act of drafting a revision cloud; `cursor-follow` (88%) becomes a draughtsman's crosshair reticle with lag, not a glowing blob; `underline-draw` (17%) becomes a hand passing under a sentence; `blur-focus` (10%) becomes a "DETAIL A" callout resolving from drawing to handwriting. 5. **The "unfold" mobile experience** — the phone view is a *folded* A1 drafting sheet; scrolling past visible fold-lines tilts each section in perspective and flashes the paper's underside colour. The page physically opens up as you read. Chosen seed / style: **experimental type layout** — realized as `aesthetic: avant-garde, layout: broken-grid, typography: expressive-variable, palette: deep-burgundy, patterns: path-draw-svg, imagery: line-illustration, motifs: sharp-angles, tone: dreamy-ethereal`. Avoided patterns from frequency analysis: hand-drawn aesthetic (95%), glassmorphism (82%), photography imagery (98%), warm palette (98%), gradient palette (94%), card-grid (91%), full-bleed-as-default (87%), centered (82%), parallax (90%), spring (84%), magnetic (79%), pastoral-romantic tone (34%) — none of these drive this design; where common patterns appear they are re-purposed as literal drafting conventions.