# Design Language for gabs.quest
## Aesthetics and Tone
gabs.quest is a **love letter spraypainted on a concrete wall at golden hour** — the domain name "gabs" is both a name and the act of talking, of confessing, of spilling warmth onto cold surfaces. The aesthetic is **graffiti as pastoral poetry**: weathered brick and fire-escape iron given over entirely to soft ochre light, terracotta halos, and the looping cursive of someone who desperately wants to be understood. This is not the hostile graffiti of territory-marking; it is the kind found on the arch of a bridge over a slow canal — a date, a name, a small heart, paint fading into the stone as though it was always there.
The surface layer is a **heads-up display** — thin monospaced readouts float above the painted city like a navigator reading a map from memory. Grid crosshairs, coordinate tags, signal-strength bars, and bearing indicators appear as paper-thin overlays drawn in #2A1810 ink over the terracotta field. The HUD is not technological aggression; it is the mental map a person draws when trying to find their way back to someone. Every readout is a small act of longing: `LAT 41.3°N / LON 2.1°E`, `SIGNAL: STRONG`, `LAST SEEN: YESTERDAY`.
Beneath all of it runs the **pastoral-romantic tone**: unhurried, suffused with late-afternoon warmth, never ironic. The city is not dystopian — it is a village that happened to grow tall. Pigeons on windowsills. Laundry strung between balconies. A mural that someone repainted every year since 1987. The visitor is not a user navigating a product; they are a person strolling the same block twice because the light was right.
The visual register is **warm, layered, and manual**: terracotta as the dominant hue, chalk-white and charcoal as the secondary pair, acid-yellow as a single accent that functions like a highlighter over a love poem. Textures suggest grain, pressed linen, aged plaster. Nothing is pristine. Everything is inhabited.
## Layout Motifs and Structure
The page is structured as a **HUD-overlay composition**: a fixed transparent status bar at the top edge, a floating coordinate readout at the bottom-left, and a central content well that scrolls freely beneath both. The HUD elements never move — they are glued to the viewport corners like cockpit instruments, rendered in `Space Mono` at 10–11 px, color #5C2E14 at 60% opacity so they recede rather than compete.
**HUD Frame.**
- Top bar (40 px tall, full width): fixed. Contains `gabs.quest` as a coordinate tag left-anchored, a blinking cursor right-anchored, and a thin 1 px bottom rule in #C4784A at 40% opacity.
- Bottom-left coordinate block: fixed, 16 px from edge. Three lines: domain identifier, a fake bearing (`BRG 247°`), and a signal bar of five thin vertical ticks, the rightmost two rendered at 30% opacity to suggest partial signal.
- Both HUD elements slide-reveal in from their respective edges on load: the top bar translates in from `translateY(-100%)`, the bottom block from `translateX(-120%)`, each with a 0.6 s ease-out at staggered 200 ms offsets.
**Content Well.**
The scrollable body sits below the fixed HUD with a `padding-top: 40px` offset. It is divided into four vertical sections, each the width of the viewport minus 64 px gutters:
1. **Hero panel (`100svh`).** A terracotta field (#C4784A) with a large line-illustration of a city roofline drawn in single-weight #2A1810 lines, centered and occupying 55% of the panel height. The domain name `gabs.quest` is set in `Orbitron` (weight 400, letter-spacing 0.18 em) at 5–7 vw, color #FAE8D1, sitting just above the illustration midline. Below it, a single line of `Space Mono` body text at 14 px: a short phrase (one sentence, pastoral register). A thin horizontal rule in #E8A07A separates the headline zone from the illustration.
2. **Grid section (variable height).** Three equal-width cards, each 320 px tall at desktop, arranged in a single row. Cards have a background of #F5D5B8 (pale terracotta), a 2 px border in #C4784A, a line-illustration icon (40 px, single-weight) at top, a `Orbitron` heading (weight 600, 18 px), and `Space Mono` body (14 px, #3B1A0D, line-height 1.7). On mobile the three cards stack vertically.
3. **Mural section (`80svh`).** Full-width panel in #2A1810 (deep charcoal-brown). A large line-illustration of a city wall mural — a single figure, arms wide, facing the viewer — drawn in #FAE8D1 lines, right-aligned, occupying 70% of the panel height. To the left, stacked: a `Space Mono` label (`// INSCRIPTION //`, 11 px, #E8A07A), a `Orbitron` headline (3–4 vw, weight 700, #FAE8D1), and two paragraphs of `Space Mono` body text (#D4A882, 14 px). The HUD coordinate block in this section repaints to #FAE8D1 for legibility.
4. **Footer band (120 px).** Background #F5D5B8. Left-side: `gabs.quest` in `Space Mono` at 12 px, muted. Center: three thin-stroke social link icons (line-illustration style, 20 px). Right-side: a tiny bearing readout `BRG 247° / SIGNAL: STRONG` in `Space Mono` at 10 px, #C4784A — mirroring the HUD footer block.
**Slide-Reveal transitions.**
Every section (cards, mural, footer) enters the viewport via a slide-reveal: `translateY(40px) → translateY(0)` with `opacity 0 → 1`, triggered by an IntersectionObserver at 15% threshold. Duration 0.55 s, easing `cubic-bezier(0.25, 0.46, 0.45, 0.94)`. Cards stagger by 80 ms each. The hero panel is pre-visible (no animation needed). HUD elements slide in on `DOMContentLoaded` as described above.
## Typography and Palette
**Typography — tech-mono + HUD, all from Google Fonts.**
Two typefaces only, each with a clearly bounded role:
- **Display / Headings:** *Orbitron* (Google Fonts) — weight 400 for the hero title and large section labels; weight 600–700 for card headings and the mural headline. Orbitron's geometric, wide letterforms carry the HUD-futurist register without losing legibility at display sizes. Letter-spacing: +0.12 em for large headings, +0.06 em for smaller. Used in ALL-CAPS for HUD labels only.
- **Body / UI / Mono:** *Space Mono* (Google Fonts) — weight 400 for all body text, labels, HUD readouts, and captions; weight 700 for inline emphasis only. Space Mono's humanist monospace quality bridges the tech-overlay aesthetic and the personal, handwritten-adjacent warmth of the graffiti register. Line-height 1.7 for paragraphs, 1.2 for compact HUD readouts.
No third typeface. Icon labels and metadata are always Space Mono. Section bylines use Space Mono italic (`font-style: italic` — Space Mono supports it).
**Palette — terracotta-warm with charcoal ink and pale linen.**
| Role | Name | Hex |
|---|---|---|
| Primary / hero field | Terracotta | `#C4784A` |
| Deep ink / mural bg | Charcoal-brown | `#2A1810` |
| Pale ground / cards | Linen terracotta | `#F5D5B8` |
| Warm cream / text | Antique cream | `#FAE8D1` |
| Warm rust / rules | Rust orange | `#E8A07A` |
| Accent | Acid yellow | `#E8C840` |
| Body text on pale | Deep sienna | `#3B1A0D` |
| HUD text | Muted sienna | `#5C2E14` |
**Color logic:** Sections alternate between `#C4784A` grounds (warm, present, near) and `#2A1810` grounds (cool, receding, intimate). The acid yellow `#E8C840` is used only once per section — as a single highlighted word in a body paragraph or a single HUD label accent — never as a background. All hex values applied literally; no tints or alpha-modified variants except for the HUD elements (60% and 40% opacity as specified in Layout).
## Imagery and Motifs
**Imagery is line-illustration only.** No photographs, no raster textures, no stock. The entire visual library consists of **single-weight SVG line drawings** — stroke 1.5 px, no fill, color inherits from the section context (dark on pale ground, cream on dark ground). Drawing style: architectural linework, not cartoon. Think technical elevation drawings given over to romantic subjects.
Subjects and their section placement:
- **City roofline panorama** (Hero): a continuous line of rooftops — chimney stacks, water towers, antenna arrays, a fire escape zigzag, one arched window. Width: 100% of container. Height: as defined in Layout. No perspective foreshortening — flat elevation, as though traced from a postcard.
- **Card icons** (Grid section): three small illustrations, each a single coherent object from city-pastoral register:
- A pigeon perched on a ledge, head turned, drawn in 12 strokes
- A fire hydrant wrapped in wheat-paste poster fragments (suggested by three overlapping rectangles, corners curling)
- A laundry line between two balcony brackets, three garments hanging, gently windowed
- **Mural figure** (Mural section): a silhouette-style line figure, arms outstretched, rendered as a pure contour — no internal detail. Proportions elongated slightly (1:7.5 head ratio). Behind the figure, a loose oval spray-paint halo effect rendered as a field of very tight concentric ellipses in `#C4784A`, conveying spraypaint bloom without photographic texture.
**Motifs — city-urban with pastoral warmth.**
The urban motifs are not aggressive or dystopian. They are the motifs of a city at rest:
- **Graffiti tags as section labels**: section numbers and identifiers are rendered in a loose, rounded tag style using CSS `font-style: italic; letter-spacing: -0.02em; font-size: 0.85em` applied to `Space Mono` — not a brush-script font, but Space Mono pushed toward softness.
- **Bearing + coordinate HUD readouts** echo navigational culture without irony — they are love-letter coordinates.
- **Spraypaint halo** (the concentric ellipse field behind the mural figure) is the single instance of graffiti-as-medium made literal.
- **Roofline silhouette** as site hero is a pastoral trope: the skyline not as power symbol but as home-recognition.
- The **laundry-line icon** and **pigeon icon** are the page's overt pastoral signals — domesticity placed inside the urban grid.
## Prompts for Implementation
Build gabs.quest as a **single-scroll page** with a persistent HUD frame. The visitor reads it the way they read a wall — standing still, close, noticing. There are no tabs, no sub-pages, no modal popups.
**Macro structure (top to bottom):**
1. **HUD Frame (fixed, viewport-level).** Implement as two absolutely-positioned elements outside the scroll container: `#hud-top` and `#hud-bottom-left`. Both use `position: fixed; z-index: 100; pointer-events: none`. Typography: `Space Mono`, 10–11 px, `#5C2E14` at 60% opacity. Animate both on `DOMContentLoaded`: top bar `translateY(-100%) → translateY(0)` over 0.6 s ease-out; bottom block `translateX(-120%) → translateX(0)` with 200 ms delay. In the Mural section, detect scroll position and swap HUD text color to `#FAE8D1` via a class toggle.
2. **Hero panel.** Full-viewport height (`100svh`). Background: `#C4784A`. SVG roofline illustration centered, `width: 100%; max-height: 55vh; object-fit: contain`. Domain title `gabs.quest` in `Orbitron` weight 400, ~6 vw, `#FAE8D1`, `letter-spacing: 0.18em`. Below title: one line, `Space Mono` 14 px, `#FAE8D1` at 80% opacity, pastoral sentence. Thin `
` in `#E8A07A` between title zone and illustration. No scroll indicator, no CTA button — the visitor scrolls because they want to.
3. **Grid section.** `padding: 80px 64px`. Background: `#F5D5B8`. Three-column CSS grid (`repeat(3, 1fr)`, gap 32 px). Each card: `background: #FAE8D1; border: 2px solid #C4784A; border-radius: 4px; padding: 32px`. Card structure: SVG icon (40 × 40 px, stroke `#2A1810`, no fill), `Orbitron` heading (weight 600, 18 px, `#2A1810`), `Space Mono` body (14 px, `#3B1A0D`, line-height 1.7). Slide-reveal each card with 80 ms stagger. On viewport `< 768px`: single column.
4. **Mural section.** `min-height: 80svh`. Background: `#2A1810`. Two-column flex: left text column (~45% width), right illustration column (~55%). Left: Space Mono label `// INSCRIPTION //` (11 px, `#E8A07A`), `Orbitron` headline (weight 700, 3.5 vw, `#FAE8D1`), two paragraphs `Space Mono` 14 px `#D4A882` line-height 1.7. Right: SVG mural figure with spraypaint halo, right-aligned, `height: 70%` of section. On mobile: stack — illustration above, text below.
5. **Footer band.** `height: 120px; background: #F5D5B8; display: flex; align-items: center; padding: 0 64px`. Three zones: left (`Space Mono` 12 px, `#5C2E14`, domain), center (three SVG icons, 20 px, `stroke: #C4784A`), right (`Space Mono` 10 px, `#C4784A`, bearing readout). No horizontal rule above footer — the transition from `#2A1810` to `#F5D5B8` is the division.
**Slide-reveal implementation:** Use a single `IntersectionObserver` with `threshold: 0.15`. Observed elements: `.reveal` class applied to cards, mural section, footer. Initial state: `opacity: 0; transform: translateY(40px); transition: opacity 0.55s cubic-bezier(0.25,0.46,0.45,0.94), transform 0.55s cubic-bezier(0.25,0.46,0.45,0.94)`. On intersection: add `.revealed` class (`opacity: 1; transform: none`). Stagger via `transition-delay` set in HTML inline style.
**SVG generation notes:** All SVGs are `viewBox="0 0 N N"` with no fixed `width`/`height` attributes (let CSS size them). `stroke-linecap: round; stroke-linejoin: round` throughout. The halo effect behind the mural figure is a `` of 12 concentric `` elements, `rx` stepping from 40 to 200, `ry` proportionally scaled, `fill: none; stroke: #C4784A; stroke-width: 1; opacity: 0.18` decreasing outward.
## Uniqueness Notes
Seed: aesthetic: graffiti, layout: hud-overlay, typography: tech-mono, palette: terracotta-warm, patterns: slide-reveal, imagery: line-illustration, motifs: city-urban, tone: pastoral-romantic
1. **HUD-as-love-letter**: The navigational HUD overlay — crosshairs, bearing readouts, signal bars — is reframed entirely as romantic longing rather than military or technological authority. Coordinates are meeting-places. Signal strength measures emotional availability. This conceptual inversion is the site's primary differentiator: the coldest, most technical layout convention in web design becomes the warmest.
2. **Graffiti without brush-script**: Most graffiti-aesthetic sites reach for hand-painted or brush-script fonts. gabs.quest refuses this shortcut. It uses monospace type (`Space Mono`) pushed slightly into warmth via italic and loose tracking, plus a single spraypaint-halo SVG effect. The graffiti register is structural (layering, tagging conventions, wall-as-canvas) rather than typographic. This makes the aesthetic feel inhabited rather than performed.
3. **City-urban as pastoral register**: The urban motifs (roofline, fire escape, laundry line, pigeon, wall mural) are chosen specifically for their domesticity and softness — not cranes, not traffic, not neon. The city depicted is the city one walks through at 6 a.m. when it belongs to no one. Terracotta and antique cream replace the usual neon-on-dark palette for graffiti sites, making the urban feel warm and remembered rather than dangerous and electric.