# Design Language for gazza.news ## Aesthetics and Tone gazza.news is a **mid-century newsroom rendered as a tactile object** -- a 1958 leather correspondent's portfolio left open on a teak desk, its wire-bound pages drifting in the breeze of a slow ceiling fan. The site is not a digital publication that mimics print; it is a **leather-bound dispatch case that has been opened in front of you**, page by page, with the unhurried confidence of a wire-service editor who has already filed his last cable for the day. The dominant feeling is **calm-serene**, not breathless. News here is not a stream; it is a folded letter, embossed and creased, pulled from an inner pocket. The aesthetic is **mid-century modern** filtered through the materiality of **chestnut bridle leather, brass type-slugs, oxidized newsprint, and Atomic-era stationery**. Think: the credit sequence of a Saul Bass film for a documentary about the Associated Press, 1962. Think: the Eames House library, where an open Italian leather portfolio rests on a low Noguchi table, and the news of the day is read in lamplight while a Brubeck record turns in the next room. The tone is **measured, paternal, slightly melancholic** -- the calm of a foreign correspondent typing his last bulletin before the deadline, sleeves rolled, ashtray full, no urgency left because everything has already happened. The interface should feel **handled, well-loved, slightly used**. Edges of leather panels show fine cracking. Corners of paper inserts are dog-eared. A subtle grain underlies every surface. There is **no neon, no gradient, no glow**. The light here is **room light at 4 p.m. in November** -- the kind that makes brass dimmer and paper warmer. ## Layout Motifs and Structure The layout is an **immersive-scroll vertical descent through the open spread of a mid-century leather press portfolio**. The viewport never holds more than one or two leaves at a time -- the descent moves down through stitched leather covers, then past a brass-clasp mid-section, then through interleaved newsprint pages, then to a hand-typed colophon at the bottom. The structure is explicitly **not a card grid, not a centered column, not full-bleed photography** (the three most overused layouts in the audit). Instead it is a **continuous, hand-bound dossier** scrolled past the eye like a slow film roll. **The Spreads (top to bottom):** 1. **The Cover Spread** -- A full-viewport leather cover in chestnut bridle, occupying 100vh. The masthead "GAZZA" is debossed into the leather as a true CSS deboss (inset shadow + highlight ridge). A small brass corner-clasp sits in the top-right, slightly tarnished. As the visitor scrolls, the entire cover **lifts and rotates 6 degrees on the X-axis** in 3D perspective space, as if a hand is opening a folio from below. Behind it: the first page begins to show. 2. **The Slug Page** -- A hand-set lead column (in the typographic sense -- "lead" as in the metal type, not the headline). One single condensed-typography masthead phrase fills the page: a wide-tracked, narrow-set declaration of what the dispatch concerns. Below it, three brass type-slug dividers (drawn as flat brass rectangles with subtle bevels) separate metadata: filing-city, filing-time, correspondent. 3. **The Folded Letter** -- An off-white paper insert that appears to have been folded in thirds. CSS clip-path creates the trifold creases, and the panel **bounces into place** on enter (the seed pattern: bounce-enter, currently 0% in the audit). Its bounce is a soft cubic-bezier(0.34, 1.56, 0.64, 1) overshoot of 12px, settled in 720ms -- like a folded letter dropped onto a wood desk. 4. **The Photogravure Plate** -- A single duotone halftone image on a vintage-stippled background. Not photography in the modern sense -- an SVG-rendered halftone of a generic mid-century scene (an airport tarmac, a typewriter, a leather suitcase on a Pullman bench), reduced to dot patterns in two complementary inks. 5. **The Wire Dispatch** -- A column of monospaced-but-condensed dispatch text (Roboto Condensed at narrow tracking) on a cream paper stock with horizontal rule above and below. The text appears letter by letter, but slowly -- 28ms per character -- as if a teletype is printing it. **Not a typewriter effect** (overused at 7%); this is a **wire-service stutter**: occasional 200ms pauses mid-word to mimic a relay delay. 6. **The Brass Clasp Mid-Section** -- A horizontal divider rendered as a 3D brass clasp with two leather straps emerging from either side of the viewport. As you scroll past, the clasp **clicks open** (a 2-frame SVG animation) and the strap straightens. After it opens, the lower portfolio half is unlocked. 7. **The Filed Pages** -- Three to five interleaved newsprint pages, each rotated 1-3 degrees from the next, stacked with 12px of vertical offset, with paper-grain texture and a faint orange-brown foxing at the corners. Each page **bounces in from below the viewport** with the bounce-enter pattern, staggered 180ms apart. 8. **The Colophon Spread** -- The closing leather inner-cover. A debossed circle-and-line emblem (a stylized mid-century atomic-era logo: three concentric arcs and a bar). Below: "FILED // GAZZA WIRE SERVICE // 1958" in narrow condensed caps. The portfolio closes (rotates back) as the visitor reaches the bottom. **Spatial Rules:** - Maximum content width: **640px**, never wider. The portfolio is held in two hands. - Vertical rhythm: a **strict 8px baseline grid** -- a quiet mid-century discipline. - Margins are generous and **complementary-asymmetric**: 14% left, 8% right (or mirrored on alternating spreads). - Every spread has a **subtle rotational tilt** of -1.5 to +1.5 degrees, never zero. The portfolio is hand-held, not machine-aligned. ## Typography and Palette **Typography (all from Google Fonts):** - **Masthead / Display:** *"Oswald"* -- a condensed humanist sans-serif inspired by the narrow Gothics of mid-century American newspaper mastheads. Used at clamp(3.2rem, 8vw, 6.4rem), weight 500, letter-spacing: 0.04em, line-height: 0.92. The condensed proportions are essential -- this is the seed's **typography: condensed** axis. The **wide-tracking + narrow-set** combination is the visual signature of 1950s news mastheads (cf. The Herald-Tribune masthead, 1958). - **Secondary Display / Pull-Quotes:** *"Big Shoulders Display"* -- another condensed sans, but with squared, almost industrial terminals. Used for inset pull-quotes at clamp(1.6rem, 3.5vw, 2.4rem), weight 700, letter-spacing: 0.08em, all-caps. This is the **brass-slug voice**: short, hard, definitive. - **Body / Dispatch Text:** *"Roboto Condensed"* -- the workhorse. Used at 1.05rem, weight 400, line-height: 1.55, letter-spacing: 0.012em. Roboto Condensed has a slight humanist warmth in its 'a' and 'e' that prevents it from feeling sterile. Body paragraphs in **two short columns** on wider viewports, single column on mobile. Hyphenation enabled. - **Editorial Italic / Datelines:** *"Cormorant Infant"* -- italic-only, weight 400, used exclusively for datelines ("ROME, NOV. 14 --"), photo captions, and the colophon. clamp(0.78rem, 1.6vw, 0.92rem). The infant cut has a gentler, more handwritten swing than the standard cut -- like a fountain-pen note in the margin of a typeset proof. - **Numerals / Filing Codes:** *"JetBrains Mono"* -- weight 500, used only for wire codes ("AP-1407Z", "UPI-NCY-58") and timestamps. Tabular figures, small caps treatment via font-variant-caps. This is the only mono on the page and is reserved. **Palette (complementary, mid-century leather-and-newsprint):** - **Chestnut Leather** -- `#6b3a20` -- the primary leather field. Cover, inner-cover, brass-clasp straps. The base material. - **Saddle Tan** -- `#a06a3f` -- the lit edge of leather, warm highlights, embossed letter-ridges, dog-eared corner shadows. - **Burnt Umber** -- `#3a1f12` -- the deep crease, the stitched seam, the stamped deboss recess. - **Bone Newsprint** -- `#efe8d6` -- the paper field. Slightly warm, never pure white, never gray. Page color. - **Foxed Cream** -- `#e0d3b2` -- the aged corner of newsprint, the discoloration ring under a coffee cup. - **Brass Slug** -- `#b89357` -- the type-slug, the clasp, the corner protector. The sole metallic. - **Wire Indigo** -- `#1c3a6b` -- the **complementary counter** to saddle tan. Used for hyperlinks, dispatch keywords, and the photogravure ink. This is the **palette: complementary** axis -- a warm-cool pairing of saddle tan (#a06a3f, hue ~25°) against wire indigo (#1c3a6b, hue ~215°), opposite on the wheel. - **Carbon Stamp** -- `#1a1410` -- the ink. Body text, type-slug face, deboss core shadow. **Ink Discipline:** No more than two ink colors per spread, ever. Body text is always Carbon Stamp on Bone Newsprint. Wire Indigo appears only as accent. The leather palette never touches the paper palette except at clearly defined mechanical edges (a stitched seam, a clasp, a debossed border). ## Imagery and Motifs **No stock photography. No glossy product shots. No iconography.** Everything is rendered, drawn, or generated. **Core Motifs:** - **Bridle-Leather Texture (signature element):** A multi-layered SVG + CSS-filter composite. Base: a procedural fractal-noise pattern (`feTurbulence` baseFrequency=0.85, numOctaves=3) tinted with the chestnut-leather hue. Overlay: a subtle hex-grain pattern (4px tile) at 18% opacity to simulate the pebbled face of pull-up leather. A third pass adds **fine flex-cracks** along stress lines (drawn paths, 0.5px stroke, in burnt umber, 35% opacity), generated procedurally from a Voronoi seed and clustered near edges and creases. The total leather panel feels **handled, oiled, slightly creased near the spine**. - **Brass Hardware:** All metal elements (clasps, corner protectors, type-slug bevels) are rendered with a 3-stop linear gradient that simulates polished brass: a deep umber base, a saddle midtone, a thin top-light highlight. Brass shows **patina mottling** -- 4-6 darker organic blotches per element, rendered as low-opacity blob filters. Brass NEVER shines. There is no specular bloom. Mid-century brass is **mat with age**. - **Newsprint Page Texture:** Bone Newsprint surfaces carry a **paper-fiber grain** (SVG turbulence at fine frequency, 8% opacity in foxed cream) and irregular **foxing** at corners -- 6-12 small organic stains in saddle tan, opacity 8-22%, clustered within 80px of any corner. A faint **ink-bleed border** (1px inner shadow in carbon stamp at 15% opacity) softens every page edge. - **Halftone Photogravure:** Where an "image" is needed, it is rendered as an SVG halftone with **dot diameters varying from 1px to 6px** on a 12px grid, using only Wire Indigo on Bone Newsprint. Subjects are mid-century editorial: a Royal typewriter, an Eames lounge chair, a Pan Am 707 on a tarmac, a Bakelite radio, a folded gabardine raincoat. These are not photographs of these things -- they are **suggestion-shapes** in halftone, just enough silhouette to read. - **Embossed / Debossed Type:** The masthead "GAZZA" and the colophon emblem are rendered with true CSS **deboss** (inset shadow on the dark side, highlight on the light side, both calibrated to the 4 p.m. light direction at -45 degrees). The deboss has a **ridge of saddle tan** along the top edge of each letter where leather has been compressed and lit, and a **recess of burnt umber** in the trough. - **Stitched Seam:** Every leather edge that meets another leather edge has a **dashed stitch line** -- 6px dashes, 4px gaps, 1.5px stroke, in saddle tan, offset 8px from the leather edge. The stitch follows curves smoothly (SVG path-stroke). - **Wire-Service Logomark:** A small mid-century atomic-era emblem at the colophon: three concentric quarter-arcs (12°, 28°, 44°) struck through by a single horizontal bar, all in carbon stamp on bone. Inspired by 1950s broadcast service marks (cf. CBS eye, AP globe). - **Margin Marginalia:** Hand-drawn editorial proofreader's marks (deletion strikethroughs, paragraph pilcrows ¶, caret insertions ^, small italic notes) appear **once per spread** in cormorant-infant italic, in saddle tan, in the right margin -- as if the editor has just been over the page. **Avoided motifs (per frequency audit):** - No **photography** (45%, dominant). Everything is illustration/halftone. - No **gradient** palette (46%, dominant). Flat color fields with texture only. - No **noise-texture-as-aesthetic** (the texture here is photographic of leather/paper, not abstract noise). ## Prompts for Implementation **Single continuous immersive-scroll narrative.** The entire site is **one vertical journey through an opened leather press-portfolio**. There is no traditional navigation, no menu bar, no sticky header. The visitor enters at the closed cover and exits at the closed inner-back-cover. Total page height: approximately **8 to 9 viewport heights**. Use `scroll-behavior: smooth`, but do **not** snap-scroll. Use Intersection Observer to trigger spread reveals as content enters the viewport. The reading should feel like turning the leaves of a portfolio at one's own pace -- never rushed, never paused. **Bounce-enter as the signature animation (seed: patterns: bounce-enter, 0% in audit).** Every primary content block on enter uses an overshoot-and-settle: `cubic-bezier(0.34, 1.56, 0.64, 1)`, duration 720ms, transform from `translateY(40px) rotateX(-3deg)` to `translateY(0) rotateX(0)`. The overshoot is **soft, not springy** -- like a folded letter dropped onto wood, not a rubber ball on tile. Stagger child elements by 90-180ms. Bounces never compound -- once an element has bounced, it stays settled. **3D portfolio mechanics.** The cover spread and final colophon spread use CSS 3D transforms (`perspective: 1400px` on the body) to simulate the opening and closing of the portfolio. As the visitor scrolls past the cover, the cover panel rotates from `rotateX(0)` to `rotateX(-94deg)` and translates upward, exposing the first interior page. The transformation is driven by `scroll-timeline` (where supported) with an `IntersectionObserver` + scrollY-fraction fallback. The mid-section brass clasp, when scrolled past 40% of its containing spread, plays a 2-keyframe SVG animation in 380ms to "unlock" -- the clasp tongue rotates from 0deg to 78deg about its hinge. **Wire-service stutter for dispatch text.** Dispatch text reveals character-by-character at 28ms/char base rate, with a 12% chance per character of a 200-360ms additional pause (relay delay). Punctuation glyphs always trigger a 140ms pause. The cursor (a thin carbon-stamp vertical bar, 2px wide, 0.9em tall) blinks at 480ms cycle and disappears 1200ms after the final character lands. Dispatch text is **never re-animated** on scroll-back; once filed, it stays filed. **Hand-held tilt.** A subtle, idle global rotation: the entire `
` element animates between `rotateZ(-0.4deg)` and `rotateZ(0.4deg)` over a 22-second loop, easing in-out, never resting at zero. This simulates a portfolio held in two slightly trembling hands. The motion must be imperceptible per-second but evident if the visitor freezes and looks for 10 seconds. **Cursor as fountain-pen tip.** Replace the default cursor on text columns with an SVG of a vintage fountain-pen tip in carbon stamp (12x18px), tilted at 38 degrees. On hyperlink hover, the tip flicks 8 degrees and a thin saddle-tan ink-trail line draws beneath the link via stroke-dasharray animation (200ms ease-out, retracts on mouse-leave in 380ms). **Soundless by default, but design as if a phonograph plays.** Do NOT add audio. But pace timings (bounce, stutter, tilt-loop) as if a Brubeck record is turning at 33 1/3 RPM somewhere just out of frame. Animations should land on imagined off-beats, never on the bar. **Storytelling structure:** The site is a **single dispatch from a single correspondent**. There is no "blog index", no "category list", no "subscribe" CTA, no pricing block, no stat-grid, no testimonials carousel. The visitor reads one filed dispatch from gazza.news and then closes the portfolio. If a future visit shows a different dispatch, that is for the orchestrator to decide -- but **a single visit is a single complete read**. **Avoid:** card grids (45% overused), centered hero+CTA columns (43%), photography (45%), gradients (46%), warm-only palettes (46% -- ours is **complementary** warm-cool), scroll-triggered fade-ins as the only animation (43%), parallax (33%), monospace as the body voice (44% -- ours is **condensed**), mysterious-moody tone (27% -- ours is **calm-serene**). Avoid the entire vocabulary of SaaS marketing pages and editorial blogs that mimic Medium. **Embrace:** complementary palette (3%), bounce-enter (0%), condensed typography (8%), immersive-scroll layout (9%), mid-century aesthetic (5%), calm-serene tone (4%), leather-texture imagery (effectively 0%), vintage motifs (6%) -- this combination of seven underused dimensions appears in no other design in the audit. ## Uniqueness Notes **Differentiators from other designs in the codex:** 1. **Leather-portfolio-as-page mechanic.** No other design treats the page itself as a hand-bound leather object. The cover opens (3D rotateX), the brass clasp unlocks (SVG keyframe), the inner pages are stitched and foxed, and the back cover closes. This is **skeuomorphism without nostalgia kitsch** -- the portfolio is the structural metaphor and the literal rendered material, simultaneously. It is closer to industrial design than to UI. 2. **Bounce-enter as the only entrance animation.** The frequency audit shows bounce-enter at literally 0% across 200 designs. This site commits to bounce-enter as its signature -- with a specific physical model (folded paper on wood, not rubber on tile) tuned via a precise cubic-bezier (0.34, 1.56, 0.64, 1) at 720ms with calibrated overshoot. Combined with the **portfolio-handling tilt loop** (a continuous, near-imperceptible rotateZ wobble), the page feels physically held rather than statically displayed. 3. **Complementary palette discipline.** Only 3% of designs use complementary palettes. This site pairs saddle tan (#a06a3f, ~25°) against wire indigo (#1c3a6b, ~215°) at exactly opposite hue positions, with strict ink discipline: no more than two inks per spread, leather palette and paper palette never blend except at mechanical edges. This rejects the dominant gradient/warm aesthetic (46% each) wholesale. 4. **Wire-service stutter instead of typewriter effect.** The character-by-character text reveal includes **deliberate relay-delay pauses** (12% probability per character, 200-360ms each, plus fixed 140ms on punctuation), explicitly simulating a 1958 teletype relay rather than a typewriter (which is overused at 7% with predictable per-character timing). The result reads like incoming AP wire, not a quirky landing-page gimmick. 5. **Single-dispatch architecture.** No index, no archive, no category, no subscribe, no pricing, no testimonial, no stat. One visit = one complete dispatch read, beginning at the cover and ending at the colophon. This rejects the entire structural vocabulary of SaaS / Medium-style news sites. The portfolio metaphor is enforced absolutely: a portfolio holds one filed report, not a stream. 6. **Mid-century halftone photogravure instead of photography.** Where 45% of designs lean on photography, this site renders all "images" as SVG halftones in a single complementary-ink duotone (wire indigo on bone newsprint), with subjects drawn from the mid-century editorial vocabulary (Royal typewriters, 707s, Bakelite radios). This produces a unified inkprint surface where text, image, and texture share a material register. 7. **Fountain-pen cursor + ink-trail link draw.** The cursor itself is a custom SVG fountain-pen tip; hyperlinks reveal an animated ink-trail underline on hover. No other design in the audit uses a custom cursor as a material extension of its texture system. **Chosen seed (from assignment):** aesthetic: mid-century, layout: immersive-scroll, typography: condensed, palette: complementary, patterns: bounce-enter, imagery: leather-texture, motifs: vintage, tone: calm-serene. **Frequency-audit avoidance:** Actively rejects the four dominant patterns -- card-grid (45%), centered (43%), photography (45%), gradient palette (46%), warm-only palette (46%), mono typography (44%), scroll-triggered fade (43%), parallax (33%), corporate aesthetic (42%), mysterious-moody tone (27%). Embraces seven underused dimensions in combination: complementary (3%), bounce-enter (0%), condensed (8%), immersive-scroll (9%), mid-century (5%), calm-serene tone (4%), and leather-texture imagery (effectively 0% -- not even listed in the imagery audit). This seven-dimensional underused-pattern stack appears in no other design.