# Design Language for devil.quest ## Aesthetics and Tone devil.quest is staged as **an illuminated bestiary leaf from a forgotten 14th-century herbal-demonological codex, lifted off the parchment and re-pressed under a thin sheet of dichroic mineral mica** — the page presents itself as a sacred-profane artifact in which the holographic shimmer of the modern web is grafted not onto chrome or glass, but onto **aged rag paper that catches a slow oil-slick rainbow only when the reader's gaze drags across it**. The conceit fuses two registers that are almost never co-present: **the slow, pious, tone-grand opulence of a medieval scriptorium** (gold-leaf initials, *vegetatio*-and-thorn marginalia, vellum scuffed by centuries of devout thumbprints) and **the fugitive, oily iridescence of a holographic foil sticker** (pearlescent magenta-into-cyan-into-gold, refracted through a directional CSS conic-gradient that slides under the cursor). The devil here is **not** the horned-pentagram Halloween-club devil — it is the **Romance-language *diable* of medieval herbalists**, the *adversarius* who lives at the root of every plant, the small-d devil of *deviare* (Latin: to turn aside from the path) — so the site is staged as **a quest catalogue of "things that make the soul deviate,"** indexed in the manner of a botanical compendium where each entry is a temptation rendered as a plant. Holographic at 10% of the corpus and tone-grand-opulent at 5% — both deliberately rare — fuse to produce a single dominant emotional register: **slow ecclesiastic awe, made strange by an iridescent skin that should not belong to a 700-year-old document but does**. The reader feels they are not browsing a website but **turning the consecrated leaves of a manuscript in a candlelit reading room where the air itself is faintly oily with rainbow**. There is no urgency, no CTA, no register of commerce — only the patient unfolding of *thirteen entries* in a great vegetal index. ## Layout Motifs and Structure The dominant layout is **sidebar** (25% of corpus — chosen because the conventional sidebar is the digital reincarnation of the medieval marginalium, and the design intends to honour, not flatten, that lineage). Layered-depth (9%) and ma-negative-space (6%) inform the inner structure but the outer chassis is unambiguously a single-sidebar page. **Page model — the "codex spread."** The viewport is divided vertically into three columns by golden-ratio proportion, locked at desktop ≥1024px and re-flowing to a single linear scroll below 768px: - **Left sidebar (320px fixed, 0.382φ allocation):** the *index marginal* — a slow, vertically stacked list of the thirteen *deviationes* (the 13 quests / temptations). Each list-item is a **kinetic-animated entry**: when its number is in the active scroll range, it letterspaces apart and a hand-drawn vine SVG path-draw slowly re-traces itself underneath the entry name (path-draw-svg at 26% — present but well below its ceiling, used here for *liturgical procession*, not micro-interaction garnish). The active item carries a **gold-leaf illuminated drop-cap**, hand-lettered as a single SVG glyph that subtly rotates ±0.5° on a 9-second sine loop (the breath of the manuscript). The sidebar background is the *aged-paper* texture — a tiled, kerned, organic foxed parchment with brown stains, imperfections, and a faint watermark of a *fleur-de-lys-thorn*. - **Center column (fluid, ~52vw, 0.618φ allocation):** the *open leaf* — one entry at a time fills this column, scroll-locked with vertical scroll-snap to entry boundaries. Each entry is composed as a *single recto page* of a medieval bestiary: hand-lettered uppercase-Roman entry-number ("DEVIATIO·III"), a hand-drawn botanical-demonological plate (an aged-paper SVG of, e.g., *Belladonna ad Cor* — "the night-shade towards the heart"), a four-paragraph *expositio* set in a classical book-serif, and a *contra-medicamen* ("counter-remedy") footer set in a smaller italic bracket. The plate is **flanked by hand-traced botanical marginalia that grow inwards** — a living thorn vine on the left edge, a coiled tendril of nightshade on the right — both rendered as inline SVG and animated via path-draw-svg only when the entry enters the viewport at a chosen reveal threshold. - **Right gutter (96px, fixed):** the *foliation strip* — an ultra-narrow column carrying only the folio number ("fo. iij·v"), a tiny hand-drawn manicule (the pointing finger common in medieval manuscripts) that animates a single horizontal nudge when the section is active, and a vertical capillary of holographic shimmer that runs the full height of the page (this is the lone, controlled, sustained holographic element — a 3px-wide conic-gradient bar that slowly cycles its hue offset, like the edge of a foil sticker catching window light). There is **no top navigation, no footer, no CTA, no pricing, no statistics block, no testimonial grid, no card-grid bento**. The page rejects the 79% card-grid corpus norm in full. The reader's only progression is **vertical scroll within a single immersive codex**, with a soft, anchored scroll-snap that gives each entry the dignity of its own page. ## Typography and Palette **Type stack — Google Fonts only, four families, in liturgical hierarchy.** - **UnifrakturMaguntia** (display, 400 only) — the blackletter / Textura-Quadrata used for the masthead "DEVIL · QVEST" (note Roman *V* for *U*, in the antiquarian register), set at 88px / 0.95 line-height, dark-burgundy-purple ink on the parchment ground, with a single illuminated drop-cap *D* in gold-leaf SVG at 144px. **Used sparingly**: masthead and the thirteen entry-numbers ("DEVIATIO·I" through "DEVIATIO·XIII") only. UnifrakturMaguntia is on Google Fonts (confirmed) and gives the design an unmistakable medieval-codex face that no other site in the registry employs. - **Cormorant Garamond** (serif body, 400 / 500 italic / 600 — Google Fonts confirmed) — the running *expositio* of every entry. 19px / 1.7 on desktop, 18px / 1.65 on mobile, with `font-optical-sizing: auto`. Italic 500 carries the *contra-medicamen* footer, the marginal scholia, and the latinate plant binomials. Cormorant gives the page a *Renaissance-press* weightedness — Plantin-Moretus rather than Bodoni — which sits naturally beside UnifrakturMaguntia without aesthetic clash. - **Cormorant SC** (serif small-caps, 500 — Google Fonts confirmed) — the subordinate row of *capitulae* labels: "EXPOSITIO," "CONTRA·MEDICAMEN," "FOLIATIO," "INDEX MARGINALIS." Tracked at +180 letterspacing, 12px, used as section-tags only. - **Inconsolata** (mono, 400 — Google Fonts confirmed) — the **kinetic-animated** typography token, used in **only one place**: the active sidebar entry-name unfurls character-by-character on entry, each glyph cross-fading from Cormorant Garamond into Inconsolata over 320ms with a -2px/+2px vertical jitter, before settling back into Cormorant. This is the design's single concession to kinetic typography (3% of corpus) and it is staged as the *moment the soul deviates from the path* — the type itself wavers between the canonical (serif) and the deviated (mono) form. **Palette — analogous (5% of corpus, deliberately rare), keyed on the warm-burgundy-into-amber-into-gilt arc of an aged manuscript exposed to centuries of candle-soot.** All hex values are exact and non-negotiable. - `#3A1A2E` — *encre violacée*, the deep aubergine-burgundy of an oxidised iron-gall ink. Used for: the masthead, body text on the parchment ground, all *expositio* paragraphs. - `#5C2A3F` — *encre dorée d'écorce*, the bark-purple penumbra one tone warmer than the body ink. Used for: italic *contra-medicamen* footer, scholia, vine-marginalia stroke colour at 1.4px stroke-width. - `#8B3F4A` — *cinabrium*, a desaturated cinnabar-burgundy. Used for: the illuminated drop-cap *D*, the manicule pointer, hover-state of the active sidebar entry. - `#B8843D` — *aurum mineralis*, the unfired-clay gold of a pre-burnishing leaf. Used for: gold-leaf accents on the drop-caps, the foliation-strip capillary's mid-stop, the path-draw-svg final stroke colour. - `#D9A656` — *aurum coctum*, the fired-burnished leaf gold. Used as a thin 0.5px outline on the drop-cap, on the masthead's first letter, and as the holographic capillary's brightest hue-stop. - `#E6D8B8` — *pergamentum*, the parchment-cream ground. Used as the entire page background, with a multiply-blended aged-paper SVG noise overlay at 14% opacity. - `#F2E8D0` — *pergamentum-summum*, the highlight-cream that sits inside the recto-page area to subtly delineate the open leaf from the binding gutter. 6% lighter than the ground. - `#1F1518` — *umbra noctis*, the near-black used only in the holographic capillary's darkest hue-stop and in the watermark fleur-de-lys-thorn at 8% opacity. **Holographic treatment — palette overlay, not palette replacement.** The conic-gradient capillary in the foliation-strip uses an *analogous* sweep — `#3A1A2E → #5C2A3F → #8B3F4A → #B8843D → #D9A656 → #B8843D → #5C2A3F → #3A1A2E` — over 360°, slowly rotated +1°/sec via `@property --hue-shift`. This produces a **warm-toned** holographic shimmer (no cyan-green-magenta supermarket-foil clichés) — the iridescence of an oil slick in a candlelit puddle, not a Lisa Frank trapper-keeper. ## Imagery and Motifs **Three motif families, used in disciplined isolation — never mixed inside a single element.** **1. Paper-aged (2% of corpus, deliberately rare and the dominant imagery token).** The entire page surface is tiled with a **single 1024×1024 SVG-noise tile** of foxed, water-stained, slightly puckered medieval rag paper — generated via `` composited with `` to yield warm-brown stains, faint capillary water marks, three lighter scuffs along where the binding-thread once passed. The tile is **not** a decorative photograph of paper — it is a hand-tuned procedural texture so the design has no licensing dependency. The tile repeats at `background-size: 1024px 1024px` with `background-blend-mode: multiply` against the `#E6D8B8` ground. Above this, two further texture layers: (a) a faint **watermark fleur-de-lys-thorn** centred-and-scaled in the recto-page region at 8% opacity, hand-drawn as inline SVG; (b) a lower-opacity **rubrication freckle** layer — tiny vermilion spots scattered at irregular density around the gilt initials, simulating the dropped pigment of a hurried scribe. The corners of every recto page carry a hand-traced thumb-darkening, organically shaped (no rectangular gradient), generated with a Bezier path that simulates centuries of devout fingertips. **2. Nature (18% of corpus — moderate, used here in the *medieval-herbal* register).** Each of the thirteen entries pairs with **one** hand-drawn botanical-demonological plate, executed as inline SVG in a single colour (`#3A1A2E` line, 1.2px stroke, no fill, no shadow) so they read as woodcut illustrations rather than full-colour botanical art. The botanical plates are conceptually *medieval pharmacopoeia drawings* — *Belladonna, Mandragora officinarum, Atropa, Hyoscyamus niger, Digitalis purpurea, Aconitum napellus, Datura stramonium, Convolvulus arvensis, Veratrum album, Cicuta maculata, Strychnos nux-vomica, Cannabis ruderalis, Papaver somniferum* — but each is **paired with a small adversarial figure**: a single tiny ink imp, hand-drawn at the root of each plant, no larger than 24×24px in the SVG, peering out from between the rhizomes. The plate compositions follow the *Herbarium Apuleii Platonici* manuscript layout (plant centre-left, root system below, Latin binomial in italic at the foot of the plate, vernacular name in scholia to the right). Marginal **vines and thorns** grow inward from the page edges as continuous Bezier paths, animated via path-draw-svg on entry-into-viewport — the vine grows over 1.8s, the leaves un-curl over a further 1.2s, and the thorns set down last as discrete keyframes. **3. Particle-effects (2% of corpus, used here as ash-motes).** A *very* sparse, very slow drift of **golden ash flecks** falls from above the recto page — never more than 12 visible at once, each a single 2×2 to 4×4px gold-toned div with `filter: blur(0.4px)`, drifting at 6 to 14px/sec on a slight horizontal sine. These read as **candle-ash** falling from an unseen candle held above the manuscript by an unseen reader. They are not snow, not stars, not glitter — they are *the inevitable consequence of reading by candlelight*. They obey reduced-motion and disable above 60% scroll velocity (the reader is moving — the candle is too far above to drop ash). **No photography, no 3D-render, no glassmorphic-card, no neon-glow, no gradient-mesh hero, no bokeh, no marble-texture, no isometric-icons, no glitch-art, no avatars.** The 98% photography corpus norm is rejected in full. ## Prompts for Implementation Build devil.quest as **one HTML document, one CSS file, one small ES module** — no framework, no router, no build step beyond a single esbuild or rollup pass, no service worker, no analytics, no third-party JS, no font hosts other than Google Fonts. Total uncompressed bundle target under **80KB** (most of the byte-budget is the inline SVG of the thirteen botanical plates and the marginal vine paths; both must be hand-tuned to read as woodcut, not as filled clip-art). **Document structure.** ```
DEVIL · QVEST

