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.
Add shadcn.io to your AI agent. · Pro It installs blocks, icons and templates in your design system from a prompt, with Pro.
Set up MCPAbout
Curated by Dov Azencot · Updated May 19, 2026 · Source politico.com (opens in a new tab)
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 colors 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 15 components 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."
5
politico.com
A snapshot of the brand in production. Scroll the frame to see the whole page.
Colors
POLITICO's system runs on #d71920 as its primary voltage, used in 1 of 15 components. Type is set in din-2014 across 11 tokens from 10px to 58px, weights 500–700. Shape language is sharp — components average 0px corner radius, favoring crisp rectangles.
Sparing, CTA-only voltage · 2
Page and card backgrounds · 2
Headlines, body, captions · 5
Dividers, outlines, rules · 1
Typography
Set in din-2014 across 11 tokens, from 10px to 58px, weights 500–700. Shown in its own stack: where the font isn't installed, the fallback the file names stands in.
Layout
3 corner radii and 7 spacing values. Shape language: sharp.
Components
Each rendered from its tokens (color, type, radius, padding) on POLITICO's own canvas.
In use
POLITICO's tokens on the kind of product it builds.
Build something people actually use.
A short paragraph of marketing copy that previews how the brand's display tier and body tier read together. Two sentences is usually enough.
The quiet collapse of an old idea
For decades the consensus held that the system would correct itself. Then it didn't. This is the inside story of what changed, told by the people who watched it unravel.
"Nobody noticed because the failure was indistinguishable from progress."
By Sam Reporter · Updated 2 hours ago
FAQ
Common questions about POLITICO's tokens, components, and how to use this DESIGN.md in your project.
Read next
Specs, directories, and component libraries that pair with this design system.
Use it
One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.
One machine-readable file: every color, type, radius, spacing, and component token of POLITICO.
Drop it into Claude, Cursor, or GitHub Copilot. The agent writes React components and Tailwind classes that match POLITICO's visual language.
Or paste the values into your Tailwind config, CSS variables, or component library: every color, size and radius is a quoted, ready-to-copy value.
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:
{colors.primary} — #d71920) carries the wordmark and every section kicker; never used as a CTA fill. 99 total occurrences.{colors.hairline}) divide cards instead of shadows or surface tones; depth comes from rule discipline.{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.{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.{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.{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.{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.{colors.ink-deep} — #282d40): frequency 1. A near-navy dark used inside one specific top-nav search-input background.{colors.ink-darkest} — #121522): frequency 1. A near-black with a blue cast used on a single elevated dark band.{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).{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.{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.{colors.link-default} — #007aff): frequency 0 rendered. Declared as --swiper-theme-color for the carousel widget; not actively rendered on the captured marketing surface.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.
| 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 |
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.
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.
{spacing.xs} 3px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.base} 15px · {spacing.lg} 30px · {spacing.xl} 32px · {spacing.2xl} 45px.{spacing.base} (15px) vertical, with a 15px / 30px / 30px bottom-heavy pattern on photo-led story cards.{spacing.base} (15px) vertical, {spacing.lg} (30px) horizontal.{spacing.sm} (8px) — the gap between an UPPERCASE kicker, the headline, and the byline row below.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.
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.
{colors.ink-muted} divides cards; 1px in {colors.hairline} (#b4b4b4 declared as --containerBorder) wraps the outer page container.{colors.surface-1} (#f4f5f7) band appears on the top-nav-fade region; otherwise the canvas stays pure white throughout.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.
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 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.
{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.{component.text-input} carries the resting state only; validation styling lives inside the subscription-flow product surface and is not represented here.{colors.ink-deep} — #282d40) is declared but absent from the rendered light page.--swiper-theme-color) but the spec captures end-state values only. Easing curves and transition durations are not represented.{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.News & Publishing
More DESIGN.md files in News & Publishing.
Pricing
The DESIGN.md files are free. Pro adds 6,000+ blocks, premium templates and the MCP server, so your AI editor builds in your system for you.
4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.
Billing
Billed once a year in USD. Cancel anytime.
For personal projects & open source
$32instead of $49/mo
$389 billed yearly
For freelancers, agencies & startups
$66instead of $99/mo
$789 billed yearly · ≈ $13/dev/mo
For companies with larger teams
$132instead of $199/mo
$1,589 billed yearly
Billed once a year in USD. Cancel anytime.
For personal projects & open source
$32instead of $49/mo
$389 billed yearly
For freelancers, agencies & startups
$66instead of $99/mo
$789 billed yearly · ≈ $13/dev/mo
Everything in Individual, plus
For companies with larger teams
$132instead of $199/mo
$1,589 billed yearly
Everything in Team, plus
Every block, template and icon, installed by your AI agent in your design system. The DESIGN.md files stay free.