# Design Language for prototype.quest ## Aesthetics and Tone prototype.quest is a **botanical cabinet of unfinished things** — a dimly lit greenhouse where living experiments press their leaves against glass walls and the smell of damp soil mingles with the ghost of old ink. The domain is read as a verb and a noun at once: *to prototype* and *a prototype's quest* — an artifact forever reaching toward its final form, held in suspended becoming. The aesthetic is **botanical-mysterious**: deep wine-dark rooms thick with foliage, a single brass lamp casting amber warmth across a workbench covered in sketched specimens and half-assembled forms. Nothing is sterile. Nothing is finished. Every element has a quality of *almost* — stems mid-unfurl, petals half-open, concepts mid-crystallization. The visitor feels like a late-night botanist who has discovered a private studio, leafing through someone else's beautiful unfinished work. Mood: **seductive melancholy** — the emotion of a greenhouse in winter, green life persisting in the cold dark, possibility frozen at the moment of germination. This is not sadness; it is the productive melancholy of something in process. Beauty emerges precisely *because* it is incomplete. Visual references: Dutch Old Master still lives recomposed in near-darkness; mid-century botanical illustration plates scanned and aged; a Wardian case fogged with breath; the underlit pages of a naturalist's field journal. The tone is hushed, intimate, and slightly hypnotic — as though the page itself is breathing. ## Layout Motifs and Structure The page is built on a **hero-dominant single breath** — a full-viewport hero that occupies 100svh as the primary experience, with everything below unfolding as a slow exhale. The hero is not decorative; it is the entire thesis. Scroll is a reveal, not a navigation. **Macro structure:** 1. **The Greenhouse Hero (100svh).** Full-viewport bokeh-drenched background: deep burgundy-black space with luminous out-of-focus botanical forms glowing faintly — not photographs, but CSS-layered radial gradients and SVG botanical silhouettes blurred at varying depths to simulate lens bokeh. A thin horizontal line of white light, 1px, crosses the viewport at the golden ratio (roughly 61.8% from top), separating the dark sky from the dark earth. The domain name `prototype.quest` occupies the upper third, set in Libre Baskerville at clamp(3rem, 8vw, 6.5rem), rendered in warm cream (#F5ECD7), with a very slow letter-spacing animation expanding from tracking-tight to tracking-wider over 4s on load — like a specimen label being revealed by slow reveal. Below the hairline, a single-line botanical specimen notation in IM Fell English Italic at 1rem, #B8956A: *"Sp. nov. — genus Prototypus — collected at the threshold of form."* 2. **The Specimen Drawer (scroll reveal, stacked panels).** Each subsequent section arrives as a specimen drawer sliding in from below — a horizontal ruled panel with a thin brass-colored top rule (2px, #B8844C). Content is set in a narrow single column (max-width: 54ch) centered in the viewport, with generous vertical spacing (min 8rem between panels). Text color: #E8D9C0 on near-black backgrounds. Sections are: *The Premise* → *The Method* → *The Specimens* (a grid of 3 cards, each a leaf-shaped botanical card containing a short text) → *Contact the Laboratory*. 3. **Spatial language:** Extreme negative space. The page breathes. No content appears within 15vw of the left or right edge on desktop. On mobile, the single-column layout collapses to 92vw. White space is intentional, like the margins of a naturalist's notebook — room for annotation. 4. **The 3-card Specimen Grid.** On desktop: 3 cards in a horizontal row, each card shaped like an archaic botanical envelope — rounded-top, square-bottom, with a thin pressed-leaf SVG outline behind the text. The cards float independently with subtle rotation: -1.5deg, 0deg, +2deg respectively. On hover, they breathe upward (translateY -8px) with a slow ease-out (600ms). Cards have a faint inner glow (#7A1831 at 12% opacity) that deepens on hover. 5. **Bottom environment.** A final full-width panel in darkest burgundy (#1C0810) with a single large botanical SVG — a branching organic form, like a specimen pressed and dried — centered at low opacity (18%), covering the lower 60% of the panel. The lab's contact line appears above it in cream. **Compositional principles:** Every element gravitates toward a vertical spine, but is allowed to lean slightly — nothing is rigidly centered. Headers drift 2–4ch left of true center. The overall effect is a page that has been composed by hand, not by algorithm. ## Typography and Palette **Typography (Google Fonts only):** - **Primary Display — `Libre Baskerville`** (serif, Google Fonts). Used for the wordmark, H1, and all major labels. At display size: clamp(2.8rem, 7vw, 6.2rem). At heading size: 2rem, weight 700. The letterforms are classical English Baskerville — high contrast, precise serifs, elegant thick-thin stroke — reading as authoritative but warm. Letter-spacing: 0.08em at display, 0.04em at heading. Line-height: 1.1. - **Secondary Serif — `IM Fell English`** (serif, Google Fonts). Used for specimen notations, captions, pull-quotes, and any italic annotation. This font has the authentic quality of 17th-century type specimens — slightly irregular, humanist, and melancholic. Size: 1rem–1.25rem. Used exclusively in italic variant. Color: #B8956A (warm amber). - **Body / Running Text — `Lora`** (serif, Google Fonts). Used for all body paragraphs and panel descriptions. Size: clamp(1rem, 1.8vw, 1.15rem). Weight: 400. Line-height: 1.75. Color: #E8D9C0. Lora's gentle curves and moderate contrast pair well with the botanical warmth; it avoids the sterility of sans-serif and the stiffness of pure classical serifs. **Color Palette:** - `#120508` — void-black with a hint of deepest burgundy. Background of hero and major dark panels. Not pure black; it has warmth. - `#2A0D18` — deep burgundy-shadow. Used for card backgrounds, secondary dark surfaces. - `#7A1831` — medium burgundy. Used for the inner glow of specimen cards, accent borders, the thin botanical rule lines. - `#B8844C` — warm brass / amber-gold. The brass rule color, icon strokes, the thin hairline dividers. - `#B8956A` — parchment amber. The secondary text color for captions and specimen notations. - `#E8D9C0` — warm cream. Primary text color on dark surfaces, reads as aged paper light. - `#F5ECD7` — near-white cream. The wordmark color, and the most luminous text in the hierarchy. - `#3D1020` — mid-burgundy. Used for hover states and interactive surfaces. **All backgrounds are dark.** There is no light-mode consideration in this design. The palette is strictly low-luminance with warm organic accents. ## Imagery and Motifs **Bokeh Background (CSS-only, no photography):** The hero background is simulated pure-CSS bokeh — a stack of 12–18 radial-gradient "light blobs" positioned at irregular coordinates, each with a different burgundy-to-amber hue, at varying opacity (8%–22%) and size (80px–320px), layered on the void-black base. Each blob has `filter: blur(60px–120px)` applied. A very slow animation (20–40s, infinite, ease-in-out) slightly drifts each blob along a short path, making the bokeh feel alive — like breathing botanical light in a dark room. No JavaScript required. **Leaf-Organic Motifs:** Every decorative element is leaf-derived: - **Pressed-leaf SVG outlines:** Thin (0.8px stroke), warm amber (#B8844C), depicting stylized single leaves, ferns, and branching structures. These appear at low opacity (12%–20%) behind card panels and in the bottom hero. They are NOT illustrations; they are abstract outlines suggesting botanical form. - **Stem-curve dividers:** Section separators are not horizontal rules but gentle SVG curves — a single bezier arc, 2px, #7A1831, spanning 40% of the viewport width, centered, evoking the arc of a plant stem. - **Botanical envelope card shape:** The 3 specimen cards have a `clip-path: polygon()` or `border-radius` combination suggesting a slightly organic top edge — not perfectly rectangular. The top corners are rounded at 12px, bottom corners at 2px, and the overall card breathes slightly irregularly. **Micro-interactions:** - **Wordmark reveal:** On page load, `prototype.quest` fades in over 1.2s while letter-spacing expands from 0 to 0.08em simultaneously. After 1.4s, the specimen notation line fades in with a very slight upward drift (translateY from 8px to 0, 800ms ease-out). - **Bokeh drift:** All bokeh blobs animate infinitely, each on its own slightly offset timeline, creating a slow pulsing field of light. - **Card breathe:** On hover, specimen cards rise 8px (600ms ease-out), their inner glow intensifies from 12% to 28% opacity. - **Stem-curve draw:** As each section enters the viewport (IntersectionObserver), its SVG stem-curve divider "draws" in — `stroke-dashoffset` animating from 100% to 0% over 1.2s, as if being drawn by a calligrapher's pen. - **Scroll parallax on the hero:** The bokeh layer scrolls at 0.4× the main scroll speed, deepening the sense of space as the visitor descends past the hero. - **IM Fell italic text:** Specimen labels render with a very slow tracking animation on scroll entry — letter-spacing expands from 0.01em to 0.06em over 1.8s, as if the ink is slowly spreading across parchment. **No photography. No stock imagery. No icons.** All visuals are CSS gradients, SVG botanical forms, and typographic composition. ## Prompts for Implementation Build prototype.quest as a **single-page botanical atelier** — one continuous dark room the visitor descends through, each panel a drawer in a specimen cabinet being slowly pulled open. The feeling is: discovering someone's extraordinary private greenhouse at midnight. **Implementation priorities:** 1. **The Hero is the soul.** Invest 40% of CSS effort here. The CSS bokeh must be convincing — use a minimum of 14 radial-gradient orbs, each with its own animation delay (0s to -25s) so they never synchronize. The hero must feel dimensional, not flat. 2. **Typography is the primary decoration.** The wordmark in Libre Baskerville at massive scale IS the artwork. Every type decision must feel like a choice from a 19th-century botanical press. No cheap tracking resets, no generic sans fallbacks in headings. 3. **Specimen cards must feel physical.** Use `box-shadow` layering (4 shadows: ambient, key, inner-glow, bottom-edge) to make the cards feel like they are resting on a dark surface under a lamp. The pressed-leaf SVG behind each card should be unique per card (3 different botanical forms). 4. **Micro-interactions must be subtle.** The page should feel like it is breathing, not performing. No bounce animations. No spring physics. Everything is ease-out or cubic-bezier(0.25, 0.46, 0.45, 0.94). Duration minimum 400ms, maximum 2000ms. 5. **Structural HTML:** A single `
` with 4 `
` elements: `.hero`, `.premise`, `.specimens`, `.contact`. Navigation is absent — no nav bar, no hamburger. The only interactive affordance is a scroll indicator (a thin animated stem-line descending at the base of the hero). 6. **The scroll indicator:** At the bottom of the hero, a single vertical SVG line (1px, #B8844C) of height 48px slowly animates an infinite top-to-bottom fill — like botanical dye rising through a capillary. On scroll, it fades out. 7. **No CTA buttons in the conventional sense.** The "Contact the Laboratory" section has a single email link rendered as a specimen label: styled as a pressed botanical card, not a button. On hover, the card lifts and the letter-spacing expands. 8. **Color management:** `@media (prefers-color-scheme: light)` does nothing — the design is intentionally dark-only. Add a `meta[name=color-scheme] content="dark"` to prevent OS flash. 9. **Font loading strategy:** Preconnect to Google Fonts. Load Libre Baskerville (weights 400, 700), IM Fell English (400 italic), and Lora (400) in a single ``. Use `font-display: swap`. All fonts are subsetted to Latin. 10. **Avoid:** Any horizontal scroll gimmicks. Any parallax that causes layout shift. Any section that reads as "features" or "pricing." Any element that looks like a landing page. This is a mood object, not a sales tool. ## Uniqueness Notes **Differentiators from the existing registry:** 1. **CSS-only botanical bokeh as primary hero imagery (registry first).** The frequency data shows `bokeh-background` at only 3% — and zero designs use CSS radial-gradient stacking to simulate depth-of-field optically. prototype.quest creates a living, breathing bokeh field without a single image file, making the technique itself a conceptual statement about the domain (prototyping = building appearance from first principles). 2. **All-serif typography system with three distinct serif voices.** The frequency analysis shows humanist (32%) and condensed (19%) dominate; nearly all designs use at least one sans-serif. prototype.quest uses zero sans-serif typefaces — Libre Baskerville for display, IM Fell English for notation, Lora for body — creating a depth of serif texture that reads as a typographic specimen collection rather than a web page. 3. **Botanical motifs as structural elements, not decoration.** While `floral-botanical` and `leaf-organic` appear in the frequency data at 3% each, they are used purely decoratively. prototype.quest makes the stem-curve the section divider, the leaf-outline the card background, and the pressed-envelope the card shape — botany is the *architecture* of the layout, not the wallpaper. 4. **Mood: productive melancholy.** `mysterious-moody` at 4% — but no existing design uses *melancholy* as a positive, seductive emotional register. The tone is not horror-dark, not luxury-dark — it is the specific emotion of a greenhouse in winter, aliveness in darkness, becoming without arrival. This emotional specificity is rare in the registry. 5. **No CTA buttons, no navigation, no statistics.** The hero-dominant layout (3%) is used here to mean: the hero IS the content, and everything below is elaboration. The design refuses the pattern of hero→features→pricing→CTA that appears in even the most creative registry entries. **Seed used:** `aesthetic: botanical, layout: hero-dominant, typography: baskerville-refined, palette: deep-burgundy, patterns: micro-interactions, imagery: bokeh-background, motifs: leaf-organic, tone: mysterious-moody` **Avoided overused patterns:** humanist typography (32%), circuit motifs (13%), nature-generic imagery (13%), condensed type (19%), split-screen layout (common in registry). No aurora lights (4%, already used in adhoc.quest). No pixel art (annual.quest). No glassmorphism. No neon.