# Design Language for devil.quest ## Aesthetics and Tone Devil.quest is a flat-design dashboard rendered with the slow tenderness of a Sunday-morning watercolor. The aesthetic is paradoxical: every panel is mathematically clean - no gradients, no textures, no shadows - yet the content is pastoral and quietly romantic, like a meteorological dashboard maintained by a mountain hermit. Tone is pastoral-romantic: gentle pacing, soft observations about weather and water and mountain mist, expressed through tidy data panels. Monochrome restraint - all blacks, grays, and pure whites - reinforces the contemplative mood. Inspiration draws from 1970s Swiss data terminals, the cold-objective beauty of Dieter Rams' Braun gauges, contemporary minimalist meteorology dashboards, and the visual restraint of mountain shrine architecture. The "devil" in the name is treated as the dragon-spirit of the mountain, not a Western devil. ## Layout Motifs and Structure Composition is a strict dashboard grid: 12 equal-height tiles arranged in a 4-wide x 3-tall lattice, each tile a flat-bordered card containing a single metric, chart, or observation. The top row covers atmospheric conditions (cloud cover, wind, precipitation), the middle row covers terrain (elevation, snowpack, trail status), and the bottom row covers spirit observations (folkloric notes, shrine activity, distant bell counts). Each tile has only a 1px stroke #1a1a1a border, a tile label in tiny mono, a large numeric reading, and one supplementary line of pastoral commentary. No headers, no navigation - just the lattice. A thin date-stamp strip runs across the very top in mono. Mobile: tiles stack into a single 12-tall column. ## Typography and Palette Headlines use Inter Tight Medium at clamp(2rem, 4.5vw, 3.6rem), perfectly humanist sans-grotesk with -1% tracking. Subheads use Inter Tight Light Italic at 1.1rem for pastoral commentary. Body copy is set in Inter Tight Regular at 0.95rem with 1.6 line-height. Tile labels and metric units use JetBrains Mono ExtraLight at 0.78rem uppercase, letter-spacing 0.12em. Palette is rigorous monochrome: paper #FAFAFA, soft-stone #E8E8E8, mid-gray #999999, charcoal #4A4A4A, ink #1A1A1A. One single accent - cold-rain #6B7B85 - is permitted only on shake-error pulses and chart strokes. No other color whatsoever. ## Imagery and Motifs Imagery is water-bubbles: tiny circular bubbles of varying size rendered as flat SVG circles in mid-gray, floating gently up through tiles labeled with water-themed data (precipitation, spring flow, snowmelt). The bubbles never overlap text - they drift in the margins. Motifs are mountain-landscape: minimalist single-line SVG mountain silhouettes anchoring tile headers, rendered as 1px charcoal strokes; tiny pagoda-roof shapes mark shrine-related tiles; thin contour-line patterns appear at 15% opacity behind elevation panels. A small mountain-and-water glyph (a triangle resting on three water bubbles) serves as the page's recurring sigil. ## Prompts for Implementation Build devil.quest as a quiet meteorological dashboard reporting from a remote mountain. Each tile loads with a gentle 400ms ease-out fade, staggered 80ms apart across the lattice top-left to bottom-right. Implement shake-error as the heartbeat of the page: every 7-12 seconds, one randomly selected tile gently shakes 3px horizontally for 280ms (cubic-bezier 0.36, 0.07, 0.19, 0.97) and pulses the cold-rain accent color, simulating the moment a reading is unstable. Water-bubble SVGs animate continuously up through their tiles with a translateY infinite loop over 8-14 seconds, slightly random offsets so no two bubbles share rhythm. Mountain-silhouette glyphs path-draw on tile entry over 1.4s. Avoid CTA banks - each tile is autonomous and self-explanatory. Hover causes a tile's border to shift from 1px to 1.5px and pulses one bubble. Cursor remains the default arrow - this is a serious instrument. The narrative should feel like reading meteorological telegrams from a hermit who finds the dragon-spirit of the mountain in numerical patterns: "Wind 4.2 m/s NE. The mountain breathes east today." ## Uniqueness Notes - Combines a strict monochrome flat-design dashboard with pastoral-romantic micro-copy, producing data that reads like quiet poetry. - Treats shake-error not as a failure state but as the page's heartbeat, randomly pulsing one tile every 7-12 seconds to signal "the mountain just exhaled." - Reinterprets "devil" as a mountain dragon-spirit through mountain-landscape motifs and water-bubble imagery, subverting the obvious thematic interpretation. - Chosen seed/style: flat-design aesthetic, dashboard layout, sans-grotesk typography, monochrome palette, shake-error pattern, water-bubbles imagery, mountain-landscape motifs, pastoral-romantic tone. - Frequency analysis avoidance: sidesteps overused mono typography (82%), centered/card-grid layouts (96%/93%), mysterious-moody tone (71%), warm-gradient palettes (95%/78%), photography imagery (90%), parallax pattern (96%). Leans into underused flat-design aesthetic (1%), dashboard layout (9%), shake-error (2%), water-bubbles (2%), mountain-landscape (2%), monochrome palette (3%), and pastoral-romantic tone (3%).