# Design Language for kanojo.ai ## Aesthetics and Tone kanojo.ai is conceived as a **dopamine-charged art-deco portfolio archive** -- the visual love-child of a 1928 Parisian theater program, a vintage Cartier brochure, and a TikTok feed running through a stained-glass window. The mood is unapologetically *energetic*: gold leaf catches the eye like a notification ping, every micro-interaction rewards the cursor with a tiny burst of motion. Think of Tamara de Lempicka oil portraits filtered through Wes Anderson's saturation knob, then served on a marquee-lit cabinet of curiosities. The site is a portfolio of "kanojo" (彼女 -- "her") -- a collection of imagined personas, archetypes, and AI-generated companions, each rendered as a vintage photograph mounted in a deco frame. The tone is performative, slightly theatrical, gleefully self-aware. It celebrates *attention itself* as an aesthetic resource. Every section is staged like a panel from a Roaring Twenties magazine spread, but accelerated to the cadence of a dopamine slot machine: morphing shapes, spinning sunbursts, plinking number counters. Inspirational anchors: the Chrysler Building's eagle gargoyles, Erté's silhouettes, Pixiv member-page collages, mid-century pinball backglass art, and the "FRIDAY!" splash screens from old variety shows. ## Layout Motifs and Structure A **portfolio-grid** composition reimagined as a *gilded vitrine*. The canvas is divided into a 12-column deco lattice with **chevron-cropped cells**, each cell housing one "Kanojo" portrait card. Cards are not uniform rectangles -- they vary in size (1x1, 2x1, 2x2, 3x2) and aspect, mimicking the unequal panes of a leaded-glass shopfront. **Structural anatomy:** - **Marquee header (full-bleed, 18vh):** A horizontally-stepped chevron band displaying the "KANOJO.AI" wordmark, framed by twin deco fans. Behind the wordmark: a slow-rotating sunburst SVG (24 rays, alternating fills, 90s rotation per cycle). Right-aligned: a "ENTER THE GALLERY" CTA carved as a deco plaque (skip in body but present as the architectural moment). - **Hero collage (100vw x 82vh):** A single oversized vintage portrait (sepia-tinted, grain-overlaid) of an AI-imagined "kanojo," anchored to the right two-thirds. Left third: stacked deco signage strips reading "VOL. I", "INTRO", a calendar-style date marker, and a vertical "NEW THIS WEEK" badge. - **The Grid (full-bleed, variable height):** 12-column grid, gap 18px, 24 cards. Each card has a thick gilded frame (3px solid + 1px inset), chevron corner ornaments, and a portrait-orientation photo. Hovering morphs the card's border-radius from sharp (0px) to sweepingly curved (32px top, 0px bottom) over 480ms with a back.easeOut. - **Sidebar index (sticky, right):** A vertical deco rule with chapter markers ("I.", "II.", "III."...), highlighting active section with a swelling gold dot that "pulses" with the morphing scroll target. - **Footer-cabinet:** A horizontal cabinet of small chevron-framed thumbnails arranged like the bottom row of a Vegas marquee, blinking sequentially. Spatial rhythm: aggressively syncopated. Every other row is offset by half a column-width, producing a stepped silhouette across the whole grid -- a "skyline" of cards reminiscent of the setback profile of a deco skyscraper. ## Typography and Palette **Fonts (all Google Fonts):** - **Display / wordmark:** "Limelight" -- a deco-display face with high contrast, square-shouldered terminals, and unmistakable theater-marquee energy. Used at clamp(72px, 12vw, 220px) for the "KANOJO.AI" wordmark, letter-spacing 0.04em, all caps. Secondary deco display: "Poiret One" for section labels at 28-40px, letter-spacing 0.32em. - **Body / metadata:** "DM Sans" 400/500 for descriptive copy, 14-16px, line-height 1.65. Provides modern legibility against the loud display. - **Numerals (lot numbers, dates):** "Cormorant Infant" italic at 18-22px -- engraved-plaque feel. - **Accent / blink-text:** "Bungee Shade" reserved for the dopamine "NEW!" badges, 12px, used sparingly so the punctuation lands. **Palette (warm, dopamine-leaning):** - `#7A0E18` -- Curtain Crimson (deepest background field, deco velvet) - `#C39B5A` -- Aged Gilt (primary metallic, frames, rules) - `#F2D58A` -- Bright Sunbeam (active highlights, blinking accents) - `#E8C9A0` -- Champagne Cream (card panels, off-white surfaces) - `#1E0A0E` -- Inkwell Black (typography on lights, deep shadows) - `#E04F4F` -- Vermilion Spark (dopamine pop accents, CTA outlines) - `#3A1419` -- Burgundy Shadow (card backings, cabinet wood) Gradient strategy: a slow vertical gradient from `#7A0E18` (top) -> `#3A1419` (bottom) over the entire body, with `#C39B5A` -> `#F2D58A` radial sunbursts behind hero portraits. ## Imagery and Motifs **Core visual motifs:** - **Sunburst SVGs:** 24-ray radial fans behind every hero portrait, slowly rotating (90s linear infinite). Rays alternate between Aged Gilt and Bright Sunbeam. - **Chevron ornaments:** Triple-stacked chevrons appearing as corner ornaments on every card, also as section dividers (a horizontal run of 32 chevrons across the viewport width, decreasing in opacity outward from center). - **Stepped/zigzag rules:** Horizontal section dividers built from staircase polylines (the deco "setback" silhouette), used between major sections. - **Vintage portrait photography:** AI-generated portraits processed to look like 1920s studio plates -- heavy sepia tone, soft grain overlay, slight chromatic aberration on edges, subtle vignetting. Subjects pose in deco-era hairstyles and silhouettes. - **Geometric shape clusters:** Inset within card frames: small clusters of circles, triangles, and stepped polygons in Aged Gilt at 8-12px, like jewelry pinned to the frame corners. - **Sunray badges:** "NEW!" / "VOL. I" badges shaped like asymmetric 12-ray suns, gently wobbling on hover. **Decorative patterns:** - A repeating background pattern of tiny embossed deco fans (SVG, 24px tile, 8% opacity) underlying the card grid. - Frame insets feature double-ruled gold lines with a thin Vermilion accent line between -- a tri-stripe motif on every portrait card. ## Prompts for Implementation **Open with a curtain reveal.** First 1200ms: two Curtain Crimson velvet panels (CSS gradients with subtle vertical noise texture) part horizontally from center, revealing the gilded marquee. The "KANOJO.AI" letters appear *one at a time*, each letter dropping from above with a small bounce (cubic-bezier(0.34, 1.56, 0.64, 1)), staggered 80ms apart. As each letter lands, a tiny sunburst SVG flashes behind it (scale 0 -> 1.2 -> 1 over 240ms, opacity 0 -> 1 -> 0.6). **Sunburst orbit:** Behind the hero, the 24-ray sunburst should rotate continuously at 90s/turn. On scroll, modulate its rotation-speed via `requestAnimationFrame` so it spins *faster* (down to 30s/turn) as the user scrolls past the hero, then settles back. Pair with the body gradient: as scroll progresses, the Curtain Crimson deepens by 8% lightness, lending a "deeper into the cabaret" feeling. **Morph patterns (use heavily -- this is a featured pattern):** - Card borders morph corner-radius and rotation on hover. - The active sidebar dot morphs from circle -> chevron -> diamond -> circle in a 2.4s loop while active. - Section dividers (chevron rules) morph their amplitude on scroll: at rest the chevrons are 18px tall, at scroll-snap-active they swell to 32px and then ease back. - Use CSS `@property` for `--chevron-height` to enable smooth interpolation. **Cabinet hover choreography:** When a card is hovered, every other card on the same row dims to 0.55 opacity and translates 4px outward (left/right depending on side), as if politely making space. The hovered card lifts (`translateY(-8px)`) and reveals an overlay panel sliding up from the bottom with the kanojo's name in Poiret One, lot number in Cormorant Infant italic, and a 2-line bio in DM Sans. The Vermilion accent line on the frame illuminates and pulses once. **Marquee blink:** The footer cabinet thumbnails sequentially blink (background-color flash from Burgundy Shadow to Bright Sunbeam and back over 200ms), cascading left-to-right then right-to-left in a 4.8s loop -- pure Vegas marquee theater. **Storytelling beats (narrative scroll, no CTA-heavy sections, no pricing, no stat-grid):** 1. Curtain opens -> wordmark reveal. 2. "Tonight's program" -- a single line of Cormorant Infant italic introducing the volume. 3. Hero portrait -- the "headliner kanojo" with a slow Ken Burns pan (translate3d + scale 1 -> 1.04 over 12s). 4. The Grid: 24 portraits, each a tiny vignette, no buttons, no signups -- just *seeing them*. 5. A long horizontal chevron rule. 6. The footer cabinet, blinking like a closing marquee. 7. A final velvet curtain partially descends from the top of the viewport at 100vh-scroll, suggesting intermission. **Anti-patterns to avoid:** No stat grids, no pricing tiles, no testimonial carousels, no "Why choose us" trios. The site is an *exhibition*, not a marketing page. ## Uniqueness Notes **Differentiators from other designs in this collection:** 1. **Deco-skyscraper grid silhouette:** The half-column offset that creates a stepped skyline across the portfolio grid is unique. Most grid layouts in the collection are uniform; this one mimics the setback profile of the Chrysler Building -- a structural metaphor not seen elsewhere. 2. **Morph as a primary motion vocabulary (underused pattern -- only 7% of designs):** This design leans into `morph` for borders, sidebar markers, dividers, and badges. Other designs in the collection lean on parallax (95%) and stagger (37%); morph is the centerpiece here, paired with chevron and sunburst transformations. 3. **Vintage-photography imagery as deco "lot plates" (underused -- 2% of designs):** AI-generated 1920s studio portraits framed as auction-house lots, with engraved-plaque italic numerals -- a treatment no other design employs. 4. **Dopamine-aesthetic + art-deco-display typography pairing:** A genuinely unusual fusion. Most dopamine designs reach for inflated 3D or vaporwave; here the dopamine surfaces as gilded marquee blinks, sunburst flashes, and Bungee Shade "NEW!" badges within a Limelight + Poiret One typographic frame. 5. **Curtain-reveal opening:** The horizontal velvet curtain part-reveal opening is a theatrical device not used in any sampled design, and it sets the "show" framing for the entire portfolio. **Chosen seed/style:** aesthetic=dopamine, layout=portfolio-grid, typography=art-deco-display, palette=warm, patterns=morph, imagery=vintage-photography, motifs=geometric-shapes, tone=energetic. **Avoided overused patterns:** Eschewed parallax (95% saturation), centered/card-grid baseline (95%/91%), mono typography (81%), warm palette is used but anchored by a distinctive Curtain Crimson rather than generic warm beige, and mysterious-moody tone (71%) is deliberately rejected in favor of energetic theatrical celebration.