# Design Language for gabs.reviews ## Aesthetics and Tone gabs.reviews is a **neubrutalist tackle-shop bulletin** rebuilt as a tide-watcher's logbook — picture a working harbormaster's office at the edge of a dock where the windows are salt-sprayed, the desk is a slab of unfinished oak strapped in cracked saddle-leather, and the wall is a rough plywood corkboard onto which every gab — every passed review, every overheard snippet, every thumbs-up shouted across the slip — has been pinned with a brass tack and circled with a fat #2 pencil. The thesis: **a review is not a star, it is a wave**. Stars rank; waves arrive, peak, recede, and arrive again. gabs.reviews refuses the leaderboard and embraces the **swell** — opinions stacked one on top of another, each leaving its own grain on the wood underneath. The aesthetic is **neubrutalism at 3% claimed not as a marketing veneer but as the structural truth of every component**: thick 4px ink-black borders, hard 8px offset shadows that never blur, fills in raw butter-cream paper, and zero rounded corners except where a hand-drawn marker pen happened to slip. There is no glass, no gradient, no glow. Every surface is opaque, dry, and slightly off-square — a 0.4° rotation here, a 0.6° rotation there, as if each card was tacked up by someone in a hurry but with affection. The leather-texture (3%) shows up in three places only — the hero header strip, the sidebar tab bindings, and the footer band — and it is not a Photoshop overlay; it is a properly grained, slightly creased *cordovan-with-a-scuff* surface, hex-stitched at the edges with a visible saddle thread. The motif is **wave-forms at 2% — the rarest combination in the registry** — pulled in not as decorative ribbons but as the *literal organising metric* of the site. Every review stack is plotted along a tidal line: the louder the conversation, the higher the swell, the thicker the ink. Waves are drawn in heavy hand-inked black contour, never gradient-filled, and always carry a single complementary cobalt-or-tangerine breaking-foam dot at the crest. The energetic tone (16%) is enforced through **condensed display typography** that reads like a boardwalk arcade marquee at dusk — narrow, all-caps, bouncing one or two pixels at a time when the cursor approaches. The voice copy is loud, friendly, and tackle-shop direct: **"big swell incoming"**, **"this one's been gabbed about three times this week"**, **"foam alert: hot take landing"**, **"riptide warning: split opinion on this one"**. Reviews are never "rated 4.7/5" — they are described as *ankle-high*, *waist-high*, *head-high*, *overhead*, or *closeout*. The site reads as if a third-generation harbormaster who also happens to run the town's gossip column has finally been given a website, and refuses to let it look like Yelp. ## Layout Motifs and Structure The structural backbone is **stacked-sections at 3% — claimed at full strength**, not as the Webflow default of "rows piled vertically with neutral whitespace," but as a **literal stratigraphic stack** of opaque, neubrutalist plates, each plate a different cream/butter/ink/cobalt fill, each with a 4px ink border, each offset 8–12px from the plate beneath, like cards left out on a damp table that have warped slightly in the salt air. Sections do not blend. They *stack*. They *thunk*. The transition between sections is never a fade — it is the visible top edge of the next plate sliding up from below with a hard cut, accompanied by a single thwap of the bottom-shadow. There is **no hero with full-bleed photo**, no founder reel, no centered tagline-and-CTA. The first viewport is a **tide chart**: a horizontal strip across the top showing the last seven days of "swell" (volume of reviews), drawn as a thick hand-inked wave-form line. Below the chart, three stacked plates introduce the day's three loudest gabs — each a leather-strap-bound block with the gab title in condensed all-caps, the wave height annotation, and a hand-drawn underline that *redraws itself* every time it scrolls into view (the underline-draw pattern, claimed deliberately at the 17% level — overused enough to be familiar, but reinterpreted here as a **fat, ink-fed, slightly drippy marker stroke** rather than the polite hairline most sites use). The grid is **two-column, ragged-right**. The left column (60% width) is the **swell stack**: reviews piled chronologically, each on its own plate, rotating between four fill colors and four rotation angles (-0.6°, -0.3°, +0.4°, +0.7°). The right column (40% width) is the **harbormaster's clipboard** — a single tall leather-textured panel pinned with a brass grommet at top and bottom, showing the day's tide log: thirty-day rolling wave count, the loudest gabber of the week, the deepest closeout (most contentious split-review), and a single hand-scrawled "harbormaster's note" in real cursive marker. There is no sticky navigation. Instead, when the user scrolls past the first plate, the site spawns a **floating tide-stamp** in the top-right corner — a 64×64 ink-black square with the current scroll-depth rendered as a wave-height in feet ("YOU ARE 6FT DEEP") that updates as you scroll. The stamp tilts 4° to the right when stationary and lifts to 0° when the cursor approaches. The footer is a **rolled leather strap** that visually wraps under the bottom of the page like the cuff of a tackle bag, with the site's metadata stamped into it as if branded — visible heat-press indentation, slightly off-register, with two tiny anchor-grommets on the left and right. Section widths break the conventional 1200px container at three deliberate breakpoints: a tight 880px central spine for review reading, a wide 1440px swell-chart band, and a wider 1680px tide-strip overlay for the page header. These mismatched widths are intentional — the reader feels the page *breathing in and out* like the dock at low and high tide. ## Typography and Palette **Fonts (Google Fonts only):** - **Display** — *Bebas Neue*, used at 96px / 128px / 192px for plate headlines and tide-chart labels. All caps, condensed, letterspacing at -1%, baseline jiggle of ±1px at hover. - **Editorial body and review text** — *Archivo Narrow* (regular 400, semibold 600), used at 17px/27px line-height. Condensed enough to keep the marquee feel, wide enough to actually be read for long stretches. - **Marginalia, harbormaster notes, hand-scrawled annotations** — *Caveat* at 22–28px, used sparingly: only for the harbormaster's clipboard, the wave-height callouts, and the underline-draw caption-text under each review. - **Numerals and tide-data** — *JetBrains Mono* at 14–18px for review counts, wave heights, dates, and the floating depth-stamp. Tabular figures only. **Palette (complementary at 4% — claimed as the load-bearing organising principle):** The full palette is exactly six colors. The complementary axis is **cobalt blue ↔ tangerine**, the only two saturated colors on the site. Everything else is paper, ink, or leather. - **Ink Black** — `#0F0F0E` — the universal stroke color, used for every border, every wave-form contour, every typographic glyph. Never softer than this. - **Butter Paper** — `#F2E8D0` — the dominant plate fill, used on roughly 60% of all section plates. It is unmistakably *paper*, not white. - **Salt Cream** — `#FBF6E9` — a paler off-white, used for review-body text plates and the central reading spine. Never used adjacent to itself; always between two Butter plates. - **Cobalt Swell** — `#1E4FD9` — the cooler half of the complementary pair. Used as fill for "rising" reviews (positive sentiment, growing swell) and for the foam dots at the crest of every wave-form. - **Tangerine Foam** — `#F26B1F` — the warmer half of the complementary pair. Used as fill for "breaking" reviews (contentious, split, or controversial) and as the underline-draw stroke color for headlines that have been gabbed about more than ten times. - **Cordovan Leather** — `#5A2E1A` — used **only** on the three leather-textured surfaces (hero strip, clipboard sidebar, footer cuff). Never bleeds into other surfaces. The complementary pair (`#1E4FD9` ↔ `#F26B1F`) is enforced **at the per-review level**: every single review on the site is tagged with a single hue from this axis, and the entire site's mood at any given moment is the visible sum of how many cobalt vs. tangerine plates the user has scrolled past. There is a thin 4px-tall band at the top of the page that updates in real time to show the running cobalt-tangerine ratio — a tiny ambient signal that the reader is, collectively, in a calm or a stormy mood today. Type pairing rule: *Bebas Neue* never appears within 24px of *Archivo Narrow* — there is always a hard horizontal black rule between them, because the two condensed faces are too easily confused at a glance and the rule is the cleanest separation. *Caveat* never sits on a Cobalt or Tangerine fill — its handwriting only reads correctly on the paper tones. ## Imagery and Motifs There are **no stock photographs**. There are no founder portraits. There is no review-author avatar. Reviews are anonymous swells, identified only by the gabber's chosen tide-handle (e.g. "northpoint-tackle-7", "low-tide-marg", "the-buoy"), rendered as a small hand-stamped square at the start of each review plate. **Wave-forms (claimed at 2% — the rarest motif in the registry):** Every plate carries a wave-form along its bottom edge, hand-inked in 3px stroke, with a single Cobalt or Tangerine foam-dot at its highest crest. The wave is not decorative — its amplitude is **bound to the review's gab-count**, so a review that has been re-gabbed twenty times has a tall, sharp wave, and a quiet review has a flat ankle-high ripple. The wave-form is drawn fresh every time the page loads via SVG-path generation, so no two pages look identical. There is also a **page-spanning master swell** running across the full width of the site at the top — the horizontal tide chart — which is the literal aggregation of every wave-form on the page beneath it. Scrolling causes the master swell to slowly translate left, as if time is passing. **Leather-texture (claimed at 3%):** Used in exactly three locations as described above, never elsewhere. The texture is a high-resolution scan of *Horween cordovan no. 8* — visible cellular grain, one diagonal crease, two faint pull-up shadows, and a barely visible saddle-stitch line along the longest edge. The leather panels are *fixed in place* during scroll, so the rest of the page slides over them — the leather is the desk, the reviews are the papers being shuffled across it. **Underline-draw (claimed at 17%):** Reinterpreted away from the polite-hairline default. Every headline, every gab title, every link, every review summary carries a **fat marker-pen underline** that draws itself in over 320ms with a slightly imperfect stroke (subtle wobble, two minor ink pools, one fade-out at the right end). The stroke is rendered in Tangerine Foam for any headline that has crossed the gab-count threshold of ten, and in Ink Black for everything else. The underline is the site's most consistent ambient animation — it is constantly redrawing somewhere in the visible viewport. **Stamps and grommets:** Brass grommets at the corner of every leather panel; round ink-stamps in the margin of every review plate marking gab-count milestones (10g, 25g, 100g, ROGUE, CLOSEOUT). The stamps are slightly off-register, with one corner not fully inked. **No icons** in the typical sans-serif lucide style. Where icons appear (rare), they are heavy 4px-stroke hand-drawn marks: a ripple, an anchor, a buoy, a cresting wave, a tackle-hook. Each is drawn only once per page load and reused via SVG sprite. **No photographs of products being reviewed.** If a review references an object, it is rendered as a *hand-inked silhouette* in pure Ink Black against a Butter Paper plate — never photographed. This is a hard rule of the site: the reader's imagination is more vivid than any product shot, and the harbormaster doesn't have time for marketing photography. ## Prompts for Implementation Treat this site as a **scrolling logbook**, not a landing page. The primary delight is in the *act of reading downward*: every review is a stratum, every section is a deeper layer of the same daily tide, and the user should feel the satisfying *thunk* of new strata arriving as they scroll. **Animation choreography:** - On page load: the master swell at the top draws itself left-to-right over 1200ms, with the foam-dots popping in last with a small 8% scale-bounce. - Each section plate enters with a hard 80ms slide-up from below, ending with a single drop-shadow hit (no easing curve — use a stepped 4-frame transition to make it feel like a stop-motion paper cutout, not a CSS transition). - The underline-draw fires when each headline enters the viewport, staggered 60ms per item, drawn as an SVG path with `stroke-dasharray` and a deliberately uneven `stroke-width` profile (use a `` with `feTurbulence` at very low frequency to introduce the wobble — keep the seed fixed per session so each user gets a personal underline-shape but doesn't see it shift on rerender). - The wave-form on each review plate redraws every 6 seconds as a slow ambient pulse — barely visible, just enough to feel the page is alive. - Cursor proximity: condensed Bebas headlines bob ±1px on a 220ms spring as the cursor passes within 200px. No magnetic pull, no parallax — just a friendly nod. **Bias toward narrative full-screen experience:** - The first viewport is the tide chart and three stacked plates — no CTA, no signup, no "trusted by". The visitor learns *what kind of site this is* before they are asked for anything. - The second viewport reveals the swell stack, with the harbormaster's clipboard appearing as a leather-bound vertical strap on the right. - A long middle stretch of stacked review plates, with the floating depth-stamp updating in the corner. - A closing "today's tide" summary plate just before the footer cuff. - The footer is a leather strap, not a sitemap. Sitemap links are pressed into the leather as branded text. **Avoid (hard rules):** - No CTA-heavy layouts. No "Get Started" button on the homepage. No "Sign up to leave a review." If signup must exist, it lives behind the harbormaster's clipboard, never in the main spine. - No pricing blocks. This is a public reviews site — pricing has no place in the design. - No stat-grids ("10,000+ reviews / 99% satisfaction / 24/7"). The tide chart is the only "stat" allowed, and it is rendered as a hand-inked wave, not numerals. - No card-grid of three identical feature cards. Plates stack, they do not grid. - No round avatars. Hand-stamped square gabber-handles only. - No drop-shadow blurs. Shadows are 8px hard-cut offsets, no blur radius. - No gradients. Every fill is flat. - No serifs except *Caveat*. No rounded sans except inside the leather-pressed footer text. **Technical hints for the implementer:** - Build the wave-forms as SVG paths generated from a deterministic noise function seeded with the day's date plus a per-review numeric ID. This guarantees the page looks different each day, but stable within a session. - The leather-texture panels should be a single 1024×1024 PNG asset re-tiled with `background-attachment: fixed` so the leather stays put while the page scrolls over it. - The complementary cobalt/tangerine ratio band at the top of the page should be CSS-driven from a counter that increments as plates enter the viewport — use `IntersectionObserver` to drive it. - The depth-stamp ("YOU ARE 6FT DEEP") should be calculated from `scrollY` divided by the page height, mapped into the 0–overhead wave-height vocabulary. - Use a stepped (`steps()`) transition for the section-plate entrance so the animation feels like paper cutouts, not CSS easing. - Hand-inked SVG strokes should use `stroke-linejoin: round` and `stroke-linecap: round` with a slight wobble filter, never a flat anti-aliased line. **Storytelling arc:** the visitor arrives at the dock at low tide, walks the boardwalk past piled-up gab plates, watches the master swell rise across the day, and leaves at high tide with the harbormaster's note tucked into their pocket. The whole site is a single afternoon at the harbor. ## Uniqueness Notes **Three-plus differentiators from every other design in the registry:** 1. **Wave-forms as a structural metric, not decoration.** No other site in the registry treats wave-forms (2% rarity) as the literal organising amplitude of every piece of content. Most sites that touch wave-forms use them as background ribbon decoration; gabs.reviews binds wave amplitude to review gab-count, making the visual itself a live data-viz. 2. **Stratigraphic stacked-sections (3% rarity) — section plates as physical paper cutouts that visibly stack with hard 8px offset shadows and 0.3°–0.7° rotation each.** Most stacked-sections layouts are merely vertical rows with neutral whitespace; here the stack is a *literal pile* of cards that have warped on a damp table. 3. **Real cordovan leather-texture (3% rarity) used on exactly three fixed surfaces, with `background-attachment: fixed` so the leather is the desk and the content slides over it.** This is the only site in the registry where leather is treated as architectural fixture, not as a card surface or button skin. 4. **Complementary palette (4% rarity) enforced at the per-review level**, with the running cobalt/tangerine ratio rendered as a thin live ambient band at the top of the page. The palette is not a static brand decision — it is an emergent live signal from the day's reviews. 5. **Neubrutalism (3% rarity) crossed with energetic tone (16%) and condensed typography (14%)** — a tackle-shop boardwalk-arcade voice rather than the usual clinical-Swiss-meets-Memphis neubrutalism most agency portfolios reach for. This is neubrutalism with salt on it. 6. **Underline-draw (17% — overused, but reinterpreted)** as a fat marker-pen wobble with imperfect ink pools, rather than the polite hairline default. The pattern is reclaimed from "every-saas-page-uses-it" by making the stroke visibly handmade. 7. **Tide-vocabulary instead of star-rating vocabulary.** Reviews are described as *ankle-high*, *waist-high*, *overhead*, *closeout* — language the site invents for itself rather than borrowing from the entire reviews-site genre. 8. **No CTAs, no pricing, no stat-grid, no founder reel, no testimonial carousel, no card-grid features section.** Every conventional reviews-site trope is explicitly refused. **Chosen seed (from assignment):** `aesthetic: neubrutalism, layout: stacked-sections, typography: condensed, palette: complementary, patterns: underline-draw, imagery: leather-texture, motifs: wave-forms, tone: energetic` **Frequency-derived choices:** - **AVOID (overused):** hand-drawn aesthetic (96% — refused; the site is neubrutalist ink, not pencil sketch), glassmorphism (68% — refused entirely; every surface is opaque and dry), photography imagery (99% — refused; only hand-inked silhouettes), full-bleed layout (93% — refused; stacked cutouts only), warm palette (97% — refused as the dominant; cobalt is co-equal with tangerine, neither alone dominates), gradient palette (97% — refused; every fill is flat), parallax pattern (95% — refused; only the leather panels are fixed, and the rest is stepped, not parallaxed), cursor-follow (85% — refused; only a 1px headline bob at 200px proximity), spring (83% — used sparingly, only at the headline-bob), stagger (78% — used only at the underline-draw cascade), magnetic (77% — refused entirely; nothing is pulled by the cursor), mono typography (95% — refused as primary; *JetBrains Mono* used only for tabular numerals), humanist typography (53% — refused), card-grid layout (84% — refused; plates stack, never grid), centered layout (83% — refused; ragged-right two-column). - **PREFER (underused):** wave-forms (2%), leather-texture (3%), neubrutalism (3%), stacked-sections (3%), complementary palette (4%), condensed typography (14%) — all six rare-axis seeds claimed at full strength. The seed combination itself is the differentiator. **Tonal register cross-check:** energetic (16%) is enforced through condensed all-caps display type, the boardwalk-marquee voice copy ("big swell incoming", "foam alert"), the 220ms spring bobs on hover, and the live tide ratio band at the top. It is *not* enforced through neon, candy-bright colors, or dopamine palette — those would clash with the neubrutalist constraint. The energy is in the language and the rhythm, not in the saturation. **Failure modes consciously refused:** - This is not "Notion-with-bigger-borders." Neubrutalism here is the structural truth of every component, not a visual veneer. - This is not "harbormaster cosplay." The site is not literally a fishing site; the tackle-shop / harbor metaphor is a *frame*, and the actual content is reviews of any topic. - This is not "another Yelp clone." Star ratings are explicitly refused. Wave-height vocabulary is the sole rating language. - This is not "anti-design experiment." The grid is precise, the palette is six-color-strict, the typography is two-axis-strict. Discipline is the load-bearing wall, not chaos.