# Design Language for gabs.feedback

## Aesthetics and Tone

gabs.feedback inhabits a strange, tender intersection: the chrome-bubble optimism of **Y2K-futurism** filtered through the patient honesty of **grounded-earthy** mood. Picture an early-millennium cockpit dashboard - lens flares, swooping silver curves, software ringed in beveled edges - but the operator is sitting cross-legged on a clay floor, and the cockpit windows look out onto raked gravel and a single juniper. The chrome has tarnished, just slightly. The "system online" chime has been retuned to the pitch of a kalmus bell.

This is feedback as **listening** rather than *judgment*. The interface presents itself with the seriousness of an old satellite uplink - reticles, telemetry tickers, mission-control labels in caps - but the content is human, slow, and admits of weather. Every ornament is **art-deco-display** in shape: stepped sunbursts, fan-vault arches, vertical fluting. Y2K provides the materials (mirror-finish gradients, frosted plastic, holographic edges); art-deco provides the geometry (radial symmetry, terraced ziggurats, pinstripe rules); earthy grounding provides the *temperature* (clay, oiled walnut, olive bark, raw linen).

The tone is **grounded-earthy** in the unfashionable sense - patient, weighty, willing to sit in silence. Feedback, here, is not a dopamine hit. It is dirt on hands. It is the moment when someone tells you the truth in a low voice. The Y2K chrome hovers above this earth like an instrument panel above a campfire: useful, beautiful, but secondary to the conversation it serves.

The overall sensation is **High-contrast** with no compromise: deep oxidized iron pressed against bone-white plaster, lit from one side by a single brass lamp, with chrome reticles stamped in metallic foil over the top.

## Layout Motifs and Structure

The page is a **hud-overlay** composition: a fixed mission-control chassis (a thin chrome frame, corner brackets, telemetry runners along the edges) hovers continuously over a slow-flowing river of content that scrolls beneath it. Think windshield HUD on a dashboard, except the windshield looks down into earth, not forward into sky.

**The Chassis (fixed overlay, 100vw x 100vh, pointer-events: none):**
- Top-left **L-bracket** in chrome (40px x 40px, 2px stroke), with stenciled callout text `GABS // FEEDBACK CH-01` in 10px tracked uppercase.
- Top-right **session reticle** - a small concentric-circle target (3 rings, outermost 36px) with a softly-pulsing inner dot. Beside it, a live timestamp ticker.
- Bottom-left **telemetry strip**: thin chrome rule with stepped art-deco fan, captioned `LISTENING // BUFFER 04:12 // UNREAD 003` in mono-caps.
- Bottom-right **action sigil** - a stepped art-deco sunburst icon (no button text) used as a quiet "leave a note" affordance.
- Two vertical chrome rails (left and right margins, 6vw inset, 1px stroke each, with hash-mark tick rules every 10vh).

**The Content River (scrollable beneath chassis):**
- Single column, **flowing-curves** structure - sections do not stack as rectangles; they arrive as long, lazy S-shapes, each section's container clipped along an SVG sine wave that crosses the viewport at ~30deg.
- Section heights are unequal and oversized: 110vh, 70vh, 140vh, 90vh, 160vh - the scroll is meant to feel like a slow river, not a feed.
- Each section is anchored by a single oversized **art-deco-display** numeral on the left margin (01, 02, 03 ... in stepped, fluted glyphs at 18vw font-size, kerning -0.04em), washed with a faint chrome gradient.
- Content blocks within sections are **never** aligned to a grid; they drift in from the curved seam, coming to rest at slight angles (-1.5deg to +1.5deg).

