# Design Language for gabs.feedback

## Aesthetics and Tone

gabs.feedback is a concrete signal tower broadcasting from the bottom of the ocean -- a brutalist structure submerged in deep blue, where raw surfaces meet the pressure and darkness of abyssal depth. The brutalist aesthetic manifests as unfinished, honest surfaces: no gradients, no rounded corners, no visual comfort. Every edge is sharp, every surface is flat, and the content is presented with the unflinching directness of brutalist architecture. But the ocean-deep palette softens this severity into something contemplative -- like finding a Le Corbusier building on the ocean floor, encrusted with coral and dignity.

The tone is raw-authentic -- feedback stripped of corporate politeness. The site presents the concept of value-feedback (gabs = price in Korean) with radical honesty: no spin, no euphemism, no visual sugar-coating. Sentences are declarative. The serif typography carries the authority of academic publishing, but the brutalist layout refuses to organize content into reassuring hierarchies. Everything sits at the same visual weight, forcing the reader to determine importance themselves.

Visual inspiration: the Habitat 67 complex photographed underwater; the raw concrete walls of the Salk Institute at La Jolla illuminated only by deep blue light; a 1970s university press publication on economic theory, printed on heavy uncoated stock.

## Layout Motifs and Structure

The layout uses **minimal-navigation** -- the site has almost no navigation at all. There is no menu, no hamburger icon, no sidebar, no footer navigation. The user scrolls down and reads. The only navigation is the act of scrolling. This radical minimalism of interface is a brutalist statement: content does not need wayfinding when it is presented with sufficient clarity.

**Minimal-Navigation Architecture:**
- Single continuous scroll, no anchors, no jump links
- Max-width: 760px, centered, with 80px side margins on desktop
- Content blocks separated by 120px vertical spacing and a thin 1px horizontal line in #2a4a6a
- The domain name appears exactly twice: once at the top (small, left-aligned) and once at the bottom (same)

**Section Flow:**
1. **The Surface (Hero):** 80vh (not full viewport -- the next section is visible below, inviting scroll). "GABS.FEEDBACK" in serif type, left-aligned, followed by a single blunt sentence about value and feedback.
2. **The Pressure:** Three text blocks, each a standalone argument about how feedback mechanisms shape value perception. Blocks have no titles -- only body text. A thin line separates each.
3. **The Glitch:** A section where the text deliberately breaks formatting: a CSS glitch effect (transform: skewX jitter) applied to a single paragraph, representing feedback system failure. This visual disruption is the site's most dramatic moment.
4. **The Current:** A flowing-curves SVG illustration of ocean currents, rendered in thin blue lines, spanning the full content width. Below it, a longer reflective text.
5. **The Depth:** Domain name, small, left-aligned. A thin line. Nothing else.

## Typography and Palette

**Typography:**

- **Display / Headlines:** "Playfair Display" (Google Fonts) -- a high-contrast transitional serif with sharp, authoritative details. Used at 3rem-5rem for the hero text. Weight: 700. The serif-classic authority of Playfair Display provides institutional gravitas that suits the brutalist directness.

- **Body / Content:** "Merriweather" (Google Fonts) -- a serif designed for screen reading with sturdy details and generous x-height. Used at 17px/1.75 for body text. Weight: 400 for body, 700 for rare emphasis. Merriweather's robustness ensures readability even on the dark ocean-deep backgrounds.

- **Accent / Metadata:** "Playfair Display SC" (Google Fonts) -- small-caps variant, used at 12px with letter-spacing: 0.15em for the domain name repetitions and minimal metadata.

**Palette:**

| Role | Color | Hex | Usage |
|------|-------|-----|-------|
| Abyssal Dark | Deep ocean black | #0a1a2a | Primary background |
| Ocean Mid | Dark blue-grey | #1a3050 | Content block backgrounds (optional tint) |
| Pressure Blue | Steel blue | #2a4a6a | Horizontal lines, borders, secondary accents |
| Text Primary | Pale ocean | #d0dce8 | All body text on dark backgrounds |
| Text Secondary | Dim blue | #6a8aa0 | Metadata, the domain name, secondary text |
| Glitch Red | Signal error | #ff3333 | Used ONLY in the glitch section, momentary |
| Current Line | Light steel | #4a7090 | Flowing-curves SVG illustration strokes |

The palette is ocean-deep -- a narrow tonal range of dark blues that creates the sensation of enormous water pressure. The only chromatic exception is the glitch red, which appears for the single disruption moment and is never used elsewhere. This restraint makes the glitch visually violent.

## Imagery and Motifs

