# Design Language for tobikage.monster ## Aesthetics and Tone Neomorphism rendered in chilled aurora frost — pillowy translucent surfaces floating in a softly lit refrigerator made of moonstone and mist. The page reads like a watercolor painted on the inside surface of a frozen window: tactile soft shadows, glassy translucent panels, dreamy washes of pale color leaking through ice. Inspiration: the haptic surfaces of Dieter Rams's Braun radios reimagined in translucent frost, Hayao Miyazaki's "Howl's Moving Castle" winter palette, the watercolor cloudscapes of Hilma af Klint, and the soft glass-blur UI of visionOS keynote shots. The tone is dreamy-ethereal — everything floats, nothing snaps. The visitor should feel as if walking through a museum of light at dusk: hushed, mineral, slightly out of focus. ## Layout Motifs and Structure Timeline-vertical spine through frost-cathedral architecture. A single soft-glowing vertical rail (3px Frost Lavender gradient) runs down the page; section nodes are pillow-soft neomorphic capsules positioned alternately left and right of the rail. Each capsule has the canonical double-shadow neomorphic treatment (a soft light from upper-left, soft shadow lower-right), but rendered with translucent frosted glass — so the capsule simultaneously appears to be sculpted from pillow and from mist. Sections progress with zoom-focus pattern: as a section enters the viewport, the camera "zooms" via CSS transform scale-from-0.96 over 700ms, while neighbor capsules subtly retreat. Watercolor blooms drift behind the rail — large soft washes of pale lavender, peach, and mint at 8% opacity, moving slowly. Particle-effect motes (tiny pale dots) drift across the page as if seen through soft snow. The structure feels like a vertical procession through a quiet museum corridor. ## Typography and Palette - **Display:** "Inter" (Google Fonts) — sans-grotesk, weight 300 at 48–72px, italic for dreamy emphasis - **Body:** "Manrope" (Google Fonts) — sans-grotesk, weight 300 at 17px line-height 1.75 - **Caption / node-mark:** "Space Grotesk" (Google Fonts) — at 12px for timeline node labels and date markers - **Accent / verse:** "Cormorant Garamond" (Google Fonts) — italic light for occasional poetic interludes Palette — Translucent-frost aurora: - `#F1F4FA` Glacial White — main background - `#E0E6F0` Frost Lavender — capsule fill base, rail gradient anchor - `#C7BBF5` Pale Iris — neomorphic shadow tint, watercolor wash - `#A3D5E3` Mint Mist — secondary watercolor wash - `#F4C7C0` Peach Cloud — tertiary watercolor wash - `#2A2F45` Twilight Pen — body text and node-label glyphs ## Imagery and Motifs - **Watercolor** washes: large irregular blooms of Pale Iris, Mint Mist, and Peach Cloud drift behind the timeline rail. Watercolor edges are softly feathered with SVG `feGaussianBlur` and `feTurbulence` for organic bleed - **Particle-effects**: tiny 1–3px pale particles drift at varied speeds across the page (50–80 particles total). Particles fade in/out at edges to give a soft snow-or-spore sense - Neomorphic capsules: each section capsule has a 24px border-radius, dual-shadow (4px white upper-left, 8px lavender lower-right), and a `backdrop-filter: blur(8px)` translucent fill - Frost ornaments: thin hexagonal snowflake glyphs (single-line SVG) appear as bullet markers along the rail - A recurring "moonstone" still-life: a small isometric pale-rose translucent sphere reappears at section closes — the page's quiet talisman ## Prompts for Implementation - The timeline-vertical rail is a 3px-wide gradient (top: Frost Lavender → bottom: Pale Iris), sticky relative to body, with a soft 16px outer glow (drop-shadow filter) - Each section capsule alternates left/right; positioned at 120–200px offset from the rail; connected via a 2px hairline curve drawn with SVG path that gently curves from rail to capsule - Zoom-focus pattern: IntersectionObserver triggers a `transform: scale(0.96 → 1)` over 700ms cubic-bezier(.2,.7,.2,1); neighboring capsules in viewport scale to 0.94 and reduce opacity to 0.7 - Watercolor washes: SVG with `feTurbulence` + `feColorMatrix` to soften, animated via `animateTransform` translate at 30–45s durations, opacity 0.08–0.18 - Particle effects: tiny `` elements in a `` or SVG, each drifting via requestAnimationFrame with sine-wave horizontal jitter; 60–80 particles total - AVOID: pricing modules, CTA bars, stat-counters, testimonial carousels. Replace product features with poetic interlude capsules in italic Cormorant - Neomorphic capsules: backdrop-blur(8px) over a translucent Frost Lavender fill at 0.6 alpha; inner light edge via a 1px inset white shadow at 0.5 alpha - Reading flow must feel like drifting: every transition uses ≥600ms easing, no snappy reveals ## Uniqueness Notes - Differentiator 1: neomorphism + watercolor is a tactile/painted hybrid the corpus does not attempt — soft pillow meets organic wash - Differentiator 2: timeline-vertical as a frost-cathedral procession, not as a "company history" or "step-by-step" - Differentiator 3: translucent-frost palette executed with four micro-tints (lavender, iris, mint, peach) — disciplined ethereal range - Differentiator 4: particle-effects motifs at restrained density (60–80) and very low velocity — meditative, not chaotic - Differentiator 5: dreamy-ethereal tone counters mysterious-moody (70%) corpus dominance by being lit rather than shadowed - Chosen seed: aesthetic: neomorphism, layout: timeline-vertical, typography: sans-grotesk, palette: translucent-frost, patterns: zoom-focus, imagery: watercolor, motifs: particle-effects, tone: dreamy-ethereal - Avoids overused patterns: parallax (94%), card-grid (90%), centered (94%), photography (90%), warm palette (93%), mysterious-moody (70%), mono typography (81%)