# Design Language for koakuma.quest ## Aesthetics and Tone koakuma.quest is **Swiss Modernism's most disciplined cousin set loose in a data-rich quest log** -- imagine if Massimo Vignelli, Adrian Frutiger, and the cartographer of Risk got together to design a knowledge-map. The aesthetic is austere, gridded, principled: type does most of the work, color is reserved, layout is geometric and confident. The tone is *minimal* -- nothing extra, every element earns its place. The brand frames a "quest" -- a journey of investigation -- through a series of data-visualization-driven sections. Each section presents one piece of the quest as if it were a page from a 1960s scientific journal: precise numerals, principled typographic hierarchy, occasional particle motion as the only ornament. The mood is *contemplative engineering* -- intellect at rest, but always reading. Inspirational anchors: Müller-Brockmann's grid manuals, Otl Aicher's Munich Olympics signage, Edward Tufte's "The Visual Display of Quantitative Information," IBM's annual report typography under Paul Rand, and the Bloomberg Terminal's spartan information density rendered in honey and stone. ## Layout Motifs and Structure A **full-bleed** composition with a single, ruthless grid -- 12 columns at 16px gutters, edge-to-edge with 48px outer margins on desktop. Each section consumes the entire viewport width without any container max-width constraints. The grid is visible as a faint guide -- 1px Honeyed Neutral rules every 4 columns, peeking through at 4% opacity, like the printed registration marks of a printer's proof. **Structural anatomy:** - **Header (full-bleed, 96px tall):** A single thin Honeyed Neutral rule across the entire viewport at 64px from top. Above the rule: a 12-column header with "koakuma.quest" left-flush in 14px caps, a quest-number index right-flush. No nav, no logo decoration. - **Hero (full-bleed, 100vh):** Left half (6 columns): a single oversized chart -- a particle-effect scatter plot rendered in real-time. Right half (6 columns): a single sentence statement set in 56px geometric sans, ranged-left, set in 4 lines. No CTA. - **Quest segments (full-bleed, variable height):** Each segment is a full-viewport "page" with a 12-column grid containing: (left 4 cols) a label cartouche and metadata, (center 4 cols) the principal data visualization (a chart, network diagram, sparkline cluster, or honeyed isobar map), (right 4 cols) explanatory text in tight Helvetica-style geometric sans. - **Inter-segment rules:** Each segment is separated by a single full-bleed 1px Honeyed Neutral rule with a tiny serif numeric label hanging off the right edge ("§ 04 / 12"). - **Endpoint segment (full-bleed):** A single quote set in 32px italic, ranged-left, with an attribution line in 11px caps below. No flourish. Spatial rhythm: hyper-disciplined. Every element snaps to the 12-column grid. White space is *information* -- every gap is intentional, sized to either 16px, 32px, 64px, or 128px (multiples of the base unit only). ## Typography and Palette **Fonts (all Google Fonts):** - **Primary geometric sans:** "Inter" 400/500/700 -- a workhorse geometric sans designed for screens, with excellent legibility at all sizes. Used for everything except numerals: body at 14-16px, subheads at 22-28px, statements at 44-56px, all caps labels at 11px (letter-spacing 0.16em). - **Display:** "Space Grotesk" 500 for one or two hero statements per section, at clamp(40px, 5.6vw, 88px), ranged-left, line-height 1.05, letter-spacing -0.018em. - **Numerals (data labels, axis ticks, indices):** "Space Grotesk" 500 lining figures at 11-13px. Tabular numbers used throughout. - **Italic quote face:** "Inter" 400i used only for pull quotes and the final endpoint quote at 28-32px. **Palette (honeyed-neutral):** - `#F5EFE2` -- Bone Cream (primary background, the "paper") - `#1F1A14` -- Inkwell (primary type, axis lines) - `#806A45` -- Honeyed Bronze (highlights, key data points, particle accents) - `#D5C8A8` -- Wheat Linen (alternate panel fill, faint chart grid lines) - `#3A322A` -- Toasted Walnut (secondary type, sublabels, lower-weight info) - `#E2A93B` -- Honey Highlight (the single accent color, used <5% of the time) - `#FAF7F0` -- Off-Paper (subtle alternating-band fill for tabular sections) Color logic: 85% Bone Cream + Inkwell, 12% honeyed neutrals (Bronze, Walnut, Linen), and only 3% Honey Highlight reserved for the "result" data points -- the punctuation of the quest. ## Imagery and Motifs **Core visual motifs:** - **Data visualizations (the centerpiece):** Each segment features one purpose-built data chart -- a scatter plot of particle positions, a small-multiple grid of sparklines, a network diagram with weighted edges, a horizon chart, or a honeyed contour map. All rendered as SVG with Inkwell strokes and Honey Highlight accent points. - **Particle effects (motif):** Quietly animated dots drift across each segment's chart area. ~80-120 particles per chart, 1-2px diameter, with very low alpha (0.12-0.28), moving at 0.04-0.18 px/ms in mostly horizontal trajectories. The particles slowly accumulate at "key" data points (the honeyed highlights), suggesting the quest's data converging. - **Geometric markers:** Square, triangle, and circle markers (1.2x base unit) used as data-point indicators, each meaningful (different shapes encode different data categories). - **Grid lines and rules:** Thin 1px Honeyed Neutral rules form an explicit underlying grid visible at 4% opacity. Section breaks use the same color at 100% opacity. - **Tabular cartouches:** Small bordered tables of metadata next to each chart, listing parameters in monospace-aligned columns (using Space Grotesk tabular figures). **Decorative patterns:** - A subtle dotted rule pattern (1px dots, 16px spacing, 6% opacity) underlies axis baselines in the charts. - No background texture -- the page is *clean*. The cream is uniform, the only "texture" is the grid itself. ## Prompts for Implementation **Open with a calibration sequence.** First 1400ms: the viewport begins entirely Bone Cream, blank. A single horizontal 1px Honeyed Bronze rule draws itself from left to right (`stroke-dashoffset` animation, 800ms, ease-out). When it completes, the header text fades in (200ms each, staggered 60ms apart for "koakuma" -> ".quest" -> "§ 01"). Then the hero scatter-plot particles bounce into position from below (`translateY(64px) -> 0` with cubic-bezier(0.34, 1.56, 0.64, 1) bounce easing, staggered 8ms per particle). **Bounce-enter pattern (featured):** This is the primary motion vocabulary, used in a *restrained* Swiss way. - Each data point in every chart bounces into its final position on segment-enter -- staggered, with cubic-bezier(0.34, 1.56, 0.64, 1) overshoot, ~640ms total, 6ms stagger per point. - Section labels bounce in from above (`translateY(-24px) -> 0`, opacity 0 -> 1, 480ms). - Section rules draw from left to right with bounce-back at the right edge (overshoot 4px, settle 240ms). - The Honey Highlight key-data points have a one-shot pulse on arrival (scale 0 -> 1.4 -> 1.0 over 600ms with bounce ease). **Particle effect choreography:** Particles in each chart's background drift in low-velocity Brownian motion -- pure Canvas2D loop, 60fps, ~100 particles. As the user scrolls through a segment, particles within the visible chart area drift *toward* the segment's "key" highlighted data point at low velocity (0.04 px/frame), creating a slow convergence effect. After 8 seconds of stagnation, they disperse and the loop restarts. **Cursor-precision interactions:** Every data point has a 24px invisible hit-target. On hover: the data point grows from 4px to 7px (180ms), and a thin Honeyed Bronze rule extends from the point to its axis labels (`width 0 -> 100%`, 320ms). The corresponding axis value highlights in Honey Highlight for the duration of hover. Pure principled engineering -- no bouncing, just information. **Scroll-coupled grid:** The faint 4% grid lines pulse slightly brighter (4% -> 8%) when a section is centered in the viewport, drawing attention to the disciplined structure. This pulse loops every 6 seconds while the section is active. **Storytelling beats (minimal, no CTAs, no pricing, no stats-as-decoration):** 1. Calibration intro: rule + header reveal. 2. Hero statement + scatter plot. 3. Quest segments §02 through §11, each one a chart + statement. 4. Endpoint quote: a single italic statement, ranged-left. **Anti-patterns to avoid:** No marketing CTAs, no "Get started for free", no feature trios, no testimonial sliders, no pricing -- this is a data essay, not a SaaS site. Even the stat-grids are recontextualized as *the actual content* (the quest's findings) rather than ornamental social proof. ## Uniqueness Notes **Differentiators from other designs in this collection:** 1. **Swiss minimalism with particle-effect motion (4% used for swiss):** Most swiss-modernist designs in the collection are static; adding a slow particle-convergence animation within charts creates a unique "data is alive" feeling while preserving the principled minimalism. 2. **Honeyed-neutral palette (2% used) as the primary information surface:** Most data-viz designs lean cool/dark; the warm honeyed neutral grounds the work in a paper-like reading experience reminiscent of printed scientific journals. 3. **Bounce-enter pattern (3% used) deployed sparingly within a Swiss frame:** The collection's bounce-enter typically pairs with playful aesthetics; here it's used as a controlled, almost mechanical entry behavior -- a small concession to motion within strict geometry. 4. **Data-viz imagery as content (4% used):** The site treats data visualizations as *the actual product* rather than decoration. Each quest segment's chart is the storytelling vehicle -- text supports, not the other way around. 5. **Full-bleed Swiss layout (rare combination):** Most Swiss designs use narrow centered measures; the full-bleed treatment with a strict 12-column grid creates a publication-scale presence usually reserved for editorial sites. **Chosen seed/style:** aesthetic=swiss, layout=full-bleed, typography=geometric-sans, palette=honeyed-neutral, patterns=bounce-enter, imagery=data-viz, motifs=particle-effects, tone=minimal. **Avoided overused patterns:** Refused parallax (95%), avoided the default centered/card-grid (95%/91%), declined mono typography (81%), and rejected the mysterious-moody mood (71%) in favor of disciplined minimal.