# Design Language for gazza.news

## Aesthetics and Tone

gazza.news channels the visual language of a corrupted broadcast signal from a 1970s Italian television archive -- imagine RAI Uno's evening news bulletin captured on deteriorating VHS tape, the magnetic oxide flaking away to reveal sepia-stained ghosts of reporters, football matches, and political rallies frozen mid-gesture beneath scanline interference and chromatic displacement. The glitch aesthetic here is not the neon-drenched digital corruption of cyberpunk terminals; it is analog decay -- the warm, amber-tinted degradation of electromagnetic media, where horizontal hold slips create painterly smears across the screen and tracking errors transform faces into elongated Renaissance portraits.

The name "gazza" -- Italian for magpie, but also evoking the Italian word for gazette (gazzetta, the root of all modern newspapers) -- drives the core metaphor: this is a news archive seen through the lens of collective cultural memory, where every headline exists simultaneously in the present and in sepia-washed recollection. The tone is calm-serene despite the visual corruption: the glitches are not aggressive or chaotic, but gentle, meditative, almost beautiful -- like watching old footage of a piazza at golden hour with the tape slowly unwinding. There is a quality of stillness to the motion, as if each glitch is a held breath between one era's news and the next.

The atmosphere draws from the Italian tradition of "sprezzatura" -- studied carelessness -- where the visual corruption appears effortless and inevitable rather than manufactured. Every torn scanline, every displaced color channel, every tracking artifact is precisely calibrated to evoke nostalgia without sentimentality, decay without despair, memory without melancholy.

## Layout Motifs and Structure

The layout follows a **full-bleed** architecture where content extends edge-to-edge without margins or gutters, mimicking the way a television signal fills the entire screen without apology. The page is conceived as a continuous vertical broadcast -- a single unbroken transmission where sections bleed into each other through glitch transitions rather than clean breaks.

**The Broadcast Frame:**
The outermost container is a full-viewport element with a subtle CRT curvature effect applied via CSS `border-radius` on the outer edges (approximately 1.5% rounding) and a faint vignette overlay that darkens the peripheral 15% of the screen. This creates the subconscious impression of viewing content through a vintage television set without resorting to heavy-handed skeuomorphic frames.

**Content Zones (Channels):**
Rather than traditional sections, the page is divided into "channels" that the user scrolls through vertically. Each channel occupies a full viewport height minimum and transitions to the next through a glitch-wipe effect:

1. **Channel Zero (Hero/Opening Broadcast):** Full-bleed sepia-toned zone with the site's masthead rendered as a distorted broadcast test pattern. The "gazza.news" logotype sits at center, periodically displaced by horizontal glitch bars that shift it 3-8px left or right with RGB channel separation. Below the masthead, a single editorial tagline fades in with a VHS tracking-wobble effect.

2. **Channel One (Lead Stories):** A two-column layout where columns are not separated by gutters but by a vertical glitch seam -- a 4px-wide animated strip of noise and displaced pixels that runs top to bottom. Left column holds the primary feature story at 58% width; right column holds secondary stories at 42% width. Column widths are not perfectly aligned to grid -- they drift by 1-2px on scroll, creating subtle asymmetric tension.

3. **Channel Two (Cultural Archive):** A full-bleed horizontal band of square icon tiles (96px each, no gaps) that forms a continuous mosaic strip across the viewport. Each tile contains a cultural icon rendered in the icon-heavy imagery style. The strip extends beyond viewport width and auto-scrolls at 0.3px/frame, creating an infinite-loop ticker of cultural symbols.

4. **Channel Three (Deep Reads):** A single-column centered reading zone (max-width: 680px) set against the full-bleed sepia background, evoking the proportions of a newspaper column or a teleprinter output. Text here is set wider than typical web reading width to reference the broadsheet tradition.

5. **Channel Four (Signal Off):** The footer zone mimics a television sign-off sequence -- the content gradually desaturates, scanlines intensify, and the page culminates in a shrinking white dot at center (the classic CRT power-off animation).

**Responsive Behavior:**
On mobile (below 768px), the two-column Channel One collapses to a single column but retains the vertical glitch seam as a horizontal divider between stories. The cultural icon strip in Channel Two reduces tile size to 64px. The CRT curvature effect is disabled on mobile to prevent layout distortion.

## Typography and Palette

**Typography:**

