# Design Language for a6c.quest

## Aesthetics and Tone

a6c.quest is a **velvet reliquary** — a digital cabinet where soft architectural blobs drift like dyed silk pillows through cathedral negative space, narrated in oxblood ink on aged paper-of-rose. The site reads as if a 17th-century missal had been rebound by a soft-architect and then photographed underwater at dusk: every surface is rounded, every margin is a held breath, every glyph is set in the slow hand of a Venetian punchcutter.

The mood is **dreamy-ethereal** but anchored by deep-burgundy gravity. Picture **Zaha Hadid's** unbuilt curves rendered in candlewax and pressed between pages of a Garamond-set book of hours. Picture **Yves Klein's** anthropometries if Klein had worked in claret instead of ultramarine. The air is heavy with rose-petal dust; the blobs do not bounce — they hover, pulse, breathe at the cadence of slow lungs (≈ 0.18 Hz). Nothing is sharp. Nothing is in a rush.

This is **not** a brochure, not a portfolio, not a SaaS landing — it is a **slow chamber**. A visitor enters the way one enters a perfumed library: shoulders drop, scroll slows. The site rewards stillness, not scanning. Each card-flip is a hand turning vellum.

**Tonal anchors:**
- Dreamy not whimsical — the dream is *low-lit*, sumptuous, almost narcotic, never cute
- Ethereal not vague — every blob has a measurable curvature; every ma (negative space) is intentional in vh
- Burgundy not brown — the wine is *alive*, lit from within, never tannic or muddy
- Garamond-classic not "tasteful serif" — the typography is specifically the high-Renaissance weight balance, with long ascenders that breathe upward into the negative space

## Layout Motifs and Structure

**Ma (間) negative-space composition** is the structural soul. Borrowing from the Japanese concept of charged emptiness, the page is *predominantly* unoccupied. Content occupies roughly **22%** of any given viewport at any time; the remaining 78% is breathing, weighted, and tonally active (not blank — the burgundy paper hums).

**Spatial logic:**
- A single asymmetric **off-axis spine** (35% from left on desktop, 50% on mobile) — content drifts along this spine but never aligns rigidly to it
- Vertical rhythm in **18vh increments**, with at least one full-empty 100vh "rest movement" between every two content movements
- No grid lines, no rules, no boxes. Boundaries are implied only by **blob silhouettes** that gather behind type like cushions
- Section transitions are marked by a **card-flip event**: the entire viewport rotates on Y-axis (perspective: 1800px) revealing the next movement on the card's reverse, ≈ 1.4s with a slow ease-in-out-back curve
- A persistent **floating navigation orb** (52px diameter) hovers at viewport-bottom-right, drifting in a slow Lissajous pattern (±18px) — it is the only persistent UI

**Composition principles:**
1. **One subject per viewport.** Never two competing focal points. If a paragraph and an illustration must share, the paragraph is small, set on the lower-third, and the illustration commands two-thirds of the empty stage.
2. **The blob is furniture, not decoration.** Content sits *on* or *beside* a blob the way a candle sits on a velvet cushion. Blobs cast a 60-80px soft burgundy shadow (no hard edges).
3. **Card-flips replace scroll-jumps.** Long-form passages exist as **stacked vellum cards** (max 6 per page) that flip rather than tile. Scroll-distance triggers the flip; the user feels they are *turning* the site, not scrolling it.
4. **Asymmetric balance via mass, not alignment.** A single line of italic Garamond at 64px on the right is balanced by a 380px deep-burgundy blob hovering low-left. Never mirror-symmetric.

## Typography and Palette

**Typography (Google Fonts only — garamond-classic family-first):**

