# Design Language for politics.day ## Aesthetics and Tone **politics.day** is a political news and commentary site whose name compresses urgency into calendar grammar — not "politics dot com" but *politics dot day*, as if every 24 hours produces exactly one reckoning worth reading. The site treats this as a mandate for **Scandinavian editorial restraint applied to the violent subject matter of governance**: a Nordic newspaper in a country that never shouts but always means it. The visual world draws from **Swedish and Danish broadsheet design of the 1970s–90s** — specifically the aesthetic of newspapers like *Dagens Nyheter* and *Politiken* before digital disruption, where everything communicates through the quality of the silence around it. Huge, confident type. Cream pages aged to just short of ivory. Burgundy as the single accent — the color of wax seals, senate carpets, and dried blood on parliamentary floors. No decoration. No gratuitous ornament. The page *is* the argument. Tone: **terse, precise, and slightly cold** — like a diplomat who has already read the classified version of the story and is choosing which words to use in your presence. The site does not perform urgency; it *contains* it. White space is not emptiness — it is the held breath before a verdict. Duotone photography renders all imagery in **burgundy (#6B1D3E) over cream (#F2EBD9)** — photographs of parliaments, street protests, press conferences, and empty chambers become something stranger and more permanent than news: they become evidence. The Scandinavian aesthetic here is distinguished by its departure from typical hygge-warm minimalism: this is **Nordic austerity in the service of democratic accountability**, not lifestyle design. Cold, not cozy. Still, not comfortable. ## Layout Motifs and Structure The page structure is **immersive vertical scroll** across five to six full-viewport sections, each commanding one complete screen at rest before the scroll begins. No multi-column news grids. No card arrays. No sidebar widgets. **Section architecture:** 1. **Masthead Section** — Full viewport. Wordmark `politics.day` in monospaced display at clamp(6rem, 12vw, 12rem), set left-aligned against a near-black `#0E0A0B` background. A single hairline rule in burgundy `#6B1D3E` runs horizontally across the viewport at one-third height, separating the wordmark from a datestamp `SATURDAY · MAY 10 · 2026` set in the same mono typeface at 0.8rem. Above the rule: silence. Below the rule: the date, then a single lead sentence in cream. No hero image in this section — the type *is* the image. 2. **Lead Story Section** — Full viewport split **asymmetrically 65/35**: left panel holds a full-bleed duotone photograph; right panel holds a narrow column of display headline (4–6 words maximum, set at clamp(3rem, 6vw, 6rem)) plus three short paragraphs of body copy. The 65/35 split is not centered, not symmetric — it is the weight of a broadsheet's front-page centerpiece, translated to screen. 3. **Deep Read Section** — Full viewport, cream `#F2EBD9` background. A single extended article excerpt fills a narrow column (max-width 62ch) centered on screen. Typography only — no images. The pull-quote system uses a thin burgundy left-border rule and negative letter-spacing to distinguish editorial voice from reportage. This section scrolls *inside itself* — the article column scrolls within a fixed-height viewport container, so the section feels like reading a printed page. 4. **Archive Grid Section** — Full viewport in dark burgundy `#3A0E22` background. A **2×3 grid of story cards** — but not the usual card grid: each card is purely typographic (no images), presenting a headline in mono type at 1.4rem, a datestamp at 0.7rem, and nothing else. Hover over a card: the card's background lifts to `#6B1D3E` burgundy and the text inverts to cream. The grid uses CSS Grid with a 1px burgundy-tinted gap line as a deliberate structural element, not padding. 5. **Opinion / Masthead Voice Section** — Full viewport, off-white `#FAF6F0`. A single bylined opinion piece introduction: author name in burgundy small-caps, headline in display serif, lede paragraph in body mono. A thin animated underline draws across the author name on scroll entry (2s, cubic-bezier ease). 6. **Footer/Colophon Section** — Full viewport dark, returning to `#0E0A0B`. Sparse: wordmark at small scale, publication motto, issue number. A single burgundy horizontal rule at mid-height. **Spatial logic**: Sections do not bleed into each other visually — each section has a distinct background color creating hard chromatic cuts on scroll. No section-transition gradients. The scroll is a series of *cuts*, not dissolves. This references the editorial grammar of broadsheet newspapers where each section had a different paper weight. **Layered depth**: Within the lead story section, the photograph sits at z-index 0, a translucent cream scrim at 12% opacity sits at z-index 1, and the text column sits at z-index 2. On scroll, the photograph parallaxes at 0.3× speed while the scrim holds fixed — creating a three-layer parallax that reads as depth of field, not decorative effect. This is the *only* parallax in the entire design. ## Typography and Palette **Palette:** - **Near-black** `#0E0A0B` — masthead backgrounds, primary text on light sections. Not pure black; has a faint warm undertone that prevents harshness against cream. - **Burgundy deep** `#3A0E22` — section background for archive and dark alternating sections. The darkest red in the system. - **Burgundy mid** `#6B1D3E` — primary accent: rules, hover states, active indicators, underline animations, caption color, pull-quote borders. The color of a wax parliamentary seal. - **Burgundy faint** `#A84B6F` — secondary accent used only for datestamps and secondary labels. Never for body text. - **Cream warm** `#F2EBD9` — primary background for light sections and body text on dark sections. Aged slightly from pure white — this is paper, not screen. - **Off-white** `#FAF6F0` — alternating light section background (opinion, softer editorial). Cooler than cream, distinguishing without stark contrast. - **Mid-cream** `#DDD3BD` — used for ruled lines on light backgrounds and secondary metadata text. Low contrast, structural. **Typography (all verified on Google Fonts):** - **Display / Headlines**: [`Space Mono`](https://fonts.google.com/specimen/Space+Mono), weight 700, set at clamp(3rem, 7vw, 8rem) for section headlines; clamp(1.4rem, 2.5vw, 2.2rem) for secondary headlines. Space Mono is the only display typeface — no serif display. Its monospaced geometry at large size creates the broadsheet impression of letterpress type where every character occupies identical horizontal real estate, implying mechanical impartiality. Tracked at `-0.02em` for headlines above 4rem; `0em` for smaller sizes. - **Body / Paragraph**: [`Space Mono`](https://fonts.google.com/specimen/Space+Mono), weight 400, set at `clamp(0.875rem, 1.1vw, 1rem)`, line-height 1.75. The decision to use mono for body text is deliberate and anti-conventional — mono body text at proper weight and leading reads as a *transcript*, not a website. Political journalism rendered in the same typeface used for court records and government reports. The slight horizontal density of mono body text at 62ch max-width creates a compressed column that reads faster than proportional body text. - **Datestamps / Labels / Bylines**: [`Space Mono`](https://fonts.google.com/specimen/Space+Mono), weight 400, set at `0.7rem`, all-caps via `text-transform: uppercase`, letter-spacing `0.12em`. These are the lightest elements in the hierarchy, distinguished by size and spacing rather than a second typeface. - **Pull-quote accent**: [`Libre Baskerville`](https://fonts.google.com/specimen/Libre+Baskerville), weight 400 italic, set at `1.3rem`. The *only* serif and the *only* non-mono in the entire design. Pull-quotes break the mono grid intentionally — a human editorial voice interrupting the mechanical transcript. Used sparingly: maximum one per page load. **Font system summary**: Two fonts total. One mono (Space Mono, three uses). One serif (Libre Baskerville, one use). The design reads as a single-typeface system with a single italic serif interruption — structurally closer to a monograph than a website. ## Imagery and Motifs **Duotone photography:** All photography on the site is processed through a strict **two-ink duotone**: `#6B1D3E` (burgundy mid) as the shadow ink and `#F2EBD9` (cream warm) as the highlight ink, applied via CSS `filter: sepia(1) hue-rotate()` or SVG `feColorMatrix` transforms. No color photography. No grayscale. No black-and-white. The duotone is *always* burgundy-over-cream — never reversed, never varied. Subjects: parliaments (the Riksdag, the Folketing, the Bundestag), press conference podiums, protest crowds, empty chambers, official portraits made strange. Photography is used in exactly one section (Lead Story, Section 2). The rest of the design is typographic. This prevents the 87% photography overuse pattern while making the single photograph carry maximum weight. **Layered depth system:** The depth system uses three layers — photograph / scrim / text — in Section 2 only, and uses z-index + translate3d for hardware-accelerated compositing. No CSS drop-shadows on text (creates softness inconsistent with the Nordic hardness). No blurs. The depth reads as a consequence of physical printing registration, not digital softness. **Decorative motifs — restraint above all:** - **Horizontal hairline rules** in `#6B1D3E`, 1px, appear at structurally significant moments: separating masthead from date, separating section headers from body, as the colophon's sole ornament. These are the *only* decorative elements in the design. - **A single typographic ornament**: the `·` (middle dot, U+00B7) is used as a date separator and as the section divider in the footer. Never bullets, never dashes, always the middle dot. - **No icons.** No iconography of any kind. No social icons, no nav icons, no arrow icons. Navigation (if any) is entirely text. - **No background patterns, no textures, no grain overlays.** The Scandinavian restraint prohibits surface decoration. **Micro-interactions (distinguished from parallax and scroll-trigger):** Micro-interactions are small, immediate feedback events triggered by cursor proximity or pointer state — not by scroll position. They run at 150–300ms, not 600ms+. - **Headline hover**: when the cursor enters a headline, the first letter lifts its font-weight from 700 to a rendered-bolder state via `font-variation-settings` if available, then reverts on hover-out. Duration: 180ms ease-out. No color change. - **Rule draw on card hover**: the thin horizontal rule below each archive card headline draws from left to right in 200ms using `clip-path: inset(0 100% 0 0)` → `inset(0 0 0 0)`, then retracts on hover-out. Pure CSS, no JS. - **Author name underline animate**: on viewport entry (IntersectionObserver), the author byline's underline draws from left (width: 0) to full width over 1.8s. Triggers once per page load. - **Date stamp pulse**: the masthead datestamp performs a single `opacity: 0.6 → 1.0` pulse over 1.2s on page load, settling permanently at 1.0. This is the only element that moves on load — it communicates "this is today" without a scrolling ticker. - **Cursor refinement**: the default cursor is preserved (no custom cursor). `cursor: text` on all body copy (mono transcript aesthetic). `cursor: default` on headlines and archive cards. ## Prompts for Implementation **The story to tell.** A reader opens the front page of a political newspaper from a country that practices democratic accountability with the rigor of a constitutional court. The page does not welcome you — it presents the record. The masthead announces the date. The lead story presents the photograph (duotoned, reduced to evidence) and the headline. The reader scrolls through the day's reckoning in six vertical chapters, each contained within one screen. The archive reminds them that yesterday also mattered. An opinion writer breaks the transcript aesthetic with a single sentence in italic serif. The colophon closes the edition. **Implementation priorities:** 1. **Viewport sections as chapters**: each `section` element is `height: 100svh; overflow: hidden;` — the user scrolls between chapters, not within them (except Section 3 where internal scroll is intentional). Use `scroll-snap-type: y mandatory` on the body, `scroll-snap-align: start` on each section. This creates the broadsheet-page-turning experience. 2. **Duotone via CSS**: Apply duotone to the lead photograph using: ```css .duotone-photo { filter: sepia(1) saturate(2) hue-rotate(270deg) brightness(0.85); } ``` Adjust the specific values in implementation to match the burgundy-cream target duotone. Optionally use SVG `feColorMatrix` for more precise control. 3. **Asymmetric split**: Section 2 uses `display: grid; grid-template-columns: 65fr 35fr;` — no gutters, full bleed photo on left, text column on right with `padding: 4rem 3rem`. The split does not collapse to 50/50 on tablet — it narrows the text column further, maintaining asymmetry until mobile breakpoint. 4. **Three-layer parallax (Section 2 only)**: The photograph translates at `translateY(scrollOffset * 0.3)` on scroll, the scrim is `position: sticky`, the text column scrolls normally. Implemented via a single passive `scroll` event listener or `@keyframes` tied to scroll-driven animations (`animation-timeline: scroll()`). 5. **Internal scroll (Section 3)**: The Deep Read section has `overflow-y: scroll; height: 100svh;` on the outer container and a `max-height: 80svh; overflow-y: auto;` inner article column. This creates the sensation of reading a physical page within the scroll experience. 6. **Micro-interactions via CSS-only where possible**: Reserve JS (IntersectionObserver) only for the author underline draw and the date pulse on load. All hover states are CSS `:hover` transitions. No animation library dependencies. 7. **NO**: hero CTAs, pricing blocks, stat grids, newsletter modals, social proof rails, navigation hamburger menus, sticky headers, toast notifications, loading spinners, progress bars. 8. **Scrollbar**: `scrollbar-width: none; -webkit-overflow-scrolling: touch;` — no visible scrollbar. The scroll-snap creates sufficient navigation affordance. 9. **Typography scale in CSS custom properties**: ```css --display: clamp(3rem, 7vw, 8rem); --headline: clamp(1.4rem, 2.5vw, 2.2rem); --body: clamp(0.875rem, 1.1vw, 1rem); --label: 0.7rem; --pull-quote: 1.3rem; ``` ## Uniqueness Notes **Differentiators from every other design in the registry:** 1. **Mono typography applied as transcript aesthetics, not tech/terminal.** Mono appears in 76% of designs but almost always in the service of tech/hacker/terminal aesthetics (dark backgrounds, green text, cyberpunk). This design uses mono at 76% body text density with cream backgrounds and burgundy accents — mono as *parliamentary record*, not command line. The psychological register is entirely different: not "computer," but "court stenographer." No other design in the registry uses mono this way. 2. **Single-photograph site with strict duotone applied to political imagery.** Duotone appears in 11% of designs. This design reduces photography to exactly one photograph per page load (vs. the corpus average of gallery/multiple images), applies a politically-coded burgundy-cream duotone that makes the image feel archival and evidentiary, and positions it in an asymmetric 65/35 split rather than the standard hero-full-width (87%). The restraint of one-photograph-total combined with political duotone coloring is unique in the registry. 3. **Scroll-snap immersive chapters combined with internal-scroll for the Deep Read section.** Immersive-scroll appears in only 4% of designs. The addition of scroll-snap (chapters as distinct pages) combined with an internal-scroll "pocket" for long-form reading creates a hybrid UX that does not appear elsewhere in the registry — a magazine navigation model wrapped around a newspaper reading model. 4. **Burgundy-cream palette applied with no warmth.** Warm palette appears in 88% of designs. Burgundy reads as warm, but this design's near-black base (`#0E0A0B`), its Nordic coldness of tone, and its deliberate absence of gold, orange, or amber neutralizers make the burgundy read as *cold authority* rather than warm comfort. The palette subverts its own warmth — unique in the registry. 5. **Zero icons, zero decorative patterns, zero textures, single serif font as a single interruption.** The Scandinavian restraint applied here removes every visual element not doing editorial work. The single Libre Baskerville pull-quote represents the design's only concession to non-mono type, and it is used as a deliberate rupture in the transcript aesthetic, not as a complementary accent. This level of typographic restraint, combined with the decision to limit decoration to 1px horizontal rules and a middle-dot character, is significantly more austere than any comparable "minimal" design in the corpus. **Chosen seed**: aesthetic: scandinavian, layout: immersive-scroll, typography: mono, palette: burgundy-cream, patterns: micro-interactions, imagery: duotone-photo, motifs: layered-depth, tone: minimal **Avoided overused patterns**: parallax (76% — used only once, in Section 2, as a precise depth effect), stagger (51% — not used), photography (87% overuse — limited to exactly one photograph), hand-drawn (58% — not used), editorial aesthetic (52% — replaced with Scandinavian broadsheet), warm palette deployed warmly (88% — subverted to cold authority).