# Design Language for kaguya.monster ## Aesthetics and Tone kaguya.monster is **mid-century parlor cryptozoology** -- a 1962 living-room field guide to the household monsters who quietly share the user's house. The mood is **approachable-casual**: the host is a friendly retired cryptozoologist welcoming the reader to flip through their scrapbook over evening tea. Inspirations: George Nelson's Ball Clock and Marshmallow Sofa product photography, Saul Bass film-poster compositions, the cream-and-orange palettes of mid-century paperbacks (especially the Penguin "Pelican" non-fiction series of 1958-1968), Charley Harper's stylized animal woodcuts, and the candle-lit warmth of a Norman Rockwell living room at dusk. Mid-century supplies the simple geometric forms, two-color flat illustration, and modular furniture-grid layouts. Complementary palette (orange + teal) sets the central chromatic tension. The site is structured with a fixed sidebar (the living-room "shelf") and a main reading area (the open book on the coffee table). Counter-animation patterns are everywhere: when one element scales up, an adjacent element scales down by the same amount to keep the page's overall weight balanced. ## Layout Motifs and Structure A **sidebar** layout, but mid-century: the sidebar is a "bookshelf" graphic on the left, holding labels for each monster's chapter. The main canvas is the open book. - **Sidebar (left fixed, 280px):** A stylized bookshelf graphic, with each monster's chapter rendered as a small mid-century-illustrated book spine standing on the shelf. The current chapter has a soft candle-glow halo (subtle drop-shadow). Click to jump. - **Main canvas (variable, right of sidebar):** A long-scroll reading area. - **Opening parlor (110vh):** A centered illustration of a mid-century living room -- couch, lamp, side table, ball clock on the wall -- with the wordmark "KAGUYA.MONSTER" set in condensed type across the top. - **Monster chapters (variable, ~140vh each):** Each chapter introduces one household monster. Structure: a 2-color flat illustration of the monster (left-aligned), a 2-paragraph "field report" body text (right-aligned), and a small "candle-atmospheric" sidebar with the monster's habits. - **Field-guide diagram:** Each chapter has one geometric diagram (the monster's measured silhouette, with annotations). - **Footer scrapbook (90vh):** A small grid of "evidence photographs" -- noise-textured polaroid-style images of where the monsters have been seen. - **Candle markers:** A small flickering candle icon at the start of each chapter, hand-drawn, that pulses very gently. When the reader hovers over a monster's illustration, that illustration scales up by 4%; simultaneously, the field-report body text scales down by 4% (counter-animation). The visual weight stays constant. ## Typography and Palette **Fonts (Google Fonts only):** - **Display:** "Oswald" weight 500 condensed at clamp(56px, 9vw, 144px), tracking 2%. The narrow modernist letterforms read as Pelican paperback titling. - **Sub-display:** "Oswald" weight 400 at clamp(28px, 4vw, 48px). - **Body:** "Lora" weight 400 at 18px / 1.75. Lora's transitional serif (the only non-Oswald face) reads as mid-century book body type. - **Italic:** Lora italic at 400 for asides. - **Numerals:** "Oswald" tabular at 22px. - **Captions / small labels:** "Lora" small caps at 11px tracking 14%. **Palette (complementary -- mid-century orange and teal):** - `#f5ead2` -- cream paper (primary background) - `#e8d8a0` -- pelican yellow-cream (secondary background) - `#e8743c` -- mid-century orange (primary complementary accent) - `#1c6470` -- teal forest (secondary complementary accent) - `#3a4a48` -- charcoal slate (text) - `#a85820` -- burnt orange (hover/active deeper) - `#f0c878` -- candle glow (highlight, atmospheric) The orange/teal complementary tension is mid-century paperback canonical, balanced by the cream paper background. ## Imagery and Motifs - **Mid-century 2-color flat illustrations:** Each monster is rendered as a Charley-Harper-style geometric flat illustration in orange and teal on cream, with strong simple shapes (circles, triangles, rectangles) and no gradients. - **Noise-texture polaroid photographs:** Evidence photographs use a faint noise texture overlay (SVG ``) to simulate film grain, with rough white polaroid frames. - **Candle-atmospheric ornaments:** Small flickering candle icons (hand-drawn, with a slowly pulsing flame) appear at chapter openings. The flame uses a CSS animation that subtly varies its `box-shadow: 0 0 8px rgba(240, 200, 120, 0.5)` over 4.6s to simulate candlelight. - **Counter-animation interactions:** When any illustration scales up (1.04x on hover), the adjacent text element scales down by the inverse (0.962x) so the visual weight remains constant. A specific signature interaction. - **Geometric diagrams (field guide):** Each monster has a measured silhouette diagram with axis ticks, annotations, and arrows -- mid-century scientific-illustration style in single-weight orange ink. - **Modular shelf icons:** The sidebar's bookshelf graphic is built from simple geometric shapes (rectangles, circles, triangles) referencing mid-century modular furniture. ## Prompts for Implementation The site is a friendly cryptozoologist's parlor field guide. Build a sidebar + main canvas, with counter-animation pairing and mid-century 2-color flat illustration vocabulary. - Sidebar: `position: fixed; left: 0; top: 0; bottom: 0; width: 280px; background: #f5ead2;`. Inside, a stylized SVG bookshelf graphic with chapter spines as `` groups. - Main canvas: `margin-left: 280px; max-width: 920px; padding: 64px 48px;`. - Counter-animation: each `.monster-illus` and its sibling `.field-report` are wrapped in a `.chapter` container. On `.monster-illus:hover`, apply `transform: scale(1.04)` AND `.chapter:has(.monster-illus:hover) .field-report { transform: scale(0.962); }`. Both transitions at 320ms cubic-bezier(.2,.8,.2,1). - Candle flame animation: `@keyframes flicker { 0%, 100% { transform: scaleY(1); box-shadow: 0 0 8px rgba(240, 200, 120, 0.5); } 50% { transform: scaleY(1.06); box-shadow: 0 0 12px rgba(240, 200, 120, 0.7); } }` at 4.6s cycle. - Mid-century illustrations: inline SVG with `fill="#e8743c"` and `fill="#1c6470"` on basic geometric primitives. No gradients allowed. No more than 2 colors per illustration (plus the cream background showing through). - Noise texture: a 240x240 SVG `` overlay applied to evidence photographs via `mix-blend-mode: multiply; opacity: 0.22`. - AVOID CTAs, pricing modules, signup banners, stat counters. The site is a scrapbook; the only interaction is one mailto link in the footer: "tell us about the monster in your house." - Storytelling: parlor introduces the host; chapter by chapter introduces a household monster; field-guide diagrams add scientific credibility; evidence scrapbook closes with photographic "proof." - Approachable-casual voice: "this is the sock-eater. they live in the gap behind the dryer." "if you leave them a saucer of milk, they leave one sock per week." "the host has lived with this monster for forty-one years." ## Uniqueness Notes **Differentiators from other designs:** 1. **Mid-century parlor cryptozoology as a single coherent register:** No other design occupies this specific intersection of 1962 modernist illustration, friendly cryptid scholarship, and counter-animation interaction. 2. **Sidebar as physical bookshelf graphic:** The fixed sidebar is rendered as a stylized SVG bookshelf with chapter spines -- a literal furniture metaphor rather than a navigation list. 3. **Counter-animation as the central interaction pattern:** When one element grows, its sibling shrinks by the inverse. The page's visual weight stays constant. This balance-preserving interaction has no precedent in the registry. 4. **Two-color flat illustration discipline:** Every monster illustration uses only orange and teal -- no gradients, no shading, no third color. The constraint creates a unified Pelican-paperback look across all chapters. 5. **Candle-atmospheric as small flickering accents:** Candle-light is reduced to small icons with slow flame-flicker -- the atmospheric mood lives in tiny details, not in dramatic lighting effects. **Chosen seed:** mid-century sidebar condensed complementary counter-animate noise-texture candle-atmospheric approachable-casual -- planned seed from assignment. **Frequency-aware choices:** `mid-century` (2%), `counter-animate` pattern, `noise-texture` imagery, `candle-atmospheric` motifs, and the Oswald-Lora pairing are all uncommon. Avoids overused `playful` and `photography`. The mid-century + cryptozoology framing has no precedent.