# Design Language for conc.quest ## Aesthetics and Tone conc.quest is a **Swiss-modernist alpine field journal warmed by late-afternoon honey light** — imagine if Josef Müller-Brockmann had spent the summer of 1962 tracking a single concept across a chain of foothills, sketching its silhouette in graph-paper notebooks, and dipping each page in beeswax before binding the journal in oat-coloured linen. The aesthetic is **swiss precision (6% of corpus — claiming empty room) crossed with mountain-landscape motif (3% — even emptier room)**, and the resulting register is **approachable-casual (2% — the rarest tone in the corpus)** rather than the cold authoritative voice that "swiss design" usually invites. The mood is *quiet expedition*. Not the silver-and-glass swiss of corporate consultancy decks, not the black-on-white swiss of typography manuals — but a swiss in **honeyed-neutral palette (5%)**, where the rationalist grid is poured over a beeswax-and-oat surface and the only ornaments are the topographic contour lines of a single recurring mountain silhouette. The site reads like a friendly ranger leaning on a wooden lectern in a glacial visitor centre, pointing at a hand-drawn map and saying "the concept lives up there — we'll walk it together, take your time." The word "quest" is read literally: the homepage is **a single, scrollable trail** from foothill to summit. The user is a hiker. The concept (whatever conc.quest's eventual content claims to track — concurrency, concepts, conscience, concentration, concord; the design is content-agnostic by deliberate construction) lives at the summit, visible from every section as a steady silhouette on the upper-right horizon. As the user scrolls, **the gradient-mesh sky shifts from morning-honey to afternoon-amber to evening-bronze**, marking time and altitude simultaneously. The contradictions are deliberate and load-bearing: rationalist Swiss grid + warm honeyed palette + casual ranger-tone + literal mountain motif. Each axis collides with one other axis. The tension between modernist restraint and approachable warmth is the whole point — conc.quest is what happens when a swiss typography poster discovers it would rather be a trail map handed out at a ranger station, and is allowed to be both. ## Layout Motifs and Structure The composition is built on **minimal-navigation (6% in corpus — underused, claimed)** layered over a **strict 12-column Müller-Brockmann grid** with a **44-pixel base unit and 88-pixel modular gutters**. The page is a single vertical trail; navigation is one fixed altimeter strip in the top-right corner, no menu drawer, no hamburger, no hero-CTA-pricing-stats stack. - **The single-column trail.** The entire homepage is one continuous vertical scroll modelled as **an altitude profile**. There are no sections in the conventional sense — there are *waypoints*. Eight waypoints from base camp to summit. Each waypoint occupies roughly 100vh, but the boundaries between them are soft: the gradient-mesh sky bleeds across waypoint edges, the typography flows continuously, the only visible boundary is a single 1-pixel hairline contour-line drawn at the exact pixel-row corresponding to that waypoint's named elevation. - **The altimeter strip.** Top-right, fixed, 88px wide × 100vh tall. A vertical scale numbered 0m → 3,200m. A small honey-coloured cursor dot tracks the user's scroll position. Tapping any number jumps to that waypoint. This is the *entire* navigation — no other links, no logo-as-home, no breadcrumbs. The altimeter is the index. - **The horizon line.** A horizontal 1-pixel rule sits at exactly **38.2% from the top of every viewport** (golden-section baseline). It never moves. Above the horizon: gradient-mesh sky and the recurring mountain silhouette. Below the horizon: text, captions, ranger-notes, contour diagrams. The horizon line is **the load-bearing constraint of the entire layout** — every grid decision flows from it. - **The mountain silhouette.** A single SVG silhouette of a triangulated peak with three subordinate ridges, anchored to the upper-right of every viewport, parallax-tracked at 0.18× scroll speed (slower than foreground). The silhouette is *the only constant graphic element* on the page; it grows imperceptibly larger as the user climbs (1.0× at base, 1.42× at summit) and rotates 0.3° on cursor-x movement. - **Waypoint composition rule (the eight-step amble).** Each waypoint is laid out as: large display headline pinned to the lower-left of the horizon line, body paragraph in the lower-third left column (4 of 12 columns wide), a subordinate caption typeset in italic small-caps in the lower-right column (3 of 12), and one wide ranger-diagram (a hand-keyed SVG contour, isobath, or trail-section) spanning columns 5–9 above the body. No images, no hero photography, no stock illustration — the only visual asset is SVG. - **The waypoint manifest.** The eight waypoints, in scroll order, are: (1) Base Camp, 0m — *introduction, who we are*. (2) Switchback One, 380m — *what the quest is*. (3) Treeline, 1,100m — *first conceptual landmark*. (4) The Saddle, 1,600m — *the central question*. (5) Scree Field, 2,000m — *honest difficulties*. (6) False Summit, 2,400m — *common misconception*. (7) The Cornice, 2,900m — *the breakthrough*. (8) Summit, 3,200m — *the resolution / sign-off*. Names are loadbearing — they replace conventional section labels like "Features," "Pricing," "About." - **No CTA, no pricing, no testimonials, no email signup, no stats grid.** The homepage is a hike. At the summit, instead of a "sign up" button, there is a **wooden trail-register** typeset as a single text input — the user can leave one mark in the register, no email required, no commitment. That is the only interactive primitive on the page besides the altimeter. ## Typography and Palette **Fonts (Google Fonts only — three voices, one of them strictly an *expressive-variable*):** - **Display & Wordmark — `Fraunces` (Variable; opsz 14–144, wght 100–900, SOFT 0–100, WONK 0–1)** — *the expressive-variable axis is the load-bearing typographic statement.* Fraunces is the rare Google variable font that carries four animatable axes; conc.quest hooks its scroll-progress to all four. At Base Camp (0% scroll), Fraunces is set at opsz 14, wght 300, SOFT 0, WONK 0 — neat, restrained, almost unremarkable. By the Summit (100% scroll), Fraunces is at opsz 144, wght 800, SOFT 100, WONK 1 — squashy, warm, slightly drunk on the altitude. **The display headline at every waypoint reads in a slightly more expressive Fraunces than the one before**, so the headlines themselves climb the mountain. This is the entire reason "expressive-variable" was chosen as the typography seed (5% of corpus): it is mobilised here as a scroll-driven narrative axis, not as a static design choice. - **Body & Ranger-Notes — `Inter` (Variable; opsz 14–32, wght 100–900)** — neutral, swiss-friendly, used for paragraph body, captions, and the altimeter numerals. Set at 18px / 1.6 leading / weight 380 / opsz 18 for body. The italic small-caps captions use Inter at weight 520, tracked +12, with `font-variant: small-caps`. - **Numerals & Diagram Labels — `JetBrains Mono` (weights 400, 600)** — used exclusively for the altimeter numerals (300m, 600m, 900m…), elevation tags on contour diagrams, and the final trail-register's mark-counter. Tabular figures are required so the altimeter never shifts. **Type-scale (modular, 1.333× ratio anchored to 18px body):** 12 / 14 / 18 / 24 / 32 / 42 / 56 / 75 / 100 / 134 / 178px. Display Fraunces lives in the 75–178 range; body Inter in 14–24; mono in 12–18. The scale is hand-set on the 44-pixel base grid — display headlines align to baseline grid only at scroll-rest, never during in-flight Fraunces axis animation (the brief misalignment during a wght-axis sweep is part of the texture). **Palette — honeyed-neutral (5% of corpus, claimed; eight stops, all warm, zero cool):** - `#F4ECD8` — *oat linen* — page surface, the colour of a sun-bleached field notebook. The only "white" on the page; nothing is pure white anywhere. - `#E8D5A6` — *raw honey* — gradient-mesh sky base at Base Camp (0% scroll), and the mid-tone of the altimeter strip background. - `#D4A857` — *honeycomb gold* — the dominant mountain-silhouette fill above the horizon line, and the active-state ink of the altimeter cursor dot. - `#B8842D` — *amber resin* — Fraunces display ink at Base Camp; deepens to `#7A4F18` (*walnut bark*) by the Summit. - `#7A4F18` — *walnut bark* — body text ink, contour-line strokes, ranger-note italic small-caps. - `#3F2A12` — *peat earth* — the deepest ink, used only for the horizon hairline and the trail-register input border. - `#F8F1DC` — *beeswax* — gradient-mesh sky highlight at midday-waypoints (Treeline, Saddle). - `#C26B2C` — *bronze sunset* — gradient-mesh sky at Summit (100% scroll); also the colour of the altimeter cursor dot when actively dragged. The whole palette sits in the 30–50° hue range. **There is no blue, no green, no red, no purple, no cool-grey anywhere on the site.** Even the "sky" gradient-mesh stays in honey-amber-bronze territory; the only cool note is the implied glacial-blue of the unrendered other-side-of-the-mountain, which the user never sees. This single-hue commitment is what makes the palette swiss-rationalist and approachable-casual at the same time: rationalist because it is constrained; approachable because it is warm. ## Imagery and Motifs **Every visual on conc.quest is hand-keyed SVG drawn against a procedural gradient-mesh sky. No photography, no 3D renders, no stock illustration, no icon library. The corpus has photography at 98%; this site refuses photography entirely.** **The Mountain-Silhouette Object (mountain-landscape, 3% in motif corpus — claimed).** A single triangulated peak with three subordinate ridges, hand-keyed in 47 SVG path points, fills the upper-right of every viewport above the horizon line. The silhouette is **deterministic but never identical**: a tiny GPU-friendly displacement function offsets each path point by ±2px on a slow 60-second oscillation, so the mountain *breathes*. At cursor hover, the silhouette tilts 0.3° on the cursor-x axis (parallax depth illusion). As the user scrolls, the silhouette grows from 1.0× to 1.42× scale (closer to the summit) and shifts colour from `#D4A857` (honeycomb gold, in morning light) to `#B8842D` (amber resin, late afternoon). **The Gradient-Mesh Sky (gradient-mesh imagery, 17% — used here in a deliberately constrained way).** The sky above the horizon is a single full-bleed CSS `radial-gradient` mesh composed of four warm stops (`#E8D5A6`, `#F8F1DC`, `#D4A857`, `#C26B2C`). The mesh is parameterised by scroll-progress: at 0% scroll the warm centre sits low-left (morning sun rising over base camp), at 50% scroll it sits dead-centre top (high midday at the saddle), at 100% scroll it sits low-right (sunset behind the summit). The transition is governed by a 1.4-second cubic-bezier so scroll-stuttering never reads as flicker. **The Eight Ranger-Diagrams (one per waypoint).** Each waypoint is illustrated by exactly one hand-keyed SVG diagram, drawn in the visual vocabulary of a 1962 mountain-survey field-guide: 1. **Base Camp** — a contour map of the immediate valley, showing the trailhead as a dot and the route as a dashed line. 280-point SVG path, walnut-bark stroke, no fill. 2. **Switchback One** — a side-profile elevation diagram showing the first ascent, with grade percentage labels in JetBrains Mono. 3. **Treeline** — a botanical inventory: five hand-keyed SVG conifers in increasing height-order, each with its species labelled in italic small-caps Inter. 4. **The Saddle** — a topographic plan of the saddle pass, drawn as concentric isobath rings. 5. **Scree Field** — a granular dot-pattern diagram of stones, with three highlighted "honest difficulty" stones marked by larger circles. 6. **False Summit** — a "you are not at the top" diagram: a small false-peak triangle in foreground, a larger true-peak triangle behind, separated by the saddle-gap. 7. **The Cornice** — a cross-sectional diagram of the snow cornice, drawn as nested layered curves. 8. **Summit** — a 360° panoramic horizon-ring drawn as a circle with cardinal-direction tick marks; in the very centre, the Fraunces glyph for "∴" (therefore) sits at SOFT 100, WONK 1. **The Trail-Register (the only UI input).** At the very bottom of the page, after the Summit waypoint, there is a wooden lectern rendered in pure SVG (graphical hand-key, not skeuomorphic photoreal). Atop the lectern is a single text input field — `` styled to look like an open page in a leather-bound register. The user can leave one mark (a name, a glyph, a single sentence — no email required, no validation). Below the lectern, a tabular-figure JetBrains Mono counter reads "*N hikers have signed*" — N is fetched from a tiny static endpoint, increments locally on submit (optimistic UI), and is the only dynamic content on the page. **No icons. No photography. No raster images of any kind.** The favicon is the mountain-silhouette glyph rendered at 32×32 in honeycomb-gold. The OG image (only raster asset on the site) is a 1200×630 PNG rendered server-side from the same SVG vocabulary. ## Prompts for Implementation Build conc.quest as **one HTML file, one CSS file, one ES module** — no framework, no bundler, no build step. Treat the page as **a vertical hike from base camp to summit**, where every interaction reinforces the metaphor of a quiet, friendly expedition. **There is no CTA. No pricing. No testimonials. No stat grid. No FAQ. No contact form. No email signup.** The only interactive primitives are the altimeter strip and the trail-register at the summit. **Storytelling structure (eight waypoints, single vertical scroll):** 1. **Base Camp (0m, 0% scroll).** The page opens with the gradient-mesh sky in low-morning-honey, the mountain-silhouette small in the upper-right, and the wordmark "conc.quest" set in Fraunces opsz 32 / wght 300 / SOFT 0. Below the horizon, a single sentence in Inter introduces the hike: *"There is a concept up there. We're going to walk to it. Take your time — there is no rush, and no shortcut."* The altimeter strip on the right activates with a soft cursor dot at 0m. 2. **Switchback One (380m, ~12.5% scroll).** Fraunces axes nudge upward (opsz 56 / wght 380 / SOFT 12). The headline introduces *what the quest is*. The ranger-diagram is a side-profile elevation showing the first switchback. A ranger-note in italic small-caps reads "*the trail bends here so the grade stays kind to your knees.*" 3. **Treeline (1,100m, ~25%).** Fraunces opens up further (opsz 75 / wght 480 / SOFT 28 / WONK 0.2). Headline introduces the first conceptual landmark. The botanical-inventory diagram lists five ascending conifer silhouettes. The mountain-silhouette has visibly grown and warmed in tone. 4. **The Saddle (1,600m, ~37.5%).** This is the *load-bearing waypoint*: the central question of the quest is posed here. Fraunces at opsz 100 / wght 580 / SOFT 50 / WONK 0.4. The headline pins to the lower-left of the horizon, the central-question paragraph occupies the lower-third left columns, and the topographic isobath diagram fills the upper-right below the horizon. 5. **Scree Field (2,000m, ~50%).** A frank, casual acknowledgement of common difficulties. Fraunces opsz 100 / wght 620 / SOFT 60 / WONK 0.5. The granular dot-pattern diagram of scree is animated: each dot has a 0.5–2.0s individual oscillation period, so the field appears to shimmer like heat off rocks. 6. **False Summit (2,400m, ~62.5%).** A waypoint named for honesty. Fraunces opsz 134 / wght 700 / SOFT 75 / WONK 0.7. The diagram shows the false-peak/true-peak gap, with a humorous small-caps note: "*almost — but not quite. one more saddle.*" 7. **The Cornice (2,900m, ~85%).** The breakthrough waypoint. Fraunces opsz 134 / wght 760 / SOFT 90 / WONK 0.9. The cross-section of layered snow curves is rendered with subtle SVG-filter feTurbulence so the layers shimmer faintly. 8. **Summit (3,200m, 100%).** Fraunces is now at full expressive extremity (opsz 178 / wght 800 / SOFT 100 / WONK 1) — the headline is squashy, warm, *almost edible*. The 360° horizon-ring diagram with the central "∴" glyph fills the viewport. Below it, the wooden trail-register lectern. The user may leave one mark and continue. There is no other call-to-action. **Animation system (hover-lift as the only interaction primitive — pattern at 13%):** The site implements **hover-lift literally and exclusively**. Every interactive element responds to hover by *lifting* in z-space — a 4-pixel translateY rise + a soft warm shadow (`0 6px 20px rgba(184, 132, 45, 0.18)`) + a 1.02× scale. **No magnetic-cursor (65% of corpus, refused), no cursor-follow (75%, refused), no spring-bounce, no card-flip, no morph, no parallax-on-hover, no underline-draw.** Hover-lift is the only pattern, applied to: the altimeter cursor (lifts 4px on hover, 8px on drag), each waypoint's ranger-diagram (lifts on hover), the trail-register input (lifts when focused), and the wordmark (lifts when scrolled past). The discipline of *one and only one interaction primitive* is itself a swiss design statement. **Scroll behaviour.** The page uses `scroll-snap-type: y proximity` with each waypoint a soft snap-stop. On reduced-motion, snap is disabled and the Fraunces axis animation is disabled (axes lock to the morning-honey base values). On wide viewports (≥1440px) the 12-column grid is fully expressed; on narrow viewports the grid collapses to 6 columns and the altimeter strip migrates to the bottom-right as a smaller 44px-wide indicator. **Tone of copy (approachable-casual, 2% — claimed).** All copy on the site is written as if a friendly ranger is leaning on the lectern next to you. Lowercase preferred, contractions used freely, sentences short. *"that's the saddle. catch your breath."* Never authoritative, never enterprise, never a marketing voice. The Fraunces display headlines may be squashy and warm but the words inside them are plain English. This casualness is the seed's claim on the rarest tone in the corpus. **Performance budget.** The page is one HTML, one CSS, one ES module, plus three font subsets (Fraunces variable subset, Inter variable subset, JetBrains Mono regular). Total budget: under 220KB compressed. No images. No third-party scripts. No analytics beyond a single 1×1 pixel counter for the trail-register signature count. The mountain-silhouette breath-animation runs on `requestAnimationFrame` only when the silhouette is in viewport (IntersectionObserver gated). **Bias toward narrative immersion over conversion.** This site does not exist to capture a lead. It exists to *take a walk with the visitor*. Every design decision serves the metaphor of a kind, slow, friendly hike. If a feature would shorten the hike (a "skip to summit" button, a sticky CTA, a popup), it is forbidden. ## Uniqueness Notes This design's differentiators, each a deliberate departure from the patterns documented in the frequency analysis: 1. **Swiss aesthetic in honeyed-neutral palette, with a casual ranger voice.** Swiss is at 6% in the aesthetic frequency, and the swiss sites that exist tend to live in cool-greys or stark monochrome with an authoritative voice. conc.quest pairs swiss precision (12-column Müller-Brockmann grid, modular 1.333× type scale, 44-pixel base unit) with honeyed-neutral palette (5%, also claimed) and approachable-casual tone (2% — *the rarest tone in the entire corpus*). The combination — rationalist swiss skeleton, beeswax-and-oat surface, ranger-talking-to-you voice — is, as far as the corpus shows, unique to this site. 2. **Mountain-landscape motif treated as the entire load-bearing layout primitive.** Mountain-landscape sits at only 3% in the motif corpus. Where corpus sites that use mountains treat them as decoration (a hero photo, a parallax background), conc.quest treats the mountain *as the layout itself* — the page is an altitude profile, the navigation is an altimeter, the eight sections are eight waypoints from base camp to summit, and the recurring SVG silhouette is the only constant graphic element. The motif is structural, not decorative. 3. **Expressive-variable typography animated by scroll altitude (not by hover or click).** Expressive-variable typography is at 5% in the corpus, and the existing instances use variable axes for static design choices or for hover-trigger animation. conc.quest hooks Fraunces's four variable axes (opsz, wght, SOFT, WONK) to *scroll-progress* as a continuous narrative axis, so the headlines literally become more expressive — squashier, warmer, slightly drunker — as the user climbs higher. The typography itself is doing the climbing. 4. **Hover-lift as the only interaction primitive, with magnetic-cursor and cursor-follow explicitly refused.** Hover-lift is at 13% in the patterns corpus; magnetic-cursor (65%) and cursor-follow (75%) are dominant. This site refuses both dominants and commits monastically to hover-lift, applied to every interactive element with no variation. The discipline of *one and only one interaction* is a swiss design claim made through subtraction. 5. **Refusal of photography (98% of corpus) — visuals are 100% hand-keyed SVG.** Photography sits at 98% in the imagery corpus — nearly universal. conc.quest refuses photography entirely and renders every visual as hand-keyed SVG (mountain silhouette, ranger-diagrams, gradient-mesh sky, trail-register lectern, OG image source). The site's only raster asset is the OG card, rendered server-side from the SVG vocabulary. 6. **Single-hue palette commitment (no blue, no green, no cool-grey anywhere).** Cool-grays sit at 2%, ethereal-blue at 4%, forest-green at 3% — all rare individually but collectively common as accent notes. conc.quest commits to a single hue range (30–50°, honey through bronze) with zero cool notes. The implied glacial-blue of the mountain's far side is deliberately never rendered; the user only sees the honey-warm, sun-facing slope. 7. **Refusal of CTA, pricing, testimonials, stat-grid, signup, and FAQ — replaced by a single trail-register.** Where the corpus skews heavily toward conversion-oriented blocks, conc.quest refuses all of them. The only interactive primitive after the altimeter is a wooden trail-register at the summit where the user may leave one mark — no email, no commitment, no validation. The site is not a funnel; it is a hike. 8. **Altimeter as sole navigation (minimal-navigation, 6% — claimed).** The corpus skews toward elaborate navigation (top-bars, mega-menus, hamburgers, sidebars). conc.quest's only navigation is a 88px-wide vertical altimeter strip with eight numbered waypoints. Tap a number, jump to that elevation. There is no other way to navigate the site, and there is no other navigation primitive on the page. **Chosen seed (from assignment):** *aesthetic: swiss, layout: minimal-navigation, typography: expressive-variable, palette: honeyed-neutral, patterns: hover-lift, imagery: gradient-mesh, motifs: mountain-landscape, tone: approachable-casual.* Every dimension of this seed lands in underused corpus territory (swiss 6%, minimal-navigation 6%, expressive-variable 5%, honeyed-neutral 5%, hover-lift 13%, gradient-mesh 17%, mountain-landscape 3%, approachable-casual 2%). The combination is a coordinated claim on empty room across all eight axes simultaneously. **Avoided patterns (from frequency analysis):** photography (98%, refused entirely), hand-drawn aesthetic (95%, refused — site is geometric SVG, not sketch-style), gradient palette (96%, refused as a *base* — palette is solid honeyed stops, gradient appears only in the sky-mesh imagery), parallax (94%, refused except as the single mountain-silhouette parallax-track), mono typography (95%, refused as primary face — JetBrains Mono is used only for diagram labels), magnetic-cursor (65%, refused), cursor-follow (75%, refused), spring (75%, refused — no bounce, no overshoot, only cubic-bezier eases), card-grid (75%, refused — site is single-column trail), full-bleed (90%, refused — strict 12-column grid with margins).