# Design Language for gunsul.quest ## Aesthetics and Tone gunsul.quest is a **Scandinavian error museum** — a deliberately quiet, bone-white digital space where computer glitches are curated like Nordic design objects. The aesthetic is somewhere between a Copenhagen gallery catalogue and a kernel panic: high function, extreme restraint, then suddenly a button refuses to cooperate and everything shakes. The humor is deadpan, which makes it funnier. The site never shouts; it raises one eyebrow. The mood: a Finnish programmer who loves Alvar Aalto furniture, keeps a spotless apartment, and once watched a loading spinner for 45 minutes as a form of meditation. The playfulness is architectural, not cartoonish — it lives in unexpected interactions, not in bright colours or cartoon faces. Everything breathes. Long margins. Generous line-height. Text set at sizes that feel slightly too large, then suddenly correct. The whitespace is the content. ## Layout Motifs and Structure The page is a **full-bleed vertical stack of monolithic slabs** — each section occupies exactly 100vh (or more on mobile) with zero decoration between them. No dividers, no gradients, no transition effects. Sections simply end and the next begins, as if the browser is a slide projector clicking forward. **Spatial logic — the Slab Stack:** 1. **Hero Slab (100vh, white background)** — The entire hero is the domain name rendered in a monospace typeface at approximately 18vw, left-aligned, flush to a 64px left gutter. Below it, one line of body text in 15px. Nothing else. The generative art SVG — a procedural Lissajous grid drawn in hairline black strokes — fills the right 40% of the hero as a pure CSS `::after` background, never obscuring type. 2. **About Slab (100vh, black background, white text)** — A single paragraph floated to the vertical centre, constrained to 540px max-width, offset 20% from left. The text is the only element. A small `[gunsul]` glyph in the bottom-right corner blinks at irregular intervals using CSS animation. 3. **Feature Slab (variable height, off-white #F5F5F0)** — Three feature cards stacked vertically, full-bleed each at 50vh, with a single word heading (20vw mono), one sentence explanation (15px body), and a single input field that shakes on focus if the user hasn't done anything for 3 seconds (shake-error pattern, playful, not punitive). 4. **Generative Demo Slab (100vh, black)** — A live HTML canvas draws a recursive subdivision pattern in white strokes, subdividing in real-time based on mouse proximity. Title bar reads `// generative.fragment` in mono. 5. **Contact Slab (100vh, white)** — A single email input field, centred on the page. When submitted incorrectly (or on first hover), the field shakes, then winks with a blink of its placeholder text changing to `nope.` before resetting. **Grid system:** 12-column CSS Grid, 8px base unit throughout. All horizontal rhythm snaps to 8px multiples. Gutters: 64px desktop, 24px mobile. No sidebars. Nothing floats. Overflow hidden on body except during shake animations. ## Typography and Palette **Typefaces (Google Fonts only):** - **Primary — Display & Body:** `JetBrains Mono` (400, 500, 700) — The entire site is set in this typeface. Headlines at 16vw tracking -0.02em. Body at 15px/1.75 tracking 0.01em. Its designed-for-code geometry brings the tech-mono character without the sterility of system fonts. - **Secondary — UI Labels & Nav:** `Space Grotesk` (400, 500) — Used only for navigation items, metadata labels, and captions. Set at 12px uppercase with tracking 0.15em. Provides just enough contrast with the mono body to create hierarchy without introducing a third typeface. - **Tertiary — Decorative Glitch Text:** `Share Tech Mono` (400) — Reserved exclusively for error-state text, shake labels, and the blinking `[gunsul]` glyph. It carries a slightly different stroke weight from JetBrains Mono — the subtle mismatch reads as a system-level anomaly. **Colour Palette (monochrome):** - `#FFFFFF` — Pure White: hero background, text on dark slabs, input fields - `#F5F5F0` — Warm White: secondary backgrounds, feature slab, hover states on dark - `#1A1A1A` — Near Black: primary text on white, black slab background - `#4A4A4A` — Dark Grey: secondary text, captions, label text - `#C8C8C8` — Mid Grey: borders (0.5px), input outlines, grid hairlines in generative art - `#0A0A0A` — True Black: deepest background for canvas slab, critical CTAs No colour is used. No colour whatsoever. If a state requires emphasis, it uses negative space, weight change, or animation — never hue. ## Imagery and Motifs **Generative art is the only imagery.** No photography, no illustrations, no icons except a single minimal arrow glyph (drawn in SVG, 20×20px, 1px stroke). **Generative elements:** 1. **Hero background — Lissajous Grid:** An SVG of 400 sine-curve intersections drawn as 0.5px black hairlines on white, with `a` and `b` ratios chosen to create a 23×17 grid of nested ellipses. Rendered as inline SVG, not a raster image. Occupies the right 40% of the hero slab via CSS `clip-path`. 2. **Canvas Fragment (Feature Slab decoration):** A `` element behind each feature card renders a recursive quad-tree subdivision: a 1px black stroke divides and re-divides a 400×400 white square, stopping when regions reach ~12px². The subdivision updates once per second, replacing 3% of cells silently. Animates with `requestAnimationFrame`. 3. **Contact Slab — Reaction Dots:** Twelve dots of radius 3–8px float in the white background, connected by 0.5px lines when within 80px of each other. They drift with Perlin-noise velocity, recoiling from the mouse pointer. All dots and lines are white-on-black (inverted section) or black-on-white. **Motifs (tech):** - Bracket notation: section labels read `[01]`, `[02]`, `[03]` in Share Tech Mono at 11px uppercase. - Horizontal rule: a single 1px `
` at full slab width in `#C8C8C8`, used exactly once — between the hero and about slabs. - No decorative borders, shadows, or gradients anywhere on the page. - The `_` cursor blinks in the hero headline, implemented in CSS, suggesting the page is still being typed. ## Prompts for Implementation Build gunsul.quest as a **single full-page scroll experience** with no routing, no modals, no pop-ups. The narrative arc: the visitor arrives in quiet whitespace, descends into darkness, watches math happen in real time, then is gently trolled by a form that shakes at them. **shake-error pattern (the site's signature):** Implement `@keyframes shake` as: `0% translateX(0) → 15% translateX(-8px) → 30% translateX(8px) → 45% translateX(-6px) → 60% translateX(6px) → 75% translateX(-3px) → 90% translateX(3px) → 100% translateX(0)`. Duration 0.45s, timing `cubic-bezier(0.36, 0.07, 0.19, 0.97)`. Apply to `.shake` class. Do NOT loop the shake — it fires once per trigger, then stops. The input field in the Feature Slab gets this class added after 3 seconds of focus-without-typing. The contact form gets it on invalid submit. After each shake, a one-line commentary appears in Share Tech Mono, 12px, fading in over 200ms: rotate through `"try again."`, `"nope."`, `"really?"`, `"...still no."`. **Generative canvas:** Use `requestAnimationFrame`. For the hero Lissajous SVG, generate it once at page load with `a=3, b=2, delta=Math.PI/4`, plotting 2000 points. Do not regenerate on resize — scale via CSS transform. For the live canvas, use the quad-tree subdivision approach: start with the full canvas rect, split it vertically or horizontally (alternate), recurse until min-size reached. Each frame, randomly pick one leaf cell and merge it with its sibling, then re-split differently, creating the slow mutation effect. **Typography implementation:** Load only JetBrains Mono (400, 500, 700), Space Grotesk (400, 500), and Share Tech Mono (400) via Google Fonts. Set `font-size: 16px` on ``, all sizes in `rem` or `vw`. Hero headline: `font-size: clamp(3rem, 16vw, 18rem); letter-spacing: -0.02em; line-height: 0.9;`. Body: `font-size: 0.9375rem; line-height: 1.75;`. **Scroll behaviour:** Use CSS `scroll-snap-type: y mandatory` on the container with `scroll-snap-align: start` on each slab. The snapping should feel deliberate and mechanical, reinforcing the slide-projector metaphor. Disable snap on mobile for better scrollability. **Navigation:** A minimal fixed topbar: 100% width, 40px height, white background, `border-bottom: 0.5px solid #C8C8C8`. Left: `[gunsul.quest]` in Share Tech Mono 12px. Right: nothing. The topbar disappears with `transform: translateY(-100%)` after the hero slab leaves viewport, then reappears when scrolling up past 20% of any slab. **Avoid:** - Parallax on any element (overused at 91%) - Colour of any kind (monochrome is the constraint and the statement) - Photography or any raster imagery - Stagger animations on text reveals (overused at 62%) - Centered layout for body text (overused at 90%) ## Uniqueness Notes 1. **Full monochrome with no tint escape**: Most monochrome sites sneak in a single accent hue. gunsul.quest commits absolutely — every state, hover, error, and animation is expressed through opacity, weight, or motion. The constraint is the identity. 2. **shake-error as playful protagonist, not UI failure indicator**: The shake pattern (2% usage) is reframed from "you made a mistake" to "the site is teasing you." The chatty one-liners after each shake transform an error affordance into a personality trait. No other site in this corpus uses shake this way. 3. **Generative math as the only decoration**: While 13% of sites use "generative" aesthetic, they typically mean noise textures or blob shapes. gunsul.quest uses deterministic mathematical curves (Lissajous figures, quad-tree subdivision) rendered in hairline strokes — the decoration is legibly algorithmic, not organic, reinforcing the tech-mono sensibility. 4. **Scandinavian restraint + deadpan tech humor**: The corpus has zero other sites combining Scandinavian aesthetic with playful tone. Every Scandinavian-coded site in the directory is calm-serene or professional. gunsul.quest deploys all the spacing and typographic discipline of Nordic design, then uses it as a straight-man for the shake-error comedy. 5. **Chosen seed**: aesthetic: scandinavian, layout: full-bleed, typography: tech-mono, palette: monochrome, patterns: shake-error, imagery: generative-art, motifs: tech, tone: playful