# Design Language for gabs.report

## Aesthetics and Tone

gabs.report is **a luminous dispatch board for signal-heavy reporting** — imagine a field analyst's briefing room that has been dissolved into morning fog over a peat marsh. The domain name reads as "gabs" — a speaker, a source, a reporter — and the site's aesthetic treats every article as a spoken transmission crystallised onto aged vellum under diffuse amber light. This is **ethereal authority**: the kind of gravitas that comes not from chrome and serif weight, but from knowing when to leave silence on the page.

The overriding aesthetic is **ethereal-earthed** — surfaces have the translucency of onion-skin paper lit from behind, but they sit on a warm, loamy foundation of terracotta, umber, and flax that grounds the whole thing. There are no cold blues, no deep blacks, no neon. Every surface is warm. Every glow is amber or blush. The aurora-light motif appears not as the cold green-blue of the Arctic sky but as a muted rose-amber thermal shimmer, the kind of light you see through closed eyelids in afternoon sun — this is an aurora born of heat haze over a Saharan dune, not ice.

Tone is **authoritative without being institutional** — the page speaks the way a veteran correspondent does: low register, considered, unhurried. No breathless sub-headlines, no urgency theatre. Sections breathe. Cards arrive with patience. Typography is chosen to say "this source has been covering this beat since before you knew the beat existed."

Key inspirations: Gerda Taro's field notebook, a Baedeker guide printed on hand-laid paper, the amber glow of a kerosene lantern through a canvas tent wall, desert observatory printouts, analogue radio dial gradients.

## Layout Motifs and Structure

The page is built on a **card-grid** — but not the tech-magazine card-grid of equal-height tiles in three tidy columns. This is an **asymmetric staggered card-grid**, where each row of cards is offset by a deliberate half-step, as if pressed into wet clay by hand. Cards are not the same height. Some are portrait-tall, some landscape-wide; the grid breathes unevenly like a handmade tile floor.

**Structural rules:**

- The viewport begins with a **full-width dispatch header** — a single translucent aurora-shimmer band, 100svh, containing only the site wordmark, a one-line editorial stance ("field intelligence, clearly stated"), and an extremely slow drifting isometric terrain icon (the only animation in the hero).
- Below the hero, the grid opens: **three-column at desktop (≥1200px), two-column at tablet (768–1199px), single-column at mobile**. The three columns are NOT equal-width — they follow a `3fr 2fr 3fr` rhythm, so the middle lane is visually narrower, creating a subtle arch effect across the row.
- Cards are laid out in **stagger rows**: row 1 sits at `translateY(0)`, row 2 at `translateY(24px)`, row 3 at `translateY(0)`, alternating. On scroll entry, each card staggers in at an 80ms interval, arriving from `translateY(32px) opacity(0)` to its resting position.
- **Feature cards** (span two columns) appear at intervals — once every four rows — breaking the pattern like a chapter heading. They carry a full isometric illustration as their header image.
- Navigation is a **fixed minimal strip**: wordmark left, three text links right, no hamburger on desktop. On mobile it collapses to a bottom-bar with five icons.
- Footer is a two-column layout: left column carries a large typographic device (the wordmark at 20vw), right carries a fine-print column of links. No social icons. No newsletter form.
- No sticky hero. No parallax. No full-bleed photography. The grid is the entire page's structural language.

## Typography and Palette

**Type system — eclectic-hybrid, four faces, all from Google Fonts.**

The eclectic-hybrid approach pairs a commanding display serif with a utilitarian condensed grotesque for body hierarchy, a mono face for data/timestamps, and a calligraphic accent used sparingly for pull-quotes.

