# Design Language for kanojo.love ## Aesthetics and Tone kanojo.love is a **frutiger-aero love letter to the 2007 desktop** — the era when "the future" smelled like fresh rainwater on a glass office building, when every wallpaper had a bead of dew on a leaf, when Aero Glass made windows look like they were carved from a swimming pool. The word *kanojo* (彼女 — "she," "her," the girlfriend) is treated tenderly and a little wryly: this is not a dating site, not a waifu catalog, not a confession. It is the **mood of having someone in mind** — the particular weightless optimism of early-summer affection, rendered as a UI you could almost reach into. The tone is **minimal** in the strictest sense: very few words, lots of breathing room, no marketing voice, no urgency. A frutiger-aero page is usually *loud* — gradients screaming, bubbles bursting everywhere. kanojo.love deliberately undercuts that: it keeps the glass, the dew, the bubbles, the impossible aqua sky — but turns the volume down to a hum. One bubble drifting, not fifty. One pane of glass, half-fogged. The result is a frutiger-aero that feels less like a Windows Vista box-art and more like the *memory* of one: soft-focus, sun-warmed, a touch wistful. Mood references: the loading screen of an early-2000s digital camera; a koi pond reflecting a curtain-wall skyscraper; an iPod nano in a pocket on a humid afternoon; the exact teal of pool water at 4pm; a hand-drawn doodle of a heart in the corner of a school notebook, scanned on a flatbed and dropped onto a glossy aqua gradient. Affection that is unhurried, slightly nostalgic, and very clean. ## Layout Motifs and Structure The structure is a single **immersive-scroll** descent — one continuous vertical journey, no separate "pages," no nav bar beyond a thin floating capsule. Immersive-scroll sits at only 7% in the archive, so this commits hard to the *unbroken story* rather than the card-grid most sites here default to. **The scroll spine — "a day with her in mind," five movements:** 1. **MORNING (the glass).** Full-viewport aqua-to-mint vertical gradient. Centered, a single frosted-glass panel — `backdrop-filter: blur(20px) saturate(1.4)` — with one line of text inside it and the wordmark *kanojo.love* set small in the corner. A single soap bubble drifts up the left edge, slow, refracting a tiny inverted copy of the gradient inside it. 2. **NOON (the dew).** The page brightens. A hand-drawn line illustration — a leaf, a single bead of water on it — sits oversized and off-center, the dew-drop is a real CSS element with a specular highlight that tracks the scroll. Text wraps loosely around it in a single relaxed column, never justified. 3. **AFTERNOON (the pool).** The gradient tilts toward deeper teal. Horizontal band of soft "caustic" light ripples across the section (animated SVG turbulence, very low contrast). A row of three frosted-glass cards — but they are *understated*: rounded 28px, faint inner glow, almost no shadow. On hover they **scale gently** (1.04) and the glass clears slightly. This is the only place with more than one repeated element. 4. **GOLDEN HOUR (the doodle).** The aqua warms toward a pale apricot-tinged cyan (still analogous, just shifted). A scanned-looking hand-drawn heart, a little crooked, sits in negative space with a tiny pencil-shadow under it. The most text-sparse section — maybe four words. 5. **DUSK (the lockscreen).** Returns to deep aqua, now darker, like pool water after sundown. A final frosted panel, a single bubble settling, the colophon in 11px. The scroll ends here — quiet, complete. **Spatial rules:** generous margins (clamp 24px → 14vw), one column always, content never wider than ~640px even on a 4K screen — the empty aqua around it *is* the design. Sections crossfade their background gradients via `IntersectionObserver`, so scrolling feels like the light changing over a single long afternoon. The floating nav capsule is a tiny pill of frosted glass, top-center, that fades to 30% opacity until you move the cursor. ## Typography and Palette **Typefaces (Google Fonts only):** - **Space Grotesk** — the primary **sans-grotesk** voice. Used for the wordmark, the few headings, and the sparse body lines. Weights 300 and 400 only — never bold; bold would break the minimal hush. The wordmark *kanojo.love* is Space Grotesk 400, lowercase, letter-spacing +40, with the `.love` in a lighter aqua tint than `kanojo`. Its slightly mechanical, slightly humanist letterforms are the perfect cool counterweight to all the soft glass — crisp type floating on water. - **DM Mono** — used *only* for micro-labels: the colophon, the section markers ("01 / morning"), timestamps, the tiny corner annotations on the hand-drawn illustrations (like handwritten notes from a designer). Weight 300. Sparingly. It gives the page a faint "specimen card" precision under all the dreaminess. - **Caveat** — used *exactly twice on the whole page* and never for real content: once for the word inside the golden-hour heart doodle, once in the dusk colophon as a single signed-looking flourish. It is the "hand-drawn" handwriting that ties to the imagery. If it appears more than twice, that is too much. **Palette — analogous, anchored in aqua, the whole wheel from green-cyan to blue-cyan:** - `#E4FBF7` — **dew white**, the lightest mint-tinted near-white; frosted-panel fills, text on dark. - `#A8E6DC` — **morning mint**, soft green-leaning aqua; top of the morning gradient, leaf line-art. - `#5BC8C2` — **pool teal**, the signature mid-aqua; primary accent, the `.love` tint, hover-clear glass. - `#2E9CB8` — **deep aqua**, blue-leaning; afternoon and dusk gradient bottoms, links. - `#1B5E78` — **dusk water**, the darkest blue-teal; dusk background, micro-labels on light, the pencil-shadow under doodles. - `#FBE9D2` — **golden-hour warmth**, a single pale apricot — the *one* deliberate near-complement, used at <8% coverage in section 4 only, like the sun catching the water. Everything else stays inside the cool analogous band. - `#0E2A35` — **abyssal**, near-black teal; used only for body text on light backgrounds (never pure `#000`). Gradients are smooth two-stop vertical fades within this band — `#A8E6DC → #5BC8C2`, `#5BC8C2 → #2E9CB8`, `#2E9CB8 → #1B5E78` — plus one section that warms to `#5BC8C2 → #FBE9D2`. Bubbles and glass get faint white specular highlights and very low-opacity `#E4FBF7` inner glows. No neon, no chrome, no rainbow — frutiger-aero held to a single calm key. ## Imagery and Motifs **Primary imagery: hand-drawn.** Every illustrative element is a thin-line ink drawing — 1.5px stroke, slightly imperfect, like a fountain pen on smooth paper — scanned and laid over the glossy aqua. The drawings are deliberately *few*: a single leaf with a dew-drop, a soap bubble (drawn, then the real animated one drifts beside it), a crooked little heart, a single curl of water-ripple, a tiny envelope (a nod to `.love` as a letter, not a swipe). They sit at large scale in negative space, each with a faint pencil-shadow and a tiny DM Mono annotation in the corner ("fig. 1 — dew"). The contrast between *handmade ink line* and *liquid-glass digital gradient* is the whole visual thesis: warmth drawn onto coolness. **Secondary motif: bubble-playful** — but restrained. Bubble-playful is at only 4% in the archive, and most uses go all-in. Here it is a single drifting soap bubble per section, rendered as a CSS circle with a radial gradient (transparent center, thin iridescent-but-desaturated rim, one bright specular dot) that *slowly* floats up and gently wobbles via a long-period sine. When the cursor nears a bubble it drifts away a touch — shy. One bubble. The playfulness is in the *idea* of bubbles, not a screen full of them. **Frutiger-aero signatures, dialed down:** the aqua sky-gradient (always), Aero-Glass frosted panels (`backdrop-filter` blur + saturate, hairline white top-edge highlight, 28px radius), a wet specular sheen on glass, one band of underwater "caustic" light, and the dew-drop — the single most frutiger-aero object there is — rendered as a CSS element with a sharp white highlight, a soft cast shadow, and a faint magnified bit of the leaf-line showing through it. **Texture:** an almost-invisible fine grain over the gradients (so they never look like flat banded CSS), and a barely-there "scanned paper" tint behind the hand-drawn elements. ## Prompts for Implementation Build as a **single static HTML document** — no SPA, no router, no build step beyond a Google Fonts link (Space Grotesk, DM Mono, Caveat) and one CSS file. Target ~55KB HTML+CSS+JS before fonts. Plain CSS scroll, `IntersectionObserver` for the gradient crossfades — no scroll-hijacking, no heavy libraries. **Storytelling spine:** the page *is* one long afternoon with someone in mind — five movements (morning glass → noon dew → afternoon pool → golden-hour doodle → dusk lockscreen). The `body` background is a fixed full-viewport gradient layer whose two color-stops are animated (CSS custom properties + `transition`) as each section enters view, so scrolling literally changes the light. Each section's content fades and lifts up ~24px on entry, staggered by ~80ms per child — gentle, never bouncy. **Signature interactions:** - **scale-hover** (the lead pattern — only 3% in the archive, so lean on it): frosted-glass cards and the nav capsule scale to ~1.04 on hover with a soft `cubic-bezier(0.34, 1.2, 0.64, 1)` ease, and simultaneously reduce their `backdrop-filter` blur by a few px so the glass *clears* as you lean in — the affection metaphor: things come into focus when you pay attention. No translate, no rotate — pure tender scale. - **the dew-drop** tracks scroll: its specular highlight position and cast-shadow offset shift slightly with `scrollY`, so it always looks lit from the same imaginary sun as the page brightens. - **the bubble**: one per section, CSS-animated slow float-up + sine wobble; on `mousemove` within ~120px it eases away from the cursor and back — shy, not reactive-jittery. - **caustic light** in the afternoon section: a single `` with `feTurbulence` + `feDisplacementMap` animating very slowly at low opacity over the teal — like sun on a pool floor. - **the wordmark** *kanojo.love* gets a barely-there continuous shimmer — a thin white highlight band that drifts across the glyphs every ~6s, like light on wet glass. Subtle enough you might not catch it the first time. **Tone discipline:** keep text to a handful of lines total — this is minimal. No CTA buttons, no "sign up," no pricing, no stat-grids, no testimonials, no feature cards beyond the three understated glass panels in the afternoon section. The empty aqua space, the changing light, the one drifting bubble, and the hand-drawn line *are* the content. If a section has more than ~20 words, cut it down. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, dashboards, dense card-grids, loud maximalist frutiger-aero (fifty bubbles, screaming gradients, lens-flare overload), neon, chrome, dark mode, parallax-on-everything, cursor-follow blobs trailing the mouse everywhere. ## Uniqueness Notes Differentiators this design commits to (other CMassC sites should not duplicate these): 1. **Restrained, melancholic frutiger-aero.** Frutiger-aero is only 3% in the archive — already rare — and the *standard* read of it is loud and maximalist. kanojo.love does the opposite: glass, dew, bubbles, aqua sky, but tuned to a quiet, slightly wistful hush with a `minimal` tone. "Frutiger-aero as a faded memory of itself" is a position no other site in the corpus holds. 2. **Hand-drawn ink line over liquid-glass gradient.** Hand-drawn imagery is everywhere in the archive (96% aesthetic / 98% photography elsewhere), but pairing *thin imperfect fountain-pen line drawings* with *Aero-Glass digital gradients* — warmth literally inked onto coolness — is a specific collision this site owns. The DM Mono "fig. 1 — dew" annotations on each drawing reinforce a "design specimen meets dreamy wallpaper" register nothing else uses. 3. **scale-hover as the only hover language, with a "clarity" metaphor.** Scale-hover is at just 3% in patterns. Here it is the *sole* hover interaction — pure gentle scale + the glass clearing its blur as you lean in. No tilt-3d, no magnetic, no cursor-follow, no card-flip — a deliberate refusal of the archive's near-universal magnetic/cursor-follow/spring stack (82–96%). 4. **One drifting bubble per section, shy of the cursor.** Bubble-playful (4%) usually means a screen full of bubbles; this design allows exactly one per movement, and it *avoids* the cursor rather than chasing it — playfulness as a single tender gesture, not visual noise. 5. **Single-column immersive-scroll under 640px wide on any screen, where the empty aqua is the design.** Immersive-scroll is only 7%; combining it with hard ma-negative-space content width and a `body` gradient that animates its color-stops per section (light changing over one long afternoon) makes the *background* the protagonist — the inverse of the card-grid/dashboard norm here. **Chosen seed:** `aesthetic: frutiger-aero, layout: immersive-scroll, typography: sans-grotesk, palette: analogous, patterns: scale-hover, imagery: hand-drawn, motifs: bubble-playful, tone: minimal` **Avoided per frequency analysis:** glassmorphism-as-default-saas-card (71% — used here only as period-correct Aero Glass, not the generic frosted-SaaS look), photography (98% — zero photos, all ink line + CSS), card-grid / centered / full-bleed defaults (88/86/93% — replaced by a narrow single-column immersive scroll), parallax / cursor-follow / magnetic / spring (96/88/82/86% — none of these; only gentle scale + slow autonomous bubble drift), warm + gradient palettes (98/97% — gradients yes, but locked to a cool analogous aqua band with only a single sub-8% apricot warm note), mono and humanist as primary type (94/53% — DM Mono is micro-labels only; Space Grotesk grotesk leads), bold weights (display-bold etc. — never used; 300/400 only).