# Design Language for kanojo.name ## Aesthetics and Tone **Concept: "THE NAME WORKSHOP" — a Bauhaus weaving-and-printing studio relocated to a sun-warm orbital greenhouse, where a name is assembled out of moving geometric parts the way Anni Albers wove a textile or Herbert Bayer set a poster.** `kanojo.name` is not a profile page, not a link-in-bio, not a personal portfolio. It is a *naming ceremony rendered as a kinetic Bauhaus broadsheet*. "Kanojo" (彼女 — *she*, *her*, the one being spoken about with tenderness) is treated as a subject who does not yet have a fixed form: across six full-bleed plates the site **constructs her name letter by letter**, each glyph arriving as a parade of circles, triangles, half-circles, and ruled bars that snap into legibility on a spring, hold for a breath, and then loosen again. The mood is the strange warmth you get when you combine **Dessau primaries with a retro-futurist's idea of "the good tomorrow"** — not chrome and lens flare, but the optimistic agronomy of a 1969 paperback cover: a domed farm in low orbit, tomato-red and turquoise, where geometry is gentle and the future smells like cut grass and warm paper. Tone is **pastoral-romantic** (36% in corpus — common as a *label*, almost never executed *through Bauhaus rationalism*): the copy speaks the way you'd describe someone you love to a friend on a slow afternoon — unhurried, specific, a little besotted, never saccharine. "She keeps the window open even in October." "Her name has a triangle in it where the breath turns." The romance is in the *attention*, not in soft-focus mush. Bauhaus discipline is the body; pastoral-romantic warmth is the pulse moving through it. Everything on screen behaves like **felt geometry** — hard-edged vector shapes that nonetheless drift, settle, and overshoot as if they had a tiny bit of mass and a great deal of fondness. No gradients-as-default, no glassmorphism, no photography. Flat ink, ruled lines, primary fields, and motion that is *kinetic-animated typography* in the strictest sense: the type is never static decoration; it is a mechanism in operation. ## Layout Motifs and Structure **Full-bleed** (93% in corpus — universal) but treated as a **Bauhaus poster sequence**, not a scroll of cards. The site is **six edge-to-edge plates**, each `min-height: 100vh; width: 100vw`, no centered max-width wrapper anywhere, no card grid, no bento, no sidebar. Each plate is one composition in the tradition of a Bayer or Schmidt poster: an asymmetric arrangement of large flat color fields, one or two ruled "type rails," and a population of floating geometric primitives. **The Construction Grid.** A single fixed-position SVG overlay sits above all plates: a sparse Bauhaus grid — *not* the fashionable 12-column hairline grid, but a **dieline**: 3 thick vertical rules and 2 thick horizontal rules in `#1A1714` at 1.5px, plus a scatter of small registration crosses at the intersections. It never moves; the plates slide beneath it, so glyphs and shapes appear to be *pinned to a workbench*. This is the spine that keeps the kinetic motion from feeling like chaos. **Per-plate composition language** (each is named, each has one job): 1. **PLATE I — THE BLANK FORM.** Off-white field, the dieline visible, and a single huge red circle (≈55vmin) parked off-center-left with the wordmark `kanojo.name` set small in the upper-right rail. A turntable of unsorted shapes orbits slowly. Subhead: *"a name, before it has decided what it is."* 2. **PLATE II — THE FIRST LETTER.** Turquoise lower-third band. Roughly 14 vector primitives flock in from the right margin and assemble the letter **K** at 60vh tall; it overshoots, springs back, holds. Caption rail along the bottom describes what the K *means* about her. 3. **PLATE III — THE BREATHING TRIANGLE.** Yellow diagonal wedge cutting the plate corner-to-corner. The letters **a** and **n** build; an isosceles triangle (the "breath where the name turns") pulses gently between them at ~0.25Hz. Pastoral copy block set ragged-right against the wedge. 4. **PLATE IV — THE WEAVING.** Off-white. Three horizontal "warp" rails of small alternating squares (red / turquoise / yellow) scroll at different parallax speeds while the letters **o** and **j** are *woven* out of them — squares lift off the rails and reposition. Anni-Albers homage. 5. **PLATE V — THE ORBITAL GREENHOUSE.** Deep ink-blue field (`#22324A`) — the only dark plate. A thin turquoise ellipse (the dome horizon), a tomato-red half-disc sun low on it, and floating leaf-shaped vector forms (simple two-arc almonds) drifting upward. The remaining letters **o** finish; the full name **KANOJO** now stands assembled, 70vh tall, in red on blue. Most romantic copy here. 6. **PLATE VI — THE COLOPHON / SIGNED PROOF.** Return to off-white. The completed name sits centered with a Bauhaus-style printer's colophon rail: a row of the primitive shapes used, a date, the single closing line. No CTA. No form. No footer links beyond a quiet `←` back to PLATE I, which re-shuffles the shapes so the construction can begin again. Between plates: shapes do not vanish — they **migrate**. A circle from Plate II rolls off the bottom and re-enters Plate III smaller. The page reads as one continuous workshop, not six screens. ## Typography and Palette **Fonts — Google Fonts only, two voices plus one mechanical accent. The discipline is restraint; the motion does the rest.** - **Display & the assembled name — *Archivo Black* (single weight, 400).** A grotesque with near-geometric proportions and immense ink density — it reads as if it were built from the same circles-and-bars the shapes are made of, which is exactly the point: when the primitives finish assembling, they *resolve into* Archivo Black glyphs. Used at 60–72vh for the per-plate letters and the final wordmark, tracked tight at `-0.02em`. This is the "kinetic-animated" engine: every glyph is wrapped in spans and driven shape-first. - **Headlines & rails — *Archivo* (the variable companion, weights 500 / 700, plus `wght` animation 500↔800 on a spring).** Used for plate titles (`PLATE III — THE BREATHING TRIANGLE`) at 13pt small-caps, `letter-spacing: 0.22em`, and for the ragged-right romantic copy blocks at 19–22px / 1.5. Because Archivo and Archivo Black are a true superfamily, the small type literally shares DNA with the giant constructed name — a quiet Bauhaus "system" gesture. - **Mechanical accent — *Space Mono* (400, occasionally 700-italic).** Only for the workbench furniture: registration labels (`REG. 02 · K`), the colophon line (`PROOF · KANOJO · MMXXVI`), shape-count read-outs (`14 forms · settled`). Never for prose. It is the lab-notebook hand in the margin of an otherwise warm document. **Palette — retro-futuristic (4% in corpus — rare), but the *Bauhaus-primary* dialect of it rather than the chrome/neon dialect everyone else uses.** | Token | Hex | Role | |---|---|---| | `paper` | `#F4EFE3` | Dominant off-white field — warm, slightly oat, like aged poster stock. | | `ink` | `#1A1714` | The dieline, all type, all hairlines. Not pure black — a soft cocoa-black. | | `red` | `#E2402B` | Primary I — tomato-red. The big circle, the assembled name, the orbital sun. | | `turquoise` | `#1FA89C` | Primary II — a slightly retro, jade-leaning cyan. Bands, warp rails, dome ellipse. | | `yellow` | `#F2C12E` | Primary III — warm signal-yellow. The diagonal wedge, accents, hover fills. | | `nightblue` | `#22324A` | The single dark plate (PLATE V) — dusk over the orbital farm. | | `mint` | `#BFE3D2` | Soft tint for the floating leaf-forms on the dark plate and for the lightest warp squares. | Color is used as **flat, unmodulated fields** — Bauhaus painting, not UI. The *only* permitted gradient anywhere is a single 4% paper-grain noise overlay (multiply, ~0.06 opacity) to keep the off-white from going screen-clinical. ## Imagery and Motifs **No photography. Imagery is 100% vector-art (3% in corpus — rare), and the vector language is a fixed kit of seven Bauhaus primitives**, the way a Froebel block set or an Albers weaving has a finite vocabulary: 1. **Full circle** (the sun, the "o", the period of `.name`). 2. **Half-disc** (sunrise, the bowl of letters, hinged shapes). 3. **Quarter-arc / quarter-pie** (corners, the curve of the "j" tail). 4. **Isosceles triangle** (the "breath" motif, the apex of the "A"). 5. **Ruled bar** (the stems of letters, the dieline rails, the warp threads). 6. **Square** (the woven units in Plate IV, registration ticks). 7. **Almond / two-arc leaf** (the only "organic" form — the floating greenhouse foliage; reads as both leaf and eye). Every letter of "KANOJO" is **decomposed into a recipe of these seven parts** and reassembled on screen. There is a literal "parts bin" of them orbiting Plate I; they get consumed plate by plate. **Floating-elements** (6% in corpus — uncommon) is the recurring motif and it is *literal*: across all plates, 8–20 of the seven primitives drift in slow Lissajous paths at low opacity behind the active composition — never decorative confetti, always *the same shapes that will later become type*, idling until needed. On the dark Plate V they become the mint leaf-almonds rising like spores in a warm greenhouse. **Decorative system motifs:** - **Registration crosses** (`+`) at every dieline intersection — printer's-proof furniture in `ink`. - **The colophon strip** on Plate VI: a horizontal rail showing one of each of the seven primitives at small scale, labeled in Space Mono, like a type-specimen footer. - **The "breath triangle"** that pulses between syllables — the one piece of pure pastoral romance smuggled into the rationalist kit. - Cursor is accompanied by a small hollow `ink` circle (24px) that **magnetically snaps** to the nearest primitive and briefly fills it `yellow` — you are "picking up a part." ## Prompts for Implementation Build `kanojo.name` as **one static page** — a single `index.html`, one `style.css`, one ES module `name.js` — and treat it as a **three-and-a-half-minute kinetic Bauhaus broadsheet that builds a person's name out of seven moving shapes**. There is no signup, no contact form, no chat bubble, no cookie banner, no pricing, no testimonials, no stats grid, no logo cloud, no FAQ, no CTA button anywhere. The only navigation is scroll + a single `←` on the final plate that restarts the construction. **Structure & layout** - Six `
` elements, each `min-height: 100svh; width: 100vw; position: relative; overflow: hidden;`. No centered wrapper, no `max-width`. Use CSS Grid *inside* each plate with explicit named areas (`field`, `rail-top`, `rail-bottom`, `stage`) — composition is per-plate, deliberate, asymmetric. - One `` fixed to the viewport, `position: fixed; inset: 0; pointer-events: none; z-index: 50;` — 3 vertical + 2 horizontal `ink` rules at 1.5px, registration `+` crosses at intersections. It never animates; plates move under it. - A `
` fixed overlay with a tiled SVG fractal-noise PNG-substitute (inline `feTurbulence`), `mix-blend-mode: multiply; opacity: .06;`. **The kinetic type engine (this is the heart — `kinetic-animated` typography)** - Each constructed letter (`K`, `A`, `N`, `O`, `J`, `O`) is an absolutely-positioned `
` containing (a) the final character set in **Archivo Black** at 60–72vh, initially `opacity: 0`, and (b) a group of `` elements — the Bauhaus primitives drawn as CSS shapes or tiny inline SVGs — scattered at random offsets/rotations within ±60vw. - On scroll-enter (IntersectionObserver, threshold ~0.55), the parts **fly to their target positions** that trace the letterform, using a **spring** (this is the corpus-dominant `spring` pattern, 86%, but here it is *load-bearing*, not garnish): implement with the Web Animations API + a small spring solver, or CSS `linear()` easing approximating critically-slightly-underdamped (stiffness ~170, damping ~14, mass ~1), staggered 30–55ms per part. They **overshoot ~6%** then settle. After settle (≈900ms), cross-fade: parts → `opacity: .15` and shrink to the "floating" pool; the Archivo Black glyph → `opacity: 1`. Net effect: shapes *become* the letter. - Variable-font motion: plate titles and key copy words animate Archivo's `wght` 500→800 on the same spring as they reveal — type literally gaining mass. - Stagger the whole word: K settles, then A begins — choreographed, not simultaneous. **Motion & interaction** - **Inter-plate migration:** when a plate scrolls out, its leftover floating primitives are *handed to* the next plate's pool (don't destroy + recreate; reparent or animate continuously). The page should feel like one workshop bench scrolling past, not six slides. - **Parallax** (corpus 96% — use it, but Bauhaus-strict): only the flat color *fields* and the warp-rails parallax, at most 3 depth layers, slow (`translateY` ≤ 12% of scroll). The dieline and the constructed glyphs do **not** parallax — they're pinned to the bench. - **Floating elements:** 8–20 primitives per plate drifting on slow `requestAnimationFrame` Lissajous paths (periods 18–40s), opacity .08–.18, never colliding with the active letterform's bounding box (simple repulsion). - **The breath triangle** between syllables: a single `` triangle scaling 1.0↔1.08 and rotating ±2° on a 4s ease-in-out loop — the deliberate soft spot. - **Cursor companion:** a 24px hollow `ink` ring following the pointer with spring lag; on proximity to any `.part` it **magnetically** docks to that shape's center and flashes its fill `yellow` for 180ms. On touch devices, omit the ring; tapping a floating part nudges it on a spring instead. - Plate V (the dark one): when it enters, the page background transitions `paper → nightblue` over 600ms; the mint leaf-almonds spawn at the bottom edge and rise with gentle horizontal sine sway; the assembled `KANOJO` fades up in `red` over `nightblue`. On exit, background returns to `paper`. **Copy & voice** - Pastoral-romantic, specific, fond, never mushy. Examples of register: *"Her name starts with a shape you'd lean a ladder against."* / *"There's a triangle in the middle where the breath turns — that's the part she'd never tell you about herself."* / *"By orbit-light the name finally stands up, tomato-red against the dusk over the farm. It looks, you think, exactly like her."* - Plate titles in Space Mono small-caps: `PLATE I · THE BLANK FORM`, etc. - Colophon: `PROOF · KANOJO · MMXXVI · 7 FORMS · SET BY HAND`. **Avoid absolutely:** CTA-heavy layouts, pricing blocks, stat counters, glassmorphism, default gradients, photography, hand-drawn doodle aesthetics, card grids, hamburger menus, hero-with-button. If a section starts to look like a SaaS landing page, delete it and replace it with another plate of the name being built. ## Uniqueness Notes Differentiators measured against the 290-design corpus from the frequency analysis: 1. **Bauhaus (7%) executed as a *literal letterform-construction machine*, not as a "we use primary colors" mood board.** No other corpus site decomposes its actual subject — a name — into a fixed seven-piece geometric kit and re-assembles it glyph by glyph on scroll. The aesthetic isn't a skin; it's the page's mechanism. 2. **`kinetic-animated` typography (3% — rarest typography axis) as the load-bearing system.** Where most sites use type as static decoration with motion sprinkled on, here the type *is the animation*: every letter is born from flying primitives via a real spring solver, with variable-font `wght` gaining mass in sync. The corpus-ubiquitous `spring` pattern (86%) is repurposed from "button bounce garnish" to "the physics that makes a name legible." 3. **`vector-art` imagery (3%) + `floating-elements` motif (6%) fused into one idea.** The floating shapes aren't ambient decoration — they are the *unused parts bin*, literally consumed plate by plate to build the type. Two rare tags doing one job; no corpus site links them this way. 4. **`retro-futuristic` palette (4%) in its *Bauhaus-Dessau-primary* dialect — tomato-red / jade-turquoise / signal-yellow / cocoa-ink — instead of the chrome-and-neon dialect every other "retro-futuristic" site reaches for.** The "future" here is a 1969 sun-warm orbital greenhouse, not a synthwave grid. 5. **`pastoral-romantic` tone (36% — common label) routed *through* rationalist Bauhaus rather than the usual soft-focus botanical mush.** The romance lives in the specificity of the copy and in one deliberate soft spot (the breathing triangle) embedded in an otherwise hard-edged geometric document — an emotional register no other pastoral-romantic site in the corpus attempts. 6. **`full-bleed` (93% — universal) reframed as a six-plate poster *sequence* with a fixed printer's-dieline overlay and inter-plate shape migration** — not the usual full-bleed-hero-then-cards. There is genuinely zero card grid, zero centered wrapper, zero CTA on the entire page. **Chosen seed:** `aesthetic: bauhaus, layout: full-bleed, typography: kinetic-animated, palette: retro-futuristic, patterns: spring, imagery: vector-art, motifs: floating-elements, tone: pastoral-romantic` **Avoided overused patterns from frequency analysis:** hand-drawn (96%), glassmorphism (71%), photography (98%), card-grid (88%), centered (86%), gradient palette (97%), warm palette (98%), mono typography (94%), cursor-follow used as the *primary* gimmick (88% — here it's a minor accent, not the headline interaction), and the fashionable 12-column hairline grid (replaced with a Bauhaus dieline).