# Design Language for gazza.news ## Aesthetics and Tone gazza.news is a **still-water press** — a news surface designed after the philosophy of Muji's legendary product language: *no excess, no decoration that does not carry meaning, no colour that does not earn its place.* The site does not shout. It exhales. The aesthetic is rooted in **Japanese functional minimalism applied to long-form journalism**: wide empty margins that act as breathing rooms, not wasted space; type set with the deliberate slowness of a letterpress compositor; a palette of **jewel-tones used surgically** — one accent per section, never stacked — against a near-white ground that reads like unbleached washi paper held to winter light. The mood is **calm-serene** in the precise way that a Japanese periodical reading room is calm: not sterile, not boring, but quietly alive. The room has a smell (ink and cedar). The chairs are worn in specific places. The news matters but the act of reading it is itself unhurried. Tone references: Yanagi Sōetsu's concept of *mingei* (folk craft where utility IS beauty), Muji's 1980 catalogue design by Ikko Tanaka, the quiet horizontal authority of *Brutus* magazine's spreads. **What gazza.news is not:** a news feed, a content farm, a breaking-news screamer. It is a considered news object — a publication that trusts its reader to stay. ## Layout Motifs and Structure The entire layout is built on a **fixed sidebar + flowing main column** structure — a deliberate counter to the corpus's 92% centered and 76% full-bleed dominance. **Macro structure:** - Left sidebar: fixed, 280px wide on desktop, containing section navigation, date/time stamp, site wordmark vertically set (rotated 90° counterclockwise, reading bottom-to-top), and a minimal tag taxonomy - Main column: fluid, 680–860px wide depending on viewport, single reading column - Right margin strip: 120px reserved purely for pull-quote overflow, footnote numerals, and decorative rule fragments — no content, pure spatial grammar **The sidebar rule:** The sidebar never scrolls. It is an anchor. The reader always knows where they are in the publication because the sidebar holds constant. The wordmark "gazza" appears in the sidebar at approximately 1/3 from the top, set vertically in `IBM Plex Mono`, weight 300, tracked at 0.3em — not a logo, a label on a specimen jar. **Section breaks:** Not horizontal rules but **asymmetric ink-drawn fragments** — a 2px hand-drawn SVG stroke that starts 40% from the left edge, runs 25% of the column width, and fades at both ends via SVG stroke-dasharray animation. These feel like a journalist's underline in an old notebook. **Article card layout:** Cards in the main column are NOT grid-based. They stack vertically with alternating left/right accent placement: odd cards carry a jewel-tone left border (3px, colour varies per section); even cards are pure white with a single typographic pull element. No thumbnails in the card list — photography exists only inside individual article pages, never in the index. **Spatial rhythm:** All spacing is based on a 7px atomic unit (non-standard, unexpected, slightly off — a Muji product has proportions that feel right but are never obviously mathematical). Line height 1.7. Paragraph spacing 2.4 units. Section spacing 9.1 units. ## Typography and Palette **Typography (Google Fonts, verified):** - **Wordmark / Primary display**: `IBM Plex Mono` — weight 300, tracking 0.25em, all-lowercase. Used for the vertical sidebar wordmark, section labels, and all navigational text. IBM Plex Mono has an unusual visual quality for a monospace: it is warm, not cold; its open counters and slightly humanist construction give it a quality closer to a typewriter ribbon impression than a terminal. At weight 300 it becomes almost calligraphic. - **Article headlines**: `Noto Serif JP` — weight 700 for H1, weight 400 for H2/H3. This choice is deliberate and unusual: Noto Serif JP is a Pan-CJK serif designed for Japanese text but renders Latin script with an elegance that comes from its Japanese typographic DNA — slightly lighter stroke contrast, more open spacing. It gives Latin headlines the quality of a translated edition of a Japanese publication, which is exactly right for gazza.news. - **Body copy**: `IBM Plex Mono` — weight 400, size clamp(0.875rem, 1.5vw, 1rem), line-height 1.72. Monospace body is unusual (the corpus uses mono at 87% but almost exclusively for code/labels, not prose). Here, mono body copy is the core design statement: every article reads like a wire-service dispatch, a field report typed on a Selectric. It is readable at this scale because IBM Plex Mono's generous x-height and 0.6em advance width make it stack more like proportional text than most monospaces. - **Datelines / metadata**: `IBM Plex Mono` — weight 300, size 0.75rem, color `#8a8880` (warm grey), uppercase, tracked 0.15em. Used for author, date, read-time, section tag. **Colour palette — jewel-tones on washi ground (0% usage in current registry):** - `#f5f2ec` — Washi Ground. The background. Not white, not cream, but the specific warm-neutral of unbleached washi paper seen under a fluorescent reading lamp. All body text sits on this. - `#1c1a17` — Ink Black. Primary text color. Near-black with a warm undertone, not the cold #000000 that makes screens feel like monitors. - `#2e4a7a` — Sapphire. Section: Politics/World. A deep, saturated blue with the internal light of a carved sapphire cabochon. Used as left-border accent, sidebar hover state, and link underline color for that section. - `#5c2d6e` — Amethyst. Section: Culture/Arts. Deep violet-purple with the cool depth of raw amethyst crystal. Sparing: only for accent borders and the active state of cultural section items. - `#1a5c3a` — Emerald. Section: Science/Environment. A forest-deep green, the green of raw emerald before cutting, with enough black in it to never read as "nature site green." Used for science section accents. - `#7a2a1e` — Garnet. Section: Opinion/Analysis. A dark, wine-adjacent red with brown undertones — the color of garnet stone, not of danger. Used for opinion borders and pull-quote rules. - `#8a8880` — Warm Slate. All meta-text, UI chrome, inactive states, footnote numbers. A warm grey that bridges the gap between ink and ground without cold neutrality. Each section of the site is assigned exactly one jewel-tone. The tones never appear together on the same screen view — only one section is visible at a time in the main column, so the jewel-tone is always singular and clean. The palette never gradients; it always appears as flat, saturated color in controlled quantities. ## Imagery and Motifs **Imagery philosophy:** Photography is banned from the index/homepage. It is permitted only within individual article pages, where it appears as full-column-width photographs with a `mix-blend-mode: multiply` over the washi ground — this gives photographs the quality of being printed *into* the page rather than placed on top of it. No photography in cards, no thumbnails, no hero images on the landing surface. **Hand-drawn decorative system (custom SVG, inline):** - **Ink fragments**: The primary decorative element — not full illustrations, but fragments. A partial bracket. Three parallel pen strokes. A small circle with an incomplete perimeter. These are drawn at actual ink scale (2–6px stroke width) and placed at section transitions, sidebar dividers, and article colophon positions. They suggest a journalist's notebook, not a design system. - **Vintage press ornaments**: A set of 8–12 SVG reproductions of 19th-century typographic ornaments (manicule pointing fingers, asterisms, fleurons, printer's dashes). These appear as `::before`/`::after` content on blockquotes, pull quotes, and section headings — not as decoration for its own sake but as typographic grammar recovered from hand-press printing tradition. - **The gazza emblem**: "gazza" in Italian means magpie. The site's sole figurative illustration is a single ink-line magpie — minimal, Audubon-style but stripped of color, drawn with 5–7 strokes of varying weight. It appears in the sidebar above the vertical wordmark, at approximately 48×48px. The magpie collects things; so does a news publication. This is the site's only "logo" element and it is hand-drawn SVG, never rasterized. **Morph transitions:** The primary interaction pattern is morphing — elements do not slide, fade, or snap. They morph. Specifically: - Section border colors morph between jewel-tones when navigating (500ms, cubic-bezier(0.25, 0.46, 0.45, 0.94)) - The magpie emblem in the sidebar morphs its SVG path on hover (the tail feathers spread slightly, then return to rest — 800ms, spring physics via CSS linear() easing) - Article cards morph their left-border height from 0 to full on scroll-entry (not a slide, a growth — the border "draws" itself from top to bottom, 400ms) - Section navigation items morph their tracking from 0.15em to 0.4em on hover — a purely typographic morph that feels like the word exhaling **Vintage motifs as structural grammar:** - Pull quotes use a traditional French quotation ornament (« ») rendered 2× scale in the section's jewel-tone - Bylines are preceded by a thin 1em rule in warm-slate — a convention from 1920s newspaper layout - The sidebar navigation uses a manicule (☛) as the active-state indicator — pointing at the current section in the section's jewel-tone - Footer typography echoes a newspaper colophon: "Published by gazza.news / Printed in the web / [date]" set in IBM Plex Mono weight 300 ## Prompts for Implementation **The story to tell:** A reader opens a publication that has existed, in some form, since before screens. The editorial voice is calm and considered. The layout was clearly designed by someone who had held actual newspapers and found them lacking in exactly one respect: the inability to follow a single thread without visual noise. gazza.news solves this by being visually quiet everywhere except the one section you are currently reading, which glows with its jewel-tone as if lit from within. **Implementation directives:** - **Fixed sidebar implementation**: The sidebar uses `position: fixed; left: 0; top: 0; height: 100vh; width: 280px`. The main content column has `margin-left: 280px`. On mobile (<768px), the sidebar collapses to a 48px-wide icon rail showing only the magpie and section color indicators. - **Vertical wordmark**: `writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: 0.3em;` applied to an `