- **Headlines / Display:** "Playfair Display" (Google Fonts) -- weight 900 (Black) at sizes ranging from `clamp(2.5rem, 7vw + 0.5rem, 5.5rem)`. Playfair's high stroke contrast -- dramatically thick verticals against razor-thin horizontals -- mimics the visual artifacts of CRT text rendering, where electron beam bloom thickened vertical strokes. Headlines are set in the primary Burnt Sienna (#8B4513) or Ivory (#FAF0E6), with `letter-spacing: -0.03em` for a dense, broadsheet-newspaper feel. The display-bold approach means headlines dominate their zones aggressively, occupying 40-60% of channel viewport height.

- **Subheadings / Section Labels:** "Oswald" (Google Fonts) -- weight 500 (Medium), all-uppercase, at `clamp(0.875rem, 2vw, 1.25rem)` with `letter-spacing: 0.18em`. The condensed sans-serif evokes broadcast chyrons and news tickers. Color: Deep Mahogany (#4A2C2A) on light backgrounds, Faded Gold (#C4A35A) on dark backgrounds.

- **Body Text:** "Source Serif 4" (Google Fonts) -- weight 400 (Regular) and 600 (Semibold) for emphasis, at `clamp(1rem, 1.8vw, 1.125rem)` with `line-height: 1.72` and `letter-spacing: 0.005em`. The generous line-height creates breathing room that contrasts with the visual density of glitch effects. Color: Charcoal Sepia (#3B2F2F) on light backgrounds.

- **Monospace Accents (Metadata, Timestamps):** "IBM Plex Mono" (Google Fonts) -- weight 400, at 0.75rem, used exclusively for datelines, timestamps, and broadcast channel labels. Set in Dusty Rose (#9E7B7B) with `letter-spacing: 0.06em`. This monospace treatment evokes teleprinter and closed-captioning systems from the analog broadcast era.

**Palette (Sepia-Nostalgic):**

The palette is drawn from the color science of deteriorating analog media -- the warm browns of oxidized magnetic tape, the yellowed ivory of newsprint, the faded golds of aged photographic emulsion, and the cool dusty tones of a signal losing its chroma.

| Role | Name | Hex | Usage |
|------|------|-----|-------|
| Primary Background | Aged Parchment | `#F5E6D3` | Main content background, Channel Three reading zone |
| Secondary Background | Broadcast Sepia | `#E8D5B7` | Channel One and Channel Two backgrounds |
| Deep Background | Darkroom Brown | `#2C1E14` | Channel Zero hero, Channel Four sign-off, overlay panels |
| Primary Text | Charcoal Sepia | `#3B2F2F` | Body copy, primary content |
| Headline Accent | Burnt Sienna | `#8B4513` | Headlines, pull quotes, emphasis |
| Warm Highlight | Faded Gold | `#C4A35A` | Subheadings on dark, hover states, active states |
| Glitch Accent | Signal Amber | `#D4A053` | Glitch bar fills, noise overlay tint |
| Muted Secondary | Dusty Rose | `#9E7B7B` | Metadata, timestamps, secondary text |
| Deep Accent | Mahogany | `#4A2C2A` | Section labels, borders, divider lines |
| Contrast Spot | Ivory White | `#FAF0E6` | Headlines on dark, CRT dot, high-contrast elements |

**Glitch Color Channels:**
The RGB channel-separation glitch effect uses offset versions of the headline color:
- Red channel offset: `#B85C3A` (shifted warm)
- Green channel offset: `#6B7B4A` (shifted olive)
- Blue channel offset: `#4A5B8B` (shifted slate)

These three colors appear only in glitch displacement effects, never as standalone UI colors, maintaining the sepia palette's coherence while introducing controlled chromatic aberration.

## Imagery and Motifs

**Icon-Heavy Cultural System:**

The imagery strategy is built entirely around a custom icon vocabulary -- no photographs, no illustrations, no decorative patterns. Every visual element is a monochrome icon rendered as inline SVG, drawn in a consistent 2px stroke weight with rounded line caps, sized at 48px, 64px, or 96px depending on context. The icon set depicts cultural artifacts and symbols from the history of news and communication:

1. **The Magpie (Gazza):** The site's primary symbol -- a stylized magpie in profile, one wing slightly raised, rendered in 5 clean strokes. Used as the favicon, loading indicator (wing flap animation), and watermark overlay at 3% opacity on content zones. The magpie references both the domain name and the bird's reputation as a collector of shiny things -- a metaphor for news aggregation.

2. **The Rotary Press:** A simplified icon of a printing press cylinder with radiating lines suggesting motion. Used as the section divider between channels, rotating 360 degrees over a 20-second CSS animation loop.

3. **The Television Set:** A rounded-rectangle CRT monitor with rabbit-ear antennae and a single horizontal scanline across the screen. Used to mark broadcast-style content and video references.

4. **The Telegram:** An envelope with a lightning bolt emerging from its unsealed flap. Marks breaking or time-sensitive content.

5. **The Quill and Inkwell:** A feather quill at a 45-degree angle with an implied inkwell at its base. Marks editorial opinion and commentary pieces.

6. **The Compass Rose:** A four-pointed directional star. Marks international or geographically diverse content.

7. **The Hourglass:** A traditional hourglass with sand particles rendered as individual 1px dots. Marks archival or historical content. The sand dots animate slowly (one dot per 3 seconds) to indicate the passage of time.

8. **The Laurel Wreath:** Two symmetrical olive branches forming an incomplete circle. Used for award-winning or notable content, and as a decorative motif framing Channel Zero's masthead.

9. **The Ear:** A simplified human ear outline. Marks audio content, podcast references, or "heard on the wire" pieces.

10. **The Scroll:** A partially unfurled manuscript scroll. Used as the background motif for Channel Three's reading zone, rendered at 2% opacity as a full-height watermark.

**Cultural Motifs:**

Beyond the icon system, cultural motifs are woven into the structural elements:

- **Scanline Overlay:** A repeating 2px transparent / 1px semi-transparent (#2C1E14 at 8% opacity) horizontal stripe pattern applied as a CSS pseudo-element over the entire viewport. This CRT scanline effect is the defining visual texture of the site -- it transforms flat digital surfaces into analog broadcast screens.

- **Tracking Wobble:** Sections of content periodically undergo a subtle horizontal displacement (2-4px, duration 150ms) that mimics VHS tracking errors. This occurs on scroll-triggered events, timed to coincide with the user entering a new channel zone.

- **Film Grain:** A CSS-animated noise texture overlay using a tiled 200x200 SVG pattern of semi-random dots (#3B2F2F at 4% opacity), repositioned every 100ms to create the flickering grain of analog film stock.

- **Vignette Frame:** A radial gradient overlay (transparent center, #2C1E14 at 25% opacity at edges) applied to the viewport to simulate CRT brightness falloff.

- **Channel Static:** During transitions between zones, a brief (300ms) burst of animated static fills the viewport -- a CSS animation cycling through 8 pre-rendered noise frames at 24fps.

## Prompts for Implementation

**Full-Screen Narrative Experience:**

The site must function as a continuous broadcast experience, not a paginated news index. The user scrolls through channels the way a viewer might channel-surf through a single evening's television programming -- each zone flows into the next with deliberate pacing and atmospheric transitions.

**Opening Sequence (Channel Zero):**
On page load, the viewport is solid Darkroom Brown (#2C1E14) with the scanline overlay visible. After 400ms, a simulated "power on" sequence begins: a white dot appears at viewport center and expands outward as a circle over 600ms, revealing the Aged Parchment background behind it (this is the reverse of the classic CRT power-off). The scanlines intensify during this transition. Once the reveal completes, the masthead text glitches into view using a staggered character animation -- each letter of "gazza.news" appears in sequence with a 50ms delay, accompanied by a subtle horizontal RGB channel offset that resolves after 200ms.

**Scroll Behavior:**
All channel transitions are scroll-triggered using Intersection Observer with a threshold of 0.35. When a new channel enters the viewport, the outgoing channel's content undergoes a brief (250ms) horizontal glitch displacement before the new channel's content stabilizes. The transition creates the impression of a broadcast signal briefly losing coherence as it switches frequencies.

**Scale-Hover Interactions:**
All interactive elements (icons, headlines, story cards) respond to hover with a scale-hover effect: `transform: scale(1.04)` over 200ms with `ease-out` timing, accompanied by a simultaneous increase in the RGB channel-separation offset (from 0px at rest to 2px on hover). This creates the impression that hovering "disturbs" the signal, causing a gentle glitch that draws attention. On touch devices, this effect triggers on tap-hold (300ms threshold).

**Icon Animations:**
Each cultural icon has a unique idle animation that plays continuously at low intensity:
- Magpie: wing micro-flutter every 8 seconds (3-degree rotation on wing element, 200ms)
- Rotary Press: continuous slow rotation (360deg / 20s)
- Hourglass: sand dot drop every 3 seconds
- Television: scanline sweep across screen element (left-to-right, 4s loop)
- All others: subtle 0.5px vertical float (sine wave, 6s period)

**Glitch Effect Implementation:**
The primary glitch effect should be implemented via CSS using `clip-path` slicing and `transform: translate()` with three layered copies of the text element, each tinted to one of the RGB channel offset colors (#B85C3A, #6B7B4A, #4A5B8B) using `mix-blend-mode: screen` on a dark background or `mix-blend-mode: multiply` on a light background. The displacement should be subtle (1-3px) during idle states and more pronounced (4-8px) during hover or transition states. Avoid JavaScript-driven frame-by-frame glitch animations -- use CSS `@keyframes` with `steps()` timing for authentic analog stutter.

**Typography Animation:**
Headlines in Channel Zero and Channel One should employ a typewriter-style reveal on scroll-enter, but filtered through the glitch aesthetic: characters appear left-to-right with a 40ms stagger, but each character's initial appearance is accompanied by a 100ms burst of its RGB-separated ghost, which then collapses into the final resolved character. This creates a "signal locking on" effect that reinforces the broadcast metaphor.

**Performance Considerations for Narrative:**
The scanline overlay, film grain, and vignette must be implemented as fixed-position CSS pseudo-elements on the `<body>` to avoid per-section repaints. The grain animation should use `will-change: transform` and cycle through `translateX/Y` offsets rather than regenerating the noise pattern. Glitch effects on text should use `will-change: clip-path, transform` only during active animation states.

**AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, modal popups, cookie banners styled outside the broadcast aesthetic, carousel/slider components that break the vertical-scroll broadcast metaphor.

## Uniqueness Notes

**Differentiators from other designs:**

1. **Analog Glitch as Meditation, Not Aggression:** While glitch aesthetics at 11% frequency in the portfolio tend toward aggressive digital disruption (neon artifacts, hard pixel fragmentation, cyberpunk static), gazza.news uses glitch as a calming, nostalgic effect -- warm sepia-toned analog decay that feels like watching old home movies rather than experiencing a system crash. The combination of glitch (11%) with calm-serene tone (4%) is a deliberate paradox that no other design in the portfolio attempts.

2. **Pure Icon-Heavy Imagery (0% Frequency):** No other design in the portfolio uses an icon-heavy imagery strategy. While most designs rely on photography (68%), minimal elements (95%), or illustrations (7%), gazza.news builds its entire visual vocabulary from a bespoke set of cultural SVG icons. Every visual communication is achieved through these 10 symbolic icons rather than photographs or decorative patterns, creating an iconographic language reminiscent of medieval manuscript marginalia or public broadcasting pictograms.

3. **CRT Broadcast Metaphor as Structural Logic:** The "channel" structure -- where sections are conceived as television channels rather than web page sections, complete with power-on sequences, channel-switch static, and sign-off animations -- is entirely unique in the portfolio. No other design uses the television broadcast as its fundamental metaphor for page navigation and content organization.

4. **Sepia-Nostalgic Palette Without Vintage Kitsch:** The sepia-nostalgic palette (3% frequency) is used here not for vintage decoration or retro pastiche, but as a precise simulation of analog media degradation -- the warm browns and faded golds reference the actual color science of oxidized magnetic tape and aged photographic emulsion. This scientific approach to nostalgic color is distinct from the decorative vintage treatments elsewhere in the portfolio.

5. **Cultural Motifs at Symbolic Level (2% Frequency):** The cultural motif category is used here not as surface decoration but as a deep symbolic system -- the magpie as news aggregator, the laurel wreath as editorial distinction, the compass rose as geographic breadth. Each icon carries specific journalistic meaning rather than serving as mere visual filler.

**Planned Seed:** aesthetic: glitch, layout: full-bleed, typography: display-bold, palette: sepia-nostalgic, patterns: scale-hover, imagery: icon-heavy, motifs: cultural, tone: calm-serene

**Avoided Overused Patterns:**
- playful aesthetic (97%) -- replaced with calm-serene glitch
- centered layout (99%) -- replaced with full-bleed edge-to-edge
- photography imagery (68%) -- replaced with icon-heavy SVG system
- vintage motifs (77%) -- replaced with cultural iconographic motifs
- mono typography (99%) -- replaced with display-bold serif system
- scroll-triggered patterns (97%) -- still used but subordinated to scale-hover as the signature interaction
- friendly tone (97%) -- replaced with calm-serene broadcast atmosphere
<!-- DESIGN STAMP
  timestamp: 2026-03-09T11:55:55
  seed: unspecified
  aesthetic: gazza.news channels the visual language of a corrupted broadcast signal from a 1...
  content_hash: dc12bb63c687
-->