What is POLITICO's primary brand color?

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.

What typeface does POLITICO use, and what should I use as a substitute?

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.

Why are POLITICO's cards completely square?

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.

Why is so much text on POLITICO in UPPERCASE with wide tracking?

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.

Can I use this DESIGN.md to build my own React news site?

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.

POLITICO Design System

POLITICO's homepage as a DESIGN.md file.

About POLITICO DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source politico.com

News & Publishing

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."

What makes it distinct

Brand red as masthead onlycrimson appears 99 times but never on a CTA, reserved for the wordmark, section kickers, and a single LIVE flag
DIN 2014 across every tierdisplay headlines, navigation, body, and tiny UPPERCASE kickers all run the same condensed grotesk in three weights
Tracked-UPPERCASE metadata10-12px DIN 2014 at 1.6px tracking carries every section label, byline, and timestamp on the page
Square hairline gridcorner 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 signalGeorgia/Jubilat appears just 12 times, scoped to the Magazine block, so the serif reads as a longform-feature flag against the daily-news grotesk

Live at politico.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

politico.com

Explore POLITICO

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

POLITICO design system FAQ

Common questions about POLITICO's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

POLITICO — official site

POLITICO's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.