# Design Language for gabs.news ## Aesthetics and Tone `gabs.news` is not a news aggregator. It is **a live dispatch board** — the kind you imagine bolted to the wall of a mid-century teletype room, but rebuilt in 2024 with high-voltage yellow and thick black borders where the wire-service bells used to be. The conceit: every story on the page arrived as a flash bulletin from a correspondent somewhere out there, and the page itself is the board where those bulletins are pinned, numbered, and laid out in a **z-pattern reading sweep** that the eye follows automatically, like a compositor laying type in a job-lot press. The presiding aesthetic is **neubrutalism in full Sunday dress** — not the washed-out, grey-border-on-grey-card version, but the **hot, saturated, tactile version**: thick black borders (`4px` solid, never gradient-softened), hard box-shadows offset at `5px 5px 0` with no blur, colors that are genuinely warm and genuinely loud, and a typeface system built entirely on grotesque sans in the tradition of Swiss poster design. Every card on the board sits on the page as a physical object with weight and corner and edge. Nothing floats. Nothing fades. Shadows do not blur. This is a page you could print on newsprint and pin to a wall. The tone is **energetic** — not frantic, not algorithmic-churn, but the specific energy of a room where everyone is alert and the next bulletin can arrive at any moment. Headlines are read fast. Sub-decks are read at a medium pace. The page resists lingering — it pushes forward. If `concepts.news` is a quiet reading room at 200 meters, `gabs.news` is the pressroom bullpen at 9:47am with two phones ringing. The lighting metaphor: **a large flat-plan table under fluorescent tubes** — warm amber paper, black ink, yellow highlighter stripes for priority stories, and one single red emergency accent that only appears when something demands it. The color is not ambient; it is **functional**. The mood word is **alive-and-crackling** — the page feels like it is printing itself in real time, and the reader's eye naturally zigzags from the top-left hero block down through the supporting deck and across the bottom row. ## Layout Motifs and Structure The page is a **z-pattern composition** — and this is the structural soul of `gabs.news`. The eye is not asked to scroll vertically through a card wall. It is given a deliberate two-dimensional reading path that mirrors the classic z-pattern eye movement: - **Z-leg 1 (top horizontal):** A full-width masthead strip, `96px` tall, containing the wordmark `GABS.NEWS` in black on yellow (`#FFD200`), a live timestamp ticking in red (`#E03030`), and a single-row breaking-ticker that scrolls continuously left at `60px/s`. This strip is `border-bottom: 4px solid #1A1A1A`. Nothing else is in this strip. - **Z-diagonal (center-left to center-right):** The hero block. A `60vw / 420px` tall primary card on the left, with a `4px` black border and `6px 6px 0 #1A1A1A` box-shadow. This card contains: a category badge (e.g., `WORLD`), a headline in Space Grotesk at `clamp(28px, 3.8vw, 52px)` weight 800, a 2-line sub-deck in weight 400, and a card-flip interaction — on hover/tap the front face (headline + summary) flips 180° on the Y-axis to reveal the back face (bullet-point brief + correspondent byline + link). The flip is CSS `transform: rotateY(180deg)` at `0.45s ease`, perspective `1200px`. Adjacent to the hero, on the right (remaining `40vw`), a **2×2 grid of secondary dispatch cards** — each `~47%` wide with the same `4px` border and `4px 4px 0` hard shadow, all card-flip capable. This 2×2 block lines up with the hero's top edge and sits flush-right, creating the diagonal Z-path from hero headline to secondary grid. - **Z-leg 2 (bottom horizontal):** Three equal-width cards in a horizontal triptych, each one-third of the content width, same border system. These carry the third tier of news. Below this row: a single `40px` closing band in amber (`#FFF0B0`) with a thin black bottom border — the "press footer." No newsletter form. No social feed. No "you might also like." **Navigation:** None of the traditional kind. The masthead strip has three text links floated right — `TODAY` / `ANALYSIS` / `ARCHIVE` — set in Space Grotesk 700 at `13px` uppercase, `letter-spacing: 0.12em`. They are inline anchors, not a nav element. The site does not route; it reloads. This is intentional. **Card anatomy (all tiers):** - `background: #FFFDF5` (warm off-white, very slightly amber) - `border: 4px solid #1A1A1A` - `box-shadow: 5px 5px 0 #1A1A1A` (primary cards) or `4px 4px 0 #1A1A1A` (secondary/triptych) - Top-left corner: a category badge — filled rectangle, `#FFD200`, black text, `2px` offset from top-left corner, font Space Grotesk 700 at `11px` uppercase - Bottom-right corner: a small **star-celestial SVG motif** (6-point star, `14px`, `stroke: #1A1A1A`, `fill: none`) — the dispatch confirmation mark, like a printer's mark - Card flip is the only interaction. No expand. No tooltip. No hover-color-change on card bodies. **Star-celestial motif usage:** The six-point star (`stroke: #1A1A1A`, `fill: none`) appears in exactly three places: 1. Bottom-right corner of every dispatch card (14px, as the printer's confirmation mark) 2. The masthead wordmark — a single `22px` star sits between `GABS` and `.NEWS` 3. As a `24px` rotating loader glyph (CSS `animation: spin 1.2s linear infinite`) that appears during the breaking-ticker's data fetch ## Typography and Palette **Type system — sans-grotesk in two deliberate voices:** - **[Space Grotesk](https://fonts.google.com/specimen/Space+Grotesk)** — wordmark, headlines, category badges, nav links, card-flip back-face bullet points. The load-bearing voice. Used at: - Wordmark: `48px`, weight `700`, tracking `-0.02em`, uppercase - Primary headline: `clamp(28px, 3.8vw, 52px)`, weight `800`, tracking `-0.025em`, line-height `1.05` - Secondary headline: `clamp(20px, 2.4vw, 32px)`, weight `700`, tracking `-0.02em` - Triptych headline: `clamp(17px, 1.8vw, 24px)`, weight `700` - Category badge: `11px`, weight `700`, uppercase, tracking `0.12em` - Nav links: `13px`, weight `700`, uppercase, tracking `0.12em` - **[Inter](https://fonts.google.com/specimen/Inter)** — sub-decks, body summaries, bylines, timestamps, ticker text. The editorial workhorse. Used at: - Sub-deck: `16px` or `clamp(14px, 1.4vw, 18px)`, weight `400`, line-height `1.5` - Byline/dateline: `12px`, weight `400`, color `#666666`, uppercase, tracking `0.08em` - Ticker: `14px`, weight `500`, all-caps **Palette — warm, loud, and functional (not decorative warmth):** | Token | Hex | Usage | |---|---|---| | `--yellow-signal` | `#FFD200` | Masthead background, category badges, priority highlight stripe | | `--amber-paper` | `#FFFDF5` | Card backgrounds, page background | | `--amber-band` | `#FFF0B0` | Footer band, triptych row background tint | | `--black-ink` | `#1A1A1A` | Borders, shadows, primary text, wordmark | | `--red-alert` | `#E03030` | Live timestamp, breaking-ticker label `BREAKING`, emergency category badge only | | `--orange-dispatch` | `#F77F00` | Card-flip back face header bar, secondary accent | | `--warm-mid` | `#C8A96E` | Star-celestial motif fill on back-face cards, decorative horizontal rule | | `--grey-byline` | `#666666` | Bylines, datelines, secondary metadata | No gradients anywhere. No transparency. No blur. No border-radius anywhere on the page. All corners are `0`. If it is warm, it is warm because it is a specific yellow or amber — not because it is desaturated, not because it is "friendly," not because it is a gradient. Warmth here is printer's ink on newsprint, not a sunset. ## Imagery and Motifs **No photography.** The frequency analysis places photography at 94%+ of the corpus. `gabs.news` contains zero photographs. The visual vocabulary is entirely vector and typographic: 1. **Star-celestial SVG motif (the dispatch mark).** A 6-point star — specifically a hexagram constructed from two overlapping equilateral triangles — built as inline SVG (`` twice, `stroke: var(--black-ink)`, `fill: none`, `stroke-width: 1.5`). At `14px` it reads as a printer's registration mark. At `22px` (masthead) it reads as an emblem. At `24px` with CSS spin animation it reads as a live-data spinner. The star is drawn from scratch each time as an inline SVG — not loaded from an icon font, not a Unicode character. 2. **Vector-art dispatch illustrations.** Each primary card back-face carries a `120×80px` abstract vector illustration — a different geometric composition per category: - `WORLD`: a globe wireframe (two overlapping ellipses + a horizontal axis line, black stroke, no fill) - `TECH`: a circuit-board fragment (three horizontal lines connected by vertical bridges, black stroke, yellow fill on two terminals) - `CULTURE`: two overlapping speech bubbles (black stroke, no fill, `3px` stroke-width) - `ANALYSIS`: a sine-wave line bisecting a rectangle (black stroke, orange line) - `BREAKING`: the hexagram star at `60px`, animating a slow continuous clockwise rotation at `8s linear infinite` All illustrations are inline SVG, monochrome except for one accent color from the palette. They live inside the card-flip back face only — never visible on the front. 3. **Horizontal rule system.** Between the hero+secondary block and the triptych row, a `3px` horizontal rule in `--warm-mid` (`#C8A96E`) with a small `18px` centered star-celestial emblem interrupting the midpoint — the rule segments to the left and right of the star are each `calc(50% - 20px)` wide. This is the only "ornamental" element on the page. 4. **Breaking ticker.** The masthead's right section holds a continuously scrolling `` replacement — a CSS `@keyframes translateX` animation moving breaking-headline text from right to left at `60px/s`. The ticker text is in Inter 500, `14px`, uppercase, black. Prefix: `BREAKING ★` (where ★ is the inline SVG star at `12px`). ## Prompts for Implementation Build `gabs.news` as **a single pressroom dispatch board that reads itself**. One HTML file, one CSS file, one small JS module (for the live timestamp tick and breaking-ticker data). No framework. No bundler. No SPA router. **The Z-pattern must be enforced at the CSS level:** ```css .dispatch-board { display: grid; grid-template-rows: 96px auto 1fr; grid-template-columns: 60fr 40fr; gap: 12px; max-width: 1280px; margin: 0 auto; padding: 12px; } .masthead { grid-column: 1 / -1; grid-row: 1; } .hero-card { grid-column: 1; grid-row: 2; } .secondary-grid { grid-column: 2; grid-row: 2; } .triptych-row { grid-column: 1 / -1; grid-row: 3; } ``` **Card-flip implementation:** - Each `.dispatch-card` has `position: relative; transform-style: preserve-3d;` - `.card-front` and `.card-back` are `position: absolute; top:0; left:0; width:100%; height:100%; backface-visibility: hidden;` - `.card-back { transform: rotateY(180deg); }` - On hover or `.flipped` class toggle: `.dispatch-card { transform: rotateY(180deg); }` at `transition: transform 0.45s ease;` - The back face: orange header bar (`--orange-dispatch`, `40px` tall) containing category label + correspondent byline in white Inter 700; below that, 3–4 bullet points in Space Grotesk 700 at `14px`; bottom-right corner: the vector illustration at `120×80px`. - The flip is activated by `mouseenter` on desktop, `click` on mobile (detected via `pointer: coarse` media query). - A small `FLIP ↩` affordance label in Inter 400 `10px` grey appears at bottom-left of front face on desktop only. **Live timestamp:** ```javascript function tickClock() { const now = new Date(); document.getElementById('live-time').textContent = now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit' }); requestAnimationFrame(tickClock); } tickClock(); ``` The timestamp sits in the masthead, right-aligned from the wordmark, set in Space Grotesk 700, `14px`, `color: var(--red-alert)`, prefixed with `◉ LIVE ` (a `6px` inline SVG circle with `fill: #E03030`, animated with a 1s opacity pulse to simulate a live indicator). **Breaking ticker:** ```css @keyframes ticker-scroll { from { transform: translateX(100%); } to { transform: translateX(-100%); } } .ticker-content { animation: ticker-scroll 28s linear infinite; white-space: nowrap; } ``` The ticker lives in the masthead strip, occupying the center-right 55% of the strip width. It is clipped by `overflow: hidden` on its parent. On hover/focus-within, the animation pauses (`animation-play-state: paused`). **Star-celestial rotation (spinning loader):** ```css @keyframes star-spin { to { transform: rotate(360deg); } } .star-loader { animation: star-spin 1.2s linear infinite; } ``` **Typography loading:** ```html ``` Use `font-display: swap` — the design does not depend on choreographed load-reveal; the content is immediately legible in fallback sans. **What the design refuses, on purpose:** - No border-radius anywhere. `border-radius: 0` on every element. - No gradients. No transparency. No shadows with blur. - No photography, no background images, no CSS `background-image`. - No footer navigation, no newsletter signup, no share buttons. - No color transitions on hover — only the card flip transforms. - No infinite scroll, no lazy-loading placeholders. - No hero image. The hero is the headline. **The single immersive moment:** the first card flip. When the reader hovers the hero card for the first time and the board **physically flips** to reveal a correspondent's brief on a warm orange back face, with a vector globe in the corner — that is the entire kinetic argument of `gabs.news`. Everything else on the page is legible at a glance. The flip is the reward for pausing. **Triptych row specifics:** - Each of the three cards is exactly `calc(33.333% - 8px)` wide. - They sit on the `--amber-band` (`#FFF0B0`) row background, which is the full-bleed row tint. - Headlines are at `clamp(17px, 1.8vw, 24px)`, weight `700`. - Each card has its own category badge and its own star-celestial dispatch mark. - No card flip in the triptych row on mobile — they are read-only tiles below `600px` viewport width (performance accommodation). ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic = **neubrutalism**, layout = **z-pattern**, typography = **sans-grotesk**, palette = **warm**, patterns = **card-flip**, imagery = **vector-art**, motifs = **star-celestial**, tone = **energetic**. **Differentiators against the corpus:** 1. **Neubrutalism at 1% of corpus, executed as a working newsroom — not a portfolio piece.** The corpus's neubrutalism examples (2 prior sites) use it as a stylistic frame for personal projects or SaaS sites. `gabs.news` is the first neubrutalist *news layout* — a site where the thick borders and hard shadows are not decorative aggression but functional analogues for the newsprint rule-system. The `4px` border is the gutter. The `5px 5px 0` shadow is the card sitting on the board. Neubrutalism here earns its vocabulary by being *operationally correct*, not aesthetically fashionable. 2. **Z-pattern at 3% of corpus, enforced at the CSS Grid level as a two-dimensional reading path.** Most layouts in the corpus are vertically scrolled card walls (centered, 93%; full-bleed, 88%). The Z-pattern is directional — it controls *how the eye moves across the page*, not just how content is stacked. `gabs.news` is the first design in the corpus to wire the Z-path into `grid-template-areas`, making the reading path *architectural*, not a coincidence of visual weight. 3. **Warm palette at 94% of corpus — but this is the only warm design that is loud, not cozy.** Every other warm design in the corpus uses warmth as a hospitality signal: terracotta, earthy, sunset, honey. `gabs.news` uses warmth as a *signal system* — `#FFD200` is a caution-tape yellow, `#FFFDF5` is newsprint, `#FFF0B0` is highlighter paper, `#E03030` is a live-alert red. The warmth is industrial, not domestic. This distinction makes the palette functionally novel despite the high corpus frequency. 4. **Card-flip at 4% of corpus, but the first implementation where the flip is the *only* interaction and is semantically justified.** Other card-flip designs in the corpus use it as a hover-reveal for supplementary data. `gabs.news` uses the flip as a press-room physical metaphor: the front is the dispatch headline (what came over the wire); the back is the correspondent's filed brief (what it means). The flip is not decorative — it is the editorial architecture. 5. **Vector-art at 1% of corpus, used as per-category semantic identifiers, not decoration.** The vector illustrations are small, monochrome, and live on the card back-face only. They are never visible on initial page load. This makes them a discovery reward rather than an aesthetic statement. 6. **Zero photography in a corpus where 94%+ of designs use it.** Combined with zero border-radius on every element and zero gradient anywhere, this makes `gabs.news` the starkest visual departure from corpus norms of any warm-palette design. **Avoided patterns from frequency analysis:** photography (94% → 0%), centered layout (93% → z-pattern grid), full-bleed (88% → contained card system), gradient (93% → none), parallax (93% → none), border-radius (universal → zero), generic "warm" cosiness (94% → industrial signal warmth), CTA blocks (widespread → none), stat-grids (widespread → none).