# Design Language for miko.quest ## Aesthetics and Tone miko.quest is a **dopamine**-saturated quest-journal — a hyperactive, joy-forward archive of small absurd missions, displayed like a 1970s Saturday-morning game-show ledger filtered through risograph dopamine maximalism. The aesthetic is loud, candy-juiced, with high-vibrancy triadic color cells stacked and spilling, but the tone is **nostalgic-retro** — the warm flicker of an old Konami quest-screen, mid-1980s family-restaurant placemats with mazes printed on them, the bouncy synth fills of City Pop. Inspiration draws from Hassan Rahim's risograph posters, Pentagram's late Paula Scher walls of type, the spring-loaded easing of *Loops* mobile UI by Studio Hyperlink, and a recurring rounded-sans grin like Cooper Black with a softer haircut. Visiting feels like opening a thick spiral-bound activity book at a roadside diner in 1981. ## Layout Motifs and Structure The architecture is a **sidebar** layout — a sticky left-side nav rail 280px wide hosts the quest catalog (a vertical scroll of 36 numbered quests with bouncy progress dots), while the right side is a 100vw - 280px wide canvas where the active quest's full content unfolds. The sidebar uses chunky pill-shaped buttons with rounded-sans labels and an animated progress fill (organic-blob shaped, see below). The main canvas is divided horizontally into "panels" like a comic page: each quest's content has 4–7 panels arranged in an irregular comic grid (panel widths and heights vary, some are slanted at -2° or +2°), separated by thick black gutters. A floating top-right "score bauble" — a circular badge bouncing on a digital spring — displays an arbitrary point total that does not correspond to anything. The page scrolls vertically within the main canvas only; the sidebar stays fixed and animates dots as scroll position changes. ## Typography and Palette **Typography** is led by Quicksand (the **rounded-sans** brief): Quicksand 700 at 14px tracked +100 uppercase for sidebar quest labels, Quicksand 500 at 18px / 1.55 for body copy in panels, and Quicksand 700 at 88px for quest titles in each panel hero. A display secondary, DynaPuff Variable, appears at 48–96pt with extreme rounded "PUFF" axis settings (PUFF=80) for the score-bauble, score-pops, and major exclamations ("!", "+50", "WOW"). Numbers are tabular oldstyle to feel ledger-like. **Palette** is a true **triadic** trio plus paper-cream and ink-black: - `#FFEED2` — paper-cream (page ground, sidebar fill) - `#FF3D6E` — strawberry primary (one of three triadic spokes) - `#3DE0FF` — pool-blue (second triadic spoke) - `#FFD23D` — yolk-yellow (third triadic spoke) - `#1B1218` — ledger ink (typography, panel gutters) - `#FFFFFF` — pure white (highlights, score-bauble inner glow) - `#7B4A53` — risograph maroon (secondary text, captions, "stamped" feel) - `#8FBC8F` — pale fern (rare accent for "completed" state) The three triadic spokes are used in equal measure — none dominates, the page reads as a rotating mix of pink/blue/yellow on cream. ## Imagery and Motifs Imagery is built from **noise-texture** — every panel ground has a high-grain risograph noise overlaid at 14% opacity, giving the whole page the slightly off-register paper feel of cheap mid-century printing. Each quest hosts one large hand-drawn-style **organic-blobs** illustration: blobs are rendered as oversized risograph color blobs with off-register edges (two layers slightly misaligned by 2–4px to mimic ink-trap misregistration). Decorative motifs: chunky hand-drawn arrows pointing between panels, hand-lettered "QUEST 14" panel numerals, a recurring miko-fox mascot rendered as a single-color blob with two dot eyes appearing as a 30×30px stamp on every quest header, and a thick rubber-stamp seal style "COMPLETED" mark applied diagonally to finished quests. Spring physics drive the score-bauble: it bobs and reacts to clicks with overshoot and settle. No photographs. ## Prompts for Implementation Build a sidebar-and-canvas quest journal with risograph dopamine maximalism. The sidebar quest list uses progress dots animated as soft organic-blob fills (`clip-path: path()` with 8 control points morphing slowly via CSS animation). The signature interaction is **spring** physics: every clickable element responds with a calibrated spring (stiffness 220, damping 12, mass 0.8) — JS uses a small spring solver (or imports Wobble.js) so buttons, the score-bauble, and the panel hover-scale all share a consistent overshoot feel. Click any sidebar item: the main canvas content cross-fades using a 600ms scale 0.96 → 1.0 spring transition with a Quicksand 88pt quest title sliding in from the right with a +12px overshoot. The score-bauble increments arbitrarily on user interactions ("+5", "+50", "+1") with a yellow DynaPuff number popping out of it and falling off the bottom of the screen with a spring trajectory. Risograph misregistration is achieved via two stacked color layers per blob illustration, each absolutely positioned and offset by 2–4px in opposite directions (use CSS `mix-blend-mode: multiply` so the overlap goes darker). Avoid CTA stacks, signup walls, stat grids, pricing menus — this is a personal absurd-quest log, not a product. The footer is a chunky hand-lettered Quicksand 700 line: "miko.quest — 36 quests, 0 prizes, all crumbs." ## Uniqueness Notes - **Differentiator 1:** True triadic palette executed with equal weight on pink/blue/yellow on cream — most "triadic" claims in the registry default to one dominant + two accents; this one rotates. - **Differentiator 2:** Spring physics applied as a system-wide interaction feel via a real spring solver, not generic CSS cubic-bezier — unusual rigor for the planned `spring` pattern. - **Differentiator 3:** Risograph misregistration achieved with stacked offset color layers — a print-process detail almost never replicated in registry designs. - **Differentiator 4:** Sidebar layout used for narrative quest browsing, not the typical dashboard navigation — repurposes the convention. - **Differentiator 5:** Score-bauble is arbitrary and gameified for charm, not for any actual metric — playful subversion of dashboard signaling. - Planned seed: aesthetic=dopamine, layout=sidebar, typography=rounded-sans, palette=triadic, patterns=spring, imagery=noise-texture, motifs=organic-blobs, tone=nostalgic-retro. - Avoids overused patterns flagged by frequency.sh: `playful` aesthetic (28%), `photography` imagery (89%), `corporate` aesthetic (24%) — none used here.