- **Primary serif (display & body):** `EB Garamond` (Google Fonts, variable wght 400→800, italic available). This is a meticulous digital revival of Claude Garamont's 16th-century cuts — long ascenders, generous counters, gentle stress. Set headlines at clamp(3rem, 7.4vw, 7.2rem), weight 500, italic for all titles. Body text at 19px / 32px line-height, weight 400, with **+1.2% letter-tracking** (Garamond likes to breathe).
- **Secondary serif (small caps & flourishes):** `Cormorant Garamond` (Google Fonts, weight 300 italic). Used *only* for poetic interjections, pull-quotes, and the floating ribbon-titles on each card. Italic by default. Set in true-italic, never oblique.
- **Quiet sans (meta, navigation only):** `Italiana` (Google Fonts, weight 400) — a high-contrast serif that pairs with Garamond as a faint capital voice. Used at 11px / +18% tracking / uppercase for section numerals (e.g., "MOVEMENT II / VESTIBULE").
- **Numerals:** Old-style figures throughout (`font-variant-numeric: oldstyle-nums`). No tabular figures anywhere — this site has no spreadsheet to make.
- **Drop caps:** Every card opens with a **3-line drop cap in EB Garamond italic 600**, set in deeper burgundy (`#3D0814`) with a subtle hand-tinted blob silhouette behind it.
- **Ligatures fully on:** `font-feature-settings: "liga", "dlig", "hist"` — discretionary and historical ligatures included for the "ct", "st", "sp" pairs that Garamond was cut for.

**Palette — Deep Burgundy (8 colors, hand-tuned):**

