What is The Information's primary brand color?

The brand voltage is a saturated red-magenta wired into CSS as --primary-magenta. It appears 79 times across the captured page — 35 as text, 40 as border, 4 as background fill. The dominant role is the Subscribe button background and the email-input border in the masthead signup widget; secondary roles include inline breaking-news flags and the underline accent on the hover state of certain category tags. Every other chromatic moment on the page belongs to story thumbnails (photography supplied by reporters, not brand chrome). The single-voltage discipline matches the publication's editorial confidence — one magenta, paywall-only.

What typefaces does The Information use, and what are the substitutes?

The system runs four Suisse fonts from the Swiss Typefaces family, each assigned a single labor. Suisse Works (a contemporary humanist sans, despite the name) handles every editorial display headline at 22-40px / 400. Suisse Neue carries dek paragraphs and longer story summaries at 16-18px / 400 with looser 27px leading. Suisse Int'l does buttons, inputs, and the Subscribe CTA at 14-18px / 400. Suisse Int'l Mono runs every nav link, category tag, timestamp, and section label at 12-18px / 400. The four are licensed; the closest open-source substitutes are Inter for Suisse Neue, Söhne or Inter Display for Suisse Works, and JetBrains Mono for Suisse Int'l Mono — all at the same weights.

Why does The Information use 0px corner radius everywhere?

The captured page registers exactly one rounded surface — the 9999px PRO subscriber-tier pill, used six times. Every other surface (Subscribe button, story cards, email input, category chips, nav band) sits at 0px. The discipline echoes printed-broadsheet typography: pages from The Wall Street Journal or The Financial Times have no rounded corners, no soft edges, only the 1px column rule between stories. Rounding the Subscribe button to 8px would make the page read like a Substack newsletter; the zero-radius geometry signals 'newspaper of record,' not 'creator platform.'

Why is the layout so dense compared to other news sites?

The above-fold band fits roughly 14 stories at once — a lead headline plus four secondary headlines in the main column, four to six subscriber-only callouts in the right rail, and a row of breaking-news flags up top. Story thumbnails sit at 80-120px wide rather than the full-bleed 1440px hero photography that NYT or The Verge lean on. The density mirrors the publication's reporting model — short, scoop-style articles published throughout the day rather than long-form features — and reinforces the price-per-story value proposition the paywall is selling. Sparse hero photography would visually contradict the 'we publish more than you can read' subscription pitch.

Can I use this DESIGN.md to build my own subscription publication?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce The Information's specific moves: pure white canvas, four-font Suisse split (one face per editorial job), zero-radius geometry across every interactive surface, single-magenta voltage reserved for the Subscribe CTA, and broadsheet-style column density. You can also reference values directly: every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. The move worth borrowing only if you can afford four licensed display faces is the strict per-typeface job assignment — most publication sites overload one sans across every tier and the editorial hierarchy collapses.

The Information Design System

The Information's marketing site as a DESIGN.md file — magenta CTA on a black-on-white broadsheet canvas, four Suisse fonts pulling separate jobs, no rounded corners anywhere exce…

About The Information DESIGN.md

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

News & Publishing

The Information's marketing site is composed like a printed broadsheet that happens to load in a browser. The above-fold band stacks a black masthead, a thin horizontal nav rendered entirely in mono small caps, and a three-column story grid: a lead story with a 40px Suisse Works display headline, a four-up cluster of secondary headlines in the same family, and a right rail of subscriber-only callouts in muted gray. Every column is divided from its neighbor by a 1px black rule. Where Bloomberg leans on its orange chrome bar and The Verge runs a neon palette, The Information holds the entire surface to black ink on white paper and lets a single saturated magenta — Primary Magenta, the Subscribe CTA color — do every brand-coded job.

The DESIGN.md file packages the system into a machine-readable spec. Inside: 14 color tokens drawn from the seven-color CSS custom-property palette (--primary-black, --primary-magenta, --primary-pink, --grayscale-gray, --grayscale-charcoal, --grayscale-beige, plus a Pro Gold for subscriber chips), 11 typography tokens spanning the four-font Suisse family — Suisse Works for editorial display, Suisse Neue for dek paragraphs, Suisse Int'l for buttons and forms, Suisse Int'l Mono for nav links and timestamps — 2 corner radius tokens (0px everywhere, 9999px on the single PRO pill), 8 spacing values on a 4px base, and 16 components covering the magenta Subscribe button, the zero-radius story card, the mono nav link, the magenta-bordered text input, and the small-caps category tag.

Feed this file to an AI coding tool and it reproduces The Information's specific moves: pure white canvas instead of cream or off-white, hard-edged 0px geometry rather than the 8-12px corners the rest of the news category leans on, the four-font Suisse split where each face has a single editorial job, and the magenta-as-voltage discipline that keeps every other surface monochrome. The move worth borrowing for any publication site: assign each typeface ONE function and never let display borrow what mono is doing. Most editorial sites overload Inter or Söhne across every tier and lose the typographic signal that separates a body paragraph from a category label.

What makes it distinct

Broadsheet on a screen40px Suisse Works headlines on white, 1px black column rules, magenta confined to the Subscribe CTA
Four Suisse fonts, one labor splitWorks for display, Neue for dek, Int'l for forms, Int'l Mono for nav and timestamps
Zero corner roundingevery card, button, and input renders at 0px radius; only the PRO pill uses 9999px
Single magenta voltagethe Primary Magenta carries 79 occurrences across Subscribe buttons, input borders, and breaking-flag accents
Newspaper density24px gaps between stories, story thumbnails at 80-120px wide, ten-up grid below the fold

Live at theinformation.com

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

theinformation.com

Explore The Information

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.

Other

Specialty colors.

The Information design system FAQ

Common questions about The Information'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.

The Information — official site

The Information'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.