# Design Language for kurairi.com ## Aesthetics and Tone kurairi.com is **a 1970s Polaroid corporate-annual-report scrolling horizontally through an aged photo album** -- a *nostalgic-retro* corporate aesthetic where staid annual-report typography and analogous earth-and-sky palettes are reanimated as a long horizontal scroll through aged paper pages. The mood is warm-corporate, like rifling through the binders of a long-defunct stationery company whose products turn out to have been *very good*. The "kurairi" brand (a coined word evoking "kuro+iri" -- dark inlay, or "cool entry") becomes the name of an imaginary heritage-corporation -- the kind that used to make fountain pens, then file folders, then magnetic tape. The site is its 1976 annual report, presented as a horizontally-scrolling shelf of aged pages. Each section is a *page-spread* you scroll into from the right. Type is kinetic-animated: words gently re-align, re-weight, re-letterspace as pages enter view. Inspirational anchors: IBM's 1973 annual report, the typographic systems of Massimo Vignelli for Knoll, the Polaroid SX-70 advertising layouts, Saul Bass corporate identity work, Pentel pen marketing brochures from Japan circa 1978, and the muted analogous palettes of mid-century engineering catalogs. ## Layout Motifs and Structure A **horizontal-scroll** composition where the entire site is a single continuous scroll-right canvas, organized as a film-strip of 8-10 page-spreads, each occupying 140vw. The user scrolls down with the trackpad/wheel, but the content moves *right* via CSS transform translateX on a sticky container -- the classic scrollytelling horizontal trick. **Structural anatomy:** - **Cover page (140vw):** A single tall stenciled "K U R A I R I" wordmark composed of kinetic-animated letterforms, set against an aged-paper background with a single hand-drawn corporate-mark logotype at top-right. Below: "Annual Report · MCMLXXVI" in tight Garamond. - **Page spreads (each 140vw, full-height):** 8 horizontal "spreads" each presenting one chapter of the brand's history. Composition: a Polaroid-aged photograph (left half), a column of kinetic-animated typography (right half), and a slim corporate metadata strip across the bottom. - **Inter-spread "fold marks":** Between each spread, a vertical aged crease line with a small Polaroid-style date stamp ("1976 · Q3 ·") at its base. - **Bubble decorative motifs:** Soft, playful bubble shapes drift across the corporate composition -- a tonal counterpoint to the staid layout. Bubbles are translucent, sized 18-72px, and float upward at 0.06px/ms. - **Final spread (closing colophon, 100vw):** A single Polaroid-aged photograph of the imagined corporate headquarters, with a paragraph of kinetic-animated copy crediting the typography, ink, and date. Spatial rhythm: horizontal procession. The user scrolls and the pages slide laterally -- each spread is a complete read before the next slides in. ## Typography and Palette **Fonts (all Google Fonts):** - **Kinetic-animated display:** "Anton" 400 -- a tall, condensed display sans suited to corporate poster work. Used for spread titles at clamp(56px, 9vw, 140px), letter-spacing oscillating between 0.04em and -0.01em on a 6s loop (kinetic effect). - **Body / annotations:** "EB Garamond" 400/400i at 16-17px, line-height 1.62. The classic Garamond gives the page its corporate-heritage feel. - **Metadata strips:** "Inter" 500 at 11-12px, all caps, letter-spacing 0.22em. - **Numerals:** "EB Garamond" 500 with old-style figures for the Roman date / chapter numerals. - **Kinetic motion:** The kinetic axis is letter-spacing and weight (where variable). When pages enter the viewport, titles animate their letter-spacing from 0.08em (relaxed) to -0.01em (tight) over 1.2s -- as if the type were *settling into place* on the page. **Palette (analogous):** - `#E8DDC1` -- Aged Cream (primary page-fill, the "Polaroid paper") - `#C49A6B` -- Polaroid Tan (older paper, alternate spread background) - `#8B5A33` -- Heritage Walnut (typography, frame borders) - `#4A3219` -- Dark Coffee (deep accent, masthead text) - `#D5B788` -- Faded Sand (bubble fills at varying alpha) - `#9A7F5C` -- Dust Bronze (Polaroid mat borders, secondary frames) - `#F4ECD8` -- Bright Vellum (highlights, fresh paper highlights) Analogous logic: all colors live on the warm-brown-gold-tan spectrum (hue range 30-50 degrees) -- nothing breaks the monochromatic warmth. The bubble motif uses Faded Sand and Bright Vellum at 0.3-0.5 alpha to keep them subordinate. ## Imagery and Motifs **Core visual motifs:** - **Polaroid-aged photographs:** Each spread features a single photograph rendered as if it were a 1976 Polaroid -- thick white-mat border (28-36px), gentle vignetting, slight color-shift toward Polaroid Tan, soft grain overlay, and a hand-written date inscription on the white mat ("April · 1976"). - **Paper-aged texture:** A subtle SVG turbulence-and-displacement filter applied to every page background -- 8% opacity, 0.4px noise scale, simulating real aged paper. - **Kinetic letterforms:** Individual letter spans receive small animations on viewport entry -- weight, letter-spacing, vertical baseline shift -- all subtle, all coordinated. - **Bubble-playful motif:** Small translucent bubbles drift across every spread, breaking the corporate seriousness. 12-18 bubbles per spread, rising upward, with gentle horizontal drift (±8px sine over 6s). - **Fold crease lines:** Vertical aged "folds" between spreads -- thin Heritage Walnut lines (0.5px) with a slight gradient halo, suggesting the corporate binder's spine. **Decorative patterns:** - A faint grid pattern (Heritage Walnut at 3% opacity, 32px grid) over the aged-paper background, like the underlying ruling of a ledger. - Polaroid mat borders have a slight texture (paper grain) applied via radial-gradient with subtle yellowing. ## Prompts for Implementation **Open by sliding the binder open.** First 1600ms: viewport begins all Aged Cream. The first "page" slides in from the right (translateX(100vw) -> 0, 1200ms, cubic-bezier(0.22, 1, 0.36, 1)). As it arrives, the K-U-R-A-I-R-I wordmark letters animate in: each letter independently fades in (200ms each, 70ms stagger) and *kinetically settles* its letter-spacing from 0.18em (loose) to 0.04em (tight) over 800ms. The corporate-mark logotype at top-right draws its strokes with stroke-dashoffset. **Horizontal scroll mechanics:** Use a `position: sticky` container with `top: 0` and `height: 100vh`. Inside, an inner element has `width: 1260vw` (8 spreads x 140vw + cover) and `display: flex`. As the user scrolls vertically, modulate the inner element's `transform: translateX(...)` based on `window.scrollY / (totalHeight - viewportHeight)`. Smooth this via `lerp` for buttery motion. **Slide-reveal pattern (featured):** Each spread reveals its content as it slides into view: - The Polaroid photograph slides in from below (translateY 48px -> 0) with a slight rotation (-1.5deg -> 0). - The title text staggers in letter-by-letter (kinetic letter-spacing settling). - The metadata strip drafts in from the right edge (translateX 96px -> 0). - A bubble cluster drifts upward across the spread (each bubble starting -120px below frame). - Spread transitions trigger a thin fold-crease line to "draw" itself vertically as the next spread approaches. **Kinetic typography (featured pattern in title animation):** Each spread title is a kinetic composition. On enter: - Letter-spacing animates from 0.16em -> -0.01em (1200ms, cubic-bezier(0.22, 1, 0.36, 1)). - Font-weight (where variable) ticks from 300 -> 700 over 800ms with a small overshoot to 750 then settle to 700. - Each letter has a tiny independent vertical offset that bounces -3px -> +1px -> 0 (staggered 30ms per letter). **Bubble drift loop:** A pure JS particle system on Canvas2D. ~16 bubbles per spread, with subtle physics: each bubble has slight buoyancy (+0.04 px/ms vertical), horizontal sine drift (amplitude 8px, period 6s), occasional opacity flicker (0.32 ±0.08), and a softly-rendered radial gradient fill. Bubbles wrap around vertically -- when they leave the top, they re-enter from below at a new horizontal position. **Storytelling beats (nostalgic, no CTAs, no pricing, no testimonials):** 1. Cover spread: KURAIRI wordmark + "Annual Report MCMLXXVI" subtitle. 2. Spread I: "Founding" -- a Polaroid of an imagined workshop + 4 paragraphs of history in Garamond. 3. Spread II-VII: each presenting a "chapter" -- the pen era, the folder era, the magnetic tape era, the digital pivot, etc. 4. Closing colophon spread: a Polaroid of the HQ, with credits. **Anti-patterns to avoid:** No "Contact Us" CTAs, no product pricing, no signup forms, no feature trios, no testimonial sliders. This is a heritage annual report, not a marketing site. ## Uniqueness Notes **Differentiators from other designs in this collection:** 1. **Corporate aesthetic (24% used) reframed as horizontal-scroll annual report:** Most corporate-aesthetic designs are vertical, modular, and contemporary. Pairing corporate with horizontal-scroll (4% layouts) and a nostalgic 1970s frame creates an editorial publication, not a brochure. 2. **Kinetic-animated typography (3% used) as the title-animation system:** Letter-spacing and weight animating *into place* on every title is the centerpiece motion vocabulary, not a one-off effect. 3. **Bubble-playful motifs (2% used) drifting through a staid corporate composition:** The whimsical bubble motif sits in deliberate tension with the staid corporate type and Garamond body -- a quiet contradiction that gives the site its charm. 4. **Paper-aged imagery (3% used) with analogous palette (2% used) on horizontal-scroll:** All three are individually uncommon; combining them produces a distinctly retro-corporate visual signature. 5. **Nostalgic-retro tone (3% used) on a corporate site:** Most nostalgic-retro designs lean playful or surreal; this one is committedly *corporate* -- staid, gridded, dignified, but warmed by aged paper and bubble drift. **Chosen seed/style:** aesthetic=corporate, layout=horizontal-scroll, typography=kinetic-animated, palette=analogous, patterns=slide-reveal, imagery=paper-aged, motifs=bubble-playful, tone=nostalgic-retro. **Avoided overused patterns:** Refused vertical-parallax (95%), declined centered/card-grid (95%/91%), avoided mono typography (81%), and rejected mysterious-moody tone (71%) in favor of nostalgic warmth.