# Design Language for yami.quest ## Aesthetics and Tone yami.quest (v2) is a **Botanical Candle-Atlas** -- a hand-drawn herbarium reimagined as a 17th-century alchemist's questing manual, lit by a single beeswax candle and overlaid with a brass hud of constellations and apothecary marks. The aesthetic is **botanical**: every page-edge is bordered by hand-drawn herbal vines, pressed leaves, and silver-point line illustrations of mosses, fungi, and night-blooming flowers. The hud-overlay layout lays a translucent brass apothecary-cabinet over the herbarium, with a candle-lit warm tungsten ground showing through. The .quest suffix is the literal medieval *queste*: a slow searching journey toward a chimerical apothecary plant called "yami." The tone is **warm-inviting**: this is a manual that wants to be read aloud beside a fire. Elegant-serif typography (a true bookish serif, not a display face) carries every line of text with the cadence of a hand-set hornbook. The high-contrast palette is forged from deep night-blue paper, candle-amber glow, ivory ink, and a single drop of vermilion for marginal rubrics. Elastic patterns govern the motion -- vines stretch and recoil softly, pressed leaves bend toward the cursor like flowers tracking the sun. The narrative spine: a single quest in seven chapters, each a numbered apothecary cabinet drawer pulled open as the visitor scrolls. The candle-atmospheric motif sits as a single live flame on the upper-right of the hud, casting an animated warm light across the page. The hand-drawn imagery is rendered as if scanned from a real herbarium -- ink lines, watercolor washes, a faint vellum grain. ## Layout Motifs and Structure The composition is a **hud-overlay** layout -- a primary herbarium-page document scrolls beneath a fixed apothecary-cabinet hud (35% width, right side of screen on desktop) that reorganizes itself by chapter. The herbarium document is the world; the hud is the index, written in brass over translucent night-blue glass. **Macro structure:** - **Threshold (Section 0, 110vh):** A full-page hand-drawn herbarium plate of the imaginary "yami" plant -- a tall night-blooming vine with seven dark flowers -- rendered in silver-point ink on night-blue paper, with a faint candle-amber glow at the upper edge. The hud overlay shows on the right: "queste / for / yami" in elegant serif, beneath which seven small apothecary-drawer icons stand closed. - **Seven Drawers (Sections 1-7, 120vh each):** Each chapter is a single drawer. As the visitor scrolls into a chapter, the corresponding hud drawer icon animates open (an elastic ease), and the hud reveals the chapter's table of contents (chapter numeral, chapter title, three to five small apothecary tags). The body of the chapter holds: a single hand-drawn botanical illustration (full-bleed left), a 5-7 paragraph elegant-serif body text running in a centered column, and a single vermilion marginal rubric handwritten in the gutter (e.g., "*nota bene: gather only by candlelight*"). - **The Candle (a fixed element, always visible):** A small hand-drawn candle illustration sits in the upper-right corner of the hud at all times. Its flame animates with a slow, irregular flicker; its light casts a soft warm gradient across the entire hud and a faint amber wash over the page edges. The candle is the timekeeper of the quest. - **Inventory (Section 8, 100vh):** The hud takes over the full screen and becomes a 7-drawer apothecary cabinet, each drawer holding the chapter's gathered artifact (a pressed leaf, a small key, a vial of ink, etc.). Each artifact is a hand-drawn illustration. Below the cabinet, a single elegant-serif paragraph closes the quest. - **Colophon (Section 9, 50vh):** A small monogram, a date, a single vermilion rubric: "*may the candle never go out*." **Spatial grammar:** The herbarium document holds to a 9-column grid with 24px gutters; the body text occupies columns 3-7 (centered, generous), the illustrations bleed across columns 1-5 (left half), the marginal rubrics live in column 9. The hud sits over columns 9-12 on desktop, collapsing to a bottom-sheet on mobile. The vellum page-edge carries a hand-drawn vine border on all four sides, rendered in silver-point at 35% opacity. ## Typography and Palette **Fonts (all Google Fonts):** - **Display titles (chapter headings):** "EB Garamond" weight 500 italic at clamp(40px, 5.2vw, 84px), letter-spacing 0em. An elegant-serif true bookface, used for the seven chapter titles and the threshold "queste for yami." - **Body text:** "EB Garamond" weight 400 at clamp(17px, 1.3vw, 19px), line-height 1.78. Used for all chapter paragraphs. - **Marginal rubrics:** "EB Garamond" italic weight 500 at 14px, line-height 1.5. Rendered in vermilion. The rubrics carry the tone of a scribe's annotation. - **Hud labels and apothecary tags:** "Cormorant SC" (small caps) at 11-13px, tracking 0.22em uppercase. The hud's language is small-caps Latinate, like a real apothecary's drawer labels. **Palette (high-contrast, forged from candlelight and night-blue paper):** - **Night-blue paper:** #0F1B2E (the herbarium ground). - **Candle amber glow:** #F2C25E (warm tungsten), #F7D88A (eyelid amber), and a transitional #C99A4B at the glow's edge. - **Ivory ink:** #F3EAD6 (the silver-point and the body text color on the night-blue). - **Vermilion rubric:** #C7321E (used only for marginal rubrics and the colophon line). - **Hud brass overlay:** #C5A35A (translucent brass at 18% opacity over the night-blue paper). - **Vellum grain:** #2A2615 used as a 6% noise overlay across the entire document. **Type-color rules:** Body text in ivory #F3EAD6 on night-blue. Chapter titles in candle amber #F2C25E. Marginal rubrics in vermilion. Hud labels in brass #C5A35A. Never reverse these mappings. ## Imagery and Motifs **Core visual motifs:** - **Hand-drawn imagery (imagery mandate):** Every illustration is rendered in silver-point ink on night-blue vellum, in the style of a 17th-century herbarium plate. The seven chapter illustrations depict: (1) the yami plant in full, (2) a night-blooming root section, (3) a pressed leaf with veins, (4) a candle in a brass holder, (5) a small star-chart of seven constellations, (6) an open apothecary drawer with vials, (7) a key on a velvet ground. Each illustration is hand-drawn (or rendered to look hand-drawn), with visible ink-line variation, occasional smudges, and a faint amber candle-glow on one edge. - **Candle-atmospheric motif (motif mandate):** The single candle illustration in the hud's upper-right corner is the design's anchor motif. Its flame animates with an irregular 0.6-1.1s flicker (height varies by ~20%, color shifts between #F2C25E and #F7D88A). The flame casts a soft animated warm-light gradient across the hud and a faint amber wash on the upper-right of the document. As the visitor scrolls deeper, the candle slowly shortens (the candle's wax burns down) -- by the inventory section the candle is only 30% of its original height. - **Elastic vine borders:** The four-sided vine border around each chapter page is rendered in silver-point ink, with hand-drawn leaves, buds, and curling tendrils. The vine animates elastically on cursor-hover-near (within 60px) -- tendrils gently stretch toward the cursor with an elastic-out 1.2s curve, then recoil. The elastic motion never feels rubbery; it is gentle, like a fern leaf bending in breath. - **Apothecary drawer hud:** The 7-drawer cabinet on the right is rendered as a translucent brass overlay with each drawer drawn as a small line illustration. As a chapter is reached, the drawer slides open (elastic, 1.1s), revealing a 2-3 line summary and a small apothecary tag. Closed drawers show only their numeral. The brass shows a faint candle-light highlight at its top edge. - **Vermilion marginalia:** Every chapter carries one vermilion rubric in the right gutter, hand-set as if a scribe added it later. The rubric is always italic, always brief (3-7 words), always in vermilion #C7321E. ## Prompts for Implementation **Opening narrative:** Page loads on night-blue #0F1B2E. The hand-drawn yami plant illustration draws itself via SVG path stroke over 4.2 seconds -- ink lines emerging from the bottom up, then a faint amber candle-glow blooms in the upper-right over an additional 1.4 seconds. The chapter title "queste / for / yami" types in via a slow ink-bloom reveal (each letter fades in over 80ms, with the ink "spreading" 4px before settling). The hud's 7 closed drawers appear after the candle ignites, in a 700ms elastic cascade. The marginal vermilion rubric "*here begins the long looking*" appears last, 1.4s after everything else. **Scroll narrative:** As the visitor scrolls into a chapter, the corresponding hud drawer slides open with an elastic ease (1.1s, slight overshoot then recoil). The chapter title fades in with a soft ink-bloom (the text "spreads" by 3px outward and then sharpens over 900ms). The body text fades in paragraph by paragraph in a slow cascade (260ms intervals). The illustration draws itself via SVG path stroke (2.4s). The vermilion marginal rubric appears last with a quill-stroke ink-spread. **Candle animation:** The candle flame flickers continuously with an irregular pattern. As the visitor scrolls deeper into the document, the candle's wax body shrinks by 10% per chapter (from 100% at chapter 1 to 30% by the inventory). The candle's amber-glow gradient on the upper-right of the document slightly intensifies as the candle shortens (the candle is burning faster as the quest deepens). **Inventory closure:** When the visitor reaches the inventory, the hud expands to fullscreen as a 7-drawer brass cabinet. Each drawer is already open; inside each one is a single hand-drawn artifact. The closing elegant-serif paragraph fades in below the cabinet. The candle (now very short) flickers once dramatically before the final vermilion colophon rubric appears. **Avoid:** No buttons, no nav, no CTAs, no testimonials, no pricing, no stat blocks. No video. No flat icons; every visual element is hand-drawn. No round buttons or pills. No drop shadows beyond the candle's warm glow. No gradient mesh -- the only gradient is the candle's amber light. **Tone in motion:** Elastic, slow, candle-paced. Curves are cubic-bezier(.34, 1.56, .64, 1) for elastic moments and cubic-bezier(.4, 0, .2, 1) for ink-blooms. Never pop, never bounce; always breathe and stretch. ## Uniqueness Notes **Differentiators from other designs:** 1. **Herbarium-as-hud:** Hud-overlay (3% layout) is normally used for sci-fi dashboards. Here it is a 17th-century apothecary cabinet drawn in brass over a hand-drawn herbarium. No other site in the corpus pairs hud-overlay with botanical aesthetic. 2. **Living candle as design clock:** The single candle motif (2% candle-atmospheric) acts as a physical timekeeper -- it shortens as the visitor scrolls, casts a real animated warm-light gradient, and flickers irregularly. Candle as a UX device, not just an illustration. 3. **Elastic vine borders:** The hand-drawn vine border around every chapter responds elastically to cursor proximity, with tendrils bending toward the cursor. Elastic (6% patterns) used as a botanical gesture rather than a UI bounce. 4. **Hand-drawn imagery as 100% of the visual layer:** Photography (90% overused) is AVOIDED entirely. Every illustration is silver-point ink, hand-drawn. Hand-drawn aesthetic (17%) combined with botanical aesthetic (12%) at this depth -- no compromise -- is rare. 5. **High-contrast palette (18% category) used as candlelight on night-blue:** Most high-contrast designs are black-on-white. Here it is candle-amber on deep night-blue ink-paper, with a vermilion rubric drop -- a specific historical chromatic vocabulary. 6. **Marginal vermilion rubrics:** Every chapter carries one hand-set vermilion italic rubric in the right gutter, mimicking scribal marginalia. This is a typographic device unique to the corpus. **Chosen seed:** aesthetic: botanical, layout: hud-overlay, typography: elegant-serif, palette: high-contrast, patterns: elastic, imagery: hand-drawn, motifs: candle-atmospheric, tone: warm-inviting. **Avoided patterns from frequency analysis:** parallax (94%), scroll-triggered (33%), card-grid (90%), centered (94%) -- the herbarium is hud-anchored right, photography (90%) entirely AVOIDED, mysterious-moody (71%) replaced by warm-inviting, mono typography (82%) AVOIDED, gradient palette (75%) used only for the candle glow.