# Design Language for conc.quest ## Aesthetics and Tone `conc.quest` is read aloud as **"conquest"** — but the truncation is the point. The site is a **velvet atlas of unfinished concords**: a luxurious, generative cartography studio where ideas of *concurrency, concord, concentration, concession, concertation* are charted as star-routes on a slowly rotating retro-futuristic plotter. The aesthetic is **the private chart-room of a 1970s lunar diplomat** — the kind of room where men in cream linen suits used grease pencils to sketch trade routes across acetate slides while a CRT in the corner ran a Lissajous figure on infinite loop. Imagine a hybrid of Charles & Ray Eames' *Powers of Ten* navigation panel, the ivory plotting tables of NASA's 1969 trajectory rooms, and the brass-cornered map books of an interstellar Patek Philippe atelier. Nothing here apologizes for being beautiful; nothing here screams. The mood is **luxurious but not opulent** — luxury read as *time*, not *gold*. Every surface is matte ivory or polished onyx; every accent is a hairline of warm chrome (#C8A675) or a single saturated burst of *Concorde Orange* (#F26B1F) that has clearly survived a decade of solar radiation. The tone of voice is that of a quiet concierge in a private members' club at 2am — assured, slightly amused, never selling. The viewer is treated as a member who has already arrived; the site does not perform for them. It unfolds. The angular vocabulary is sharp, deliberate, and aerospace: chamfers at 22.5°, parallelograms cut from Concorde fuselage diagrams, pennon-shaped pointers, and the distinctive *anhedral* swept wedge of a Concorde wing seen from above. Sharp angles, not jagged ones — the difference between a draftsman's set-square and a glitch artifact. ## Layout Motifs and Structure The structure is a **persistent left sidebar atlas-rail with a generative chart-room canvas to its right**. Sidebar layout occurs at only 25% of the corpus and is rarely paired with generative aesthetics; here, the sidebar is the *sextant*, not a navigation menu. It is **288px wide on desktop, anchored full-height, ivory paper-tone (#F1ECDF)**, and contains, top-to-bottom: a tiny 24px brass-rivet logomark, a vertical Concorde silhouette etched in 1px ink, six **chamfered index tabs** (one per chapter), a live **rotating Lissajous monogram** (32px, redrawn every 4 seconds with new harmonics), and a single hairline of warm chrome separating the sidebar from the canvas. Each chapter — *Concord, Concession, Concentration, Concertation, Concourse, Conquest* — is a **full-viewport chart-room** to the right of the rail. Chart-rooms do not stack; they **dissolve** into one another as the user scrolls, each one a generative composition that draws itself in response to scroll position. The right canvas occupies `calc(100vw - 288px)` and uses a **6-column engineering grid with 22.5° chamfered cells** rather than rectangles. Each cell is a parallelogram clipped via `clip-path: polygon(...)`, and content (titles, captions, plot points) docks to cells with hairline brass tick-marks at the corners — like an architectural drawing's dimension lines, never decorative. There is **no hero section**. The site opens on the first chart-room mid-render — generative ink lines are drawing themselves across the canvas the moment the page loads, and the title resolves *as the lines complete their figure*, not before. Scroll-triggered patterns (54% in the corpus, mid-tier) are used here for **chart redraw** rather than fade-in: scrolling past a milestone causes the previous chart to be **erased by an ivory wiper bar** moving left-to-right, and the next chart begins plotting itself behind the wiper. The wiper is a single deliberate sharp-angled wedge. A **persistent micro-rail at the bottom of the sidebar** displays an ever-updating **"current concord"** — six glyphs that the generative engine is currently drawing, in a tiny tabular monospace, like a stock-ticker for ideas the site is thinking about. This is the only ambient motion in the sidebar; everything else is still. Mobile: sidebar collapses to a **42px-wide vertical pennon-strip** along the left edge with the six chamfered tabs as 22.5° rotated wedges; tapping the pennon expands a full-screen overlay drawer with the same ivory paper. Chart-rooms become full-bleed but retain the 6-column chamfered grid, simply rescaled. ## Typography and Palette **Typography (Google Fonts only) — humanist by directive (38% in the corpus, frequently used but never in this combination):** - **Display & Chapter Titles — [Fraunces](https://fonts.google.com/specimen/Fraunces)**, optical-size axis pushed to **144 (maximum)**, weight **300**, soft axis to **100**. Used for chapter titles at **11.4vw** with letter-spacing of **-0.02em**. Fraunces' soft optical bowls and the high-contrast soft axis read as humanist warmth — the antithesis of geometric grotesque retro-futurism. This is the deliberate friction: **a humanist serif inside an aerospace chart-room**. - **Body — [Mulish](https://fonts.google.com/specimen/Mulish)**, weight 300/500, set at 16px / 1.65 line-height. A humanist sans with a faintly old-style tone. Body copy lives in narrow 38ch measures pinned to chamfered cells. - **Tabular & Telemetry — [JetBrains Mono](https://fonts.google.com/specimen/JetBrains+Mono)**, weight 300, used *only* for the live ticker, dimension-line numerals, and the tiny chart-room timestamps. Mono is at 96% in the corpus — the deliberate restraint here is that it occupies less than **4%** of total type area and is set in 11px tabular figures, never in headings. - **Monogram & Lissajous Labels — [Cormorant Infant](https://fonts.google.com/specimen/Cormorant+Infant)**, italic, weight 300, used at 13px tracking 0.18em for the rotating Lissajous monogram label and the cardinal compass marks. Cormorant Infant's terminal swashes evoke an antique brass nameplate. **Palette — retro-futuristic but in a *pre-disco luxury* register, not vapor-neon:** - **#0F0E0C — Inkwell Onyx.** Background of the chart-room canvas. Almost-black with a 4% warm shift; never pure #000. - **#F1ECDF — Vellum Ivory.** Sidebar paper, primary surface. Warm cream that reads as 1970s drafting paper, not modern off-white. - **#C8A675 — Warm Chrome.** Hairline rules, dimension marks, sidebar separator, brass-rivet accents. Used at 0.5px to 1px stroke widths; never as a fill. - **#F26B1F — Concorde Orange.** The single saturated accent. Used for the active chapter pennon, the Lissajous primary trace, and the wiper-bar leading edge. Allotted a **strict 4% maximum of total visible chroma** at any time. - **#3D6B7A — Mariner Teal.** Secondary plot color, used for the second Lissajous harmonic and supporting chamfer cells. Echoes Concorde cabin upholstery. - **#7C2D2D — Oxblood Velvet.** Used only for the *active-chapter* index tab background in the sidebar; otherwise reserved. - **#8B8478 — Drafting Graphite.** Body copy on Vellum surfaces. - **#1F1D1A — Onyx Penumbra.** Body copy on Inkwell surfaces (very rare; most body copy lives on ivory). The palette is **warm-leaning** (warm dominates the corpus at 98%) but is **never gradient** (gradient is at 93% — this site is in the 7% that refuses). Color transitions happen through *ink wipe* and *chamfer adjacency*, never through CSS gradients. ## Imagery and Motifs **No photography. No stock illustrations. No 3D renders.** The entire visual vocabulary is generative SVG and a tightly-curated set of icons. Imagery is `icon-heavy` (per the seed; 4% in the corpus — strongly underused). **Six recurring motif families:** 1. **Lissajous figures (the cardinal motif).** The chart-room canvas is anchored by a slowly rotating Lissajous figure rendered in real time via SVG ``. Parameters: ratio drifts between 3:2, 5:4, 7:6 over 90-second cycles; phase offset rotates linearly; trace fades over 14 seconds creating a comet-tail. Every visitor sees a different figure; the seed is the visit's ISO timestamp. The Lissajous is the breathing instrument of the site. 2. **A 144-icon set, hand-drawn in 1.5px ink stroke.** Each icon is a sharp-angled humanist symbol — a sextant, a Concorde silhouette, a parallel-rule, a brass rivet, a calipers, a stopwatch, a map-pin pennon, a 22.5° chamfer wedge. Icons sit in the chamfered cells as quiet ornaments, never as buttons. The set is intentionally vast (icon-heavy is the seed), and each chart-room reveals 9–12 of them. 3. **Pennon flags.** Sharp 22.5° triangular pennons used for chapter markers, active-state indicators, and the mobile sidebar collapse. Pennons cast a faint 3px parallel shadow in #C8A675 at 14% opacity. 4. **Dimension lines & tick-marks.** Every chamfered cell has hairline tick-marks at its corners with tiny tabular numerals (e.g., `0:42`, `38°N`, `1.618`) that feel like architect's annotations. These are decorative — the numbers are real but their meaning is poetic, not data. 5. **The Concorde wing-section.** A single anhedral swept wedge appears once in each chart-room as a quiet motif — sometimes a divider, sometimes a wiper, sometimes the leading edge of a pennon. Never labeled. 6. **Ink-wipe wedges.** Sharp-angled vellum wipers that erase one chart-room into the next. Always 22.5° leading edge. **Texture:** a single 600×600 *vellum-grain* PNG overlay at 4% opacity on ivory surfaces only. Inkwell surfaces are pure flat onyx with no grain — they read as celestial vacuum. **No emojis. No flags. No people.** The closest the site comes to a human is a 1px silhouette of a draftsman's hand holding a parallel-rule, used once in the *Concertation* chapter as a concluding glyph. ## Prompts for Implementation **Story to tell with HTML/CSS/JS:** the visitor opens an envelope sealed with a brass rivet. Inside is a Concorde-shaped card. The card is `conc.quest`. They follow it into a chart-room where six concords — *Concord, Concession, Concentration, Concertation, Concourse, Conquest* — are being plotted in real time. Each scroll is the wiper-bar of the draftsman's arm clearing a chart and beginning the next. The site does not pitch them anything. It teaches them to read its instruments. By the last chart-room, they understand that the six "conc-" words were always one word, and that one word is not "conquest" but **"concord"**. **Macro narrative arc — six chamfered chart-rooms, no anchors, no nav-menu:** 1. **The Sextant Awakens.** The page loads with the sidebar already drawn and the right canvas mid-Lissajous. The figure resolves into the word *Concord* in Fraunces 11.4vw. The brass rivet in the sidebar begins its 4-second monogram cycle. No CTA. Just an ivory wiper waiting at the right edge. 2. **Concord — the geometry of agreement.** Generative path-draw animates a 5:4 Lissajous over 14 seconds. Body copy in 38ch measures docks into three chamfered cells. Twelve ink-stroke icons populate the negative space. 3. **Concession — the angle of yield.** A 22.5° chamfer cuts diagonally across the canvas. The previous chart's Lissajous is preserved as a 6%-opacity afterimage in Mariner Teal. New chart begins plotting in Concorde Orange. 4. **Concentration — the focal aperture.** All twelve icons converge to a single chamfered cell at canvas center while the sidebar's index pennon shifts from #F1ECDF to #7C2D2D oxblood for the first time. Ambient motion in the sidebar quiets to a single ticker line. 5. **Concertation — the hands at the table.** The single 1px draftsman's-hand glyph appears, holding a parallel-rule across two cells. Body copy here is the longest passage of the site; Mulish at 1.7 line-height with deliberate hanging punctuation. 6. **Conquest — the chamber resolves.** The Lissajous figure unrolls into a straight line — a runway. The runway extends past the right edge of the viewport. The wiper-bar fires one last time, ivory-to-onyx, and the final glyph is a single Warm Chrome rivet at the center of an empty chart-room, captioned `conc.quest` in Cormorant Infant italic. **Animation principles (informed by frequency analysis):** - **Scroll-triggered chart-redraw, not parallax (parallax is at 93% — saturated).** Use `IntersectionObserver` with `requestAnimationFrame` for path-draw timing. Every chart-room redraws over 12–18 seconds; the user scrolling faster does not speed it up. The site has its own tempo. - **Stagger (70%) is permitted but only on icon entry, never on body copy.** Icons enter in a 22.5° diagonal cascade with 80ms offset. - **Path-draw-svg (35%) is the cardinal pattern here.** Every Lissajous and every pennon is drawn via `stroke-dasharray` / `stroke-dashoffset` animation. Stroke width is **1.5px**, never 1px (which reads as too thin) and never 2px (which reads as too crafted). - **No spring physics.** The site's motion is *draftsman-deliberate* — linear or `cubic-bezier(0.65, 0, 0.35, 1)`. Spring (46%) is consciously rejected. - **No magnetic cursor (29% — overused).** The cursor in the chart-room is a tiny Concorde Orange reticle (8px crosshair with 1.5px stroke); it does not pull on elements. - **Lissajous is canvas-native at 60fps.** Use a single `` with one `` updated each frame; GPU stays cool. **Hard avoids (per directive and frequency):** - AVOID CTA-heavy layouts. The site has **one** call-to-action: the brass rivet in the sidebar header, which opens a 14-line concierge note in Cormorant Infant italic. No "Sign up." No "Get started." No "Learn more." - AVOID pricing blocks. Nothing on this site is for sale. - AVOID stat-grids. Numbers exist only as dimension-line annotations. - AVOID hero sections. The first chart-room *is* the page. - AVOID parallax-sections (93% — saturated). Replace with chart-redraw and ink-wipe transitions. - AVOID gradient palettes (93% — saturated). All color is flat-laid; depth is achieved through chamfer adjacency and hairline rules. - AVOID centered single-column compositions (93% — saturated). The sidebar-rail + chamfered chart-room is asymmetric by construction. **Story-first instructions for the implementing engineer:** every commit should be testable against the question, *"would a 1970s chart-room draftsman recognize this surface as a working instrument?"* If yes, ship it. If it looks like a 2024 SaaS landing page with a sidebar bolted on, revert. ## Uniqueness Notes **Differentiators relative to the existing 62-design corpus (informed by frequency analysis):** 1. **First explicitly *luxurious* generative site.** Generative aesthetic is at 11% of the corpus and never paired with the *luxurious* tone (1%). Every prior generative design reads as either glassmorphic-contemplative, glitchy, or experimentally cyberpunk. None reads as a private members' club. This site is the only generative chart-room with brass rivets, vellum, and Cormorant Infant italic. 2. **Sidebar (25%) used as a *sextant*, not as a nav menu.** The 25% of corpus designs that use sidebars all use them as conventional vertical navigation. This site treats the sidebar as an instrument panel — a 288px ivory paper rail with a rotating Lissajous monogram, an idea-ticker, and chamfered index tabs. Navigation is a side effect of the instrument, not its purpose. 3. **Sharp-angles motif rendered as 22.5° aerospace chamfers**, not as glitch artifacts or brutalist edges. The 22.5° angle is borrowed from Concorde wing geometry and applied as `clip-path` parallelograms across the entire 6-column engineering grid. No other site in the corpus commits to a single signature angle and propagates it across grid, icons, pennons, wipers, and cursor reticle simultaneously. 4. **Scroll-triggered (54%) used for chart-redraw, not for fade-reveal.** The corpus pattern is "element fades in as it enters viewport." This site's pattern is "previous chart is wiped, next chart plots itself over 12–18 seconds." The motion is industrial, not decorative. 5. **Humanist typography (38%) deliberately collided with retro-futuristic palette.** Most retro-futuristic designs in the corpus use mono, geometric sans, or Bebas-bold. None pair Fraunces (humanist soft-axis serif) with a Concorde-ivory chart-room. The friction of warm humanist serif inside aerospace chamfers is the design's signature voice. 6. **Icon-heavy (4% — underused) executed as a 144-icon hand-drawn ink set**, not as iconography in a sidebar nav. Icons populate negative space inside chamfered cells as decorative draftsman's annotations. The site is iconographic in the way an old diving manual is iconographic — every page has small ink figures, never as buttons. 7. **Refusal of gradient (93% saturation in corpus).** All color transitions happen through ink-wipe wedges and chamfer adjacency. Zero CSS gradients ship. This is a deliberate compositional discipline against a near-universal corpus default. 8. **Refusal of parallax (93% saturation).** Replaced wholesale by scroll-triggered chart-redraw with fixed tempo independent of scroll velocity. The site has its own clock. 9. **Concorde wing-section motif appears exactly once per chart-room** as a quiet signature. It is never labeled, never captioned, never linked. It is the site's brand of breathing. 10. **No CTAs, no pricing, no stat-grids, no hero.** The site has one interactive surface — the brass rivet — and it opens a 14-line concierge note. The remaining 99% of the experience is read. **Chosen seed (from assignment):** aesthetic: **generative**, layout: **sidebar**, typography: **humanist**, palette: **retro-futuristic**, patterns: **scroll-triggered**, imagery: **icon-heavy**, motifs: **sharp-angles**, tone: **luxurious**. **Avoided patterns from frequency analysis:** parallax (93%), centered (93%), gradient (93%), full-bleed (88%), photography (95%), vintage motifs (90%), warm palette as default gradient soup (98%), hand-drawn aesthetic (82%), spring physics (46%), magnetic cursor (29%), stagger on body copy. Each avoidance is a deliberate compositional choice, not an oversight.