--- version: alpha name: "POLITICO" website: "https://www.politico.com" description: >- A Washington-DC political-news outlet whose homepage runs a hairline-rule editorial newspaper grid in DIN 2014, with the brand's signature crimson red carrying only the wordmark and the UPPERCASE section kickers — never a CTA. Hero article headlines sit at 58px DIN 2014 weight 700 with -0.96px tracking, photo-led news cards run at 22-28px, and a small Jubilat serif tier shows up only on Magazine-feature promos. Body text is set in a dense 10px DIN 2014 UPPERCASE with 1.6px tracking — the metadata fingerprint of a wire-service masthead ported to the browser. The canvas is pure white, the rules between cards are 1px hairlines in a warm graphite gray, and there is no radius on any card — the page reads as a print broadsheet running at desktop scale. seo: title: "POLITICO Design System for React — Crimson #d71920, DIN 2014, 14 components" metaDescription: "POLITICO's homepage as a DESIGN.md file. Crimson wordmark voltage on a pure-white canvas, DIN 2014 condensed at every tier, UPPERCASE 1.6px-tracked metadata, hairline newspaper grid. Tokens for React, Next.js, and AI tools." highlights: - "Brand red as masthead only — crimson appears 99 times but never on a CTA, reserved for the wordmark, section kickers, and a single LIVE flag" - "DIN 2014 across every tier — display headlines, navigation, body, and tiny UPPERCASE kickers all run the same condensed grotesk in three weights" - "Tracked-UPPERCASE metadata — 10-12px DIN 2014 at 1.6px tracking carries every section label, byline, and timestamp on the page" - "Square hairline grid — corner radius is zero on every card; the page is divided by 1px graphite rules in warm gray rather than rounded surfaces" - "Jubilat serif as feature-only signal — Georgia/Jubilat appears just 12 times, scoped to the Magazine block, so the serif reads as a longform-feature flag against the daily-news grotesk" tags: - "News & Publishing" lastUpdated: "2026-05-19" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | POLITICO's homepage looks like a wire-service newspaper rendered at desktop scale. The crimson POLITICO wordmark sits centered at the top of the page on a pure-white canvas; below it, a dense grid of photo-led story cards is separated by 1px hairline rules in a warm graphite gray, with no card carrying any corner radius. The hero article runs at 58px in DIN 2014 weight 700 with tight -0.96px tracking, while every section kicker above it ("WASHINGTON & POLITICS", "CONGRESS", "MAGAZINE") is set in 12px DIN 2014 UPPERCASE at 1.6px tracking and rendered in the brand's crimson red. The red never appears on a button or a primary action — it is reserved for masthead and kicker work, the way crimson reads on the front page of a print broadsheet. The DESIGN.md file packages the system into a structured spec. Inside: 10 color tokens organized around a pure-white canvas, ink black for body type, a warm graphite gray that does both running-text and hairline-rule duty, and the crimson wordmark voltage; 11 typography tokens running DIN 2014 condensed grotesk at every tier (10px UPPERCASE kickers through 58px hero headlines), plus a small Jubilat serif tier scoped to the Magazine promo block; a deliberately tiny radius scale (the page's only rounded shape is a 50% circle for icon buttons); a spacing scale built on a 15px base; and 14 component definitions covering the hairline newspaper card, the UPPERCASE section kicker, the live-flag pill, the inline byline row, and the simple-text top-nav. Feed this file to Claude, Cursor, or any AI coding agent that reads structured tokens and it reproduces POLITICO's specific moves: square cards on a pure-white floor, crimson scoped to masthead-and-kicker duty, DIN 2014 carrying every typographic tier, and the print-broadsheet hairline grid. The token references resolve without invention. The one disciplined move worth borrowing only if you are building a wire-service or daily-news product: the willingness to let the brand color stay out of the CTA layer entirely. POLITICO's red works because the page never asks it to also signal "click here" — it signals "this is the front page." related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://www.politico.com" title: "POLITICO — official site" description: "POLITICO's public marketing site — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is POLITICO's primary brand color?" answer: "POLITICO's brand voltage is a crimson red that anchors the wordmark and every UPPERCASE section kicker on the homepage. The red appears 99 times in the captured page — 46 as text, 46 as border, 7 as background — and is also declared as the site's theme-color in the HTML meta. It is never used as a CTA fill. Below the masthead, every section heading (Washington, Congress, Magazine, States) is the same crimson at 12px UPPERCASE with 1.6px tracking. A slightly more saturated pure red shows up 34 times on hairline accents and dividers, and there is an even fainter dark-mode crimson declared in CSS but absent from the rendered light surface." - id: "typography" title: "What typeface does POLITICO use, and what should I use as a substitute?" answer: "POLITICO runs DIN 2014 — a licensed condensed grotesk descended from the German industrial DIN family — for every spoken tier on the page. Display headlines sit at 58px weight 700 with -0.96px tracking; the navigation runs 16px weight 500; UPPERCASE kickers and timestamps sit at 10-12px in weights 500 and 700 with 1.6px tracking. A small Jubilat serif tier appears only inside the Magazine promo block at 28px, where the serif quotes the longform-feature print edition. The closest open-source substitute for DIN 2014 is Barlow Condensed at the same weights, or PT Sans Caption; for Jubilat use Crimson Pro or Source Serif Pro." - id: "no-radius" title: "Why are POLITICO's cards completely square?" answer: "POLITICO's homepage uses a corner-radius of 0px on every card, photo thumbnail, and section block. The captured radii frequency is dominated by 50% — used only on the seven circular icon buttons in the top-nav — with a single 5px showing up on one chip. There is no 4px, 8px, or 12px tier anywhere. The reason is print fidelity: a daily-news broadsheet runs square columns separated by hairline rules, and POLITICO ports that exact grid to the browser. Adding even a 4px corner softness would shift the page from wire-service authority toward consumer SaaS, which the editorial brand resists." - id: "uppercase-kickers" title: "Why is so much text on POLITICO in UPPERCASE with wide tracking?" answer: "POLITICO uses 10-12px DIN 2014 UPPERCASE with 1.6px letter-spacing for every section kicker, byline label, and timestamp on the page. The treatment appears more than 100 times across the homepage and is the most distinctive typographic signature of the brand. The choice quotes the small-caps category labels of mid-century American newspapers — the rotogravure-era kicker that sat above a photo caption. On POLITICO, this tracked-uppercase tier carries the metadata layer the way Logic Monospace does at The Atlantic, but the voice is grotesk-newsroom rather than monospace-newsroom." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own React news site?" answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce POLITICO's specific moves: pure-white canvas with square cards separated by 1px hairline rules in a warm graphite gray, crimson red scoped to masthead and kicker duty (never CTA), DIN 2014 carrying every typographic tier, and the tracked-UPPERCASE metadata signature. The token references resolve cleanly. The one caveat: the crimson-as-masthead move only reads correctly if you have a daily-publication cadence; for a SaaS marketing site, freeing the brand color from CTA duty would feel like leaving voltage on the table." mockups: - "marketing-hero" - "editorial-article" colors: primary: "#d71920" primary-saturated: "#ff0000" ink: "#000000" ink-muted: "#696d70" canvas: "#ffffff" surface-1: "#f4f5f7" hairline: "#b4b4b4" ink-deep: "#282d40" ink-darkest: "#121522" link-default: "#007aff" typography: display-xl: fontFamily: "din-2014, \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 58px fontWeight: 700 lineHeight: 60.9px letterSpacing: "-0.96px" display-md: fontFamily: "din-2014, \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 28px fontWeight: 700 lineHeight: 31.36px letterSpacing: "-0.32px" display-feature-serif: fontFamily: "jubilat, Georgia, Times, serif" fontSize: 28px fontWeight: 700 lineHeight: 31.36px letterSpacing: "-0.32px" heading-md: fontFamily: "din-2014, \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 22px fontWeight: 700 lineHeight: 24.64px letterSpacing: "-0.32px" heading-sm: fontFamily: "din-2014, \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 17.92px letterSpacing: 0 body-md: fontFamily: "din-2014, \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 24px letterSpacing: 0 body-sm: fontFamily: "din-2014, \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 19.6px letterSpacing: 0 body-serif-sm: fontFamily: "Georgia, Times, serif" fontSize: 14px fontWeight: 500 lineHeight: 19.6px letterSpacing: 0 kicker-md: fontFamily: "din-2014, \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 700 lineHeight: 14.4px letterSpacing: "1.6px" kicker-sm: fontFamily: "din-2014, \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 10px fontWeight: 700 lineHeight: 12px letterSpacing: "1.6px" caption: fontFamily: "din-2014, \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 10px fontWeight: 500 lineHeight: 12px letterSpacing: "1.6px" rounded: none: "0px" xs: "5px" full: "9999px" spacing: xs: "3px" sm: "8px" md: "12px" base: "15px" lg: "30px" xl: "32px" 2xl: "45px" components: hero-heading: backgroundColor: "transparent" textColor: "{colors.ink-muted}" typography: "{typography.display-xl}" rounded: "{rounded.none}" padding: "0" section-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-md}" rounded: "{rounded.none}" section-kicker: backgroundColor: "transparent" textColor: "{colors.primary}" typography: "{typography.kicker-md}" rounded: "{rounded.none}" padding: "0" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-md}" body-paragraph-muted: backgroundColor: "transparent" textColor: "{colors.ink-muted}" typography: "{typography.caption}" byline: backgroundColor: "transparent" textColor: "{colors.ink-muted}" typography: "{typography.caption}" button-primary: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.heading-sm}" rounded: "{rounded.none}" padding: "12px 8px" height: "44px" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "12px 8px" height: "44px" borderColor: "{colors.hairline}" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "15px 30px" height: "64px" borderColor: "{colors.hairline}" nav-link: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "0 8px" card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "0 30px 30px" borderColor: "{colors.hairline}" story-headline: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-md}" rounded: "{rounded.none}" story-headline-feature: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-feature-serif}" rounded: "{rounded.none}" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "0 5px" height: "40px" borderColor: "{colors.hairline}" icon-button: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.full}" padding: "0" height: "40px" --- ## Overview POLITICO's homepage inverts the dev-marketing convention by putting the brand color outside the CTA layer entirely. **Crimson as masthead, not button.** Where most consumer-news brands push their voltage into a Subscribe pill (Atlantic, NYT, Bloomberg all run a red or orange CTA fill), POLITICO holds its crimson (`{colors.primary}` — #d71920) for the wordmark itself and every UPPERCASE section kicker on the page. The red appears 99 times in the captured surface — 46 as text, 46 as border, 7 as background — and never carries a primary action. Buttons are ink-on-white or white-on-ink; the brand voltage is reserved for "this is POLITICO" duty. The shape language is **print-broadsheet**: every card has a corner-radius of 0px, every divider is a 1px hairline in a warm graphite gray (`{colors.hairline}` — #b4b4b4 declared as `--containerBorder`), and the only rounded shape on the page is the 50% radius on seven circular icon buttons in the top-nav. Where Stripe and Vercel use a soft 8-12px rounding to read as web-native, and where Bloomberg lands at 4px, POLITICO sits at zero. The page reads as a wire-service newspaper rendered at desktop scale rather than a SaaS marketing surface. Typography is DIN 2014 across every spoken tier — a licensed condensed grotesk descended from the German industrial DIN family. Display sits at 58px weight 700 with tight -0.96px tracking; navigation runs at 16px weight 500; the UPPERCASE kicker tier sits at 10-12px in 1.6px tracking. A small Jubilat serif appears only inside the Magazine promo block at 28px — the serif is treated as a longform-feature flag against the daily-news grotesk, not as a second voice in the running grid. **Key Characteristics:** - Crimson (`{colors.primary}` — #d71920) carries the wordmark and every section kicker; never used as a CTA fill. 99 total occurrences. - DIN 2014 condensed grotesk across every spoken tier — display, headings, navigation, body, and UPPERCASE kickers all share the same family in three weights. - 10-12px UPPERCASE kicker tier with 1.6px tracking — the most distinctive single typographic signature of the brand, appearing 100+ times. - Zero corner-radius on every card and photo thumbnail; the only rounded shape on the page is the 50% icon-button circle in the top-nav. - 1px graphite-gray hairline rules (`{colors.hairline}`) divide cards instead of shadows or surface tones; depth comes from rule discipline. - Jubilat serif at 28px appears 12 times, scoped to the Magazine promo block — a longform-feature flag, never used in the daily-news grid. - Pure-white canvas (`{colors.canvas}` — #ffffff) with no surface-elevation tier; the only secondary surface is a faint cool-gray (`{colors.surface-1}` — #f4f5f7) used 13 times for nav-band backgrounds. - 15px base spacing — section padding, card gutters, and inline gaps all anchor on a 15/30/45px ladder rather than the 8px or 4px module most SaaS systems use. ## Colors ### Brand - **Crimson** (`{colors.primary}` — #d71920): frequency 99. Used as text (46), border (46), background (7). The brand voltage — wordmark, every UPPERCASE section kicker (Washington, Congress, Magazine, States), the inline LIVE flag. Declared as the page's HTML theme-color. Never used as a CTA fill. - **Crimson Saturated** (`{colors.primary-saturated}` — #ff0000): frequency 34. Used as text (17), border (17). A pure-saturated red that appears on hairline dividers and inline accents — distinct from the brand crimson by being more saturated and slightly more orange. ### Text - **Ink** (`{colors.ink}` — #000000): frequency 1181. Used as text (595), border (584), background (1), shadow (1). Pure black — the dominant text color for story headlines, navigation, and inline byline names. Also carries the 584 hairline-border occurrences below the brand-red border tier. - **Ink Muted** (`{colors.ink-muted}` — #696d70): frequency 2013 — the single most-occurring color in the captured page, used as text (1016) and border (997). A warm graphite gray that does triple duty as running-text color, timestamp/byline secondary tone, and the 1px hairline rule dividing every card. - **Ink Deep** (`{colors.ink-deep}` — #282d40): frequency 1. A near-navy dark used inside one specific top-nav search-input background. - **Ink Darkest** (`{colors.ink-darkest}` — #121522): frequency 1. A near-black with a blue cast used on a single elevated dark band. ### Surface - **Canvas** (`{colors.canvas}` — #ffffff): pure white — the page floor and every card background. Declared as `--nav-fade-color`. 102 total occurrences across text (46), border (46), and background (10). - **Surface-1** (`{colors.surface-1}` — #f4f5f7): frequency 13 (all background). A faint cool gray used on the nav-band background and a few promo strips — the only secondary surface tone in the system. ### Hairline - **Hairline** (`{colors.hairline}` — #b4b4b4): frequency 2. Declared as `--containerBorder` and used as the 1px rule on certain container outlines — but most of the hairline duty on the page actually falls to `{colors.ink-muted}` (#696d70) at the 997 border occurrences. ### Semantic - **Link Default** (`{colors.link-default}` — #007aff): frequency 0 rendered. Declared as `--swiper-theme-color` for the carousel widget; not actively rendered on the captured marketing surface. ## Typography ### Font Family The system runs **DIN 2014** — a licensed condensed grotesk by Parachute Type that descends from the German industrial DIN family — for every spoken surface (display, heading, body, navigation, button, and kicker). Fallbacks walk to `"Helvetica Neue", Helvetica, Arial, sans-serif`. A second face, **Jubilat** (Joshua Darden's transitional slab serif) with Georgia / Times fallbacks, appears in exactly two scopes: the Magazine promo headline at 28px weight 700, and an inline 22px serif lockup. There is no third typeface on the page. ### Hierarchy | Token | Size | Weight | Line Height | Tracking | Use | |---|---|---|---|---|---| | `{typography.display-xl}` | 58px | 700 | 60.9px | -0.96px | Hero article headline ("'We are facing an existential crisis'…") | | `{typography.display-md}` | 28px | 700 | 31.36px | -0.32px | Standard story headlines below the hero | | `{typography.display-feature-serif}` | 28px | 700 | 31.36px | -0.32px | Magazine-feature headlines only — Jubilat serif tier | | `{typography.heading-md}` | 22px | 700 | 24.64px | -0.32px | Sub-headlines on mid-tier story cards | | `{typography.heading-sm}` | 16px | 700 | 17.92px | 0 | Small card headlines, dense list rows | | `{typography.body-md}` | 16px | 500 | 24px | 0 | Navigation links and primary running text | | `{typography.body-sm}` | 14px | 500 | 19.6px | 0 | Secondary running text | | `{typography.body-serif-sm}` | 14px | 500 | 19.6px | 0 | Magazine-feature dek text (Georgia/serif) | | `{typography.kicker-md}` | 12px | 700 | 14.4px | 1.6px | Section kicker UPPERCASE labels ("WASHINGTON & POLITICS") | | `{typography.kicker-sm}` | 10px | 700 | 12px | 1.6px | Small UPPERCASE section labels | | `{typography.caption}` | 10px | 500 | 12px | 1.6px | Byline, timestamp, and metadata captions | ### Principles Display weight tops out at 700, not at the 800/900 most newspaper sites lean on. The hero headline at 58px / 700 with -0.96px tracking is the loudest typographic moment on the page; everything else below the hero sits at 28px or smaller. The kicker tier at 10-12px UPPERCASE with 1.6px tracking is the most distinctive single signature — it does the work that monospace metadata does at The Atlantic, but in a condensed grotesk voice rather than a teletype voice. The Jubilat serif tier is rare by design. It appears only inside the Magazine promo block, where the serif quotes the print-edition longform feature and signals "this is not daily news, this is editorial." Using the serif anywhere else in the system breaks the signal. ### Note on Font Substitutes DIN 2014 is licensed from Parachute Type. The closest open-source substitute is **Barlow Condensed** at the same weights — the proportions and condensed cap-height transfer cleanly. **PT Sans Caption** is the secondary fallback for the 10-12px UPPERCASE kicker tier specifically, since Barlow Condensed reads slightly heavier at small sizes. For Jubilat, **Crimson Pro** or **Source Serif Pro** substitute without adjustment at 28px. ## Layout ### Spacing System - **Base unit:** 15px — the dominant gap value, appearing 47 times in the captured page, with a 15/30/45 ladder doing most of the section-and-card-padding work. - **Tokens:** `{spacing.xs}` 3px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.base}` 15px · `{spacing.lg}` 30px · `{spacing.xl}` 32px · `{spacing.2xl}` 45px. - **Card internal padding:** `{spacing.base}` (15px) vertical, with a `15px / 30px / 30px` bottom-heavy pattern on photo-led story cards. - **Top-nav padding:** `{spacing.base}` (15px) vertical, `{spacing.lg}` (30px) horizontal. - **Inline metadata gap:** `{spacing.sm}` (8px) — the gap between an UPPERCASE kicker, the headline, and the byline row below. ### Grid & Container - **Max content width:** ~1280px on the main story grid; the wordmark band runs full-bleed. - **Hero block:** a single tall column on the left at ~620px width carrying the 58px headline, paired with a narrower right column of secondary story cards. - **Story grid:** alternating 3-up and 4-up column rows, with 1px hairline rules dividing every cell — no card shadows or surface fills. - **Magazine promo:** a single wide block with a Jubilat serif headline on the left and a photograph on the right, set off from the rest of the grid by a slightly heavier hairline rule and the serif tier. ### Rhythm The page runs a uniform dense tempo from top to bottom — there is no generous-vs-dense band rhythm. Section padding sits at ~45px vertical, card-to-card gap at 15px, and every block reads at roughly the same density. The result is a wire-service-front-page cadence: every story matters, no story gets atmospheric breathing room except the 58px hero at the top. ## Elevation The system has **no shadow tier**. The page captured a single shadow occurrence (a faint 1px-blur halo under the top-nav band) and otherwise relies entirely on 1px hairline rules in `{colors.ink-muted}` (#696d70) to separate cards. There are no drop shadows, no surface ladders, no atmospheric tints — depth is structural rule discipline rather than light-and-shadow. - **Flat (no shadow):** every card, every section block, the footer — 99% of surfaces. - **Hairline outlines:** 1px in `{colors.ink-muted}` divides cards; 1px in `{colors.hairline}` (#b4b4b4 declared as `--containerBorder`) wraps the outer page container. - **Tonal surface tier:** a single faint `{colors.surface-1}` (#f4f5f7) band appears on the top-nav-fade region; otherwise the canvas stays pure white throughout. ## Shapes The radius scale is **near-zero**: - `{rounded.none}` 0px — every card, every photo thumbnail, every button, every input. The dominant value. - `{rounded.xs}` 5px — a single chip lockup uses this radius; it is the only non-zero, non-circular shape in the system. - `{rounded.full}` 9999px (50% on square elements) — used only on the seven circular icon buttons in the top-nav. There is no 4px, 6px, 8px, or 12px tier. The print-broadsheet decision is binary: square everything, except the icon-button circles. Adding even a 4px corner softness would shift the page from wire-service authority toward consumer-SaaS, which the editorial brand actively resists. ## Components **`hero-heading`** — The signature display moment. DIN 2014 at 58px weight 700 with -0.96px tracking, rendered in `{colors.ink-muted}` rather than pure black (the lead headline reads as a warm graphite gray, deliberately softer than the secondary card headlines). 0 padding; the headline floats inside its column without a card surface. **`section-heading`** — DIN 2014 at 28px weight 700 with -0.32px tracking. The standard headline tier for story cards below the hero, rendered in ink black. **`section-kicker`** — The brand signature. DIN 2014 at 12px weight 700 UPPERCASE with 1.6px tracking, rendered in crimson `{colors.primary}`. Appears above every section block ("WASHINGTON & POLITICS", "CONGRESS", "MAGAZINE", "STATES"). **`body-paragraph`** — DIN 2014 at 16px weight 500, used for navigation labels and primary body running text. **`body-paragraph-muted`** — `{colors.ink-muted}` text at `{typography.caption}` (10px UPPERCASE) for byline rows, timestamps, and inline metadata. **`byline`** — The metadata fingerprint of the page. DIN 2014 at 10px weight 500 UPPERCASE with 1.6px tracking, rendered in `{colors.ink-muted}`. Carries every "By [Author]" line and every "X HOURS AGO" timestamp below a headline. **`button-primary`** — Black `{colors.ink}` fill, white text, 0 radius, 12x8 padding, 44px height. The primary CTA is monochrome black — the brand crimson never appears here. "Subscribe" and "Sign in" are the canonical instances. **`button-secondary`** — White `{colors.canvas}` fill, ink text, 1px `{colors.hairline}` border, 0 radius, 12x8 padding, 44px height. Used for tertiary actions. **`top-nav`** — White `{colors.canvas}` surface, ink text, 64px height, 1px bottom hairline rule. Holds the centered POLITICO wordmark in crimson, with horizontal section navigation below. **`nav-link`** — Transparent background, ink black text in `{typography.body-md}` (16px weight 500). No hover-state pill — the link just changes color on hover. **`card`** — White `{colors.canvas}` surface, 0 corner radius, separated from siblings by 1px hairline rules in `{colors.ink-muted}`. The default story card holds a 16:9 photograph, an UPPERCASE kicker, a 28px headline, and a byline row. **`story-headline`** — DIN 2014 at 28px weight 700 — the default headline rendered inside every story card. **`story-headline-feature`** — Jubilat serif at 28px weight 700 — used only inside the Magazine promo block. The serif tier signals longform feature against the daily-news grotesk grid. **`text-input`** — White `{colors.canvas}` surface, ink black text, 1px `{colors.hairline}` border, 0 radius, 0x5 padding, 40px height. Plain rectangular search input — no rounding, no focus glow. **`icon-button`** — Transparent background with a 50% radius rendering a circle on a 40px square. The only rounded shape on the page; used in the top-nav for share, search, and account icons. ## Do's and Don'ts **Do** treat crimson `{colors.primary}` (#d71920) as a masthead-and-kicker token, not as a CTA fill. The single move that defines this system is keeping the brand voltage outside the button layer — Subscribe and Sign in render in black, not red, so the red can carry "this is POLITICO" duty across the wordmark and every section heading. **Do** use 1px hairline rules in `{colors.ink-muted}` (#696d70) to divide cards. The graphite gray does triple duty as running-text color, timestamp tone, and hairline rule — keeping a single neutral across all three roles is what reads as newspaper-grade structural discipline. **Do** set every section kicker in 10-12px DIN 2014 UPPERCASE with 1.6px tracking. The tracked-uppercase tier is POLITICO's typographic fingerprint; it appears 100+ times on the homepage and is the single distinguishing feature between this and any other wire-service publication. **Do** scope the Jubilat serif tier to the Magazine promo block only. The serif quotes the print-edition longform feature — using it anywhere in the daily-news grid breaks the signal. **Don't** add an 8px or 12px corner radius to story cards. The system uses 0px on every card and 50% only on icon-button circles; introducing a middle radius tier would shift the page from broadsheet to SaaS marketing. If you need to soften a surface, increase its hairline weight to 2px instead. **Don't** use `{colors.primary}` (#d71920) on a Subscribe pill or any CTA fill. The brand voltage is text-and-border only across 92 of its 99 occurrences. For a primary action, use `{colors.ink}` (#000000) on `{colors.canvas}` (#ffffff). Filling a pill with crimson would dilute the masthead signal. **Don't** mix the Jubilat serif into the same headline lockup as the DIN 2014 grotesk. The two faces are scoped to different page zones (Magazine block vs daily-news grid) — combining them in one composition would read as a system fault. **Don't** introduce a third typeface for a "developer" or "code" voice. The system has no monospace tier — DIN 2014 carries every spoken role from 58px hero down to 10px UPPERCASE caption. Reaching for a monospace would push the page toward a documentation site rather than a wire service. ## Known Gaps - **Hover and focus states:** the resting states of `{component.button-primary}`, `{component.nav-link}`, and `{component.text-input}` are captured; hover backgrounds, focus rings, and disabled tints are not exposed on the marketing surface. - **Form input error states:** `{component.text-input}` carries the resting state only; validation styling lives inside the subscription-flow product surface and is not represented here. - **Dark mode:** the captured surface is light-only. A dark crimson variant (`{colors.ink-deep}` — #282d40) is declared but absent from the rendered light page. - **Motion:** the homepage carousel uses Swiper.js (declared as `--swiper-theme-color`) but the spec captures end-state values only. Easing curves and transition durations are not represented. - **Article-detail surfaces:** this DESIGN.md captures the homepage only. The article-detail view runs a different type ladder (longer body measure, AGaramondPro-equivalent serif for running text, drop-cap on lead paragraphs) and is not represented. - **Pro / Magazine subscription surfaces:** POLITICO Pro (the subscription product) and the Magazine subscription flow live on separate hosts with their own token vocabularies — neither is included here. - **Live-flag and breaking-news red:** the saturated `{colors.primary-saturated}` (#ff0000) appears 34 times but the semantic rules governing when it replaces the brand crimson on a live-news label are not exposed in the static homepage capture.