# Design Language for gabs.review

## Aesthetics and Tone

gabs.review is a **grainy-textured review almanac** — a site that looks like it was printed onto a single oversized sheet of warm cream offset paper, the kind a 1970s film-magazine printer would pull off the press at the end of a long day, ink still tacky. Every surface carries a perceptible tooth: a high-density 4–6% multiply-blended grain that sits on top of every color block, every photograph, every glyph. Where most review sites optimize for verdict-at-a-glance scoreboards, gabs.review is built around the **slow-burn essay** — the kind of long, opinionated read that ages like newsprint and feels physically warm under the eye.

The mood is **optimistic-bright** but never saccharine: this is the optimism of a film critic walking out of a Tuesday afternoon screening into golden-hour traffic, *genuinely delighted* about something nobody else has noticed yet. Not "everything is amazing" optimism — the optimism of finding the one good thing in a flawed object and championing it without apology. Reviews on gabs.review never end with a star rating; they end with a **glow** — a single one-line salute to whichever quality the reviewer wants the reader to carry with them out of the page.

Inspirational reference points (visual, not literal): the cover paper of a 1971 Sight & Sound issue left in a sunny window for a week; Saul Bass title cards reprinted on cheap pulp; the way late-afternoon sun hits dust on a brass desk lamp; the analog warmth of a tube radio's dial light at dusk; old polaroid magazine clippings glue-sticked into a critic's reading journal. The site should feel **lived-in, hand-cared-for, and slightly out of square** — never machine-perfect.

The product is reviews of *technology* — apps, devices, protocols, dev tools — but the chrome of "tech" is consciously rejected in favor of the *humanism of opinionated criticism*. Tech motifs appear as **decorative accents** (small etched circuit-line ornaments in the margins, a pixelated favicon-style mark) rather than the dominant aesthetic register. The verdict here is "this thing was made by humans, judged by humans, and we believe humans care."

## Layout Motifs and Structure

The page is built on a deliberately **asymmetric** 13-column grid (not 12 — the odd column count guarantees nothing centers cleanly), with a **3-7-3** dominant rhythm: a thin left rail of metadata, a wide central body, and a thin right rail of pull-quotes and footnotes. This is the layout of a folded broadsheet, not a SaaS landing page.

Critical layout rules:

