# Design Language for kanojo.love ## Aesthetics and Tone kanojo.love is a **frutiger-aero terrarium of crystalline love-letters** -- a website that feels like opening a 2007 Sony Vaio bundled with a homemade screensaver crossed with a Bauhaus museum of glass. The aesthetic deliberately reaches back to the optimistic late-2000s "aqua/glass/bubble" UI era (Frutiger Aero), then drags it forward with modern translucent layering and crystalline structures. The mood is *authoritative* in the way a museum docent is authoritative: knowing, slightly cool, beautifully composed, never asking permission. Imagine: an iceberg made of stained glass, lit from within by a soft horizon-glow, with hovering "love affidavits" suspended in mid-air like ice fossils. The brand voice ("kanojo" = "her" in Japanese) becomes a meditation on remembered affection -- the site presents *evidence* of relationships, observed and catalogued by a precise, slightly distant curator. Inspirational anchors: early Windows Vista Aero, Apple's Aqua interface, Tokujin Yoshioka's crystal sculptures, frozen waterfalls photographed from inside, the "Bliss" Windows XP wallpaper rendered as a glacial vista, and the architectural drawings of Studio Bouroullec. ## Layout Motifs and Structure An **asymmetric** composition where translucent panels float at varied depths over a horizon-gradient sky. Nothing is centered. The grid is intentionally broken -- think of ice floes drifting on still water, each at a slightly different angle and altitude. **Structural anatomy:** - **Sky-canvas backdrop (fixed, 100vw x 100vh):** A vertical gradient sky -- pale ice-cyan at the top, glacial blue at the horizon, warm sun-kissed cream at the bottom. Over this floats a procedural cloud layer (SVG turbulence filter) drifting horizontally at 0.04px/ms. - **Asymmetric float-grid:** Translucent "ice panels" of varying widths (28%, 41%, 33%, 52%) placed at irregular vertical offsets, each rotated 1.5-4 degrees, with a slight Y-translate stagger. No two panels share top-alignment. The leftmost panel often extends into negative margin (-6vw). - **Hero cluster (top-right, 64% wide):** A larger frosted slab containing the wordmark "kanojo.love" set in a wide variable-fluid sans, behind a faint outline of a crystalline shard. Adjacent to it (top-left, 31% wide): a small "Affidavit No. 001" tag panel and a date stamp. - **Affidavit cards (mid-scroll, asymmetric pairs):** Each "love affidavit" is a translucent card with a 3D crystalline shape inset on one side and a hand-set passage on the other. Alternate left-heavy / right-heavy pairs as you scroll, creating a zigzag tension down the page. - **Glitch interlude (scroll-anchored full-width):** Once per major section, the entire layout briefly glitches: panels jitter horizontally by ±4px for 240ms, chromatic aberration intensifies on text, then snaps back. This punctuates the calm with a moment of "the recording skipped." - **Footer horizon (full-bleed):** A single thin horizon line drawn across the viewport, with the site's "Closing affidavit" set above it in 14px caps. Spatial rhythm: stillness with bursts. 90% of the time, panels drift gently; the glitch moments are rare, deliberate, and rewarding. ## Typography and Palette **Fonts (all Google Fonts):** - **Display (variable-fluid):** "Roboto Flex" used as a variable axis-animated face. The wordmark "kanojo.love" interpolates its weight (300 -> 700) and width (75 -> 125) on scroll, producing a *fluid* typographic state-change. Used at clamp(64px, 9.5vw, 168px), letter-spacing -0.02em. - **Section labels:** "Inter Tight" 500 at 13-15px, all caps, letter-spacing 0.18em. - **Affidavit body:** "Fraunces" 400 italic for the "passages," at 17-19px, line-height 1.55. The italic gives each affidavit the flavor of a found letter. - **Numerals / catalog ids:** "JetBrains Mono" 500 at 12-13px, monospaced lot numbers ("№ 001 / 049"). **Palette (translucent-frost):** - `#E8F4F8` -- Glacial Mist (background sky top) - `#9DC9D6` -- Frozen Lagoon (mid-sky / panel base tint) - `#3F6B7A` -- Deep Cyan Glass (text on light, frame strokes) - `#0F2935` -- Abyssal Ink (deepest accent, glitch chromatic shift base) - `#F7E6CC` -- Sunrise Cream (warm horizon and sun-kissed lower band) - `#C9DEE7` -- Frost Pane (panel fill at 0.42 alpha) - `#FFFFFF` -- Crystal White (highlights, inner-glow strokes) Translucency strategy: panels use `backdrop-filter: blur(18px) saturate(140%)`, fills are `rgba(199, 222, 231, 0.42)`, borders are `1px solid rgba(255,255,255,0.62)` plus an inner `box-shadow: inset 0 1px 0 rgba(255,255,255,0.8)` to create the classic Frutiger-Aero gloss arc at the top edge. ## Imagery and Motifs **Core visual motifs:** - **Crystalline shards (the centerpiece):** SVG-rendered faceted crystals with 8-12 polygon facets each, occupying the inset region of every affidavit card. Each crystal slowly rotates on the Y-axis (60s/turn) revealing facets with light-refraction gradients (linear-gradients angled at 45° with Crystal White -> Frost Pane stops). - **Geometric-abstract clouds:** Soft cloud forms built from overlapping rounded polygons (not circles), filling the sky backdrop. Each cloud has a faint inner-light glow. - **Glass bubbles:** Smaller decorative spheres (8-24px diameter) drift through the composition with mild parallax, each containing a tiny crystalline icon (heart-as-crystal, key-as-crystal, envelope-as-crystal). - **Horizon arc:** A single thin Sunrise Cream horizontal rule with a soft outer glow appears as a recurring motif near the bottom of every major panel, suggesting "the horizon" beyond the affidavit. - **Glitch artifacts:** RGB-split text, horizontal scan-line bands, and 1px pixel-displacement noise applied briefly during the glitch interludes. **Decorative patterns:** - A subtle 32px hex-grid pattern (0.08 alpha) sits *behind* the sky gradient, perceptible only when zoomed in -- like the watermark of the original PSD. - Each affidavit panel has a top inner-glow band (0 -> 6px, white at 0.55 alpha) reproducing the signature Frutiger-Aero "lacquered" appearance. ## Prompts for Implementation **Open with a slow exhale.** First 1800ms: a single Crystal White faceted shard sits dead-center, scaling from 0.6 -> 1.0 while rotating 24deg. As it reaches full scale, it *fractures* into 6 sibling shards which migrate outward to their respective panel-insets, easing with cubic-bezier(0.22, 1, 0.36, 1). During this migration, the sky gradient fades in from white, and the wordmark begins its variable-axis animation from (weight 300, width 75) -> (weight 600, width 110). **Variable-fluid wordmark loop:** The kanojo.love wordmark continuously breathes between two states (every 7.2s, ease-in-out): { font-weight: 320, font-stretch: 78% } <-> { font-weight: 580, font-stretch: 118% }. Pair with a subtle letter-spacing oscillation (-0.02em -> -0.005em). **Glitch pattern (featured pattern):** - Trigger one glitch event per section as the section enters the viewport. - Glitch composition: 60ms of `transform: translateX(-4px)` on the entire content layer + a duplicate text layer with `color: #E04F4F` shifted +2px, another with `color: #1E90FF` shifted -2px (RGB split). Add a horizontal `clip-path: inset(28% 0 60% 0)` jitter band for 80ms. - Use `prefers-reduced-motion` to disable the glitch (replace with a 1px fade). **Crystal rotation system:** Each crystalline shard inset uses CSS 3D transforms with `transform-style: preserve-3d`. The crystal is constructed from 4 SVG polygons stacked in z-space, each with a different opacity (0.45, 0.6, 0.8, 1.0). On scroll, the rotation rate increases by a factor up to 2.4x. **Asymmetric float choreography:** Each panel has its own subtle floating animation -- vertical translate ±6px, rotation ±0.4deg, on a 9-13s ease-in-out loop, with offsets so no two panels move in sync. This creates a constant "drifting ice" effect. **Sky transition on scroll:** Modulate the body's CSS variables (`--sky-top`, `--sky-mid`, `--sky-bottom`) over scroll progress so the sky shifts from cold morning -> warm noon -> rose-tinted dusk by the time you reach the footer. Use `@property --sky-top: { syntax: '' }` for interpolation. **Storytelling beats (no CTAs, no pricing, no stat-grids):** 1. Crystal-fracture intro. 2. Wordmark + Affidavit №001 hero. 3. A drift of 7-9 asymmetric affidavits, each with a different crystal shape inset and a different italic Fraunces passage. 4. A glitch moment between affidavits 4 and 5, suggesting "the archive has been edited." 5. The horizon line at the footer, with "Closing affidavit." rendered above it. **Anti-patterns to avoid:** No CTA buttons, no pricing blocks, no testimonial sliders, no feature-icon trios, no signup forms. The site is a glass cabinet, not a service page. ## Uniqueness Notes **Differentiators from other designs in this collection:** 1. **Frutiger-Aero + crystalline-faceted SVG inset:** Reviving the lacquered-glass UI language *and* anchoring each card around a faceted crystal sculpture is a combination unique to this site. Other Frutiger-Aero attempts in the collection lean photographic (clouds, bubbles); this one is *architectural*. 2. **Variable-fluid typography as breathing wordmark (variable-fluid type is 2% used):** Using the variable axes of Roboto Flex as a continuous looping animation -- weight and width interpolating in real-time -- creates a typographic identity that is *alive* in a way no other design in the collection attempts. 3. **Glitch pattern within a frost-translucent palette:** The collection's glitch designs typically pair glitch with cyberpunk or dark themes. Here, glitch is the *only* moment of chaos within an otherwise serene Frutiger-Aero composition -- punctuation, not foundation. 4. **Geometric-abstract clouds (polygonal, not rounded):** Most cloud imagery in the collection is photographic or rounded-blob. This one uses overlapping rounded polygons -- a more crystalline, structured cloud language that ties directly to the crystal motif. 5. **Authoritative-curator tone in a maximally translucent palette:** Authoritative tone is typically paired with high-contrast or corporate palettes. Pairing it with translucent-frost is unusual -- the authority comes from precision of composition rather than visual weight. **Chosen seed/style:** aesthetic=frutiger-aero, layout=asymmetric, typography=variable-fluid, palette=translucent-frost, patterns=glitch, imagery=geometric-abstract, motifs=crystalline, tone=authoritative. **Avoided overused patterns:** Refused parallax-as-primary (95%), eschewed the centered/card-grid baseline, declined mono typography (81% saturation), and explicitly rejected the mysterious-moody tone (71%) in favor of cool authoritative composition.