# Design Language for miko.quest ## Aesthetics and Tone miko.quest is a **surreal night-pilgrimage** — the field journal of a young *miko* (shrine maiden) who has wandered off the lantern-lit gravel path and into the *kamikakushi*, the "spirited-away" hour between dusk torii-gates and the first cold star. The site is not a shrine and not a video game, though it borrows the grammar of both: it reads like a sutra that has been folded into a paper boat and set adrift on black water. The mood is **dreamy-ethereal but never cute** — closer to the hush of a Noh stage lit by a single floor candle than to anime kawaii. Everything floats slightly out of true: horizons tilt, reflections appear before the things that cast them, a staircase of stone steps dissolves into a Milky Way halfway up. The tone of voice is quiet, second-person, and a little uncanny — the site speaks *to* the visitor as if they are the one being guided through the rite. There is reverence here, and a faint mischief, the way a fox-spirit might be reverent. Nothing shouts. The whole experience behaves like the long indrawn breath before a temple bell is struck — and it never quite strikes. ## Layout Motifs and Structure The spine is an **organic-flow vertical procession**, not a grid — a single meandering "path" of stepping-stones (`
`s shaped as irregular rounded polygons via `clip-path`) that wanders left and right down the page like a garden trail crossing a dark pond. Each stone is a "station" of the quest: *the threshold*, *the offering*, *the water-mirror*, *the nine fox-fires*, *the dawn*. Between stones, an SVG path-line (the pilgrim's footprints, drawn as a dotted brush-stroke) connects them and is progressively *drawn in* as the visitor scrolls — you are literally laying down the trail you walk. The composition deliberately abandons centered columns: text blocks hang asymmetrically off the stones, sometimes flush to a stone's curved edge, sometimes set in the negative space of the "water" beside it, with generous *ma* (間) — empty dark space treated as a material, not a void. A thin vertical *torii-rail* runs down the far left as a fixed scroll-progress totem: a stack of miniature vermilion gates that light up one by one. On mobile the path straightens into a single descending ribbon, but the stones keep their hand-cut irregular silhouettes and the footprint-line still threads through them. No card-grid. No bento. No dashboard. The page is a scroll in the literal sense — an emakimono unrolled downward. ## Typography and Palette **Headings & display:** "Cormorant Garamond" (Google Fonts) — a high-contrast serif-revival face, used at large optical sizes for station titles, often in italic, letter-spaced wide and set in a deep indigo that the dark background almost swallows. **Body & narration:** "Spectral" (Google Fonts) — a calm screen-serif with real italics, set generously at 18–20px, 1.75 leading, in a soft moon-grey on near-black; measure kept short (~58 characters) so reading feels like turning slim pages. **Ritual marks & captions:** "Zen Antique" or "Shippori Mincho" (Google Fonts, Japanese mincho serifs) for the occasional vertical-set phrase, station numerals, and seal-like labels — small, sparse, authoritative. **Accent/UI numerals:** "IBM Plex Mono" (Google Fonts), tiny, for footstep counts and timestamps along the trail. **Palette — "midnight-blue, candle, vermilion":** - `#0B0E1A` — *yoru*, the ink-black-blue ground (true base, never pure black) - `#141B33` — *fukasa*, deeper water in the pond panels - `#2A3358` — *kasumi*, misted indigo for borders, drawn paths, faint topography - `#C9D2E8` — *tsukikage*, moon-grey body text - `#F4EFE3` — *washi*, warm paper-white for headings and the few bright moments - `#E2542E` — *shu*, shrine-vermilion — used *only* for the torii-rail gates, the active footstep, and the single dawn flush at the page's end - `#E8B23A` — *honoo*, candle-gold — the nine fox-fires, hover glints, the kanji seal - `#5FA98F` — *aoke*, a cold moss-jade — rare, for the water-mirror's living surface The discipline: 95% of the page is the indigo-to-black gradient and moon-grey type; vermilion and candle-gold are *events*, never decoration. ## Imagery and Motifs No photography. Everything is **fine line-illustration in a single weight**, as if brushed with the dry side of a calligraphy brush onto dark paper: a leaning torii, a stone fox with a chipped ear, a hand holding a *suzu* bell-cluster, koi seen from above as concentric ripples, a paper crane unfolding into a constellation. The recurring motif network is **star-celestial + leaf-organic**: the Milky Way (*amanogawa*, the "river of heaven") braids through the layout as a faint particle-stream of dots; maple and ginkgo leaves drift across stations on slow vertical paths; the nine *kitsunebi* (fox-fires) bob as small candle-gold orbs with soft halos. Repeated geometric signs: the *torii* gate (⛩-like minimal glyph), the *tomoe* swirl (a three-comma spiral used as section dividers and the cursor's quiet companion), and *kumo* cloud-bands rendered as horizontal mist gradients between stones. A faint grain/noise overlay gives the whole surface the tooth of old washi paper. SVG filigree — folded-paper crease lines, brush-stroke terminals that taper to a point — frames each station like the border of a hanging scroll. Decorative but never busy: think one perfect ink-line, lots of dark around it. ## Prompts for Implementation Build this as a **full-screen narrative scroll** — a single long page that *is* the journey, no nav bar beyond the vermilion torii-rail progress totem on the left. Open on a near-black hero: a lone torii silhouette far down a path, the title "miko.quest" set in large italic Cormorant Garamond in `#F4EFE3`, and a single line of Spectral underneath inviting the visitor to "step off the path." A subtle vignette and an animated drift of indigo mist establish the hour. - **The trail mechanic:** an SVG `` running the full document height (the pilgrim's footprints as a dotted brush-stroke in `#2A3358`). Use `getTotalLength()` + `stroke-dashoffset` tied to scroll progress so the footprint-line *draws itself in* as the visitor descends — this is the central path-draw-svg gesture. Each time the line reaches a new station-stone, fire a stagger reveal of that station's text (lines rise and fade in, brushed-on, with a slight blur-to-focus). - **Stations as clip-path stones:** each `
` gets an irregular rounded `clip-path` polygon, a faint `radial-gradient` "wet stone" sheen, and a 1px `#2A3358` hairline rim. They alternate left/right of center; text hangs in the dark *ma* beside them. - **The water-mirror station:** a panel where the content above is reflected *below* in a vertically-flipped, blurred, `#5FA98F`-tinted copy that ripples on `mousemove` (cheap CSS `filter` + transform, or a tiny canvas ripple) — and, surreally, the reflection animates a half-second *before* the original. - **The nine fox-fires:** nine candle-gold orbs with `box-shadow` halos that bob on individual sine eases and gently follow the cursor with lazy magnetic lag; clicking one "lights" it (it brightens, a soft chime of scale-pulse) and the torii-rail records the count in IBM Plex Mono. - **Falling leaves & the river of heaven:** a low-density particle layer — ginkgo/maple leaf SVGs on slow vertical drift with rotation, plus a faint dotted Milky Way band that parallaxes slower than everything else. - **Cursor companion:** the *tomoe* three-comma spiral trails the cursor with spring lag, slowly rotating; over interactive elements it unfurls into a tiny torii glyph. - **The dawn (final station):** the only place the palette warms — the indigo bleeds toward `#E2542E` and `#E8B23A`, the torii-rail's gates are all lit, the footprint-line completes, and a single soft bell-ring animation (a ripple radiating from a `suzu` bell glyph) closes the scroll. The closing line, vertically set in Shippori Mincho, simply thanks the visitor for walking. - Respect `prefers-reduced-motion`: the line draws instantly, leaves settle, the mirror stops pre-empting itself. AVOID: CTA-heavy layouts, pricing tables, stat-grids, testimonial carousels, feature-card rows, signup bars. There is nothing to buy here — only a path to walk. Bias every decision toward atmosphere, restraint, and the feeling of being quietly led. ## Uniqueness Notes Differentiators from other CMassC designs: 1. **Surreal aesthetic + dreamy-ethereal tone** — surreal sits at ~2% and avant-garde at ~1% in the corpus; this site commits fully to dream-logic (reflections that precede their originals, staircases dissolving into stars) rather than the dominant hand-drawn (96%) and glassmorphism (74%) defaults. There is zero glassmorphism and zero photography here. 2. **Organic-flow stepping-stone procession instead of a grid** — deliberately rejects card-grid (88%), centered columns (86%), and full-bleed hero blocks; the layout is a meandering clip-path trail with asymmetric text hanging in negative *ma* space, a structure almost absent from the catalog. 3. **Midnight-blue base with vermilion/candle-gold as rare "events"** — runs against the near-universal warm (98%) + gradient-warm palettes; the page is 95% ink-indigo-to-black, and the only warm color appears at the very end as the dawn. 4. **Serif-revival pairing (Cormorant Garamond + Spectral + Japanese mincho)** — sidesteps the mono (94%) / humanist (51%) / handwritten (30%) defaults; mono is demoted to tiny footstep counters only. 5. **Path-draw-svg as the spine, not an accent** — the scroll *is* a brush-stroke trail drawing itself; this leans on an underused pattern (~32%) and makes it structural rather than decorative, while consciously down-weighting parallax (94%), cursor-follow (89%), spring (86%), and magnetic (80%) into supporting roles only. Chosen seed/style: **`aesthetic: surreal, layout: organic-flow, typography: serif-revival, palette: midnight-blue, patterns: path-draw-svg, imagery: line-illustration, motifs: star-celestial, tone: dreamy-ethereal`** — synthesized as *"the night field-journal of a shrine maiden spirited off the path, an emakimono scroll you walk down stone by stone toward an unstruck bell."* Referenced/avoided overused patterns from frequency analysis: hand-drawn, glassmorphism, photography, warm+gradient palettes, card-grid, centered, full-bleed, mono typography, parallax, cursor-follow, spring, magnetic — each either omitted or deliberately demoted to a minor supporting role.