- **Display / Wordmark:** *Playfair Display* — weight 700 italic, used only for the site title `gabs.report` at 10–14vw in the hero, and for feature-card headlines at 36–48px. The italic is deliberate: it conveys the inflection of a spoken source, a voice. Color: `#3D2314` (deep umber).
- **Section Headlines / Card Titles:** *Barlow Condensed* — weight 600, uppercase, tracked at `0.08em`. Set at 18–24px for card titles, 28–36px for section headers. The condensed width allows more headline characters per card, respecting the authoritative-correspondent tone. Color: `#5C3D1E` (warm chestnut).
- **Body / Standfirst:** *Source Serif 4* — weight 400 for body text (15–17px, line-height 1.7), weight 600 for standfirsts (18–20px). The newspaper-editorial provenance of Source Serif 4 reinforces the reporting tone. Color: `#2B1A0E` (nearly-black umber).
- **Timestamps / Tags / Data:** *IBM Plex Mono* — weight 400, 11–13px, letter-spacing `0.05em`. Used for publication dates, tag chips, and any numeric data. Color: `#8C6A4A` (medium terracotta).
- **Pull-quote accent:** *Crimson Pro* — weight 300 italic, 22–28px. Used only once per feature card, for a single-sentence pull-quote. Color: `#A0522D` (warm sienna).

**Palette — warm-earthy, six colours:**

| Name | Hex | Use |
|---|---|---|
| Vellum | `#F5EED8` | Page background, card backgrounds |
| Dawn Umber | `#3D2314` | Primary text, wordmark |
| Flaxen Clay | `#C9A46E` | Accent borders, card top-edge highlight |
| Peat Terracotta | `#8C4A2F` | Active states, aurora shimmer primary |
| Blush Ember | `#D9795C` | Hover states, aurora shimmer secondary |
| Muted Sage Linen | `#BDB5A0` | Secondary text, dividers, disabled states |

Aurora shimmer in the hero is a CSS radial gradient cycling slowly between `rgba(140, 74, 47, 0.18)` → `rgba(217, 121, 92, 0.12)` → `rgba(197, 164, 110, 0.08)`, all on the Vellum background — a desert heat-haze effect, not a cold Arctic glow.

## Imagery and Motifs

**Imagery is isometric-icons — no photography anywhere.**

The entire visual vocabulary of gabs.report is a curated set of **isometric pictograms**, drawn at 64×64px canvas on an isometric grid (30° angle, consistent `1:1:1` axis proportions). The stroke is 1.5px, rounded terminals, warm umber fill (`#3D2314`) on transparent backgrounds. Each card's header zone carries one isometric icon relevant to the article category:

- **Dispatch / Breaking news:** isometric satellite dish, dish tilted toward viewer
- **Analysis:** isometric stack of dossier folders, top folder open, fanned papers
- **Field report:** isometric terrain tile — a plateau with elevation lines
- **Interview:** isometric speaking-trumpet (old megaphone form), angled left
- **Investigation:** isometric magnifying glass, handle toward bottom-right corner
- **Data / Numbers:** isometric abacus, three rows, warm clay beads
- **History / Context:** isometric film reel, horizontal, unspooling slightly
- **Technology:** isometric server stack, three tiers, cable running off-corner
- **Policy / Government:** isometric columns (classical portico), three pillars
- **Environment:** isometric terraced hillside, rice-paddy steps, minimal trees

Icons carry **no animation** — they are purely static. The only motion on the page is: (1) the hero aurora-shimmer CSS gradient cycle, (2) the card stagger-in on scroll entry, and (3) a subtle `scale(1.04)` on card hover. No lottie, no SVG path-draw, no particle systems.

**Aurora-lights motif** is applied in three places:
1. Hero background — slow 8-second radial gradient pulse between the three aurora colours
2. Feature card header zone — a thin `4px` top-border gradient from `#8C4A2F` → `#D9795C` → `#C9A46E`
3. Active navigation link — a `::after` pseudo-element that traces a short aurora-coloured underline from left to right on hover (`transition: width 0.3s ease`)

