# Design Language for gabs.reviews ## Aesthetics and Tone gabs.reviews is a personal review journal written by someone who keeps a notebook in their coat pocket and draws small stars in the margins next to things they loved. The aesthetic is **hand-drawn but never cute** — this is not a children's coloring book, it is an obsessive reviewer's leather-bound commonplace book lit by a single candle in a very old city. Think the marginalia of a 17th-century alchemist who also happens to have strong opinions about restaurants, films, and perfumes. The tone is **mysterious-moody**: every entry feels like it was written at 2am, alone, with the conviction that the reader found it by accident rather than design. The site never announces itself. It does not have a tagline. The domain name is the only header, set in a typeface that looks like it was pressed rather than typed. Gab speaks directly to the reader in second person — *you will not forget this* — then disappears back into the dark. The visual atmosphere is a deep plum-burgundy night: pages the color of dried roses, ink the color of a bruise, text that breathes like smoke. Stars appear throughout not as decoration but as rating marks — the original ink mark a reviewer makes in the margin before any words arrive. The hand-drawn quality is **constrictive and specific**: rough ink edges on rectangles, not wobbly loops; pressure-variation on stroke weight, not cartoonish outlines; a slightly-not-quite-horizontal baseline for display text, suggesting ruled paper rather than a screen grid. Every drawn element is monochromatic ink-on-paper — the burgundy palette comes from the paper and the paper alone, never from the lines. ## Layout Motifs and Structure The structural frame is a **strict z-pattern** carried across four full-viewport sections — not a vague suggestion of diagonal eye movement but an explicit drawn path. Each section is a single "spread" (as in: a notebook opened flat), and the gaze is directed by a hairline ink trail drawn at a 22-degree diagonal from the right-hand element of the top row to the left-hand element of the bottom row. The ink trail is an SVG path that draws itself in on scroll entry, in `typewriter-effect` rhythm (not `path-draw-svg` fade — the trail is stroked at constant speed, 0.8 px per frame, so it feels like a pen dragging across paper). **Spread 1 — The Cover.** Upper-left: the wordmark `gabs.reviews` hand-lettered in a display face that looks pressed into the page. Upper-right: a large geometric star (seven-pointed, thin ink, not filled) that functions as the site's primary visual motif. The z-diagonal cuts through the center of the spread toward the lower-left. Lower-left: the subtitle — a single review excerpt in a serif body face, two lines, no attribution. Lower-right: a small date stamp in monospace, right-aligned. **Spread 2 — The Method.** Left column (40% width): a hand-drawn rating system explanation — five stars as ink marks, each labeled with a descriptor (*unremarkable / decent / good / great / essential*). Right column (60% width): the most recent full review entry, body text in a narrow serif column, with a drawn border that extends a pixel or two past the corners (a draftsman's overrun, suggesting imprecision). **Spread 3 — The Archive.** A 3-column grid of past entries, each entry card framed with an ink rectangle with overrun corners and a single star rating above the title. The grid itself is offset: column 1 sits 12px lower than column 2, column 3 sits 24px lower than column 2 — a deliberate stagger that reads as "stacked notes" rather than a clean table. **Spread 4 — The Colophon.** A single centered column, narrow (480px), with contact information written in a hand-drawn style, the words appearing as if typed on a mechanical typewriter. No form. No footer navigation. Just a PO Box-style address, a single email link, and the phrase "reviews continue" in italic, fading out. ## Typography and Palette The typographic system is **eclectic-hybrid** — two contrasting faces doing sharply different jobs, never bleeding into each other's territory. - **Display / Wordmark:** [Playfair Display](https://fonts.google.com/specimen/Playfair+Display) Black italic, set at 6–8vw for the wordmark. The serifs are sharp enough to read as "pressed" rather than "digital." Used exclusively for the site name and section-level headings of four words or fewer. Tracked at `0.04em`. Color: `#F5EEE6` (aged vellum). - **Body / Review Text:** [Spectral](https://fonts.google.com/specimen/Spectral) Regular and Italic, 400/400i, set at 17px with a line-height of 1.72. This is the face that does all the actual writing. Its ink-trap details at small sizes give every paragraph a slightly letterpress quality without resorting to a slab or a grunge treatment. Color: `#D6C5B5` (warm ash). - **Data / Ratings / Dates:** [IBM Plex Mono](https://fonts.google.com/specimen/IBM+Plex+Mono) Regular, 14px, tracked at `0.08em`, all caps. Used for dates, star counts, category tags. Color: `#A07060` (rust-leather). This face creates the machine-scored-in tension against the handmade everything-else. - **Palette:** - `#1A0D12` — primary background, near-black with a red undertone (burnt burgundy dark) - `#3D1A22` — secondary surface, used for spread backgrounds and card fills (deep ruby) - `#7C3048` — accent, used sparingly on borders, drawn-line elements (dried rose) - `#C05070` — star fill when a review is marked "essential" only (vivid plum-red) - `#F5EEE6` — display text and wordmark (aged vellum) - `#D6C5B5` — body text (warm ash) - `#A07060` — monospace data elements (rust-leather) ## Imagery and Motifs **No photography.** This is the single hardest constraint and the most differentiating choice: in a corpus where 92% of designs include photography, gabs.reviews uses exclusively **geometric-abstract** imagery — shapes constructed entirely from the SVG drawing tools in the hand-drawn style. **The seven-pointed star** is the site's primary visual motif. It appears: 1. As a 200px hero mark on Spread 1, drawn with a single continuous SVG path, thin stroke (1.5px), color `#7C3048`, no fill. 2. As 14px inline rating marks beside review titles, filled at `#C05070` for filled stars and `#3D1A22` with `#7C3048` stroke for empty stars. 3. As a scattered constellation background on Spread 3 — twelve stars at various sizes (6px–20px) and 15–35% opacity, positioned to suggest Ursa Minor, never labeled. **Geometric-abstract compositions** appear in two places: - Spread 2's left column: an ink diagram of the five-star rating scale drawn as a constellation — five stars connected by thin lines, with the descriptors written along the lines in `IBM Plex Mono` at 11px. - Spread 4's colophon: a single hand-drawn circle (2px stroke, `#7C3048`, 80px diameter) behind the email address, as if drawn in the margin to circle an important item. **Hand-drawn decorative system:** - Every section boundary is marked with a ruled divider: a thin horizontal ink line (`#7C3048`, 1px) with a small seven-pointed star centered on it. The star is not centered mathematically — it sits 2px left of true center, which reads as hand-placed. - All card borders use SVG `rect` elements with a `feTurbulence` + `feDisplacementMap` filter applied at low amplitude (scale=0.8) to make the edges wobble precisely 0.4–1.2px. The wobble is seeded with the card's index so no two cards wobble identically. ## Prompts for Implementation Implement gabs.reviews as a **single continuous scroll page** with four full-viewport sections (100dvh each on desktop, auto height on mobile). There is no navigation, no sticky header, no sidebar. The only interactive elements are: the hover states on review cards, the star rating hover animations, and the z-path ink trail that draws in per section. **Typewriter-effect implementation:** The typewriter pattern drives three specific moments: 1. The wordmark on first load — letters appear one by one at 80ms per character, with a 2px blinking cursor that disappears after the last letter arrives (no loop, no repeat). 2. The review excerpt on Spread 1 — two lines appear after the wordmark finishes, word by word at 60ms per word. 3. The colophon text on Spread 4 — "reviews continue" appears letter by letter at 100ms per character as the user scrolls to it, using IntersectionObserver with a 0.4 threshold. **Z-path ink trail:** Each spread has an SVG overlay (position:absolute, pointer-events:none, z-index:10) with a single diagonal path. On IntersectionObserver entry at 0.3 threshold, the path animates via `stroke-dashoffset` from full length to 0 over 1.2 seconds using a linear easing. The stroke is `#7C3048`, 1px, no fill. The path does NOT use a cubic bezier — it is a straight line at exactly 22 degrees, because a drawn line on ruled paper is straight. **Star rating marks:** Seven-pointed stars are drawn with a JavaScript SVG generator (not unicode, not icon font). The generator takes a `filled` boolean and an optional `size` parameter. Filled stars pulse once on hover (scale 1.0 → 1.15 → 1.0 in 200ms, CSS transition, no JS). **The `feTurbulence` card borders:** Apply via a single shared SVG `` block in the document — define the filter once, reference by id. The `baseFrequency` is `0.04`, `numOctaves` is `3`, `seed` is set per-card via a CSS custom property `--card-seed` read by the feDisplacementMap. This means the filter is GPU-composited and doesn't repaint. **Animation and scroll budget:** No parallax. No spring physics. No cursor-follow. The only scroll-driven animations are the three ink trails (one per spread 2–4) and the IntersectionObserver-triggered typewriter. Parallax is explicitly excluded because it conflicts with the notebook metaphor — notebook pages don't parallax, they turn. **Color and atmosphere:** Set `color-scheme: dark` in CSS. Apply a subtle `noise-texture` as a CSS background-image on `body` — a 200×200px PNG tileable grain at 4% opacity, blending mode `overlay`. This makes the burgundy backgrounds read as paper rather than paint. The grain PNG should be a simple 4-bit grayscale noise at 50% mean brightness. **Avoid:** hero CTAs, testimonial sliders, pricing tables, stat grids, feature lists, modal overlays, cookie banners, sticky nav, floating action buttons, social media icon rows, "follow us" prompts, and any element that implies the site is selling something. gabs.reviews is a journal that happens to be on the internet. ## Uniqueness Notes 1. **Zero photography in a 92%-photography corpus.** Every other site with a "rich" visual system uses photography as its primary image type. gabs.reviews commits entirely to geometric-abstract SVG construction and hand-drawn vector marks. The corpus shows geometric-abstract at 5% and the combination of geometric-abstract + zero photography appears in none of the reviewed reference designs. 2. **Seven-pointed star as a primary structural motif, not decoration.** The star-celestial motif appears in 4% of the corpus, but in every case it is atmospheric (backgrounds, dividers). Here the seven-pointed star is load-bearing: it is the rating system, the section divider, the hero mark, and the background constellation simultaneously. It does structural work that typography usually does. 3. **deep-burgundy palette used as candlelit night rather than wine or romance.** The corpus shows deep-burgundy at 3%, and in those instances it reads as "refined/romantic." gabs.reviews uses the palette as total atmospheric darkness — the burgundy is the night sky at 1am through a tinted window, not a velvet tablecloth. The near-black `#1A0D12` background prevents any warmth-of-dining-room reading. 4. **Typewriter effect as diegetic narrative device.** typewriter-effect appears at 6% in the corpus and in those designs it is decorative (hero subheadings, taglines). Here it is the dominant interaction metaphor: the entire site "types itself" at the user, in sequence, as if the author is writing it in real time. The cursor blink is not a CSS animation trick — it is the event horizon of a review that hasn't been finished yet. 5. **Chosen seed: aesthetic: hand-drawn, layout: z-pattern, typography: eclectic-hybrid, palette: deep-burgundy, patterns: typewriter-effect, imagery: geometric-abstract, motifs: star-celestial, tone: mysterious-moody.** Avoided overused patterns: parallax (90%), stagger (66%), photography (92%), centered (91%), warm palette (93%), hand-drawn used generically (67% but here constrained to monochromatic ink-edge treatment only).