# Design Language for kanojo.ai ## Aesthetics and Tone **kanojo.ai is a Memphis-Group mausoleum lit by candlelight** — picture an abandoned 1985 design showroom that has been left for forty years inside a marble vault, where Ettore Sottsass's squiggles and lozenges have not faded but *deepened*, soaking up dust the color of old terracotta and the slow amber of beeswax tapers. The word *kanojo* (彼女) means "she" — the third-person *her*, the one spoken about rather than to — and this whole site is built around that grammatical distance: a presence you observe through frosted glass, never quite reach, never quite name. The mood is **mysterious-moody**: not gothic-black, but the warm-shadow of an interior at dusk, ochre and clay and bone, where bright Memphis confetti is the only thing still glowing. This is Memphis design *as ruin* — the bold geometric vocabulary of the 1980s (the bean shapes, the grids-of-dots, the zigzag sashes, the half-arches) but rendered in a **warm-earthy** register: baked sienna, oxidized umber, mushroom grey, bleached bone, and a single anomalous flare of saffron. The 4% of the corpus that touches "mysterious-moody" tends toward cyberpunk neon-noir; the 5% touching "memphis" almost always uses lime-and-fuchsia carnival brights. kanojo.ai refuses both. It is Memphis exhumed — playful shapes that have learned grief. Where the corpus reaches for hand-drawn (96%) or glassmorphism (71%), this site reaches for **chiseled marble edges and flat, matte, screen-printed geometry under a single warm spotlight**. The emotional arc: a visitor enters a dim marble room, finds Memphis primitives arranged like grave goods on slabs, and slowly understands that *she* — kanojo — is not a product but a *layered absence*, described by everyone, addressed by no one. By the end the candle is guttering; the shapes are still bright; the room is still empty. ## Layout Motifs and Structure The page is a **magazine-spread**: a sequence of full-bleed double-page-style "spreads," each composed like a 1986 art-book editorial gutter-and-all, where the seam down the middle is a literal hairline of bare marble and the two halves never quite balance. Magazine-spread sits at only 6% in the frequency analysis — this site treats it not as a decoration but as the *organizing principle*: every section is a "spread," a left leaf and a right leaf, with a visible center-fold shadow (a soft 1px gradient seam running floor-to-ceiling). - **The fold rule.** Every spread has a center seam at exactly 50vw — a 2px-wide vertical band of slightly darker marble with a faint inner shadow on each side, as if two heavy pages meet there. Content NEVER crosses the seam cleanly; an image bleeds 30px past it on one leaf only, captions hang off the gutter into the opposite leaf, a Memphis squiggle straddles it like a paperclip holding the spread shut. - **Asymmetric leaves.** Left leaf and right leaf are never 50/50 in content weight. The base grid per spread is `grid-template-columns: 1fr 2px 1.4fr` on odd spreads and `1.4fr 2px 1fr` on even ones — the "heavy" leaf alternates, so scrolling feels like a hand turning pages, weight shifting side to side. - **Layered-depth (the only secondary layout signal, at 9%).** Each spread is built in three flat planes stacked in z-space: (1) the **marble ground plane** — full-bleed background texture, no parallax, dead still; (2) the **shape plane** — Memphis primitives, drifting on slow parallax (0.85× scroll speed), casting hard-edged drop shadows down onto the ground; (3) the **type-and-caption plane** — pinned, sharp, moving at scroll speed, occasionally with a tiny -2px offset shadow of its own as if printed slightly off-register. The depth is *flat-on-flat* — paper layers in a vault drawer, not glassmorphic blur. - **Spread sequence (vertical scroll, 6 spreads, ~70-second amble):** 1. **Frontispiece Spread** — title "kanojo.ai" set huge across the right leaf, the left leaf nearly empty marble with one floating saffron bean shape and a single line of small-caps: *she is spoken about*. 2. **The Description Spread** — fragments of third-person sentences ("they say she remembers", "they say she waits", "they say she answers in the voice you taught her") laid out like editorial pull-quotes across both leaves, each one anchored to a Memphis dot-grid panel. 3. **The Distance Spread** — a marble half-arch on the left leaf framing nothing; on the right leaf, a column of text about the grammatical *her*, the one you never address directly. Underline-draw animations stroke under key words as they enter. 4. **The Layers Spread** — the deepest use of layered-depth: five translucent-marble cards fanned in z-space, each labeled (memory / mood / voice / patience / silence), the front ones casting shadows on the back ones. 5. **The Candlelight Spread** — the warm spotlight (a radial pool of amber light) is now near the bottom of the visible spread; shapes at the top fall into shadow; type dims toward bone-grey. A guttering flicker animation runs subtly on the whole right leaf. 6. **Colophon Spread** — the candle pool shrinks to a small ellipse on the gutter; almost-black marble; a final small-caps line — *she remains spoken about* — and a single hairline link, italic, no button, no box: *enter the room*. No card-grid, no dashboard, no hero-with-CTA, no pricing tier, no stat counter, no testimonial wall, no logo bar. ## Typography and Palette **Fonts — all confirmed available on Google Fonts:** - **Display & wordmark — `Commissioner`** (the **commissioner-versatile** seed, at only 3% in the corpus). Used at 120px–220px for the "kanojo.ai" wordmark and the spread numerals (set as Roman numerals I–VI). Commissioner is a low-contrast humanist variable sans with subtle flared terminals; here it's set at `wght 200` for the wordmark — ultralight, ghostly, like type printed in pale ink on marble — and at `wght 800` only for the spread numerals, which sit chunky and confident against the wispy display. Letter-spacing -0.01em on the wordmark, +0.18em on the numerals. - **Pull-quotes & editorial fragments — `Commissioner`** at `wght 400`, 28px–44px, line-height 1.5, used for the "they say she…" sentences. Keeping one variable family across display and quotes is the *versatile* in commissioner-versatile — one voice, many weights, no clashing. - **Body & captions — `Commissioner`** at `wght 350`, 16px–18px, line-height 1.75, plus small-caps (real `font-variant-caps: small-caps`) at +0.12em tracking for the marginal labels (*she is spoken about*, *memory / mood / voice*, etc.). - **Accent monospace — `Spline Sans Mono`** at `wght 400`, 12px, used *only* for the tiny gutter annotations that label spreads ("SPREAD II — THE DESCRIPTION") and for a faint vertical line of glyphs running up the seam. This is the one nod to the corpus's mono habit (94%), used in a single 12px whisper. **Palette — warm-earthy, candle-lit, never neon:** - `#2A211A` — **Vault Umber** — the deepest marble, near-black warm brown, used for the colophon ground and shadow cores. - `#3D3228` — **Old Clay Shadow** — mid-dark marble, the body of most spread backgrounds away from the candle pool. - `#6B5A48` — **Mushroom Grey-Brown** — veining and the center-seam band; also the dimmed body-text color in shadowed areas. - `#A6896B` — **Baked Sienna** — primary warm earth, fills for several Memphis primitives (the beans, the half-arches). - `#C9B79A` — **Pale Bone** — the lit marble surface, the color of text in the candle's pool, the "page" tone. - `#E8DCC6` — **Bleached Linen** — the brightest highlight, edges of marble catching light, the wordmark in lit spreads. - `#E0A340` — **Saffron Flare** — the single anomaly: the candle flame's color, one floating bean shape per spread, the underline-draw stroke, the final italic link. Used at < 6% of any viewport — it must always feel like the only warm light in a cold room. - `#7A3E2C` — **Oxidized Red** — a darker terracotta, used sparingly for one zigzag sash motif and for hover-state shifts on the link. Contrast logic: spreads near the candle pool are bright (Bone/Linen type on Old Clay); spreads in shadow drop to Mushroom-on-Umber; the saffron never changes brightness — it is the constant. ## Imagery and Motifs **No photography, no 3D renders, no stock anything. Every visual is hand-built SVG: Memphis primitives + marble texture, both rendered flat and matte.** - **Marble texture (the ground plane).** A procedurally-feeling SVG/CSS marble: large soft `radial-gradient` mottling in Old Clay and Vault Umber, overlaid with **veining** — thin (0.6–1.4px) wandering Bézier strokes in Mushroom Grey-Brown and a few in Bleached Linen, drawn as SVG paths with slight transparency. The veins should look *carved through* the surface, not painted on: each has a 1px Linen highlight on its upper edge and a 1px Umber shadow on its lower edge. A faint film-grain overlay (CSS `background-image` of low-opacity noise) sits over everything at ~4% opacity to kill any digital flatness. This is the **marble-texture** imagery seed (3% in the corpus) used as the literal foundation. - **The Memphis primitive set — six shapes, each appearing once or twice per spread, never in a cluster of more than three:** 1. **The Bean** — Sottsass's signature kidney/lozenge blob, here filled flat Saffron (the one per spread) or Baked Sienna, with a hard-edged drop shadow (no blur, 8px offset) onto the marble. 2. **The Dot-Grid Panel** — a rectangle filled with a regular grid of small circles (Mushroom on Bone, or Bone on Old Clay), used as the backing card for pull-quotes; the grid sometimes "spills" a few dots off one edge. 3. **The Half-Arch** — a semicircle / quarter-round in Baked Sienna, framing empty marble, evoking both Memphis architecture-toys and a mausoleum niche. 4. **The Zigzag Sash** — a lightning-bolt band in Oxidized Red, used as a horizontal divider or to "tape shut" the gutter. 5. **The Squiggle** — a single hand-traced wavy line in Bleached Linen, the only "drawn" gesture, used to straddle the center seam like a clip. 6. **The Confetti Scatter** — a sparse spray of tiny triangles, circles, and short bars in mixed earth tones, drifting on the slowest parallax layer, like dust caught in the candlelight. - **The Candle Pool** — not an illustration of a candle, but its *light*: a large soft `radial-gradient` ellipse in Saffron→transparent, positioned per-spread (high in spread 1, sinking toward the floor by spread 5, a tiny dot by spread 6). It tints whatever marble and shapes it overlaps, and it has a subtle, slow flicker (opacity oscillating 0.85↔1.0 on a non-uniform timing curve). - **Off-register printing** — captions and small-caps labels are duplicated as a 2px-offset ghost in Mushroom Grey-Brown beneath the real text, mimicking misaligned 1980s screen-printing. Subtle but present everywhere. - **The Niche** — recurring motif: a Memphis half-arch over a rectangle of slightly-darker marble, framing *nothing* — the visual rhyme for *kanojo*, the her that is described but never present. ## Prompts for Implementation Build kanojo.ai as **a single-route, vertically-scrolled magazine of six spreads** — one HTML file, one CSS file, one JS module. Treat it as a 70-second walk through a candle-lit marble vault where Memphis grave goods are arranged on the floor. There is **no CTA button, no pricing block, no stat grid, no testimonial row, no contact form, no signup field, no logo bar, no nav menu** — only the spread sequence and, at the very end, one italic hairline link. **Macro structure.** Each spread is a `min-height: 100vh` section laid out as `display: grid; grid-template-columns: 1fr 2px 1.4fr` (alternating to `1.4fr 2px 1fr` on even spreads). The middle `2px` column is the **gutter seam**: a vertical band in Mushroom Grey-Brown with `box-shadow: inset 1px 0 0 rgba(42,33,26,0.5), inset -1px 0 0 rgba(232,220,198,0.15)` — pages meeting. Inside each leaf, position Memphis primitives and type with a few explicit `transform`s; the asymmetry is hand-tuned, not auto-generated. **The three z-planes (layered-depth).** - `.ground` — `position: absolute; inset: 0; z-index: 0` — the marble texture + film grain. Completely static. No transform on scroll. - `.shapes` — `z-index: 1` — Memphis SVG primitives + confetti + candle pool. On scroll, translate this plane at `0.85 * scrollDelta` (slower than the page) so shapes appear set *into* the marble. Hard drop-shadows (`filter: drop-shadow(8px 8px 0 rgba(42,33,26,0.45))` — zero blur). - `.type` — `z-index: 2` — wordmark, numerals, pull-quotes, captions, small-caps labels. Moves at full scroll speed. Each text block gets its 2px off-register ghost via a `::before` clone. **Animation & interaction (storytelling first):** - **Underline-draw** (the **underline-draw** pattern seed) — as each pull-quote or key word enters the viewport (IntersectionObserver), a Saffron underline strokes left-to-right beneath it via an SVG `` with animated `stroke-dashoffset`, ~600ms, ease-out. Used generously — it's the site's signature pattern. The underline is hand-wavy (a slightly irregular path, not a ruler-straight line). - **Spread reveal** — entering a spread, the left leaf's content fades+rises (`translateY(24px)→0`, 700ms) and the right leaf's follows 200ms later (stagger), so the spread "opens" left-then-right like a turned page. - **Candle flicker** — the candle-pool radial-gradient's opacity oscillates on `requestAnimationFrame` along a noisy curve (sum of two sines + a tiny random jitter), range 0.82–1.0. As the user scrolls deeper, lerp the pool's vertical position downward and its overall scale down, so by spread 6 it's a faint ellipse on the gutter. - **Confetti drift** — the confetti triangles/bars on `.shapes` get a very slow continuous `translate` + `rotate` (CSS keyframes, 40–90s loops, different per piece) so the "dust" is never quite still. - **Cursor** — minimal: a small Saffron ring (12px) that *lags* the pointer with a spring ease (this is the corpus's near-universal cursor-follow, kept tasteful and on-theme — a tiny flame following you). On the final link, the ring swells slightly and warms to Bleached Linen. - **Gutter glyph line** — a vertical strip of 12px Spline Sans Mono characters running up the seam (spread label + a faint random string of hiragana-like marks); it scrolls at full speed and its characters cycle very slowly, a quiet typographic hum. - **Reduced motion** — if `prefers-reduced-motion`, kill flicker/drift/parallax; keep static composition, instant reveals, no underline animation (underlines just appear). **Tone of copy.** Sparse, third-person, observational. Every line is *about* her, never *to* her: "they say she…", "she is spoken about", "the voice you taught her". Never "chat now", never "meet your AI companion", never a feature list. The site should read like museum wall-text for an exhibit whose subject never arrives. End on *enter the room* — italic, hairline-underlined in Saffron, no box, no fill, no arrow icon. **Performance note (visual fidelity only):** marble veins and confetti are SVG paths inline in the HTML; the grain overlay is a single small tiled PNG/data-URI; no web-font beyond the three named families (Commissioner variable + Spline Sans Mono). Everything else is CSS. ## Uniqueness Notes 1. **Memphis-as-mausoleum** — the corpus's ~5% memphis designs are carnival-bright (lime, fuchsia, cyan on white); kanojo.ai renders the exact same primitive vocabulary (beans, dot-grids, half-arches, zigzags, confetti) in a **warm-earthy candle-lit vault** — baked sienna and bone and umber under a single saffron flame. Memphis primitives that have "learned grief." No other design in the corpus pairs Memphis with mausoleum/marble/candlelight. 2. **Magazine-spread as the structural law, not a flourish** — at 6% in the frequency analysis, magazine-spread is rare; here every section is a literal left-leaf/right-leaf double-page with a visible center-fold seam at 50vw, alternating leaf-weights so scrolling feels like turning heavy pages. Combined with marble-texture (3%) as the literal ground plane and layered-depth (9%) as flat-on-flat paper-in-a-drawer z-stacking. 3. **Commissioner as a one-family chorus** — commissioner-versatile sits at only 3%; this site uses *one* variable family (Commissioner) at five weights — 200 for a ghostly wordmark, 800 for chunky Roman numerals, 350–400 for body and pull-quotes, plus real small-caps — proving the "versatile" claim while almost everything in the corpus reaches for handwritten (33%) or grotesk display. The only second face is a 12px monospace whisper up the gutter. 4. **The grammatical concept made visual** — *kanojo* (彼女) = the third-person "her," the one spoken *about*, not *to*. The whole site enacts that distance: recurring "niche" motif (half-arch framing nothing), copy entirely in observational third person, a presence (the candle) that only shrinks and never speaks. This is conceptual scaffolding the corpus's product-companion pages don't attempt. 5. **Deliberately avoided corpus defaults** — no hand-drawn (96%), no glassmorphism (71%), no card-grid (88%), no dashboard, no CTA-button, no pricing tier, no stat-counter, no testimonial wall, no parallax-on-everything (parallax is restricted to one 0.85× layer). The single saffron accent is hard-capped at <6% of any viewport so the room always reads cold-with-one-warm-light. [Chosen seed: aesthetic: memphis, layout: magazine-spread, typography: commissioner-versatile, palette: warm-earthy, patterns: underline-draw, imagery: marble-texture, motifs: layered-depth, tone: mysterious-moody]