**Section Cadence (suggested):**
1. **00 // Open Channel** - full-bleed earth field with a single chrome reticle slowly drawing itself over the center, captioned with a one-line invitation.
2. **01 // What Feedback Is For** - a long, scrolling letter, set in serif body type, with deco rules separating paragraphs. Marginalia in HUD chrome appear as the user reads (e.g., `nb. quiet is also a signal`).
3. **02 // The Three Movements** - three stacked panels (each 90vh), one per movement (Receive / Sit / Reply), each with a distinct icon-heavy art-deco emblem.
4. **03 // Recent Notes** - a slow vertical conveyor of anonymized feedback excerpts, each card framed in chrome but written on what looks like raw paper.
5. **04 // Leave a Note** - a single full-bleed earth field with a centered art-deco arch enclosing a multi-line input. No "submit" button - a stepped sunburst sigil pulses softly when the input has content.

The page never feels like a "site" - it feels like a **room with instruments**.

## Typography and Palette

**Display (headings, numerals, deco emblems):** `Limelight` (Google Fonts) - a true art-deco display face with vertical fluting and stepped terminals. Used at very large sizes (clamp(3rem, 14vw, 18rem)) with letter-spacing: -0.03em, set in chrome gradient fill.

**Sub-display (section titles, marquee text):** `Poiret One` (Google Fonts) - geometric art-deco with razor-thin strokes and circular bowls. Used at ~clamp(1.5rem, 3vw, 3rem), letter-spacing: 0.18em, uppercase only.

**HUD / Chassis chrome (mono-caps labels, telemetry, marginalia):** `Share Tech Mono` (Google Fonts) - fixed-width tech mono with a faintly Y2K LCD feel. Used at 10-12px, letter-spacing: 0.12em, uppercase, in chrome stroke (no fill, just 0.5px stroke).

**Body (long-form letter, feedback excerpts):** `Cormorant Garamond` (Google Fonts) - warm humanist serif. Used at 1.15rem / 1.75 line-height for the "letter" section; reads like an actual handwritten passage in pearl-grey ink on plaster.

**Accent (tickers, counters):** `DSEG14 Classic` is not on Google Fonts - instead use `VT323` (Google Fonts) for any seven-segment / counter feel; used sparingly.

### Palette (high-contrast, earth-meets-chrome)

| Role | Hex | Purpose |
|---|---|---|
| `--earth-deep` | `#1c1611` | Primary background. A near-black that is unmistakably warm - oxidized iron, wet bark. |
| `--earth-mid` | `#3a2e22` | Secondary surfaces, raised panels. Walnut oil. |
| `--clay-raw` | `#a8896b` | Body text on dark, decorative rules. Unfired clay. |
| `--bone-plaster` | `#ece4d2` | Plaster panels - the section that breaks contrast and goes light. |
| `--chrome-cool` | `#c8d2dc` | Cool-edge chrome highlight on HUD elements, deco glyphs. |
| `--chrome-warm` | `#e9d8b6` | Warm-edge chrome highlight (tarnish, brass tone). Pairs with cool for the chrome gradient. |
| `--reticle-red` | `#c2402a` | Single accent: alert dots, the "submit" sigil pulse, deco rule centers. Used scarcely - never more than 0.5% of pixels. |
| `--scan-glow` | `#7fb89e` | Soft sage-mint scan-line glow for HUD pulses. Quiet. |

**Chrome gradient (used for deco glyphs, HUD strokes):**
`linear-gradient(180deg, #e9d8b6 0%, #c8d2dc 35%, #6f7d88 50%, #c8d2dc 65%, #e9d8b6 100%)` - the classic Y2K mirror-chrome ramp, but with a brass-tone bookend instead of pure white, so it reads earthy.

## Imagery and Motifs

**icon-heavy** is the imagery directive, expressed in **two fused families**:

**Family A - Art-Deco Emblems (custom SVG, chrome-filled):**
- A stepped sunburst (7-tier, fan-vault) - the "send" sigil.
- A fluted shield with a single horizontal bar - the "section anchor."
- A geometric cypress motif (stylized triangle stack) - earth-grounding marker.
- A reticle-rosette (3 concentric rings + radial spokes) - the listening symbol.
- A ziggurat staircase descending into a half-circle - the "archive" sigil.
- Each emblem is rendered in chrome gradient with a 1px `--reticle-red` inner stroke, set against `--earth-deep`.

