# Design Language for gabs.quest ## Aesthetics and Tone gabs.quest is a **mid-century salon at the hour after the dinner plates have been cleared** -- the moment in a 1962 Manhattan apartment when the host kills the overhead light, leaves a single brass candleholder burning on the lacquered teak table, and says, *"Now we can actually talk."* The site's central proposition is that a "quest" is not always a journey outward; sometimes it is the long, looping conversation that begins after midnight and ends only when the candle gutters. The design treats every visitor as a guest who has just been admitted past the foyer. The tone is **approachable-casual** in the literal mid-century sense -- the cadence of Studs Terkel asking a stranger about their work, the cadence of a Mike Nichols and Elaine May sketch where two friends discover something true by accident. No dazzle. No salesmanship. The page is permitted to be quiet, to leave whole minutes of empty time, to trust that the visitor will lean in. The mood is **gold-and-black-luxury filtered through Eames-era restraint**: opulent on the level of a single brass detail, never on the level of total ornament. Think: a Saul Bass title sequence with the tempo of a kitchen-table conversation. The visual register is **mid-century duotone photography held in a vast field of black**, lit only by the soft halo of a tabletop candle. The visitor's screen is the dim apartment; the cursor is their attention; the gold accents are the few things in the room the candle still reaches -- a brass ashtray, the rim of a coupe glass, the embossed type on a record sleeve. Nothing here is "designed for engagement." Everything here is designed to feel like a hand pulling out the chair across from you. ## Layout Motifs and Structure The architecture is **ma -- negative-space as the dominant material**. The Japanese ma (間) is the load-bearing element: not "whitespace" in a tidy editorial sense, but **black space as time, as breath, as the held pause before someone answers a question**. The page is set in a single full-bleed dark canvas (#0c0a08) with content placed sparingly within it. There is no card grid. There is no bento box. There are no equal-sized columns. There is one long, slow vertical descent, and inside that descent there are seven sparsely furnished rooms. **Macro structure -- "Seven Rooms After Midnight":** 1. **Foyer.** Wordmark `gabs.quest` set at oversized display scale, isolated in the upper-left third. The right two-thirds of the viewport are pure ma -- empty, dark, with only the faint warm halo of an off-screen candle bleeding in from the upper right. Subtitle in small caps four-fifths of the way down. No nav. No menu icon. No CTA. 2. **The Question Room.** A single mid-century duotone photograph -- a candle on a teak surface -- positioned off-center to the left, occupying about 38% of the viewport width. To its right, a single sentence of editorial prose, set ragged-right, in a generous serif. The question, "What is a gab?", hangs in the gold-warm field like an invitation. 3. **The Listening Room.** Type alone. A long-form short essay about what gabs are -- presented in a single narrow column (max-width 34rem) anchored at viewport-left-third, with the right two-thirds left intentionally empty. The empty space is **the listener**. 4. **The Record Room.** A horizontal row of three duotone photographic vignettes (LP sleeve, telephone receiver, ashtray) at small scale, separated by full vertical-rule of ma. Each has a one-line caption set in a small grotesque, in muted gold. 5. **The Long Pause.** A full viewport of nothing but a slowly flickering candle flame rendered in CSS, dead-center, with no text at all. Scroll continues but is intentionally slowed -- the visitor must dwell here. This is the most expensive piece of real estate on the site, and it is given to silence. 6. **The Answer Room.** A second narrow column, this time anchored right, with the left two-thirds empty. A response to the earlier question. The asymmetry to Room 3 is intentional -- the conversation has switched seats. 7. **The Door.** Wordmark again, dimmer this time, with a single ungilded sign-off line: a simple mailto link in muted gold, set in small caps. The candle has burned down. The visitor leaves. **Micro structure -- the "magnetic" interaction layer:** Within these rooms, the only interactive ornament is **subtle magnetic attraction** between cursor and the small gold elements (the wordmark's terminal period, the candle flame's wick, the mailto link). When the cursor approaches within 140px, those elements drift gently toward it -- 12-18px maximum, dampened spring -- as if the candle's warmth is pulling the visitor closer. This is the only "trick" the site performs. **No grid lines visible. No 12-column scaffolding. No tidy columns.** Content is placed by feel, governed by a 8.4-unit (approximately 1.4rem) spacing rhythm, with vertical gaps between rooms set at 18-24rem -- aggressively generous, ma-respectful. ## Typography and Palette **Typography (all available on Google Fonts):** - **Display / Wordmark / Oversized headings:** **`Bodoni Moda`** (variable, optical-size axis). Used for the site's wordmark at `clamp(6rem, 14vw, 12rem)` -- truly oversized, the kind of scale a 1961 record-sleeve designer would set on an LP cover. Weight 800, optical-size 96, slight negative letter-spacing of `-0.018em`. The high contrast between thick verticals and hairline serifs is the entire visual signature -- it carries the gold-and-black luxury cleanly without any other ornament. Numerals are set in old-style figures. - **Editorial body / question prose:** **`Cormorant Garamond`** at weight 400, italic 400 for emphasis. Set at `clamp(1.25rem, 1.6vw, 1.55rem)` with line-height 1.62 and a measure of approximately 38-42 characters per line. The tall x-height and gentle ductus give the text a Mid-Atlantic warmth -- as much radio drama as printed page. - **Captions / small caps / mailto link:** **`Inter`** at weight 500 with `font-feature-settings: "smcp", "c2sc", "tnum"` -- forced small caps with tabular numerals. Set at `0.78rem` with letter-spacing `0.14em`. Used sparingly for vignette captions, the sign-off, and the "After Midnight" room labels. Inter is chosen for its clean small-cap forms, not for any tech-modernist association. - **Time / numerals only:** **`DM Mono`** at 400 weight, used at `0.72rem` for the room numerals (I, II, III ... rendered as "01" through "07"). Tracked +0.18em. Brass-plate small. **Palette (eight values, gold-black-luxury):** - **Black (room walls):** `#0c0a08` -- not pure black; warmed to feel like ink absorbed by aged paper, or the matte black of a 1962 Eames lounge cushion in shadow. - **Charcoal (deeper recess, behind candle halo):** `#161210` -- one stop deeper than the canvas, used only for the photograph backgrounds and the candle's fall-off. Provides depth without contrast. - **Soot (image low-tone):** `#1f1a14` -- the duotone photograph shadow tone. Where photographic black-and-white would have pure black, this picks up the warmth of the room. - **Brass-Antique (primary gold accent):** `#b89150` -- the dominant gold. Saturation deliberately knocked back from any "champagne" or "bullion" gold; this is the patina of a 1957 brass candleholder that has been polished often but never lacquered. Used for wordmark fill, oversized display type, and the candle's halo. - **Brass-Polished (highlight gold):** `#d8b170` -- a brighter gold used only for the candle flame's hot center and the magnetic-attraction hover state. Never used for type larger than 0.78rem. - **Bone (highest-key text):** `#e8dcc4` -- the editorial body color. Off-white, warmed toward the candle. Provides the room's "lit surface" tone -- the page where the conversation is being quoted. Never pure white anywhere on the site. - **Vellum (second body / secondary text):** `#a8997b` -- a muted bone, used for captions, the second voice in the conversation, and the duotone photograph high-tones. Reads as "spoken" rather than "written." - **Ember (reserved emphasis):** `#7a4628` -- a single warm umber, used for one-letter drop caps in the editorial rooms and for the candle's smoke trail. Appears no more than four times on the entire page. **Duotone formula for photographs:** all imagery is mapped from black-and-white original to a two-color gradient running `#1f1a14` → `#b89150` (with a 6% mid-tone vellum lift at luminance 0.5). This produces the signature "brass-on-soot" duotone that echoes a 1962 LP sleeve printed in two-color offset. ## Imagery and Motifs **No stock photography. No photographs of people's faces. No screenshots, no UI mockups, no product shots.** All imagery in the site is either **mid-century-style still-life duotones** (rendered as static PNG/WebP with the duotone gradient pre-baked) or **CSS-rendered candle phenomena**. **The duotone vignette library (six images total, used across Rooms 2 and 4):** 1. **The Candle.** A single tapered candle in a low brass holder, photographed from the side, cropped tight. Three-quarter view. The flame is removed from the source photograph and replaced at runtime by a CSS flame -- the photographic candle is "unlit" in the asset and lit by the page itself. 2. **The Coupe Glass.** An empty stemmed coupe on a teak surface, with a single bead of condensation. Captures and refracts the candlelight gradient. 3. **The Telephone Receiver.** A 1962 Bell System rotary handset off-hook, draped over the edge of a table. Implies an unfinished call. 4. **The Ashtray.** A heavy brass ashtray, contents not visible, slight reflection. (No cigarettes. No smoke. Restraint.) 5. **The Record Sleeve.** An LP at oblique angle, sleeve type illegible, suggesting jazz at low volume. 6. **The Hand.** A single hand at rest on a notebook, mid-gesture, frozen mid-conversation. The only human element on the entire site -- and even then, hand only, no face. Each vignette is rendered at a maximum width of 420px and never spans more than 38% of viewport width. Each carries the duotone gradient (`#1f1a14` → `#b89150`) and a subtle 12% film grain overlay. Photographs are treated as **objects in the room**, not as content. **The candle (the site's signature CSS motif):** The candle flame is the only animated element on the site outside the magnetic cursor. It is rendered in pure CSS using two stacked SVG paths with the following choreography: - Outer halo: a `radial-gradient` div, 280px square, blurred `filter: blur(40px)`, with `mix-blend-mode: screen`. Slowly pulses opacity from 0.62 to 0.78 over a randomized 3.6-4.4 second cycle. - Flame body: an SVG teardrop path in `#d8b170`, with a CSS keyframe that warps the path's `d` attribute through three subtly different shapes -- a slow waver as if a window has been opened across the room. The flame leans 4° left, then 6° right, then settles. - Wick glow: a tiny `#7a4628` ember at the base, always lit, never flickering -- the constant in the unstable flame. - The candle only fully appears in Room 5 (The Long Pause) and Room 6's footer; in other rooms, only its **halo** bleeds in from off-screen, anchored to a CSS variable `--candle-x`/`--candle-y` so the lightcaster moves with scroll. **Decorative motif -- the brass rule:** A single horizontal hairline (`1px solid #b89150`, opacity 0.42) appears between rooms, but only at 12% of the viewport width and only on the left margin. It is a brass tape inlay. Never a full-width divider. Never a box. **Negative motif -- what is NOT here:** No icons. No emoji. No SVG illustrations of buildings, people, or abstract shapes. No charts, no graphs, no stat counters, no testimonial blocks, no FAQ accordions, no pricing tables, no badges, no social proof, no logos. The site is **room, candle, and conversation** -- nothing else gets in the door. ## Prompts for Implementation **The page is a small play in seven scenes, not a homepage.** Implementation must protect this framing at every level. The visitor should feel they have walked into a private room, not landed on a marketing surface. **HTML scaffolding:** - The document is one `
` containing seven `
` elements. Each room has a fixed minimum height of 100vh (Rooms 5 and 7 should be 120vh and 80vh respectively to accommodate pacing). - Use semantic prose elements: `
` for the editorial rooms (3 and 6), `
` with `
` for the duotone vignettes, `
` for the question/answer pairs, `` for the room numerals. - The wordmark is an `

` containing the literal text "gabs.quest" -- never an image, never an SVG. The oversized scale is the entire visual. - No `