# Design Language for matchoomnews.com ## Aesthetics and Tone Matchoom News occupies the space where Swiss precision collides with near-future speculation — a news platform that feels like it was designed inside a high-altitude research facility overlooking a city that does not yet exist. The visual language draws from Swiss International Typographic Style: tight grids, deliberate white space, rational hierarchy — but subverts that rigor with gradient light that bleeds across column boundaries as though the data itself is ionized. The tone is **elegant-sophisticated**: never breathless or tabloid-urgent, always measured, authoritative, slightly cold in the way that polished carbon fiber is cold. Readers should feel they are consuming curated intelligence, not scrolling noise. The overall mood references the precision of a Swiss watch mechanism rendered as a constellation — structured at the micro level, vast and luminous at the macro. Primary inspiration: Helvetica-era Swiss posters recomposed through a speculative-fiction lens. Secondary reference: the layout logic of a high-altitude radar interface — information densely organized yet spatially calm. ## Layout Motifs and Structure The page operates on a **13-column asymmetric grid** where columns 1–4 are reserved for a vertical navigation rail and meta-data labels, columns 5–10 carry the primary editorial content, and columns 11–13 hold a persistent thin sidebar of live context threads. This off-center weight creates dynamic tension that feels intentional rather than broken. - **Hero zone**: Full-bleed width, single dominant headline set at display scale, with a gradient light field erupting from bottom-left and bleeding across the right two-thirds. The headline itself is positioned lower-left, leaving deliberate negative space upper-right occupied only by a floating geometric abstract mark. - **Content river**: Below the hero, alternating row pairs — one wide (columns 5–12) anchored article card followed by one narrow (columns 6–9) deep-read excerpt — create visual rhythm without regularity. - **Diagonal section breaks**: Thin 1px angled rules at approximately 4° cut across the column boundary between the editorial zone and the context rail, echoing precision engineering diagrams. - **Floating elements**: Isolated pull-quote blocks drift into the negative space of columns 1–3, rotated 90° clockwise, reading as typographic furniture. - **Depth layers**: Background carries a barely perceptible fine grid at 8px — visible only on dark sections — giving the impression of looking through graph paper toward illuminated content. - **Immersive scroll**: Sections enter from below with a subtle magnetic drift as the viewport pulls them into focus, not a mechanical translate but a fluid gravitational settle. ## Typography and Palette **Primary typeface: Commissioner** (Google Fonts) — used across all weights from Thin 100 through ExtraBold 800. Headlines deploy weight contrast aggressively: a 120px ExtraBold category label paired immediately with a 22px Light body lead creates the Swiss-style size collision. Commissioner's humanist geometry makes it feel precise without being mechanical — appropriate for news that respects the reader's intelligence. **Secondary typeface: Space Grotesk** (Google Fonts) — reserved for metadata, timestamps, section labels, and the context rail. Its slightly irregular letterforms add micro-personality against Commissioner's cleaner strokes. **Tertiary accent: DM Mono** (Google Fonts) — used only for data strings, article IDs, coordinates, and live-feed ticker elements. Its monospace cadence signals live data. **Palette — Gradient / Aurora Field:** - `#0a0a12` — Deep space black (primary background, hero) - `#0d1b3e` — Midnight cobalt (dark section backgrounds, section dividers) - `#1a3a6e` — Ionosphere blue (card backgrounds, hover states) - `#2e6fff` — Electric cobalt (primary accent, links, interactive highlights) - `#5ba3ff` — Pale cobalt (gradient midpoint, hover glow) - `#a8d4ff` — Frost blue (gradient terminus, light bleed edges) - `#e8f4ff` — Near-white frost (body text on dark) - `#c9d6e3` — Cool silver (secondary text, metadata labels) - `#ff3c6e` — Magenta cut (breaking news accent, critical alerts only — used sparingly) - `#00e5c0` — Aurora teal (live indicator dots, gradient accent in geometric marks) **Gradient construction:** The signature background gradient runs `radial-gradient(ellipse at 15% 85%, #2e6fff22 0%, #0a0a12 55%)` behind hero sections, creating a low, wide pool of electric light as if a city grid is glowing just off-screen. ## Imagery and Motifs **Geometric abstract marks:** Each major editorial category is represented by a unique SVG geometric sigil — constructed from overlapping thin-stroked rectangles, partial circles, and diagonal slashes at the same 4° angle as the section dividers. These marks float at large scale (200–400px) in the upper-right negative space of hero zones, rendered at 8% opacity in `#2e6fff` against the dark background — barely there, subliminal scaffolding. **Futuristic motifs:** - Thin concentric ellipses centered off-screen (upper-left corner, only arc visible) suggesting orbital radar sweep — present as a fixed background layer, very low opacity. - Sparse particle field: 40–60 tiny dots (`#5ba3ff`, 2px, 15% opacity) distributed pseudo-randomly across the hero, animating at 0.3px per second in a slow upward drift — stellar, not noisy. - Hairline grid overlay on card hover states: a 1px `#2e6fff` grid fades in at 12% opacity behind hovered article cards, suggesting data-space materialization. - Corner bracket elements on featured cards: four short L-shaped hairlines mark the corners of primary article cards, echoing targeting reticles from HUD interfaces. **Photography treatment:** When photographic imagery appears (article thumbnails), it is processed with a subtle cool duotone shift toward `#1a3a6e` at 30% blend, keeping all images tonally unified with the palette. No warm or saturated photographs appear unfiltered. **Decorative separators:** Section transitions use a 3px horizontal rule that begins as a solid `#2e6fff` line, then dissolves into a gradient toward transparent, as though the rule is drawing itself from left to right. ## Prompts for Implementation **Hero section:** Build a full-viewport hero with `background: radial-gradient(ellipse at 15% 85%, rgba(46,111,255,0.13) 0%, #0a0a12 55%)`. Position the headline (Commissioner ExtraBold 800, 96px, `#e8f4ff`) absolutely at `bottom: 12vh; left: 8vw`. Floating geometric mark: an SVG of two overlapping thin rectangles at 4° rotation, positioned `top: 8vh; right: 6vw`, 320px wide, `stroke: #2e6fff`, `stroke-width: 0.8`, `fill: none`, `opacity: 0.07`. Particle field via a lightweight canvas layer — no libraries — just `requestAnimationFrame` moving 50 dots upward, wrapping at top. **Magnetic scroll:** On scroll, article cards entering the viewport should use a custom CSS animation: cards start at `transform: translateY(28px)` and `opacity: 0`, then transition to `translateY(0)` and `opacity: 1` over 600ms with `cubic-bezier(0.23, 1, 0.32, 1)`. The "magnetic" quality comes from a JS cursor-follow effect on card hover: track `mousemove` and apply a max `±8px` translate toward the cursor position on the card element, with `transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1)`. **Asymmetric grid:** Use CSS Grid with `grid-template-columns: 3fr 1fr` at the macro level. The left zone (`3fr`) holds the primary editorial column with its own internal 8-column sub-grid. The right zone (`1fr`) is the context rail with `border-left: 1px solid rgba(46,111,255,0.18)`. This rail is `position: sticky; top: 0; height: 100vh` and scrolls independently. **Typography scale:** ``` --type-display: clamp(56px, 8vw, 112px); /* Commissioner 800 */ --type-headline: clamp(28px, 3.5vw, 48px); /* Commissioner 700 */ --type-label: 11px; /* Space Grotesk 500, letter-spacing: 0.15em, uppercase */ --type-body: 17px; /* Commissioner 300, line-height: 1.7 */ --type-meta: 13px; /* DM Mono 400 */ ``` **Section dividers:** Each section break uses a pseudo-element `::after` on the section container: `content: ''`, `display: block`, `width: 100%`, `height: 1px`, `background: linear-gradient(90deg, #2e6fff 0%, transparent 70%)`, `margin: 4rem 0`. **Breaking news accent:** A thin 3px left-border in `#ff3c6e` on the single most critical card at any time. All other cards use `#2e6fff` at 20% opacity for their left border. This hierarchy makes the magenta cut visually singular and unmissable without ever appearing twice. **Context rail live feed:** Article micro-entries in the right rail: each is a flex row with a `#00e5c0` 6px dot (pulsing with `animation: pulse 2s infinite`), a DM Mono timestamp, and a Commissioner Light 300 headline fragment. New entries slide in from the top with `translateY(-100%)` → `translateY(0)` over 400ms. **Bias toward full-screen narrative:** The hero occupies 100vh. Between major story sections, use full-bleed `min-height: 60vh` transition panels carrying only a single pull quote in 72px Commissioner Light on the dark gradient background — these breathing panels prevent the page from feeling like a content grid dump. **AVOID:** No pricing blocks. No CTA button grids. No stat counters with large numbers. No card grids with equal-sized thumbnails in a 3-up or 4-up formation. No testimonial carousels. ## Uniqueness Notes 1. **13-column asymmetric Swiss grid with a persistent context rail** — most news sites use symmetric 12-column grids or card-grid layouts; the off-center column split with sticky right rail is architecturally unusual and creates editorial hierarchy that does not rely on card size alone. 2. **Subliminal geometric sigils as category marks** — rather than icon sets or photography as section identity, each editorial category is represented by an abstract SVG mark at near-invisible opacity in the hero negative space. This is a motif borrowed from fine art poster design, not from news UI conventions. 3. **Magnetic cursor-follow on article cards** — the physical quality of cards "leaning toward" the cursor as a magnetic body is uncommon in news interfaces; it gives the interaction layer a tactile, material quality that reinforces the elegant-sophisticated tone without adding decorative noise. 4. **Monochromatic aurora gradient palette with single magenta cut** — the entire color system operates in cobalt-to-black gradients with a single chromatic exception (`#ff3c6e`) reserved exclusively for critical breaking news. This extreme palette restraint means the accent color carries real semantic weight. 5. **Diagonal 4° rule system** — section dividers, geometric marks, and card corner brackets all share a 4° rotation offset, creating a subtle diagonal grammar across the page that reads as precision engineering rather than decoration. **Chosen seed/style:** aesthetic: swiss, layout: asymmetric, typography: commissioner-versatile, palette: gradient, patterns: magnetic, imagery: geometric-abstract, motifs: futuristic, tone: elegant-sophisticated **Avoided patterns (overused per frequency analysis):** hand-drawn (60%), editorial (51%), terminal (31%), botanical (26%), glassmorphism (21%). This design uses none of these.