**Line Illustration of Ocean Currents:**
The primary imagery is line-illustration -- specifically, a flowing-curves SVG in The Current section:
- Multiple SVG paths representing ocean current flows, drawn in thin (1px) strokes of #4a7090
- The paths curve organically across the content width, overlapping and interweaving
- No fills, no gradients -- just the lines themselves
- The illustration is positioned inline with the content, spanning the full 760px width at 200px height

**Flowing-Curves Motifs:**
The flowing-curves motif appears subtly throughout:
- Thin curved SVG lines (0.5px, #2a4a6a) frame the top and bottom of the page, suggesting ocean surface and ocean floor
- A single curved line connects the hero text to the first content block, drawing the eye downward

**Glitch Pattern:**
The glitch effect in The Pressure section:
- A CSS @keyframes animation on a single paragraph: rapidly alternating transform: skewX(±2deg) and color: #ff3333/#d0dce8 over 100ms intervals
- The animation runs for 2 seconds when the paragraph enters the viewport, then stops
- A brief horizontal displacement (translateX ±3px) accompanies the skew
- This single moment of visual violence represents feedback system failure

## Prompts for Implementation

**Full-Screen Narrative Experience:**
The minimal-navigation approach means the entire site is a single downward reading experience. There are no distractions, no choices to make. The ocean-deep blue creates a sense of increasing pressure as the user scrolls deeper. Content is sparse and direct -- the brutalist refusal to decorate means every word carries weight.

**Glitch Effect Implementation:**
Target the specific paragraph with a class. Use @keyframes with rapid alternation:
```
@keyframes glitch {
  0%, 100% { transform: skewX(0); color: #d0dce8; }
  20% { transform: skewX(-2deg) translateX(3px); color: #ff3333; }
  40% { transform: skewX(1deg) translateX(-2px); color: #d0dce8; }
  60% { transform: skewX(-1deg) translateX(1px); color: #ff3333; }
  80% { transform: skewX(2deg) translateX(-3px); color: #d0dce8; }
}
```
Trigger via IntersectionObserver. Run once (animation-iteration-count: 3, total ~2s), then remove the animation class.

**Responsive Behavior:**
On mobile (below 640px), margins reduce to 20px. Hero text scales to 2.5rem. The flowing-curves SVG scales proportionally. The glitch effect intensity reduces (skew to ±1deg). All spacing proportionally decreases.

**AVOID:** Navigation menus, CTA buttons, feedback forms (ironic but deliberate -- the site discusses feedback, it does not collect it), testimonials, pricing, corporate photography, gradients, rounded corners.

## Uniqueness Notes

**Differentiators from other designs:**

1. **Brutalist aesthetic submerged in ocean-deep palette:** Brutalist (3%) is typically paired with grey or monochrome palettes. The ocean-deep blue creates a fundamentally different emotional context -- brutalism as deep-sea architecture.

2. **Minimal-navigation as radical design statement:** No other design in the collection eliminates navigation entirely. The absence of any interface beyond scrolling is a brutalist commitment to content over chrome.

3. **Single glitch moment in an otherwise static site:** The glitch pattern (appears in 12% of designs) is used here as a one-time event -- a 2-second disruption in an otherwise perfectly still environment, giving it the impact of a seismic event.

4. **Ocean-deep palette (3% frequency):** One of the rarest palettes, and the only one applied to a brutalist aesthetic, creating the "submerged concrete" atmosphere.

5. **Flowing-curves as ocean current illustration:** The flowing-curves motif is recontextualized as literal ocean currents, creating a rare instance where the motif has both abstract beauty and representational meaning.

**Documented Seed/Style:**
aesthetic: brutalist, layout: minimal-navigation, typography: serif-classic, palette: ocean-deep, patterns: glitch, imagery: line-illustration, motifs: flowing-curves, tone: raw-authentic

**Avoided Overused Patterns:**
- corporate aesthetic (62%) -- brutalist (3%) instead
- asymmetric layout (94%) -- minimal-navigation (unique) instead
- warm palette (100%) -- ocean-deep (3%) instead
- parallax patterns (98%) -- glitch (12%, but single-use) instead
- mono typography (98%) -- serif-classic (7%) instead
- tech motifs (96%) -- flowing-curves instead
- friendly tone (64%) -- raw-authentic (1%) instead
- minimal imagery (94%) -- line-illustration instead
<!-- DESIGN STAMP
  timestamp: 2026-03-18T20:51:17
  seed: unspecified
  aesthetic: gabs.feedback is a concrete signal tower broadcasting from the bottom of the oce...
  content_hash: f88f71527bce
-->