- **The hero is a torn collage, not a video.** First viewport contains the wordmark "gabs.review" set across columns 2–9 with the "review" word slightly *lower* on the baseline than "gabs." — as if the typesetter set it on a Tuesday and meant it. Underneath, a single overlapping collage of three torn-edged photo rectangles representing the most recent review — one tilted +1.8°, one tilted -2.4°, one tilted +0.6°. The tears are real `clip-path: polygon(...)` jagged edges, not perfect rectangles. No "watch our demo" CTA. No "trusted by" logo bar. The first thing you see is the *most recent piece of writing*.
- **The Sunset Strip.** A horizontal accent band, ~6vh tall, runs at exactly 38.2vh from the top of the first viewport (the golden ratio mark, not center). It carries a hand-set running ticker of the seven most-recently-published review *titles only*, set in 14px serif italic, drifting slowly left at ~12px/sec via translateX. No interaction; it is decorative motion, like a paper banner caught in a slow breeze.
- **Body composition.** Reviews open as 2/3-width essays anchored to the left margin, with **margin notes** ("marginalia") set in the right rail at 11px, half-tone pencil-gray (#7A6E5E), occasionally aligned to specific paragraphs via dotted leader lines drawn in CSS. Long reviews break with **full-bleed pull-quote spreads** every ~600 words, where a single sentence balloons to 96px serif and runs across all 13 columns.
- **Asymmetric cards in the index.** The "All Reviews" listing is a deliberately uneven masonry of cards in three approximate sizes — featured (col-span 7), standard (col-span 4), micro (col-span 3) — with **rotation jitter** (-2° to +2°, deterministic via review slug hash) so adjacent cards never line up. Each card has a *visible torn-paper bottom edge*, drawn with an inline SVG path with 11 jagged points.
- **Footer is a contact-print.** The site footer mimics a strip of contact-print film: nine small square cells across, each containing a 64×64 grain-overlaid thumbnail of an older review, slightly burned in at the edges. Subscribe and About links are typeset in the bottom margin in 10px tracking-loose caps.

The page does **not** scroll-snap. Scrolling is free, slightly heavy (CSS `scroll-behavior: smooth` with a custom timing curve `cubic-bezier(0.22, 1, 0.36, 1)`) — the page should feel like turning a thick magazine page, not flicking through a feed.

## Typography and Palette

**Typefaces — Google Fonts only:**

- **Headline / Wordmark face:** **`Cormorant Garamond`** (700 italic for the wordmark, 500 italic for review titles). Cormorant Garamond is the canonical *serif-revival* — a 21st-century redrawing of Claude Garamont's 1530s romans that exaggerates the ink-trap details. We use it big (clamp 56px / 9.4vw / 168px for the wordmark) and unapologetically italic for display. Tracking +1 at display sizes, -8 at body sizes. The italic ampersand is treated as a graphical element: it appears as a standalone watermark at 320px, 8% opacity, in the Sunset Strip's left bleed.
- **Body face:** **`Cormorant Infant`** at 19px / 1.65 line-height for review prose. Yes — a different cut of the same family. Cormorant Infant has slightly heavier hairlines for sustained reading. Justified text with hyphens enabled; widows and orphans suppressed via `text-wrap: pretty`.
- **UI / Marginalia face:** **`Spectral`** at 11px (pencil-gray marginalia) and 13px (metadata: dates, author names, read-time). Spectral is a serif designed for screen UI; it shares the warmth of the headline family but holds at small sizes.
- **Mechanical accent face:** **`VT323`** at 14px, used *only* for the small running review-counter in the bottom-left corner ("review №47 · indexed 2026-05-09 09:42 UTC") and the seven-item ticker timestamps. VT323 is a low-fidelity terminal font; it gives the tech subject matter a single deliberate machine-voice without the page being a "tech site."

**Palette — Sunset Warm (8 hand-mixed values, named):**

- `#F1E4CE` **Cream Stock** — the paper. Used as `body` background. Always overlaid with the grain.
- `#E9C8A0` **Late Light** — secondary surface; the "Sunset Strip" band, card hover surfaces.
- `#D87F4A` **Burnt Apricot** — the warm mid-tone used for primary links, the wordmark fill on hover, and the underline-marker drawn beneath glow-quotes.
- `#B33A2A` **Cinnabar** — accent / error / "stop and read this" highlights, also used for the small dotted leader lines connecting marginalia to body text.
- `#7A2E1A` **Amaranth Rust** — strong contrast text on Late Light; used for review section titles.
- `#3A2118` **Espresso Stain** — primary body text color (warmer than #000, never pure black; preserves the warm-paper feel even in the deepest ink).
- `#7A6E5E` **Pencil Gray** — marginalia and secondary metadata.
- `#2C7C5A` **Eucalyptus** — *one* and only one cool-leaning swatch, reserved exclusively for the "glow" line at the end of every review (the single salute) and the favorite-review pin glyph. Its rarity is the point: green appears in the entire site only when a reviewer is genuinely delighted.

Never use pure black, pure white, or pure neutral gray. Every gray is mixed warm.

## Imagery and Motifs

**Collage** is the dominant imagery mode (9% of the corpus, but here it is *total* — every image on the site is part of a collage, never a clean rectangle). Concrete rules for image treatment:

1. **Every image is torn, not cropped.** A reusable SVG mask called `tear-edge-A.svg` through `tear-edge-D.svg` (four hand-drawn jagged paths) is randomly assigned per image at build time via a deterministic hash of the slug. Images get `clip-path: url(#tear-A)`.
2. **Every image is grained.** A `::after` pseudo-element on every image overlays a 256×256 SVG `feTurbulence` noise tile at 12% opacity, multiply blend mode. The noise tile is generated at server startup and inlined as a CSS variable so it doesn't refetch.
3. **Every image is sun-warmed.** All photography passes through a fixed CSS filter chain: `sepia(0.18) saturate(1.06) contrast(1.03) brightness(0.98)`. This shifts cool-tone press shots into the sunset palette without making them brown.
4. **No stock photography.** Imagery slots are illustrated as **layered paper cutouts** when no editorial photo exists — a torn rectangle of Late Light on top of a torn rectangle of Cream Stock on top of one Burnt Apricot triangular accent.

**Motifs (tech, but as ornament):**

- **Etched circuit-line ornaments** drawn as 0.5px stroke SVGs in Pencil Gray sit at the start of each review section header — a 64×16 little fragment of a maze-like trace, like a botanical ornament redrawn as a circuit. Six variants total, rotated and reused.
- **Pixelated end-marks.** At the end of each review, a small 8×8 pixel-art square in Cinnabar serves as the "end-of-piece" mark (the printer's typographic dingbat, reimagined as a single pixel from a CRT).
- **A lone capacitor watermark.** In the masthead margin, a 24px monoline drawing of a vintage axial capacitor floats at 6% opacity — the only *literal* tech object on the site, and small enough that most readers never consciously notice it.
- **Hand-stamped index numbers.** Each review carries a "№" prefix and a three-digit catalog number set in Cormorant 700, Cinnabar, with a *very subtle* `transform: rotate(-1.4deg)` and 3% opacity rubber-stamp ink-bleed shadow.

No logos, no badges, no "as featured in" rows, no testimonial portraits, no stat counters with rolling digits.

## Prompts for Implementation

Build gabs.review as a **single continuous broadsheet** — one HTML document per review, with a long-scroll index at `/`. Reject SPA scaffolding. Each review is a real document, not a card-modal.

Storytelling rules:

1. **Lead with the writing.** The first viewport must contain at minimum 40 words of body prose from the most recent review, not just a headline. The reader should be reading before they know they are.
2. **Every review ends with a glow.** Implement a `<p class="glow">` element styled in Cormorant 500 italic, 28px, Eucalyptus, with a `scale-hover` interaction: on hover, the glow line scales to 1.04× its size with `cubic-bezier(0.34, 1.56, 0.64, 1)` (a slight overshoot bounce — the only place on the site we allow scale-hover), and a thin Burnt Apricot underline draws from left to right beneath it in 280ms via `clip-path` reveal. This is the site's signature interaction. It must feel like a thumb gently lifting a postcard off the desk.
3. **Scale-hover, applied sparingly.** scale-hover is only 3% in the corpus; here it is *load-bearing for one moment per review* (the glow), and a *whisper* in three other places: review-card thumbnails (1.025× scale on hover with a 320ms warm-out easing, plus a 1px Cinnabar inner stroke fade-in), the Sunset Strip ticker items (1.02× on hover, pause the marquee), and the favicon-pixel end-mark (1.08×, 180ms). Nowhere else. No hover-lift, no card-flip, no parallax beyond the scroll. The site should feel *still*, with hover being the only motion the reader can author.
4. **Marginalia must be drawn, not printed.** Right-rail margin notes connect to body paragraphs via a single `<svg>` per review with `<path stroke-dasharray>` dotted leaders, drawn live in JS by querying paragraph rects on resize. The leaders should look like a critic's pencil, not like a tooltip arrow.
5. **The Sunset Strip drifts, never loops.** Implement the ticker as a real CSS `@keyframes translateX` animation with `animation-duration` proportional to the ticker's content width (so it moves at constant speed regardless of how many reviews are listed). On `prefers-reduced-motion`, freeze the strip; do not hide it.
6. **Grain is a build-time decision.** Generate the grain noise as a single 256×256 SVG `feTurbulence` tile at site build, inline it as a base64 CSS variable, and reuse it everywhere. Do not generate noise at runtime. The grain must be *deterministic* across visits.
7. **No CTAs above the fold.** No "Subscribe," no "Get notified," no "Read more reviews." Trust the reader to scroll. Subscribe lives in the contact-print footer, set in the bottom margin in tracking-loose 10px caps.
8. **No pricing blocks. No stat grids. No comparison tables.** The closest thing to a stat on the site is the "indexed at" timestamp under the masthead.
9. **Typography should breathe with the viewport.** Body line-length is constrained to 62ch via `max-width`, but the page itself is full-bleed. The reading column floats on a sea of margin, and that sea is where the marginalia and pull-quotes live.
10. **Reading time is shown, but not as a stat.** "an 8-minute read, give or take" set in Spectral 13px italic, lowercased, in the metadata block. Round to the nearest minute and never display "1 min read" — write "a quick one."
11. **The glow line is the only viral-able element.** Make sure the glow line of each review is selectable, has its own `id`, and renders cleanly when shared as an OG image (build-time generated 1200×630 PNG with the glow line set in 64px Cormorant italic over a Late Light grainy field).

Prefer **server-rendered HTML** (Astro, Eleventy, or pure handcraft) so reviews are real, archival documents — not React shells.

## Uniqueness Notes

This design is deliberately distinct from the 200-design corpus along the following concrete axes:

1. **Grainy-textured aesthetic, taken at the elemental level.** grainy-textured is 1% of the corpus — among the four rarest aesthetics. Where the few existing grainy-textured sites use grain as an Instagram-filter overlay on a product photo, gabs.review treats grain as the *paper substrate itself*: every color block, every photograph, every type set carries the same deterministic noise tile. Grain is not a finishing touch here; it is the *medium*.
2. **Sunset-warm palette without a single pure neutral.** sunset-warm is 3% of the corpus. We push the rarity further by **forbidding pure black, pure white, and pure cool gray** — every neutral on the site is mixed from Espresso Stain (#3A2118) and Pencil Gray (#7A6E5E). The only cool color is the Eucalyptus glow line, used at most once per review.
3. **Serif-revival as both display *and* body, with a single-family discipline.** serif-revival is 5% of the corpus, and most uses limit it to a hero headline. We use Cormorant Garamond and its sibling Cormorant Infant for *every* word over 11px on the site, with Spectral and VT323 reserved for marginalia and timestamps. This is a single-voice typographic stance, almost monastic.
4. **scale-hover repurposed as the site's signature gesture.** scale-hover is 3% of the corpus and almost always used on cards. We invert this: scale-hover is reserved for the **closing line of every review** (the glow), where it functions as a haptic acknowledgement of the reviewer's verdict. This is the rarest *contextual* use of scale-hover in the corpus.
5. **Collage imagery, total commitment.** collage is 9% of the corpus, but here it is *every image without exception* — torn-edge masks, layered paper cutouts when photography is unavailable, and grain-overlay everywhere. There are no clean rectangular images on this site, anywhere.
6. **Tech motifs deliberately reduced to ornament.** tech is 15% of the corpus, but every site that uses it makes tech the *visual loud register* (circuit-board fields, HUD overlays, sci-fi grids). gabs.review reviews technology and consciously demotes tech motifs to **6% margin watermarks** — a single capacitor, six tiny circuit-trace ornaments at 0.5px stroke, a pixelated end-mark. The subject is tech; the visual register is editorial humanism.
7. **Asymmetric layout via odd-column grid.** asymmetric is common (55%), but the chosen execution — a 13-column grid with a 3-7-3 broadsheet rhythm and per-card rotation jitter seeded from slug hash — is not echoed in the corpus's typical asymmetric SaaS layouts. The asymmetry here serves *reading*, not novelty.
8. **Optimistic-bright tone reframed as critic's delight.** optimistic-bright is 7% of the corpus and almost always reads as startup-cheerful. We reframe it as the optimism of a film critic championing one quality of a flawed object — quieter, slower, more trustworthy. The "glow" line at the end of every review is the literal expression of this tone.
9. **No CTA-heavy layout, no pricing, no stat grids, no testimonial logo bar.** Per assignment guidance, the page hierarchy is led by *writing*, not by conversion furniture. The first viewport contains 40+ words of body prose from the most recent review.
10. **Avoided overused patterns from frequency analysis.** Explicitly *not* used: parallax (95%), cursor-follow (85%), spring (83%), magnetic (77%), photography-as-default (99%), card-grid (84%), centered (83%), full-bleed (93%, replaced with margin-rich broadsheet), warm gradient (97%, replaced with flat warm fields plus grain), mono typography (95%, replaced with single serif family). The site is built around what the corpus underuses.

**Chosen seed:** aesthetic: grainy-textured, layout: asymmetric, typography: serif-revival, palette: sunset-warm, patterns: scale-hover, imagery: collage, motifs: tech, tone: optimistic-bright — combining four of the rarer dimensions in the corpus (grainy-textured 1%, scale-hover 3%, sunset-warm 3%, serif-revival 5%) with one tonal underdog (optimistic-bright 7%) and one common dimension (asymmetric 55%) repurposed via an odd 13-column broadsheet grid, while the remaining tech motifs and collage imagery are inverted from their typical loud-tech and decorative-collage uses into editorial-humanist ornament.
<!-- DESIGN STAMP
  timestamp: 2026-05-10T01:15:03
  seed: execution
  aesthetic: gabs.review is a **grainy-textured review almanac** — a site that looks like it ...
  content_hash: c5621ddff030
-->