**Stagger pattern** governs all card entrances: `IntersectionObserver` fires when a card row enters the viewport; each card in the row receives a sequential `animation-delay` of `80ms × card-index`. Cards animate from `transform: translateY(28px); opacity: 0` to `transform: translateY(0); opacity: 1` over `480ms cubic-bezier(0.22, 1, 0.36, 1)`.

No marble, no leather, no grain overlays, no noise textures, no photography, no full-bleed imagery.

## Prompts for Implementation

Build gabs.report as a **single-page editorial card-grid dispatch board** — the reader arrives and sees a warm, translucent briefing room where every story is handed to them as a labelled dossier card. There is no sales language anywhere. No CTAs, no pricing, no stat-grids, no testimonials, no "sign up for our newsletter" modals.

**Macro structure (top to bottom):**

1. **Dispatch Hero (`100svh`).** Full-viewport Vellum `#F5EED8` field. In the centre-lower third: the wordmark `gabs.report` in Playfair Display 700 italic at 10vw, colour `#3D2314`. Below it, one line of body text in Barlow Condensed: "field intelligence, clearly stated" at 18px tracked wide. The hero background carries the slow aurora radial-gradient cycle (CSS `@keyframes`, 8s infinite alternate, no JS). A single large isometric terrain-plateau icon floats above the wordmark at ~280px, rendered in SVG, subtle `translateY(-8px) → translateY(8px)` float animation at 6s ease-in-out infinite. No hero CTA button. No hero sub-headline grid. No hero image. Pure typographic dispatch.

2. **Category nav strip.** Below the hero, a slim `52px` sticky category bar: left-anchored site wordmark (smaller, 18px), right side: five category text links in Barlow Condensed 600 uppercase. Active link underline via aurora shimmer `::after`. Background `#F5EED8` at `0.95` opacity with `backdrop-filter: blur(8px)`. Appears only after hero scrolls past — uses `IntersectionObserver` on hero bottom edge.

3. **Card grid body.** The primary content area. Three-column desktop `3fr 2fr 3fr` grid, gap `28px` horizontal and `36px` vertical. Cards stack in stagger rows. Each card:
   - Background `#F5EED8`
   - `border: 1px solid #BDB5A0`
   - `border-top: 4px solid` (aurora gradient — use `background-image` on a `::before` pseudo if needed, or solid `#C9A46E` as fallback)
   - `border-radius: 6px`
   - `box-shadow: 0 2px 12px rgba(61, 35, 20, 0.06)`
   - Padding `24px`
   - On hover: `transform: translateY(-4px); box-shadow: 0 8px 28px rgba(61, 35, 20, 0.12)` with `transition: 0.25s ease`
   - Card header: isometric icon (64×64 SVG), category tag in IBM Plex Mono, publication date in IBM Plex Mono
   - Card body: headline in Barlow Condensed 600, standfirst in Source Serif 4 600, body excerpt in Source Serif 4 400 (3–4 lines max)
   - Card footer: author in IBM Plex Mono + reading-time estimate. No CTA button — the card itself is the link (`<a>` wrapping entire card).

4. **Feature card (every 4 rows).** Spans two columns (`grid-column: span 2`). Header zone is 200px tall, filled with the isometric illustration for that feature topic, centred. Headline at 36–42px Playfair Display 700 italic. One pull-quote line in Crimson Pro 300 italic. Same card styling otherwise.

5. **Section dividers.** Between thematic sections, a single full-width element: `80px` height, a hand-lettered-style Barlow Condensed 600 section label at 13px uppercase tracked at `0.2em`, centred, with a `1px` `#BDB5A0` rule extending left and right. No heavy separators, no icons, no gradients.

6. **Footer.** Two-column `1fr 2fr` layout. Left: `gabs.report` wordmark in Playfair Display at 20vw, very light `#C9A46E` colour (decorative). Right: four columns of text links in IBM Plex Mono 11px, `#8C6A4A`. Background `#F0E8CC` (slightly darker Vellum). No social icons. No newsletter form. Minimal legal line at the very bottom.