- `#1A0408` — **vinum profundum** (near-black burgundy, used for body text on rose paper)
- `#3D0814` — **oxblood ink** (drop caps, italic emphasis, deep blob cores)
- `#6B1028` — **cardinal velvet** (primary blob color, button cushions, ribbon titles)
- `#9A1F3D` — **claret bloom** (highlight, hover-state blob glow, link underlines)
- `#C8546B` — **petal blush** (mid-light blob gradients, card-edge soft shadows)
- `#F2E0D5` — **rose vellum** (primary background paper-tone, warm rather than white)
- `#FBF4ED` — **alabaster cream** (interior card faces, the "front page" of vellum)
- `#8A7560` — **dust-driftwood** (only used for hairline section markers and the navigation orb's outline at 40% opacity)

**Palette rules:**
- Body type is `#1A0408` on `#F2E0D5` (contrast ~13:1 — deeply legible)
- Burgundy gradients use **3-stop radial blends** between vinum/cardinal/claret with a 0.18 noise-grain overlay
- The cream `#FBF4ED` only appears on **flipped card faces** — it is the secret interior of the site
- **No** pure white, **no** pure black, **no** primary blue/green/yellow anywhere

## Imagery and Motifs

**Custom illustration is the only image type.** No photography. No stock. No icon libraries. Every image on the site is a **hand-drawn-feel SVG illustration** in burgundy ink, executed in a unified style: single-weight contour lines (1.4px), no fills except where a blob requires mass, with subtle hatching for shadow (parallel strokes at 22° from horizontal, 0.6px stroke, 38% opacity).

**Recurring illustration subjects:**
- **The Hand-Holding-A-Blob** — a custom illustrated hand cradling a soft pillow-shape (recurs as motif #1, ~6 variations)
- **The Window-Onto-Nothing** — a Garamond-era engraved window frame opening into an empty burgundy field (used as section markers)
- **The Folded Vellum** — illustrations of folded paper that visually echo the card-flip mechanic, rendered with crease-shadows
- **The Reliquary Vessel** — small illustrated boxes, jars, and chalices that "contain" floating elements; opens with a flip on hover
- **The Slow-Pulse Bloom** — a stylized peony/rose hybrid drawn as a single continuous line, breath-pulsing in the background of resting movements

**Floating elements (motif system):**
- **Blobs** — 4-7 large primary blobs per page, each generated via SVG `<path>` with cubic Bézier curves, deformed every 14 seconds via subtle (`±3%`) control-point noise. Blobs slowly drift at 6-12 px/s on randomized 2D paths. Each blob has a unique soft inner shadow and a 60px soft outer shadow in `#6B1028` at 22% opacity.
- **Petals** — 12-18 small detached petal SVGs that *float upward* extremely slowly (1-2 px/s), rotating ±15°. They re-spawn from below the fold. Each petal is a single Bézier quad in `#C8546B` at 60% opacity.
- **Dust motes** — 40-60 tiny circular noise particles (0.5-1.5px) at 30-50% opacity in driftwood color, drifting laterally on a sine wave with phase offsets per particle.
- **Floating ribbon-titles** — each card title sits on a slightly tilted (±2.4°) ribbon SVG that hovers 12px above the card surface with a soft burgundy shadow. The ribbon sways gently on cursor proximity.
- **Wax seals** — at section terminations, a custom illustrated wax-seal motif (initials a6c) appears, with a pressed-impression effect rendered via SVG filters.

**Texture layer:**
- A **0.07 opacity paper-grain** noise overlay covers the entire page (SVG `<filter>` with `feTurbulence baseFrequency="0.74" numOctaves="3"`)
- Cards have an additional **1.2% inner-vignette** in burgundy at the corners — the vellum looks gently aged, not damaged
- No drop-shadows are hard. **All shadows are radial-burgundy at ≥40px blur**, never grey.

## Prompts for Implementation

Build a6c.quest as a **slow vellum chamber** — a single-page experience composed of **6 movements**, each living on a card that **flips** into the next. The visitor turns the site like a private breviary; nothing rushes them.

**Structural blueprint (6 movements):**

1. **Vestibule (cover card)** — masthead "a6c.quest" set in EB Garamond italic 500 at clamp(4rem, 9vw, 8rem), centered on the off-axis spine (35% left). Beneath: a single Cormorant italic line — *"a slow chamber for thought"* — at 22px, dust-driftwood color. A single large cardinal-velvet blob (640px × 520px) hovers low-right, breathing at 0.18 Hz. The floating navigation orb materializes after 2.4s. **No CTA.** No "scroll" prompt. The visitor either waits, or flips.

2. **Movement I — Invocation** — a six-line prose passage in EB Garamond 19px on rose vellum, opening with a 3-line oxblood drop cap. To the right of the prose: a custom illustrated *Hand-Holding-A-Blob* at 380px height. Behind everything, three petals drift upward.

3. **Movement II — Reliquary** — the card splits into **two flipped sub-cards** when entered: each sub-card hosts a *Reliquary Vessel* illustration. Hovering a vessel flips it to reveal a single italic Cormorant fragment — a question, never an answer. There are no buttons. Hover *is* the interface.

4. **Movement III — The Window** — a near-empty card. A *Window-Onto-Nothing* engraving at 320px × 460px sits on the spine. Through the window: a slow gradient of vinum to claret, with a single bloom illustration breath-pulsing at the vanishing point. A small Italiana caption beneath: "MOVEMENT III / WHAT IS NOT THERE". 92% of this card is intentional emptiness.

5. **Movement IV — The Petals' Index** — a list of **9 short Garamond fragments** (one per line, italic alternating with roman), each preceded by a tiny custom-illustrated petal. Hovering a fragment makes its petal lift, rotate 15°, and emit a soft claret glow. Cursor leaves: petal returns slowly (1.2s ease-out-cubic).

6. **Colophon (final card)** — a wax-seal illustration (a6c initials), set against a near-empty cream interior. Below: a single line in Italiana at 11px — "PRESSED IN VINUM, MMXXVI". The card does not flip onward; instead, it slowly releases all its blobs, which drift upward and dissolve through the top of the viewport over 18 seconds.

**Mechanics (CSS / JS guidance):**

- **Card-flip implementation:** Each movement is an `.movement` div with `transform-style: preserve-3d; perspective: 1800px;`. Scroll-progress maps to `rotateY()` from 0 → 180deg. Use IntersectionObserver to anchor flip-zones; disable native scroll snapping but use scroll-linked CSS animations via `animation-timeline: scroll()` (with `@supports` fallback to GSAP ScrollTrigger).
- **Blob system:** Single `<svg>` blob factory generates 4-7 blobs per movement. Each blob's `<path d="...">` is regenerated every 14s by perturbing 8 control points with a Perlin-noise function (use `simplex-noise.js`). Use CSS `@keyframes breathe` (5.6s ease-in-out infinite) for the scale/opacity pulse.
- **Garamond optical sizing:** Headlines use `font-optical-sizing: auto` (EB Garamond is variable). Pair with `font-feature-settings: "liga", "dlig", "hist", "kern", "onum"`.
- **Floating navigation orb:** A 52px circle in cardinal velvet with a 1px driftwood outline at 40% opacity. Its position is animated via `requestAnimationFrame` along a Lissajous curve (a=18, b=14, δ=π/2) to give a slow drifting feel. Click flips to next movement.
- **Cursor:** Custom cursor — a single 8px claret circle with a 24px radial-blur burgundy halo. No trail. No magnetic effects (those are overused in the registry).
- **Petal & dust particle system:** Use a single `<canvas>` layer at z-index 5 (between blobs and content) for all dust motes; petals are real SVG elements (better animation control). Total moving DOM elements per page: cap at ~80 to keep the air calm.
- **Sound (optional, opt-in):** A toggle in the orb opens a slow drone (G drone, 120 bpm pulse imperceptibly) — but ship muted. No autoplay, no jingles.

**Storytelling priorities:**
- Each movement is a **chamber**, not a section. Use spatial language in the copy.
- Copy is **sparse**, **literary**, **first-person-singular**. Garamond italic is the voice.
- **AVOID:** CTA buttons, pricing tables, stat-grids, testimonials, feature comparisons, dashboard layouts, hero+three-column patterns, hamburger menus, footers with site-map columns, "learn more" links, social-proof rows, parallax stars, photographs of any kind.

## Uniqueness Notes

**Differentiators from the existing 20-design registry:**

1. **Card-flip-as-scroll** — no other design in the registry uses 3D Y-axis card-flips as the primary scroll-progression mechanism. Almost all sites are vertical-scroll narratives or magazine-spreads; a6c.quest is the only one where progression is rotational, perspective-based, and feels like *turning* a page rather than scrolling past it.
2. **Custom illustration as exclusive imagery** — 85% of registry designs use photography; this is the rare case where every visual asset is a hand-drawn-feel SVG executed in a single burgundy ink style. No stock, no photo, no icon library.
3. **Ma negative-space dominance** — content occupies only ~22% of any viewport. The registry skews heavily toward full-bleed (85%) and centered (85%) layouts; this is one of very few designs that *actively curates emptiness* as the dominant compositional element.
4. **Deep burgundy monochrome** — while 95% of registry palettes are "warm" and 90% use gradients, none commits to a deep-burgundy near-monochrome the way a6c.quest does. There is no blue, no green, no neon — only wine, blush, and rose vellum.
5. **Garamond-classic at the foreground** — only 10% of registry designs use garamond-classic; this design centers it as the *exclusive* type voice (Cormorant + Italiana are accents to the EB Garamond core), with full historical ligature support and old-style figures.
6. **Floating-elements as primary motif system** — blobs, petals, dust, ribbons, and wax seals form a coherent floating ecosystem with shared physics (slow drift, breath-pulse). Few registry designs commit to a unified hovering motif vocabulary; most pin elements to grids.
7. **Blobitecture furniture metaphor** — blobs are not background decoration; they are explicit furniture that content sits on or beside. This treats Greg Lynn / Zaha-style soft architecture as UI structure, not visual flourish — a near-zero-frequency aesthetic in the registry.

**Chosen seed (from assignment):**
`aesthetic: blobitecture, layout: ma-negative-space, typography: garamond-classic, palette: deep-burgundy, patterns: card-flip, imagery: custom-illustration, motifs: floating-elements, tone: dreamy-ethereal`

**Frequency-avoidance rationale:**
- Avoided **hand-drawn (75%)** by using illustration, but in a precise burgundy-ink contour style (closer to engraving) rather than the registry's prevalent loose hand-drawn aesthetic
- Avoided **photography (85%)** entirely — custom illustration only
- Avoided **full-bleed (85%) and centered (85%)** by anchoring composition to an off-axis 35% spine with deliberate ma-negative-space
- Avoided **vintage motif (75%)** by reading as Renaissance-reliquary specifically, not generically retro
- Avoided **warm palette (95%)** in its typical sun/orange register — deep burgundy is warm in temperature only, with completely different emotional weight
- Avoided **gradient (90%)** as a flat banner technique — gradients here are radial-soft inside blobs only
- Avoided **parallax (80%) and scroll-triggered stagger (50%)** by replacing scroll-momentum with discrete card-flips
- Avoided **mono typography (90%)** — no monospace anywhere; type voice is purely Garamond-classic with two italic accents
<!-- DESIGN STAMP
  timestamp: 2026-05-04T19:55:47
  domain: a6c.quest
  seed: figures
  aesthetic: a6c.quest is a **velvet reliquary** — a digital cabinet where soft architectural...
  content_hash: e6cc38f980eb
-->