DEVIATIO · I

Belladonna ad Cor

EXPOSITIO

...

CONTRA·MEDICAMEN

...

... thirteen recto pages ...
``` **Storytelling and scroll behaviour.** The page is a single long vertical scroll. As the reader descends, three coordinated transformations occur per entry-boundary: 1. The active sidebar entry advances by one — the previous entry recedes to `opacity: 0.55`, the new entry letterspaces apart over 480ms (kinetic-animated), and its underline-vine path-draw-svg traces beneath it in `#B8843D`. 2. The entry-name in the centre column performs the **single kinetic-animated moment** of the page: each glyph cross-fades from Cormorant Garamond into Inconsolata over 320ms with a small ±2px vertical jitter, then settles back to Cormorant. This is the type *deviating* from its canonical form, then returning. 3. The marginal vine and thorn SVG paths begin path-drawing on the recto edges, the central plate fades up from `opacity: 0` over 900ms, the *expositio* paragraph animates in word-by-word with a 26ms stagger. **The holographic capillary** in the foliation-strip is the *only* element that animates continuously. It is a 3px-wide vertical bar implemented as a CSS `conic-gradient` with `@property --hue-rotate` advancing at 1°/sec, modulated by cursor proximity (the closer the cursor approaches the foliation-strip, the more saturated the conic stops become — `filter: saturate(var(--cursor-proximity))` driven by a single passive `mousemove` listener throttled to 16ms). It must read as **the iridescent edge of a foil sticker pressed onto vellum** — never as a chrome bevel, never as a glassmorphic blur. **Reduced-motion respect.** `prefers-reduced-motion: reduce` disables: the path-draw-svg vines (they appear fully drawn), the kinetic-animated entry-name jitter (replaced with a 200ms opacity fade), the candle-ash particles (omitted entirely), the holographic capillary's hue-rotation (frozen at the warmest stop). The aesthetic remains intact under reduced-motion. **Bias toward full-screen narrative.** The page is a *codex* — a thing you read leaf by leaf. There is no hero block. There is no CTA, no email capture, no "explore plans," no pricing table, no feature grid, no stat-counters animating to large numbers, no testimonials. There are **only thirteen entries**, each occupying ~110vh of scroll. The visitor lands, reads, scrolls, and reaches *Deviatio · XIII · Papaver somniferum* — the longest entry, the page's deliberate *terminus*. There is no link out except a single hand-lettered colophon at the foot of the thirteenth plate naming a fictional *Scriptorium S. Adversarii, A.D. MCCCLXXVII* (1387). The reader closes the tab. **No SPA, no routing, no shared layout, no client-side hydration.** The HTML ships pre-rendered. The ES module is ≤8KB minified, doing only: scroll-snap orchestration, the kinetic entry-name transition, the path-draw-svg trigger via `IntersectionObserver(threshold: 0.45)`, the holographic capillary's `@property` register, and the candle-ash particle scheduler. ## Uniqueness Notes Six differentiators this design commits to. None should be duplicated by other CMassC sites. 1. **Holographic as *medieval-illumination shimmer*, not as Y2K-foil cliché.** Holographic at 10% of the corpus appears almost universally as cyan-magenta-green chrome over dark backgrounds (Lisa-Frank, Y2K trapper-keeper, K-pop merch). devil.quest inverts this: holographic is restricted to **a single 3px-wide vertical capillary** at the page's edge, and its conic-gradient is a **warm analogous sweep** in burgundy-amber-gilt — the iridescence of *oil-on-candlelit-puddle*, not *foil-on-merch*. This is the **only** holographic-on-aged-paper site in the registry, and the only holographic site whose entire ground is `#E6D8B8` parchment rather than `#000` or `#0a0a0a`. 2. **Sidebar layout as *medieval-marginalium*, not as SaaS dashboard nav.** Sidebar at 25% almost always means a left-rail of dashboard links, an admin menu, a docs sidebar. devil.quest's sidebar is **the codex's index marginalis** — a slow vertical procession of thirteen *deviationes* in a Cormorant-italic-into-UnifrakturMaguntia-display register, with hand-drawn vine underlines that path-draw-svg only on the active entry. It does not navigate; it *processes*. There is no clickable behaviour aimed at switching views, only scroll-binding to the centre column. This **structural reframing of the sidebar from utility to liturgy** does not appear elsewhere in the corpus. 3. **Kinetic-animated typography as a single *liturgical moment*, not pervasive motion.** Kinetic-animated at 3% — and most uses spam the entire page with moving text. devil.quest restricts kinetic-animated to **exactly one place per entry**: the entry-name's 320ms cross-fade between Cormorant Garamond and Inconsolata. The motion is staged as the *theological moment of deviation* — the type itself wavering between the canonical (serif) and the deviated (mono). This **semantic-not-decorative** use of kinetic typography is rare in the registry. 4. **Analogous palette as *manuscript candle-soot arc*, not as airy gradient.** Analogous at 5% — most uses are pastel-ocean-blues or sunset-warm-pinks. devil.quest's analogous arc is a **dark-burgundy-into-bark-into-cinnabar-into-clay-gold-into-fired-gold** sweep — a candle-soot manuscript palette specifically descended from the *Très Riches Heures du Duc de Berry* page at folio 6v. No other registry site uses an iron-gall-ink-rooted analogous arc against a warm parchment ground. 5. **Paper-aged imagery as *primary substrate*, not surface garnish.** Paper-aged at 2% — almost always deployed as a faint texture overlay on a hero or card. devil.quest makes paper-aged the **literal entire page background** at 100% coverage, with three superposed layers (procedural foxing, watermark fleur-de-lys-thorn, rubrication-freckle pigment-drop) and corner thumb-darkening. The paper *is* the page; the design does not have a separate "card" or "panel" surface that breaks the substrate. 6. **Tone opulent-grand achieved through *slowness*, not gold-on-black.** Tone opulent-grand at 5% almost always reads as luxury-fashion-house gold-foil on black, dark mahogany leather, marble columns. devil.quest is opulent-grand through **patience and dimension** — a 9-second sine-loop drop-cap rotation, a 1°/sec holographic hue-rotation, a single 320ms kinetic-typography moment per entry, and *thirteen* entries instead of a brisk five. Opulence here is the time the reader is asked to spend, not the surface gloss of the materials. No other registry site stages opulence as patience-of-reading. **Chosen seed:** aesthetic: holographic, layout: sidebar, typography: kinetic-animated, palette: analogous, patterns: path-draw-svg, imagery: paper-aged, motifs: nature, tone: opulent-grand. **Avoided patterns from frequency analysis (corpus norms refused):** photography (98%) — replaced with hand-drawn herbal SVG plates; full-bleed (92%) — replaced with sidebar-bound recto-leaf; card-grid (79%) — refused, no cards anywhere on the page; gradient (97%) — restricted to the holographic capillary only; warm-broad-corpus-default (96%) — present but as candle-soot manuscript, not warm-inviting SaaS; cursor-follow (80%), spring (80%), stagger (75%), magnetic (70%) — all absent or sharply restrained; mono-display (96%) — used only in the kinetic-animated *moment of deviation*, never as the dominant body face; hand-drawn-aesthetic (96%) — present in the SVG plates but not in the registry's typical "marker doodle around a SaaS hero" register, instead as *medieval pharmacopoeia woodcut*. The page rejects CTA-heavy layouts, pricing blocks, stat-grids, testimonials, and feature-comparison tables in full.