**CSS/JS specifics:**
- Use CSS Grid throughout; no flexbox-only layout.
- `IntersectionObserver` for stagger-in card entrances; add `data-row` attribute to each card for delay calculation.
- Aurora hero gradient: `background: radial-gradient(ellipse 120% 60% at 50% 80%, rgba(140,74,47,0.18) 0%, rgba(217,121,92,0.10) 40%, transparent 70%); animation: aurora-pulse 8s ease-in-out infinite alternate;`
- Card top-border aurora: use `background: linear-gradient(to right, #8C4A2F, #D9795C, #C9A46E)` on a `::before` pseudo-element with `height: 4px; border-radius: 6px 6px 0 0`.
- Font loading: load all four Google Fonts families in a single `<link>` with `display=swap`. Subset to Latin.
- No JavaScript frameworks. Vanilla JS only, under 120 lines total.
- All isometric icons are inline SVG within the HTML — no external icon library, no PNG sprites.

## Uniqueness Notes

**Differentiators from the existing registry:**

1. **Aurora-lights as desert heat-haze, not Arctic sky.** Every prior design using aurora-lights (3% frequency) treats it as cold green-blue Northern Lights. gabs.report inverts this: aurora is amber-rose thermal shimmer on a warm-earthy palette — a wholly different emotional register. The aurora is subordinate to the warm-earthy palette rather than overriding it.

2. **Card-grid with `3fr 2fr 3fr` asymmetric lane rhythm.** The frequency report shows card-grid at 6%. Most card-grid implementations use equal columns. The middle-lane-narrower arch rhythm is not recorded in any existing design in the registry, and creates a distinctive arch-and-bay composition reminiscent of broadsheet column structures.

3. **Isometric icons as sole illustrative medium replacing photography.** Photography is at 92% in the registry. gabs.report opts out entirely. Isometric icons at 2% frequency are elevated here to the primary visual language — every card carries one, they share a consistent grid and stroke system, and they function as categorical identifiers (not decorative filler). The icons are warm-umber-on-vellum, not the usual cool-grey isometric tech style.

4. **Authoritative tone without institutional palette.** The registry's authoritative designs (9%) tend to reach for navy, grey, or black. gabs.report is authoritative and warm — deep umber, terracotta, flaxen clay — the tone of a veteran correspondent's leather-bound notebook rather than a government agency's letterhead.

5. **Stagger pattern rendered as clay-pressed asymmetry.** Stagger at 66% is the most overused animation pattern in the registry. gabs.report re-motivates it: the stagger is not decorative springing — it mimics handmade tile-floor irregularity, with physical offset built into the grid layout itself (`translateY(24px)` on alternate rows at rest), so the stagger-in animation re-settles the grid rather than purely animating in from zero.

**Chosen seed:** `aesthetic: ethereal, layout: card-grid, typography: eclectic-hybrid, palette: warm-earthy, patterns: stagger, imagery: isometric-icons, motifs: aurora-lights, tone: authoritative`

**Avoided patterns (from frequency analysis):**
- Photography (92%) — replaced entirely by isometric icons
- Parallax (90%) — no parallax anywhere on the page
- Centered layout (91%) — grid is asymmetric, not centred
- Gradient palette (87%) — aurora is a radial accent, not the primary palette mode
- Mono typography (87%) — IBM Plex Mono is one of four faces, used only for metadata
- Hand-drawn aesthetic (67%) — the warm-earthy tone is achieved through palette, not texture or illustration style
- Vintage motif (57%) — explicit choice to avoid vintage nostalgia; isometric icons are clean and contemporary
<!-- DESIGN STAMP
  timestamp: 2026-05-07T20:33:06
  seed: - vintage motif
  aesthetic: gabs.report is **a luminous dispatch board for signal-heavy reporting** — imagin...
  content_hash: 6f8920bcfbe0
-->