**Family B - HUD Chrome Furniture (functional ornament):**
- Corner L-brackets, hash-rule rails, telemetry tickers, scope crosshairs, gimbal arcs.
- All in `Share Tech Mono` labels and 0.5-1px chrome strokes, never filled.

**Backgrounds & Texture:**
- Primary background: `--earth-deep` with a *subtle* SVG grain (4% opacity, multiplied) and a slow-pulsing radial vignette centered on cursor.
- A single, persistent **scan-line overlay** at 8% opacity, 3px stride, fixed - not animated wildly, just a faint reminder that this is a panel, not a window.
- One section uses `--bone-plaster` as a hard contrast break: a flat plaster wall with hairline cracks (SVG path, 0.4 opacity) and the deco numeral cast in `--earth-deep`.

**Motif: flowing-curves** is the connective tissue between sections. SVG sine-wave seams (amplitude ~6vh, period ~140vw) divide every section transition, with chrome edge-highlight on the upper crest. The curves never repeat exactly - amplitude/phase are varied per seam.

**No photography. No 3D renders. No mesh gradients.** Imagery is entirely vector emblems and chrome HUD furniture, layered over earth-toned plaster fields.

## Prompts for Implementation

**Storytelling spine - the page is a slow ceremony of listening:**

The visitor lands and the chassis materializes first - corner brackets stroke-draw inward from off-screen (path-draw-svg, 1.2s, staggered), telemetry tickers begin their slow scroll, the reticle in the top-right blinks twice and settles. Only then does the content river fade in from `--earth-deep`. The opening line - a single sentence, set in `Limelight` at 14vw with chrome fill - **fade-reveals** in word by word with a 220ms stagger, each word arriving with a faint scan-line wash.

**Scroll choreography (immersive, no jump-cuts):**
- Implement scroll as **content-river**: smooth-scroll behavior, with section transitions marked by SVG sine-wave masks that **morph** their amplitude as they cross the viewport center.
- The HUD chassis is `position: fixed`. As the user scrolls, the `BUFFER` counter in the bottom-left ticks up smoothly (a real scroll-position readout, formatted like a tape-deck counter via `VT323`).
- The session timestamp in the top-right is *real* - tick it once per second, format `HH:MM:SS UTC`, in `Share Tech Mono` at 10px, chrome stroke.

**fade-reveal as the dominant pattern:**
- All body content fade-reveals at 60% viewport entry, with a 400ms duration and a 0->1 opacity curve combined with a `filter: blur(6px) -> blur(0)` settle. No translation. The content emerges *from focus*, like an instrument calibrating, never like content sliding in.
- Deco numerals (`01`, `02`, ...) fade-reveal slower (1.2s) and with a chrome-shimmer animation: the gradient origin sweeps from -100% to 100% over the reveal.

**Cursor and HUD response (subtle, instrument-like):**
- The cursor casts a soft `--scan-glow` 80px radial light on the `--earth-deep` ground (`background: radial-gradient` driven by mousemove, eased with `requestAnimationFrame` to never feel jittery).
- Hovering any deco emblem causes its chrome gradient origin to **rotate** in place (a 360deg `background-position` sweep, 800ms ease-out). No scale, no shadow. Just a chrome catch.
- The bottom-right "leave a note" sigil **pulses** in `--reticle-red` only when input is non-empty.

**Section 04 - the input ceremony:**
- The form is a single multiline textarea framed by an art-deco arch (SVG, chrome stroke). No label visible until focus - on focus, a `Share Tech Mono` label fades in above: `[ CHANNEL OPEN // SPEAK PLAINLY ]`.
- As the user types, a thin chrome rule beneath the textarea **draws** from left to right, lengthening with character count (path-draw-svg). When it reaches the right edge, the sunburst sigil's red dot ignites.
- Submission produces no toast, no modal. The chassis runs a single 400ms scan-line pulse top-to-bottom, the textarea fades to plaster, and a single line in `Cormorant Garamond` appears: *received.* Lowercase. No exclamation point.

