--- version: alpha name: "Axios" website: "https://www.axios.com" description: >- A "Smart Brevity" news startup whose homepage uses a black-and-white-and-blue editorial chrome that puts the journalism over the brand — body runs Atiza serif at 18px / 400 for story decks and NB International Pro sans at 12-14px for nav and bullet metadata, headlines run NB International Pro sans up to 40px / 400, and a single deep navy accent #104ac2 carries the category-tab fills, link color, and the rare CTA. The page opens on a packed two-column news grid against a near-white #f5f5f5 canvas, with a slim black top-nav band carrying the "AXIOS" wordmark in serif caps, no marketing hero, and the signature pill-rounded section chips ("Politics", "Energy & Climate", "World") that became the brand's structural signature when the publication launched in 2017. seo: title: "Axios Design System for React — accent navy #104ac2, NB International Pro, 16 components" metaDescription: "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. Tokens for React, Next.js, and AI coding tools." highlights: - "Sans headlines, serif body — NB 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-blue — the 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 chips — the 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 layout — bullet-list articles, dek-first decks, and tight 8px vertical rhythm reflect the publication's editorial format directly in the chrome" - "Off-white canvas — the homepage background is #f5f5f5 rather than pure white; the slightly-gray floor softens the contrast with the black top-nav band" tags: - "News & Publishing" lastUpdated: "2026-05-19" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | 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. 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.axios.com" title: "Axios — official site" description: "Axios's public homepage — 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 Axios's primary brand color?" answer: "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." - id: "typography" title: "What typefaces does Axios use, and why sans headlines with serif body?" answer: "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." - id: "section-chips" title: "What is the deal with the pill-rounded section chips?" answer: "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." - id: "off-white-canvas" title: "Why is Axios's background #f5f5f5 instead of pure white?" answer: "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." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own editorial 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 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." mockups: - "marketing-hero" - "editorial-article" colors: primary: "#104ac2" primary-deep: "#1c3b7a" ink: "#333335" ink-muted: "#656568" ink-faint: "#bababe" canvas: "#f5f5f5" surface: "#ffffff" hairline: "#e9e9ee" alpha-black: "#000000" typography: display-xl: fontFamily: "\"NB International Pro\", sans-serif" fontSize: 40px fontWeight: 400 lineHeight: 48px letterSpacing: 0 display-md: fontFamily: "\"NB International Pro\", sans-serif" fontSize: 26px fontWeight: 400 lineHeight: 31.2px letterSpacing: 0 heading-md: fontFamily: "\"NB International Pro\", sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 21.6px letterSpacing: 0 body-serif-lg: fontFamily: "\"Atiza\", serif" fontSize: 18px fontWeight: 400 lineHeight: 27px letterSpacing: 0 body-serif-bold: fontFamily: "\"Atiza\", serif" fontSize: 18px fontWeight: 600 lineHeight: 27px letterSpacing: 0 body-md: fontFamily: "\"NB International Pro\", sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 24px letterSpacing: 0 body-md-light: fontFamily: "\"NB International Pro\", sans-serif" fontSize: 16px fontWeight: 300 lineHeight: 16px letterSpacing: 0 caption: fontFamily: "\"NB International Pro\", sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 18px letterSpacing: 0 caption-tight: fontFamily: "\"NB International Pro\", sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 12px letterSpacing: 0 section-label: fontFamily: "\"NB International Pro\", sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20px letterSpacing: "0.7px" nav-link: fontFamily: "\"NB International Pro\", sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 16px letterSpacing: 0 button-md: fontFamily: "\"NB International Pro\", sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 16.8px letterSpacing: 0 rounded: none: "0px" xs: "2px" sm: "4px" lg: "24px" pill: "100px" full: "9999px" spacing: xs: "4px" sm: "8px" md: "12px" base: "16px" lg: "20px" xl: "24px" 2xl: "40px" components: top-nav: backgroundColor: "{colors.alpha-black}" textColor: "{colors.surface}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: "12px" height: "48px" masthead: backgroundColor: "{colors.alpha-black}" textColor: "{colors.surface}" typography: "{typography.display-md}" rounded: "{rounded.none}" padding: "12px" height: "48px" nav-link: backgroundColor: transparent textColor: "{colors.surface}" typography: "{typography.nav-link}" padding: "12px" section-chip: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md-light}" rounded: "{rounded.pill}" padding: "4px 16px 4px 8px" height: "40px" section-chip-active: backgroundColor: "{colors.hairline}" textColor: "{colors.primary}" typography: "{typography.body-md-light}" rounded: "{rounded.pill}" padding: "4px 16px 4px 8px" height: "40px" borderColor: "{colors.primary}" section-label: backgroundColor: transparent textColor: "{colors.ink-muted}" typography: "{typography.section-label}" padding: "0" button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.surface}" typography: "{typography.button-md}" rounded: "{rounded.pill}" padding: "8px 12px" height: "36px" border: "0" button-secondary: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.pill}" padding: "8px 12px" height: "36px" borderColor: "{colors.ink-faint}" hero-heading: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.display-xl}" padding: "0" story-headline: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.display-md}" padding: "0" body-dek: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.body-serif-lg}" body-dek-emphasis: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.body-serif-bold}" caption-meta: backgroundColor: transparent textColor: "{colors.ink-muted}" typography: "{typography.caption-tight}" story-card: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: "24px" borderColor: "{colors.hairline}" text-input: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: "8px 12px" height: "40px" borderColor: "{colors.ink-muted}" link-text: backgroundColor: transparent textColor: "{colors.primary}" typography: "{typography.body-md}" --- ## Overview Axios's homepage runs on a typographic inversion that defines the brand. **Sans-headline, serif-body.** Every newspaper Axios competes with — the Washington Post, the New York Times, Bloomberg, the Wall Street Journal — runs the opposite: serif headlines on top, sans body underneath. Axios flipped the convention at the 2017 launch and the chrome still carries the decision. The lead headline above the fold is NB International Pro at 40px / 400; the dek beneath it is Atiza serif at 18px / 400; the section labels above story groups are NB International Pro caps at 14px / 400 with 0.7px tracking. Where the Post asserts editorial authority through Postoni serif weight 700, Axios asserts it through a humanist sans at modest weight 400. The lighter weight is the signal — confident enough not to shout. The chromatic system is **black-and-white-and-blue.** The entire chrome runs on three colors: an off-black ink ladder (`{colors.ink}` #333335 at 974 occurrences, `{colors.ink-muted}` #656568 at 28), an off-white canvas (`{colors.canvas}` #f5f5f5) lifted with pure-white card surfaces (`{colors.surface}` #ffffff), and a single deep navy accent (`{colors.primary}` #104ac2 at 26 occurrences) reserved for the interactive layer. There is no secondary or tertiary brand color — no Axios green for "Markets," no Axios red for "Politics," no Axios mustard for "Energy." Sections are color-coded only through the small leading dot inside each pill chip; the chip shell stays monochrome. This is the inverse of how most editorial sites work — Bloomberg's section-tag rainbow, the Times's category color-keys, Vox's strip-of-colors. Axios trusts the pill shape and the off-black running text to carry section identity without secondary chromatic voices. The shape language is **pill-as-section.** The pill-rounded category chip with leading colored dot, rendered at a 100px corner radius (which reads as fully-rounded at the 40px heights it appears at), is the structural signature of the brand. It marks every section navigation tab in the top strip, every inline tag above a story headline, and every "Continue reading" affordance below a story dek. The 100px radius value appears in the CSS as the canonical chip radius. The rounded-pill shape is the brand-recognition moment — replacing it with right-angled tags or 4px chips would lose the visual identity that has marked Axios pages since launch. **Key Characteristics:** - Sans-headline, serif-body inversion — NB International Pro at 12-40px / 400 carries every headline tier, Atiza at 18px / 400 carries every body dek. - Single deep-navy accent `{colors.primary}` (#104ac2) reserved for the interactive layer — link color, active-state borders, button fills, leading colored dot inside section chips. 26 occurrences total. - Off-black ink ladder — `{colors.ink}` (#333335) at frequency 974, `{colors.ink-muted}` (#656568) at 28, `{colors.ink-faint}` (#bababe) at 2. - Off-white canvas — `{colors.canvas}` (#f5f5f5) handles 143 background fills; pure `{colors.surface}` (#ffffff) carries inset story-card surfaces only. - Pill-rounded section chip at `{rounded.pill}` (100px radius, rendering as fully-rounded at 40px heights) is the brand structural signature — every section nav, inline tag, and continue-reading affordance. - Slim black top-nav band — `{colors.alpha-black}` (#000000) surface, ~48px tall, with the "AXIOS" wordmark rendered in serif caps at the center. - Atiza serif body weight 400 with 27px line height — Smart Brevity-style dek paragraphs with generous leading. - Section-label uppercase treatment — `{typography.section-label}` at 14px / 400 with 0.7px tracking marks "THE LATEST", "POLITICS", "MARKETS" above story groups. ## Colors ### Brand - **Accent Navy** (`{colors.primary}` — #104ac2): frequency 26 — 12 text, 12 border, 2 background. Wired in CSS as `--color-accent-blue-core`, `--bg-interactive-primary`, `--border-interactive-primary`, `--text-interactive-secondary`. The single chromatic voltage in the chrome — link color, active-state borders on category chips, the "Sign in" CTA pill fill, and the leading colored dot inside section chips. Every interactive affordance routes through this hex. - **Deep Navy** (`{colors.primary-deep}` — #1c3b7a): frequency 2 — both as background fill. Wired as `--bg-nav-primary`, `--color-blue-800`, `--bg-brand-blue-tertiary`. The press / selected state of the accent navy, used on the dark navigation surface variant when it appears. ### Text - **Ink** (`{colors.ink}` — #333335): frequency 974 — 508 text, 465 border. Wired as `--text-primary`, `--color-neutral-700`, `--color-soft-black-core`. The dominant structural color — headlines, body dek, primary nav labels, and 1px hairline rules. Never pure black; the slight warmth in the OKLCH hue (286° chroma 0.003) softens the contrast on the off-white canvas. - **Ink Muted** (`{colors.ink-muted}` — #656568): frequency 28 — 14 text, 14 border. Wired as `--text-secondary`, `--color-neutral-500`, `--border-tertiary`. The section-label tone and timestamp meta — slightly muted from the body ink to push secondary chrome back. - **Ink Faint** (`{colors.ink-faint}` — #bababe): frequency 2 — both as border. Wired as `--color-neutral-300`, `--border-secondary`. The faintest text-on-paper grade in the system — used for tertiary form-input borders and disabled-state strokes. ### Surface - **Canvas** (`{colors.canvas}` — #f5f5f5): frequency 235 — 143 background, 56 border, 36 text. Wired as `--bg-secondary`, `--color-white`, `--color-neutral-100`. The off-white floor of the entire page. The merged token also absorbs a small set of pale tints (a pale red for callouts, a pale green for success, a pale blue for highlighted links) that share the near-white luminance but carry distinct hue accents in CSS. - **Surface** (`{colors.surface}` — #ffffff): pure white. The story-card surface fill that sits on top of the off-white canvas, lifting the cards by a single tonal step. Wired through the same `--color-white` variable as the canvas merge. - **Hairline** (`{colors.hairline}` — #e9e9ee): frequency 21 — 19 border, 2 background. Wired as `--color-zinc-200`, `--border-interactive-secondary-selected`, `--bg-highlight`. The near-white divider tone — 1px rules between story cells and the selected-tab background fill. ### Structural - **Alpha Black** (`{colors.alpha-black}` — #000000): frequency 2 — 1 text, 1 border. Wired as `--color-neutral-900`, `--color-secondary-pitch-black`, `--bg-interactive-tertiary`. Pure black exists in the system but renders only on the slim top-nav band; body text never reaches it. ## Typography ### Font Families The system runs two voices in inversion. **NB International Pro** is a contemporary humanist sans used at 12 / 14 / 16 / 18 / 26 / 40px in weights 300 / 400 for every headline, nav, section-label, button, and caption tier. The system has no weight-700 sans anywhere on the captured page. **Atiza** is a contemporary serif used at 18px / 400 (and 18px / 600 for emphasis-inline ``) for every body dek and bullet-list preview. There is no third typeface — no monospace for code, no script for pull-quotes, no display sans for marketing. NB International Pro speaks the headline, Atiza speaks the body. ### Hierarchy | Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | `{typography.display-xl}` | 40px | 400 | 48px | 0 | Lead-story headline above the fold | | `{typography.display-md}` | 26px | 400 | 31.2px | 0 | Column-story headlines | | `{typography.heading-md}` | 18px | 400 | 21.6px | 0 | Sub-headings, secondary story titles | | `{typography.body-serif-lg}` | 18px | 400 | 27px | 0 | Story decks, bullet-list previews (Atiza serif) | | `{typography.body-serif-bold}` | 18px | 600 | 27px | 0 | Inline `` emphasis inside Atiza body | | `{typography.body-md}` | 16px | 400 | 24px | 0 | Default sans running text | | `{typography.body-md-light}` | 16px | 300 | 16px | 0 | Section-chip label text | | `{typography.caption}` | 12px | 400 | 18px | 0 | Footnote rows, secondary captions | | `{typography.caption-tight}` | 12px | 400 | 12px | 0 | Nav meta, dense caption rows | | `{typography.section-label}` | 14px | 400 | 20px | 0.7px | Uppercase section labels ("THE LATEST", "POLITICS", "MARKETS") | | `{typography.nav-link}` | 16px | 400 | 16px | 0 | Top-nav link labels | | `{typography.button-md}` | 14px | 400 | 16.8px | 0 | Primary and secondary button labels | ### Principles The sans tier sits entirely at weight 400 (with a single 300 chip variant) across every size — there is no weight-700 NB International Pro anywhere on the page. The Atiza body tier mirrors that restraint at weight 400, with a single 600 inline-emphasis variant for `` tags inside body copy. The lighter weights are the signal — Axios's confidence move is the inverse of fintech's weight-300 thinness (Stripe) and traditional newspapers' weight-700 boldness (the Post): a steady weight 400 across every tier that reads as humanist and direct rather than fashionable or commanding. The section-label uppercase treatment with 0.7px tracking is the system's only typographic shout. Every other type tier sits in title case with default tracking; the uppercase-tracked sans label marks structural section breaks and is the only place the chrome takes a typographic pause to label itself. ### Note on Font Substitutes NB International Pro is proprietary. **Inter** at the same weights is the closest open-source substitute — comparable cap height, similar humanist warmth, slightly looser counters at 18-26px. For Atiza, **Source Serif Pro** or **Lora** transfer cleanly at 18px / 400; Source Serif has the contemporary feel that matches Atiza's slight slab. If you need a tighter alternative for the 40px display, **Inter Display** holds up at the larger size. ## Layout ### Spacing System - **Base unit:** 8px — the dominant gap value at frequency 64. - **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.base}` 16px · `{spacing.lg}` 20px · `{spacing.xl}` 24px · `{spacing.2xl}` 40px. - **Section vertical padding:** 40px between major bands (the 0px 0px 40px pattern at frequency 14 marks below-section margin). - **Story-card internal padding:** `{spacing.xl}` (24px) on cards, `{spacing.lg}` (20px) on dense list items. - **Top-nav padding:** 12px on every side; nav links sit at 12px padding. ### Grid & Container - **Max content width:** ~1280px on the main news grid, narrower (~960px) on long-form article pages. - **Above-fold layout:** two-column grid — lead story (~720px) on the left with a square photo and 40px headline above its dek, supporting stories in a stacked right column (~480px) with smaller photos and 26px headlines. - **Section-chip strip:** horizontal row of pill-rounded chips above the news grid, scrollable on narrow viewports, each chip carrying a leading colored dot and section name. - **Below-fold sections:** themed bands grouped by topic (Politics, Markets, Energy & Climate) each headed by an uppercase section label and an opening 40px lead headline. ### Rhythm The page runs on **tight Smart Brevity rhythm.** Vertical gaps stay tight (8-12px) inside story cells, then open up (40px) between major bands. There is no atmospheric pause between sections — every band terminates on the same off-white canvas, and depth comes from typographic hierarchy (section label + lead headline + dek) rather than from card surfaces or background-color shifts. The bullet-list article preview is the brand's distinctive editorial rhythm: a dek paragraph, then 2-4 bulleted "Why it matters" / "What they're saying" / "The big picture" subhead-and-paragraph pairs. ## Elevation The system has **no shadow tier** on the visible chrome. Story cards, section chips, and the consent overlay all sit flat on the off-white canvas; depth comes from the half-step tonal lift between `{colors.canvas}` (#f5f5f5) and `{colors.surface}` (#ffffff) — a card surface sits a half-shade brighter than the page floor, which reads as elevation without any shadow being drawn. - **Flat (no shadow):** top-nav, masthead, story grid, section chip strip, footer — 100% of visible homepage surfaces. - **Tonal lift:** pure-white `{colors.surface}` cards sit on off-white `{colors.canvas}` — the small luminance gap reads as elevation without drawn shadow. - **Hairline dividers:** 1px `{colors.hairline}` (#e9e9ee) rules separate story cells, the top-nav from the masthead, and consent-overlay rows. ## Shapes The radius scale is **binary plus pill.** - `{rounded.none}` 0px — every story card edge, masthead surface, top-nav, story-cell — the dominant value on the page. - `{rounded.xs}` 2px — frequency 6; small chip dots and inline-icon backgrounds. - `{rounded.sm}` 4px — frequency 20; story-card corners, secondary button corners, text-input fields. - `{rounded.lg}` 24px — frequency 3; large category chips on themed-section pages. - `{rounded.pill}` 100px — frequency 8; the section chip with leading colored dot; renders as a fully-rounded pill at the 40px heights it appears at. - `{rounded.full}` 9999px — frequency 21; circular avatar bubbles and icon-only buttons in the masthead. The pill chip with leading colored dot is the brand structural signature. It marks every section navigation tab, every inline tag above a headline, and every "Continue reading" affordance — the single rounded-pill shape that color-codes section identity through the leading dot while keeping the chip shell monochrome. ## Components **`top-nav`** — Pure-black `{colors.alpha-black}` surface, ~48px tall, 12px padding. Holds nav links and the right-aligned "Sign in" pill flush-right. Slim editorial band rather than a hovering bar. **`masthead`** — Pure-black surface with the "AXIOS" wordmark rendered in serif caps at the center, 48px tall, 12px padding. The visual anchor — Axios's only typographic-display moment in serif (the rest of the headlines run sans). **`nav-link`** — Transparent fill, white text in `{typography.nav-link}` (16px / 400), 12px padding. Renders on the black top-nav surface. **`section-chip`** — Off-white `{colors.canvas}` fill, ink text in `{typography.body-md-light}` (16px / 300), fully-rounded `{rounded.pill}` shape, 4px right + 16px left padding asymmetric to make room for the leading colored dot. 40px height. The brand structural signature. **`section-chip-active`** — Pale-tint `{colors.hairline}` fill with a 1px `{colors.primary}` border and ink-replaced-with-navy text. The "currently viewing" affordance. **`section-label`** — Ink-muted `{colors.ink-muted}` text in `{typography.section-label}` (14px / 400 uppercase with 0.7px tracking). "THE LATEST" / "POLITICS" / "MARKETS" labels above story groups. **`button-primary`** — The single CTA. Accent-navy `{colors.primary}` fill, white text, fully-rounded `{rounded.pill}` shape, 8×12px padding, 36px height. "Sign in" is the canonical instance, fixed in the right of the top-nav. **`button-secondary`** — White `{colors.surface}` fill, ink text, 1px `{colors.ink-faint}` border, fully-rounded pill, 8×12px padding, 36px height. **`hero-heading`** — Ink `{colors.ink}` text in `{typography.display-xl}` (40px / 400). The lead-story headline above the fold. **`story-headline`** — Ink text in `{typography.display-md}` (26px / 400). Column-story headlines in the supporting strip and themed-section leads. **`body-dek`** — Ink text in `{typography.body-serif-lg}` (Atiza 18px / 400, 27px line-height). The story dek — Smart Brevity-style opening paragraph in serif. **`body-dek-emphasis`** — `` inline emphasis in `{typography.body-serif-bold}` (Atiza 18px / 600). Used for "Why it matters" lead-in phrases inside the dek. **`caption-meta`** — Ink-muted text in `{typography.caption-tight}` (12px / 400). Timestamp meta, byline rows, footnote captions. **`story-card`** — White `{colors.surface}` fill, ink text, `{rounded.sm}` 4px radius, 24px padding, 1px `{colors.hairline}` border. The default story-cell surface that sits lifted off the off-white canvas. **`text-input`** — White surface, ink text, 1px `{colors.ink-muted}` border, `{rounded.sm}` 4px radius, 8×12px padding, 40px height. The newsletter-signup input is the canonical instance. **`link-text`** — Inline accent-navy `{colors.primary}` text in `{typography.body-md}`. Every inline link in body and dek copy. ## Do's and Don'ts **Do** keep the typographic inversion intact: NB International Pro sans for every headline tier, Atiza serif for every body dek. Reversing it (serif headlines on sans body) erases the brand decision that has defined Axios since 2017. **Do** reserve the deep-navy accent `{colors.primary}` (#104ac2) for the interactive layer only — link color, active-state borders, button fills, and the leading colored dot inside section chips. Letting it leak into headlines or body text breaks the single-voltage discipline. **Do** use the pill-rounded section chip with leading colored dot for section nav, inline tags, and "Continue reading" affordances. The chip shape is the brand structural signature; section semantics live in the leading dot, not in the chip-shell color. **Do** sit cards on the off-white canvas with a half-step tonal lift to pure white. Adding a drop shadow breaks the editorial-flat treatment that defines the chrome. **Don't** render the headline tier at weight 700. The system sits at weight 400 across every size; bumping to 700 turns the editorial sans into a generic SaaS headline and undercuts the humanist-confidence move. **Don't** color-code sections by tinting the chip shell — paint the leading dot, not the pill. Multi-color chip fills (a green chip for Markets, a red chip for Politics) compete with the single accent voltage and turn the navigation into a chromatic rainbow. **Don't** use `{colors.canvas}` (#f5f5f5) as a card fill — it is the page floor, not a surface tone. For cards, use `{colors.surface}` (#ffffff); the half-step luminance gap is the entire elevation strategy. **Don't** introduce a 4px or 8px corner radius for section chips. The chip uses `{rounded.pill}` (100px) and renders as a fully-rounded pill; a soft-rounded variant breaks the chip shape that defines the brand. ## Known Gaps - **Article surfaces:** this DESIGN.md captures the homepage only. The article-read page, the bullet-list "Why it matters" layout, and the live-coverage chrome each carry their own typographic scales and section-callout treatments not represented here. - **Hover and focus states:** the captured surface exposes resting states only; hover variants for the section chips, top-nav links, and "Sign in" CTA are not visible in the static capture. - **Newsletter surfaces:** Axios's newsletter family (Pro, AM, PM, Macro, China, Markets) carries its own per-newsletter chrome and accent colors that are not represented here. - **Local-city editions:** Axios Local (Boston, Charlotte, Denver, etc.) layers a city-specific accent on top of the brand chrome that is absent from the national homepage. - **Dark mode:** the captured homepage is light-only; a dark variant may exist in the email newsletter rendering but is not represented here. - **Motion:** the lead-story photograph occasionally swaps via fade and the section-chip strip can scroll horizontally on narrow viewports; the spec captures end-state values only. - **Consent overlay:** the OneTrust-style fides consent overlay carries its own typographic scale and pale-tint button variants. The CSS variables for it (`--fides-overlay-*`) are extensive but the rendered chrome on the homepage is a single dismissible bar.