# Design Language for imouto.quest ## Aesthetics and Tone imouto.quest is a **generative kanji-stroke atelier** — a single, quiet, full-screen canvas where the word *imouto* (妹, "younger sister") is treated not as a character but as a **growth algorithm**. The site behaves like a botanist's specimen drawer crossed with a generative-art notebook: every visit, a deterministic-but-seeded system re-grows the same family of forms — branching strokes, radial sister-nodes, Spirograph-like orbit lines — from a hash of the day's date, so the page is *recognizably itself* yet never pixel-identical twice. The mood is **minimal to the point of austerity, then punctured by sudden dopamine**. Ninety percent of the surface is bone-white paper with a single hairline ruling; the remaining ten percent detonates in electric chartreuse, hot magenta, and ultraviolet — the colour of a highlighter pen left on a desk in full sun. There is no hero headline shouting a value proposition, no testimonial carousel, no "Get Started" button. The visitor is dropped into the *middle* of a slowly-drawing system and invited to scroll, which advances a generative narrative the way turning the crank on a music box advances a tune. The tone of any text on the page is **terse, lower-case, lab-notebook**: short declaratives, no marketing adjectives, occasional Japanese reading-glosses set as furigana. Think of the curatorial card next to a kinetic sculpture — it tells you the materials and the rule, then gets out of the way. The cultural register is *ma* (間, the charged interval), *kawaii* restrained to a single gesture, and the generative-design lineage of Vera Molnár and Bauhaus preliminary-course studies. The "younger sister" theme is rendered structurally — every form on the page is derived from, smaller than, and orbiting a parent form — rather than illustratively. No cartoon characters, no moe tropes; the *imouto* is a topological relationship, not a mascot. ## Layout Motifs and Structure The page is one continuous vertical scroll built on a **deliberately asymmetric column system** — never centred, never a tidy 12-column grid. The structural metaphor is a **field notebook turned on its side**: a wide left margin of raw paper, a narrow off-centre "spine" rule at the 38.2% line (the golden section, used as a literal drawn line, not a hidden proportion), and a generous right field where the generative artwork breathes. **Grid spec.** - Reference frames: 1440 × 1024 desktop, 834 × 1112 tablet, 390 × 844 mobile. - Master grid: 9 columns, but content is *never* symmetrically placed — text blocks snap to columns 2–4 or 6–8, never 4–6. Column gutter 28px desktop, 18px mobile. Outer margin: 7vw left, 4vw right (intentionally unequal). - The 38.2% spine: a 1px line of `--spine` running the full document height, fixed in the background layer. All section headers hang off it like luggage tags off a string. - Vertical rhythm: a 12px baseline grid; section breaks are multiples of 96px of empty paper — the *ma*. Whitespace is a first-class material, not leftover. **Section sequence (one scroll, no nav menu).** 1. **Origin** — a single seed-glyph (the 妹 radical 女, "woman", reduced to three strokes) draws itself in the right field over ~3.5s while the left margin holds one line: `imouto.quest — a younger form, growing.` 2. **The Rule** — the generative ruleset stated in five lower-case lines, each line revealing as it enters the viewport (scroll-triggered), with a live miniature of the algorithm running beside it. 3. **The Family** — the centrepiece: a tall (200vh) generative composition where the parent glyph spawns 5–9 *imouto* nodes, each a scaled-down rotated copy, connected by Spirograph orbit lines. Scroll position drives the growth parameter `t` from 0→1; scrolling up regrows it backward. 4. **Specimens** — three asymmetrically-placed "drawer cards", each a fixed frozen frame of the system at a different seed, captioned like museum specimens (date-seed, stroke count, node count). 5. **Colophon** — the generative seed of *today*, the type stack, the palette swatches as hand-drawn-looking rectangles, and a single line of credit. No footer links farm, no social row. Mobile collapses to a single off-centre column (still asymmetric — 60% width, pushed left) with the spine becoming a left-edge rule; the 200vh generative section becomes 280vh to keep the growth legible at narrow width. ## Typography and Palette **Type stack — Google Fonts only.** - **Frutiger-clean role → "Inter" (variable, weights 300/400/600).** Inter is the workhorse: humanist, neutral, slightly cool — the "Frutiger of the screen". Used for all body text (16px desktop / 15px mobile, line-height 1.6, weight 400), the lab-notebook captions (13px, weight 400, letter-spacing 0.01em), and the small specimen metadata (11px, weight 600, letter-spacing 0.08em, uppercase). Tracking on body kept tight (-0.006em) for that calm Swiss-screen feel. - **"Zen Kaku Gothic New" (weights 400/500)** — for the Japanese glyphs, furigana glosses, and the single large display word *妹*. A clean geometric-leaning Japanese sans that pairs naturally with Inter; furigana set at 0.55em above its parent, weight 400, in `--ink-soft`. - **"Space Grotesk" (weight 400)** — used *only* for the numerals in seed-hashes, stroke-counts, and the `t = 0.000 → 1.000` growth read-out that floats in the right margin during the centrepiece scroll. Its slightly mechanical figures read like an instrument panel against Inter's calm. - The big display moment: the word **妹** set in Zen Kaku Gothic New at 240px desktop / 96px mobile, weight 500, in `--ink-bold`, with the three component strokes individually animatable (each is an inline SVG path). It appears exactly once, in the Origin section. No italics anywhere (the lab-notebook doesn't italicise). No font heavier than 600. Headings are *not* big — section titles are 14px, weight 600, uppercase, letter-spacing 0.16em, hung off the spine like tags. The hierarchy comes from position and whitespace, not size. **Palette — "dopamine-neon over bone".** - `--paper` `#F7F5EF` — warm bone-white, the dominant 88% of the surface. Faint paper, never pure #FFF. - `--ink-bold` `#14131A` — near-black ink with a violet undertone; all primary glyphs and the 妹 display. - `--ink-soft` `#6E6B7B` — muted grey-violet; captions, furigana, secondary text. - `--spine` `#C8C4D6` — pale lavender-grey; the 38.2% rule and the baseline hints. - `--neon-lime` `#C8FF00` — electric chartreuse; the *primary* generative-stroke colour and the active scroll indicator. - `--neon-magenta` `#FF1E8E` — hot magenta; the *imouto* sister-nodes (the smaller, orbiting forms). - `--neon-violet` `#7A2BFF` — ultraviolet; the Spirograph orbit lines and link-hover states. - `--neon-cyan` `#00E5FF` — supporting electric cyan; used sparingly for the live-miniature algorithm preview only. Rule of restraint: at any given scroll position, at most **two** neons are visible simultaneously; the system cross-fades between pairs as `t` advances, so the page moves through a controlled dopamine spectrum rather than blasting all four at once. Neon is *never* used for text the visitor must read — only for generated line-work. ## Imagery and Motifs The entire visual payload is **line-illustration** (5% of corpus) generated live — no raster photography, no stock, no 3D renders. Everything drawable is an SVG path or a `` stroke, 1px–2.5px weight, flat colour, no gradients on the strokes themselves (gradients live only in the paper's faint vignette). **The generative system (the actual artwork).** - **Seed.** `seed = hash("imouto.quest" + YYYY-MM-DD)`. Deterministic per day. A "shuffle" affordance (a tiny dotted square in the colophon) lets the visitor re-roll the seed locally for the session. - **Parent stroke.** The 女 radical reduced to three Bézier strokes, drawn with a hand-tuned "brush" function (variable width along the path, slight start/end taper) so it reads as *drawn*, not *plotted*. - **Imouto nodes.** From the parent, 5–9 child glyphs are spawned: each is the parent path scaled to 0.34–0.62×, rotated by a golden-angle increment (137.5° × index), and offset along a curve. Each child can itself spawn one grandchild at depth 2 — the *family* is literally recursive, and the recursion depth is the "younger-sister" metaphor made structural. - **Orbit lines.** Spirograph-style hypotrochoid curves connect parent→child centres, drawn in `--neon-violet` at 1px, opacity 0.5. The number of cusps is derived from the seed. - **Cultural motif (5% of corpus, deliberately chosen).** Two recurring cultural references, both abstracted: (a) *mon* (家紋, Japanese family crests) — the parent+children composition is framed, when frozen as a specimen, inside an implied circular *mon* boundary; (b) *kireji*-like punctuation — small lime tick-marks (the typographic 〆 / 、 shapes, reduced to strokes) mark the start of each generative pass, like cut-marks in a haiku. No literal flags, no kimono clip-art. - **Decorative grid.** The 9-column grid and 12px baseline are *shown* in `--spine` at 6% alpha for the first 1200ms of page load, then fade — a Bauhaus-preliminary-course gesture: show the structure so it can be forgotten. **Iconography.** There are essentially no icons. The "shuffle" affordance is a 3×3 dotted square; the scroll indicator is a single lime vertical hairline that fills as `t→1`. That is the entire UI chrome. ## Prompts for Implementation Build imouto.quest as **one `index.html`, one `style.css`, one `app.js` ES module** — no framework, no router, no build step, no service worker. Target bundle under 60KB uncompressed; all artwork is generated at runtime, so there are no image assets at all. Font files loaded from Google Fonts CDN with `display=swap`. **Document structure.** ```
``` **Animation & interaction — emphasise the generative narrative, not UI flourishes.** - **Scroll IS the timeline.** Map document scroll progress across `#family` to `t ∈ [0,1]`. At `t=0` only the parent stroke exists; as `t` rises, children spawn one at a time (each with a 400ms self-drawing stroke-dash animation), then orbit lines draw, then a grandchild generation appears near `t=0.85`. Scrolling *up* runs it in reverse — children retract, strokes un-draw. This is the core "storytelling" beat: the family grows and ungrows under the reader's hand. - **Scroll-triggered reveals (the chosen pattern, 20% of corpus).** Every text line in `#rule` and every specimen card uses an IntersectionObserver to trigger a single, calm transition: 600ms, `cubic-bezier(0.22, 1, 0.36, 1)`, 12px upward translate + opacity 0→1. No bounce, no stagger storms — one element, one move, then still. - **The Origin stroke.** On load, the 妹 display word's three SVG paths animate via `stroke-dashoffset` over 3.5s, ease-out, drawn in `--ink-bold`; once complete, a single `--neon-lime` tick appears at the final stroke's terminus and pulses once. - **Live mini-algorithm.** In `#rule`, a 240×240 `` runs a tiny continuous version of the generator at ~30fps (cyan strokes on transparent), `requestAnimationFrame`, paused when offscreen — so the visitor sees the *rule* breathing while reading its description. - **Colour cross-fade.** As `t` advances through `#family`, interpolate the active stroke palette between neon pairs (lime↔magenta, then magenta↔violet) using HSL lerp on the canvas stroke styles. Two neons max on screen. - **Shuffle affordance.** Clicking the dotted square in the colophon re-seeds `Math` PRNG (a small mulberry32) and triggers a 1s "regrow" of the whole composition. Hover state: the square's dots turn `--neon-violet`. - **Reduced motion.** If `prefers-reduced-motion`, render the *final* state of every generative section immediately (full family at `t=1`), keep scroll position decoupled from `t`, and disable the live canvas (show one frozen frame). **Performance / craft notes.** Use one `` for `#family` sized to `devicePixelRatio`; everything else (Origin glyph, specimens) is inline SVG so it stays crisp and inspectable. Debounce the scroll→`t` mapping with `requestAnimationFrame`. The PRNG must be deterministic given the seed so the daily composition is stable across reloads within a day. **AVOID:** no CTA buttons, no pricing tables, no stat-grids ("10,000+ sisters generated!"), no testimonial carousel, no newsletter modal, no cookie-banner theatrics, no logo wall, no navbar, no hamburger menu. The page sells nothing and explains itself in five lines. If a section feels like a landing-page module, delete it. ## Uniqueness Notes Deliberate departures from the 260 designs already in the registry and from the common reading of this seed: 1. **"imouto" rendered as recursion, not as a character.** Every anime/imouto-adjacent site in the wild reaches for a mascot, a moe palette, or a dating-sim frame. This design refuses representation entirely: the "younger sister" is a *topological fact* — every form is a scaled, rotated, lesser child of a parent form, recursively. The theme is in the algorithm's shape, not in any picture. 2. **Generative aesthetic used minimally, not maximally.** Generative appears in 13% of the corpus, almost always as a *busy* full-bleed particle/mesh spectacle. Here it is the opposite: a generative system displayed inside a near-empty Swiss notebook, where 88% of the surface is bone-white paper and the algorithm occupies a single asymmetric field. Generative-as-restraint. 3. **Frutiger-clean (Inter) paired with Japanese typographic structure, no Frutiger-Aero kitsch.** Frutiger-clean is 5% of the corpus; most uses drift toward glossy Aero gradients and 3D bubbles. This design keeps Inter flat, cool, lab-notebook — and pairs it with Zen Kaku Gothic New furigana and *kireji*-shaped tick-marks, a combination not present elsewhere in the registry. 4. **Dopamine-neon as a controlled spectrum, not a blast.** Dopamine-neon is 10% of the corpus and is almost always all-at-once saturated chaos. Here at most two neons are visible at any scroll position, cross-fading as `t` advances; neon is forbidden on readable text and used only for generated line-work over paper — a quiet page that *flashes*, never one that screams. 5. **Asymmetric layout taken literally — a drawn 38.2% spine, content that never centres.** Asymmetric is 48% of the corpus but is usually just "a slightly off card grid". This design hangs every header off a visible golden-section rule, snaps text to columns 2–4 or 6–8 (never 4–6), and uses unequal 7vw/4vw margins on purpose. 6. **Cultural motif via *mon* and *kireji*, abstracted to strokes — never clip-art.** Cultural is 5% of the corpus; this design references family crests (mon) as composition boundaries and haiku cut-words (kireji) as punctuation marks, both reduced to 1px line-work, with zero literal cultural imagery. 7. **Scroll-triggered as a single calm beat, not a stagger storm.** Scroll-triggered is 20% of the corpus, usually fired as cascading stagger sequences. Here each reveal is one element, one 600ms move, then stillness — and the *primary* use of scroll is to drive the generative growth parameter `t`, making the scrollbar a literal crank on a music box. **Avoided overused patterns from frequency analysis:** no `hand-drawn` aesthetic (96%), no `glassmorphism` (67%), no `photography` imagery (98%), no `card-grid`/`centered` layouts as the primary structure (87%/85%), no `parallax`+`cursor-follow`+`spring`+`magnetic`+`stagger` reflex stack (95%/88%/86%/81%/80%), no `mono` body type (95%), no `warm`+`gradient` palette default (98%/98%). **Chosen seed (from assignment):** aesthetic: generative, layout: asymmetric, typography: frutiger-clean, palette: dopamine-neon, patterns: scroll-triggered, imagery: line-illustration, motifs: cultural, tone: minimal.