` containing "gazza" in IBM Plex Mono weight 300. Positioned at 33% from top of sidebar. - **SVG ink-fragment dividers**: Inline SVG elements with `stroke="#1c1a17"` opacity 0.35, `stroke-width: 1.5px`, `fill: none`, using hand-drawn-approximating bezier paths. Not procedurally generated — each one is unique and authored. - **Morph animations**: Use CSS `transition: all 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94)` for color morphs. For the magpie SVG path morph, use a CSS `@keyframes` animation that interpolates `d` attribute values between two states (supported in all modern browsers without JS). - **Body text in monospace**: Set `font-feature-settings: "kern" 1, "liga" 0` — disable ligatures on IBM Plex Mono to preserve the typewriter-individual-character quality. Set `font-variant-numeric: tabular-nums` for all numeric content. - **Article card borders**: `border-left: 3px solid var(--section-jewel-tone); padding-left: 1.4rem;` on odd cards. The border draws via `clip-path: inset(0 0 100% 0)` animating to `inset(0 0 0% 0)` on IntersectionObserver trigger. - **Photography in articles**: `mix-blend-mode: multiply` on all `` elements, with a thin `outline: 1.5px solid rgba(28,26,23,0.15)` inset (not border, outline — avoids layout shift). This gives photographs a printed-on-paper quality against the washi ground. **Avoid:** - Gradient backgrounds or gradient text - Any element that slides horizontally - Photography on the index/homepage - More than one jewel-tone visible simultaneously in the main column - Rounded corners (everything is square or hand-drawn — never `border-radius` on structural elements; only permitted on the magpie illustration SVG viewport) - Sticky headers overlapping the sidebar — the sidebar IS the header ## Uniqueness Notes 1. **Jewel-tones palette at 0% registry usage**: No other design in the 140-site registry uses jewel-tones as its primary palette system. This is genuinely unoccupied territory. The execution is specific: jewel-tones as per-section single-color markers, never combined, never gradients. The effect is that navigating between sections feels like turning to a different chapter in a book with different color-code tabs — clean, functional, beautiful. 2. **Monospace body text for long-form prose reading (registry first in this context)**: The corpus uses mono at 87% but exclusively for UI labels, code blocks, and decorative purposes. Using IBM Plex Mono as the actual body copy font for prose journalism — at weight 400, 1rem, 1.72 line-height — is a structural commitment that changes the entire phenomenology of reading. It makes news feel like wire copy, like something urgent but controlled. 3. **Morph as the only animation vocabulary**: The corpus's dominant animation is parallax (90%) and stagger (65%). This design uses morph exclusively — no parallax, no stagger. The SVG path morph on the magpie, the color morph on section transitions, the border-draw morph on card entry. Every animation is a shape or color changing state, not an element moving through space. This creates a quality of stillness-with-life that is rare in the corpus. 4. **Fixed sidebar with vertical wordmark as primary navigation**: 31% of designs use sidebar layout, but examination of those designs reveals they mostly use sidebar for content overflow or utility panels. gazza.news uses the sidebar as the entire typographic and navigational identity — the wordmark lives there, the section colors announce from there, the magpie watches from there. The sidebar is not a navigation drawer; it is the masthead. 5. **Vintage press ornaments as live typographic grammar**: The use of manicules, fleurons, and asterisms as active UI elements (hover states, active indicators) rather than decorative flourishes recovers a 500-year-old typographic tradition for a functional purpose. No other design in the registry uses historical printer's marks as interactive state indicators. **Chosen seed:** aesthetic: muji, layout: sidebar, typography: tech-mono, palette: jewel-tones, patterns: morph, imagery: hand-drawn, motifs: vintage, tone: calm-serene **Avoided patterns from frequency analysis:** - Centered layout (92%) — replaced with fixed sidebar + single column - Parallax (90%) — replaced with morph as sole animation vocabulary - Photography on homepage (92%) — photography confined to article interiors with multiply blend - Warm/gradient palette (93%/85%) — replaced with jewel-tones on neutral washi ground - Hand-drawn aesthetic (67%) — hand-drawn is used only for specific decorative elements (ink fragments, magpie), not as the overarching aesthetic; the overarching aesthetic is muji minimalism