# Design Language for a6c.quest ## Aesthetics and Tone a6c.quest is a **light-academia athenaeum at golden hour, restaged as an art-deco picture-house lobby for an unfinished quest**. The domain string `a6c` is read literally as the CSS shorthand color `#aa66cc` — a luminous orchid-lavender — and the entire site is built as a sun-warmed pilgrimage *through that color*, treated like a stained-glass beam slanting through tall arched windows of a 1928 university reading room. The `.quest` is not a hero's burden but a *summer term reading list* — chalk dust on a brass railing, a velvet ribbon bookmark, a chase up a marble staircase to find the next chapter. The mood diverges sharply from "dark academia" (candle-shadowed, gothic, somber). This is **light-academia at its most extroverted** — energetic, sunlit, almost giddy. Imagine the seven minutes after the lecture ends and before the next begins: students bolting through colonnades with stacks of foxed books, scarves trailing, the sun coming through dust at a 17° angle, brass fittings catching it, and somewhere a phonograph spinning a Cole Porter cut at 78 RPM. The art-deco overlay sharpens the warmth: sunburst fans, stepped Ziggurat frames, chevron friezes, and lacquered-cream column capitals. The result is a study hall that thinks it's a Pullman car at speed. Tonally, this is **energetic** — rare in light-academia, which usually drifts pastoral. Here the cadence is brisk, exclamatory, footnoted with a wink. Section headings read like chapter epigraphs from a 1929 commencement address; body copy reads like a kid sister's marginalia in the same book three generations later. The page is *eager*. It is *running late*. It is also, secretly, *prepared*. Inspirations to hold in mind: the Rose Reading Room of NYPL filtered through the title-card typography of a Powell-and-Pressburger film, the lobby of the Paramount Theatre in Oakland, Bauhaus *and* Beaux-Arts having a polite argument over tea, the sunrise gradient on the cover of a 1930 Yale Review, and the chevron carpet of an Atlantic crossing's first-class library. None of them dark. All of them *warm-into-bright*. ## Layout Motifs and Structure The layout is strictly **single-column** — one continuous reading spine, ~660px–740px wide, centered on a generous luminous field, never breaking into card grids, never splitting into sidebars, never tiling into bento. This is a deliberate counter-move: the registry shows only 7% of sibling sites use single-column, and the rest sprawl into full-bleed dashboards and asymmetric mosaics. a6c.quest stays *narrow*, *vertical*, *uninterrupted* — like the central nave of a library, with the gradient ambient field standing in for clerestory windows. The column itself sits inside an art-deco *frame*: a stepped-Ziggurat border in lacquered cream, ~28px thick, with a 1px hairline of antique gold inset 6px from the edge. The frame breaks open at chapter boundaries with a sunburst fan dingbat (16-rayed, anchored to a half-circle), and the column resumes beneath. Margins between sections are large — 144px, 196px — and inside each section the type sits on a strict vertical rhythm of 8px increments. The page is composed of **eight chapters**, each one a self-contained reading panel: 1. **Frontispiece** — domain mark, title slate, the orchid-lavender beam introduced. 2. **Argument** — a 90-word charter set as a single deco display block. 3. **Reading List** — the quest stations, set as a numbered *colophon*, not a list of cards. 4. **Marginalia** — running footnotes, set in the right gutter at small caps. 5. **Frieze** — full-width chevron break, no text, pure ornamental rest. 6. **Postscript** — a long paragraph, ragged-right, lavender drop-cap. 7. **Errata** — a deliberately misprinted footnote that animates into correction. 8. **Colophon** — typeface acknowledgments, pressmark, end-flourish. Spatially the column never touches the viewport edge. Even on a 1920px screen, the column stays ~720px and the surplus is given to the gradient ambient field — which is *the* layout element. Content is one column; **atmosphere is everything else.** The vertical rhythm is choreographed for the **fade-reveal** pattern: each chapter enters by `opacity 0 → 1` and `letter-spacing 0.4em → normal` over 1100ms, easing on `cubic-bezier(0.16, 1, 0.3, 1)`. Nothing slides. Nothing parallaxes. The columns and friezes simply *resolve into clarity* as the reader scrolls, the way a memory does. ## Typography and Palette **Typefaces (Google Fonts only — verified live):** - **Limelight** — primary art-deco display face. Used for the domain mark, chapter numerals, and the title slate. Limelight's Broadway-marquee proportions and stacked thin-thick contrast carry the 1928 picture-house DNA without needing illustration. Set at clamp(4rem → 8.4rem) with letter-spacing 0.04em. *This is the face that defines the site.* - **Cormorant Garamond** — secondary serif for body copy and long postscript paragraphs. Variable axis: weight 300–500. Used at 1.0625rem with line-height 1.72. Carries the "academic" register; its thin extrenders pair beautifully with Limelight's heavy ones — a typographic chiaroscuro that stays *light* because both faces share fine-line hairlines. - **Poiret One** — secondary deco display for chapter titles and friezes. Set at 2.4rem with letter-spacing 0.18em. Poiret One is geometric, near-monoline, deco-circle DNA — used sparingly so it never competes with Limelight. - **DM Mono** — for marginalia, footnote numerals, errata callouts, and the colophon. Used at 0.78rem, weight 400. The mono is a deliberate art-deco contradiction: a typewriter face inside a marquee — this is the "kid sister's marginalia" register. - **Italiana** — for pull quotes and the dedication line. A narrow elegant serif, used italic, 1.4rem, only twice on the page. Five faces is intentional and traditional: a Beaux-Arts title page often used four to six metal cuts in a single composition. The faces are choreographed by *role*, never mixed within a paragraph. **Palette — gradient, but specific.** The page lives inside one continuous **dawn-to-orchid gradient** that is the spiritual center of the design. It is *not* a button gradient, not a hero gradient; it is the *entire ambient field* of the page, painted as a `radial-gradient` + `linear-gradient` composite that breathes: - `#FFF8EE` *Cream-Vellum* — top-left origin, the page-paper warmth. - `#FCE5C2` *Wheat-Glow* — upper-mid, the sunbeam where it lands on the desk. - `#F4B7C4` *Peach-Rose* — middle band, the warm ambient bounce. - `#C99CD8` *Orchid-Mist* — lower-mid, the namesake `#aa66cc` lifted toward pastel. - `#AA66CC` *Orchid-Core* — accent only, used for drop-caps, the brass-rail underline, and the Ziggurat hairline. - `#7B5AA6` *Iris-Shadow* — lower-right anchor, the deepest the page ever gets. - `#4E3B6E` *Plum-Bookbind* — used only for body type and the column's hairline frame; never as background. - `#E8C77A` *Brass-Antique* — the metallic accent, used at 1px for inlays, dingbats, and the sunburst rays. The gradient slowly migrates over a 24s loop — a 6° hue rotation on the orchid mid-band, no more — so the page feels *alive at golden hour* without ever distracting. Body copy is `#4E3B6E` on a paper field that ranges from `#FFF8EE` to `#F4B7C4`; this stays a luminous warm-bright reading surface throughout. Three colors are *never* used on this site: pure white, pure black, and any cool blue/teal/green. The page is exclusively warm and orchid-warm. ## Imagery and Motifs Imagery is **bokeh-background** — used as the ambient depth layer behind the gradient. The bokeh is custom-painted, not photographic: 60–90 soft circular highlights, radii 8px to 96px, all in palette tones (`#FCE5C2`, `#F4B7C4`, `#C99CD8`, `#E8C77A`), each at 18%–34% opacity, with a 14px Gaussian blur, scattered on a Poisson-disc distribution so no two cluster. Larger orbs sit behind the column; smaller orbs drift in front of it at 6% opacity. The bokeh field drifts laterally at ~3px/second on a slow sine, suggesting the room is *very gently* swaying — a ship, a phonograph turntable, a held breath. There is **no photography**, anywhere. (The registry shows 95% of sites use photography — a6c.quest deliberately abstains.) No stock images, no illustrations of people, no product shots. The visual register is entirely *typographic ornament + gradient + bokeh*. Motifs are **retro-patterns**, drawn as crisp 1px SVG line art in `#E8C77A` brass-antique: - **Sunburst fan** — 16 rays emerging from a half-circle, 96px wide, used as chapter dingbat between sections. - **Ziggurat step** — 5-step deco corner, 32px, used at all four corners of the frame. - **Chevron frieze** — repeating 24px-wide chevrons, used as full-width section break. - **Pearl-string** — a row of 4px circles spaced 12px apart, used as horizontal rules. - **Rose-window roundel** — 12-fold symmetric tracery, 88px, used as the colophon pressmark. - **Brass-rail underline** — a 2px line with two small terminus knots, used under chapter numbers. All ornament is procedurally drawn in inline SVG; nothing is rasterized. Every ornament strokes in (`path-draw-svg`) when its chapter enters, completing in 900ms. The strokes themselves are the only "kinetic" element — once drawn, they hold still. The orchid beam is the unifying motif: a single soft column of `#AA66CC` light at 6% opacity, 380px wide, slanting at 17° from upper-left to lower-right, sitting *behind* the column and *in front of* the bokeh. It is the lightspear of the room, the reason everything is warm. It does not move; the bokeh moves around it. ## Prompts for Implementation Build a6c.quest as **one long single-column HTML document** — eight chapters, no SPA, no routes, no modals, no navigation chrome. The reader scrolls top-to-bottom through the quest like turning pages in a hand-bound summer reading list. Prioritize *atmosphere over information*, *typography over imagery*, *one clear vertical journey over branching paths*. There is no CTA. There is no pricing block. There is no testimonial. There is no stat grid. There is no FAQ accordion. There is no email capture. The page is a piece of writing wearing an art-deco frame. **Core experience prompts:** - **The orchid beam loads first.** On page enter, the gradient ambient field is solid `#FFF8EE`. Over 1400ms, the orchid beam fades in at 17° angle, the bokeh field stipples in behind it (60 orbs over 2200ms, staggered at 18ms intervals), and finally the gradient mid-bands bloom from the page center outward. The reader sees the room *light up* in three breaths. - **Frontispiece chapter** uses Limelight at clamp(4.8rem, 11vw, 8.4rem) for the domain `a6c.quest` set across two lines: `a6c` on line 1 in `#AA66CC` orchid-core, `.quest` on line 2 in `#4E3B6E` plum-bookbind. The two lines fade-reveal sequentially with a 280ms gap. Below them, the Ziggurat frame draws in via `stroke-dasharray` over 1600ms, hairline `#E8C77A`. Below that, the sunburst fan dingbat strokes in at 96px wide, perfectly centered. - **Fade-reveal is the *only* scroll mechanic.** Implement via `IntersectionObserver` with `rootMargin: '-15% 0px -25% 0px'`. Each chapter's content has `opacity: 0; letter-spacing: 0.4em; transform: translateY(0)` initially, transitioning to `opacity: 1; letter-spacing: normal` over 1100ms `cubic-bezier(0.16, 1, 0.3, 1)`. **No translation, no scaling, no slide, no parallax.** Just opacity + letter-spacing. The page should feel like ink resolving onto paper, not like elements flying in. - **Argument chapter** sets a 90-word charter as one block of Cormorant Garamond at 1.4rem, line-height 1.85, ragged-right, with a Limelight drop-cap (4.8rem, `#AA66CC`, float-left, drop 3 lines). The drop-cap appears *after* the body text fades in, with its own 600ms fade-reveal — the reader watches the capital "settle into" the paragraph it leads. - **Reading List chapter** is set as a numbered list, but rendered as a colophon: numerals are Limelight 3.2rem in `#AA66CC`, station titles are Poiret One 1.4rem letter-spaced 0.18em in `#4E3B6E`, and brief annotations beneath each station are DM Mono 0.78rem in `#7B5AA6`. Each entry is separated by a pearl-string ornament that draws in over 700ms when its row enters viewport. There are seven stations, one for each chapter to follow plus a final unmarked one labeled "—". - **Marginalia chapter** uses CSS Grid: a 12-column subgrid where the body column occupies columns 2–8 and small caps DM Mono footnotes occupy columns 10–12, set at 0.72rem with 1px brass-rail underlines drawn via SVG. Footnotes fade-reveal *after* their corresponding body text by 400ms, simulating a reader's eye flicking from main to margin. - **Frieze chapter** is text-free. It is a full-width band, 184px tall, of repeating chevron frieze in `#E8C77A` at 28% opacity over the gradient. As the reader enters it, the chevrons stroke-draw left-to-right in a wave (each chevron offset by 30ms) over a total of 1800ms. Then they hold. The frieze is a *visual breath* between long reading passages. - **Postscript chapter** is the longest single block — 280–340 words of Cormorant Garamond at 1.0625rem, line-height 1.78, ragged-right, with a Limelight drop-cap and italic Italiana pull-quote pulled out into the right gutter. The pull-quote fade-reveals 800ms after the surrounding paragraph, lavender-rule above and below. - **Errata chapter** is the design's *wink*: a small DM Mono footnote labeled `[ERRATA]` that initially renders with a deliberate misprint (e.g., "the lavendar of an academic afternoon"). On reveal, after a 1400ms hold, the misspelled letters cross out via SVG strikethrough that draws in over 600ms, and the corrected letters fade in beneath in `#AA66CC` orchid-core. The reader watches the page *correct itself*, an art-deco printer's conceit. This happens exactly once on the page. - **Colophon chapter** is the closing pressmark: the rose-window roundel strokes in (88px, brass-antique, over 1400ms), beneath it the typefaces are listed in DM Mono small caps, and beneath that a single Limelight ampersand at 6.4rem in `#AA66CC` floats centered. After the ampersand, a final pearl-string draws in to terminate the page. There is no footer. There is no "back to top" button. The page ends. - **The gradient breathes.** The ambient field is one big `body::before` pseudo-element with a composite gradient, animated via CSS `@keyframes` over 24s, shifting the orchid mid-band's `hue-rotate` by ±3°. The shift is so subtle the reader registers it as "the room feels different now" without ever consciously seeing motion. - **The bokeh drifts.** The bokeh layer is a separate `body::after` SVG with 60 `` elements, each with its own slow `` translating ±18px on a sine of 14–22s period. Stagger the periods so no two orbs sync. The drift is ambient, never animated to any scroll event. - **No cursor effects.** Despite 50% of sibling sites using cursor-follow, a6c.quest has *no* cursor reactivity — no magnetic buttons, no cursor highlight, no parallax-on-mouse. The page is contemplative. The cursor is a cursor. (This is intentional: light-academia rejects "look at me" UI.) - **No hover scale, no hover lift, no hover tilt.** Links are styled via brass-rail underlines that stroke-draw on hover (300ms), and that is the *entire* hover vocabulary. - **Motion respects `prefers-reduced-motion`**. When set, the gradient holds still, the bokeh holds still, the fade-reveal becomes an instantaneous opacity step, and stroke-draws complete in 0ms. The page still works as a static composition. - **One sound, optional, off by default.** A muted, looped 78-RPM phonograph crackle — `