What is Axios's primary brand color?

Axios runs a deep navy accent #104ac2 as the single chromatic voltage in the chrome. The hex is wired into the design system as --color-accent-blue-core, --bg-interactive-primary, --border-interactive-primary, and --text-interactive-secondary. It appears 26 times on the captured homepage — 12 as text, 12 as border, 2 as background — carrying link color, active-state borders on category chips, the 'Sign in' pill background, and the leading colored dot that marks each section chip. Every other color in the visible chrome is structural: an off-black ink ladder, an off-white canvas, a near-white hairline. The deep navy is the only color that ever indicates an interactive affordance — clicking, hovering, or section identity all run through it.

What typefaces does Axios use, and why sans headlines with serif body?

Axios runs NB International Pro for every headline and UI tier, Atiza for every body and dek tier. NB International Pro is a contemporary humanist sans used at 12px / 400 for nav labels, 14px / 400 (uppercase, 0.7px tracked) for section labels, 16-18px / 400 for sub-headings, and up to 40px / 400 for the lead-story headline. Atiza is a contemporary serif used at 18px / 400 for story decks and bullet-list previews. The inversion — sans headline, serif body — is the opposite of the traditional newspaper convention and was a deliberate brand decision at the 2017 launch. Inter and Source Serif Pro are the closest open-source substitutes.

What is the deal with the pill-rounded section chips?

The pill chip with a leading colored dot is the structural signature of the brand. Each chip uses a 100px corner radius (rendered as a full pill at the small heights it appears at), a near-white or pale-tint fill, the off-black ink for text, and a small leading dot that color-codes the section topic (Politics, Energy & Climate, Technology, World). The chip appears at every level of navigation — the top-nav category strip, the inline section tag above each story headline, and the 'Continue reading' affordance below story decks. The structural move is to let the chip shape carry section identity in monochrome and reserve the deep-navy accent for true interactive state.

Why is Axios's background #f5f5f5 instead of pure white?

The homepage canvas sits at #f5f5f5 — a slightly-gray off-white — rather than pure #ffffff because the slim black top-nav band reads softer against an off-white floor than against a glare-white surface. The off-white also lifts the story-cell white surfaces a half-step off the canvas, giving the grid a subtle tonal lift without any card border or shadow. The merged token in the design system absorbs several near-white variants (a pale red, a pale green, a pale blue, a pale yellow) that handle inline-callout background fills, but the dominant homepage background is the single off-white #f5f5f5. Pure white exists in the CSS as --color-white and renders only on the inset story-card surfaces sitting on top of the canvas.

Can I use this DESIGN.md to build my own editorial 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 Axios's specific moves: sans-headline / serif-body inversion, single deep-navy accent for the interactive layer, pill-rounded section chips with leading colored dots, off-white canvas instead of pure white, and the Smart Brevity dek-first paragraph rhythm. You can reference the tokens directly: every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. One caveat: the pill chip with leading dot is a strong brand signature — borrowing it verbatim would read as a clone. Adapt the shape and the monochrome-with-dot pattern rather than copying it whole.

Axios Design System

Axios's homepage as a DESIGN.md file — NB International Pro sans headlines, Atiza serif body, a single deep navy CTA, and the signature pill-rounded section chips.

About Axios DESIGN.md

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

News & Publishing

Axios's homepage runs on a typographic inversion. The headlines are sans-serif (NB International Pro at 40px / 400), the body is serif (Atiza at 18px / 400). Every newspaper Axios competes with — the Washington Post, the New York Times, Bloomberg — does the opposite: serif headlines, sans body. Axios flipped the convention in 2017 when the publication launched, and the chrome still carries that decision. The top-nav band is a slim black strip with the "AXIOS" wordmark rendered in Atiza serif caps at the center. Below it: a packed two-column news grid against a near-white #f5f5f5 canvas, lead story top-left with a square photo, supporting columns to its right, no marketing hero, no rotating cover image, no full-bleed gradient.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 11 color tokens organized around an off-black ink #333335 that carries 974 occurrences in the captured page (508 text, 465 border) and an off-white surface #f5f5f5 that handles every background fill. A single deep navy #104ac2 — wired as `--color-accent-blue-core` and `--bg-interactive-primary` — serves as the link color, the active-state border, the "Sign in" pill fill, and the leading colored dot inside category chips. Twelve typography tokens cover NB International Pro at 12 / 14 / 16 / 18 / 26 / 40px in weights 300 / 400 (the system has no weight-700 sans anywhere), plus Atiza serif at 18px / 400 for the body-dek tier. Sixteen components describe the slim top-nav, the pill-rounded section chip with leading colored dot, the story cell with square photo, the bullet-list article preview, the newsletter signup, and the consent overlay.

Feed this file to an AI coding tool and it reproduces Axios's specific moves: sans headline / serif body inversion, single deep-navy accent reserved for the interactive layer, pill-rounded section chips that mark the publication's structural signature, the off-white canvas that distinguishes the chrome from every plain-white peer, and the Smart Brevity editorial rhythm of dek-first paragraphs and tight bullet structure. The one move worth borrowing for any news product: the willingness to commit to one accent and stop adding category-tag colors. Most editorial sites paint every section a different color; Axios trusts the chip shape and the leading dot to carry section semantics in monochrome.

What makes it distinct

Sans headlines, serif bodyNB International Pro at weight 400 carries headlines up to 40px while Atiza serif at 18px carries story decks, the inverse of every traditional newspaper
Black-and-white-and-bluethe entire chrome runs in a charcoal-and-near-white ladder with a single deep navy #104ac2 for accents, no secondary or tertiary brand colors
Pill-rounded section chipsthe 100px-radius category chip with a leading colored dot is the brand's structural signature, used for every section navigation and inline tag
Smart Brevity layoutbullet-list articles, dek-first decks, and tight 8px vertical rhythm reflect the publication's editorial format directly in the chrome
Off-white canvasthe homepage background is #f5f5f5 rather than pure white; the slightly-gray floor softens the contrast with the black top-nav band

Live at axios.com

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

axios.com

Explore Axios

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.

Axios design system FAQ

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

Axios — official site

Axios's public homepage — 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.