**Avoid entirely:**
- CTA-heavy hero sections, pricing tiers, feature-stat grids, testimonial carousels, FAQ accordions of the marketing variety. There is one CTA on the entire page (the sunburst sigil) and it is silent.
- Bright Y2K chrome cliches: no rainbow holographic, no Lisa Frank shimmer, no "Web 2.0" beveled buttons. The Y2K here is **tarnished mission-control**, not Bratz-doll.
- Bouncy spring animations. This site **eases**. `cubic-bezier(0.32, 0.72, 0, 1)` everywhere.

**Performance posture:** the chassis is the only fixed/animated layer. The river beneath is mostly static text with occasional SVG. Do not animate per-frame more than the cursor glow and the timestamp/buffer counters.

## Uniqueness Notes

**Differentiators from the corpus:**

1. **Y2K-futurism in tarnished register.** The 200-design corpus has y2k-futurism at ~1% and almost always renders it as glossy chrome / candy-bright. This design uses Y2K's *vocabulary* (HUD, chrome, reticles, telemetry) but renders it in oxidized iron, brass tarnish, and unfired clay - a **grounded-earthy** Y2K that has not appeared elsewhere. The chrome is real chrome but the floor is dirt.

2. **HUD-overlay as ceremonial frame, not gamer dashboard.** hud-overlay sits at 2% in the corpus and is typically used for sci-fi data-viz dashboards. Here the HUD is a contemplative chassis around a slow letter. The instruments measure *listening*, not enemies. The friction between mission-control formality and human feedback content is the whole design.

3. **Art-deco-display geometry fused with sci-fi HUD furniture.** art-deco-display sits at 1% in the corpus. The fusion of art-deco stepped sunbursts and concentric-ring HUD reticles - both are radially symmetric, both have heritage in 1920s and 1990s respectively - creates a hybrid ornament family that is genuinely uncommon. `Limelight` + `Share Tech Mono` is an unlikely pairing that holds together.

4. **flowing-curves as section seams, not decorative flourishes.** flowing-curves at 1% in the corpus is usually surface decoration. Here the curves are **structural** - SVG sine-wave masks define every section transition, replacing rectangle stacks entirely. The page has *no straight section borders*.

5. **Single-accent discipline with `--reticle-red`.** The accent color appears on less than 0.5% of pixels and is never used for buttons or links - only for live signal (timestamp colon, sigil pulse on intent, deco-rule centers). Most "high-contrast" designs in the corpus distribute accent generously; this one rations it like a flare.

6. **Ceremony over conversion.** No pricing block, no CTA grid, no stat counter. The single interaction (leave a note) is performed as a quiet ritual ending in lowercase *received.* This is anti-CTA design in service of the domain's literal meaning (feedback / receiving).

**Avoided overused patterns from frequency analysis:**
- No `card-grid` (40% of corpus). No `centered` symmetric hero (38%). No `parallax` (28%) or `scroll-triggered` reveals in the conventional sense (39%) - reveals here are blur-focus fade-reveal only.
- No `mono` typography as primary (39%) - mono is restricted to chassis chrome only.
- No `gradient` palette (41%) or `warm` palette (41%) as primary - the gradient is chrome only, and warmth is held in earth tones, not sunset washes.
- No `photography` (40%) or `minimal` (18%) imagery - icon-heavy SVG emblems exclusively.
- No `mysterious-moody` tone (23%) or `scholarly-intellectual` (12%) - grounded-earthy at 2% is the chosen lane.

**Chosen seed (per assignment):**
`aesthetic: y2k-futurism, layout: hud-overlay, typography: art-deco-display, palette: high-contrast, patterns: fade-reveal, imagery: icon-heavy, motifs: flowing-curves, tone: grounded-earthy`
<!-- DESIGN STAMP
  timestamp: 2026-05-01T16:09:14
  seed: lane
  aesthetic: gabs.feedback inhabits a strange, tender intersection: the chrome-bubble optimis...
  content_hash: cdd003b20c2e
-->