--- version: alpha name: "Axios" description: "Axios was founded in 2017 by Jim VandeHei, Mike Allen, and Roy Schwartz (the founders of Politico) on a single editorial premise: **Smart Brevity** — short newsletters and articles structured as bullet lists with branded \"section labels\" (\"Why it matters:\", \"The big picture:\", \"What's next:\") that signal information hierarchy at a glance. The web product ports that editorial system to chromatic and typographic form: Atiza serif (a Tiempos cousin) handles all editorial body and headlines; NB International Pro sans (Klim/Sowersby) carries chrome and the smart-brevity section labels; the signature Axios blue (`#0044a5`) marks links, CTAs, and hover states; and the **TIME-BARS** — bold horizontal rules with section labels like \"Why it matters:\" — punctuate every article. Density is high but rhythmic — bullet-first prose breaks dense reporting into scannable chunks, making the page feel both substantive and fast. Where Bloomberg runs terminal-orange and the FT runs salmon-pink, Axios runs **smart-brevity-blocky** — white canvas, blue-accent, time-bar punctuation, and a typographic system that mirrors the editorial system that built the brand." colors: bg: "#ffffff" bg-section: "#ffffff" bg-section-newsletter: "#fafafa" bg-dark: "#1a1a1a" bg-darkest: "#000000" surface: "#ffffff" surface-soft: "#f5f5f5" surface-strong: "#e8e8e8" surface-quote: "#f0f4fb" surface-blue-tint: "#e6eef9" text: "#333335" text-strong: "#000000" text-muted: "#666668" text-soft: "#888889" text-faint: "#aaaab0" text-on-blue: "#ffffff" text-on-dark: "#ffffff" brand: "#0044a5" brand-hover: "#003a8c" brand-active: "#002e72" brand-soft: "#cfdaef" brand-deep: "#001f4d" brand-secondary: "#d6062b" link: "#0044a5" link-hover: "#003a8c" link-visited: "#666668" on-brand: "#ffffff" on-dark: "#ffffff" border: "#e0e0e0" border-soft: "#f0f0f0" border-strong: "#999999" border-rule: "#000000" border-blue: "#0044a5" shadow-card: "rgba(0,0,0,0.06)" shadow-elev: "rgba(0,0,0,0.1)" shadow-modal: "rgba(0,0,0,0.3)" scrim: "rgba(0,0,0,0.6)" success: "#2a8a4f" success-soft: "#dff0e7" warning: "#cc7a00" warning-soft: "#fde9cc" danger: "#d6062b" danger-soft: "#fbd6dc" info: "#0044a5" info-soft: "#cfdaef" time-bar: "#000000" time-bar-bg: "#f5f5f5" newsletter-banner: "#0044a5" typography: display: fontFamily: "Atiza" fontSize: "72px" lineHeight: 1.6 letterSpacing: "-0.025em" body: fontFamily: "Atiza" fontSize: "18px" lineHeight: 1.6 mono: fontFamily: "NB International Pro Mono" rounded: button: "4px" card: "6px" pill: "9999px" spacing: xs: "2px" sm: "4px" md: "12px" lg: "24px" xl: "40px" --- ## Overview ## Overview Axios was founded in 2017 by Jim VandeHei, Mike Allen, and Roy Schwartz (the founders of Politico) on a single editorial premise: **Smart Brevity** — short newsletters and articles structured as bullet lists with branded "section labels" ("Why it matters:", "The big picture:", "What's next:", "Yes, but:", "Catch up quick:") that signal information hierarchy at a glance. The premise reshaped political and business news in the late 2010s and made Axios one of the fastest-growing news brands of the past decade. The visual system on axios.com ports that editorial system to chromatic and typographic form. **Atiza** — a Tiempos cousin (the Storm/Klim humanist serif lineage) — handles all editorial body and headlines, giving the page a serious-broadsheet feel that contrasts with the brand's reputation for short bites. **NB International Pro** (Klim/Sowersby) carries chrome and the smart-brevity section labels. The signature **Axios blue** (`#0044a5`) marks links, CTAs, and hover states; and the **TIME-BARS** — bold 4px horizontal rules with section labels like "Why it matters:" — punctuate every article. The combination is paradoxical: a serif-serious aesthetic married to a bullet-first prose system that breaks the broadsheet convention. Density is high but rhythmic. Where the FT and Reuters fill columns with continuous prose, Axios breaks dense reporting into bullet-first chunks. Each article opens with a 1–2 sentence Atiza standfirst, then a "Why it matters:" block (gray-tinted backdrop, bold uppercase label, sans 16/700 summary), then bullet lists with hanging indents and bold blue square markers. The TIME-BARS and section labels turn the page into a structured outline — the reader can scan for "What's next:" or "By the numbers:" without reading sequentially. This is the single most-identifying decision in the Axios visual system. The chromatic system is **white + blue + black**, with red (`#d6062b`) reserved for breaking and live indicators. Pure white canvas. Axios blue (`#0044a5`) for primary action and accents. Black `#000` for the time-bar rules and bullet markers. Section navigation, byline meta, photo credits, and the time-bar labels all run in NB International Pro uppercase with tracked letter-spacing — a sans-emphasis vocabulary that contrasts with the Atiza serif body. Newsletter is the brand's center of gravity. Axios AM (the morning newsletter) ships every weekday morning with the same TIME-BAR / section-label / bullet structure as the web product. The web header carries a sticky "Get smarter, faster" newsletter banner in Axios blue at the top of every page — newsletter-first marketing. Estimated-read pills mark every story with reading time ("4 min read") in the uppercase NB International Pro tracked-meta vocabulary. **Key Characteristics:** - **TIME-BARS** — 4px black horizontal rule with section labels ("Why it matters:", "The big picture:", "What's next:") in uppercase NB International Pro 13/700 tracked 0.06em - **Smart-brevity bullet structure** — every article breaks into bullet-first prose with bold blue square markers - **Atiza serif** for editorial body — Tiempos cousin (Storm/Klim humanist serif lineage) - **NB International Pro sans** for chrome and section labels — Klim/Sowersby - **Axios blue (`#0044a5`)** for primary action, links, focus rings, newsletter banners - **Why it matters: blocks** — gray-tinted backdrop with uppercase label and bold sans 16/700 summary - **Estimated-read pills** — "5 min read" in blue-tinted backdrop, the smart-brevity signature meta - White canvas with rhythmic density — bullet-first prose breaks dense reporting into scannable chunks - Newsletter-first marketing — sticky "Get smarter, faster" banner in blue - Square broadsheet aesthetic — 0px on cards, 4px on buttons and inputs - Body color `#333335` — observed on axios.com, slightly warm - Axios Local sub-brand for city editions - "Catch up quick:" / "Yes, but:" / "By the numbers:" — branded section vocabulary ## Colors ### Primary - **White Canvas** (`#ffffff`): editorial reading ground, broadsheet weight - **Axios Blue** (`#0044a5`): the brand action color. Primary CTA fill, inline link, hover underline, focus ring, newsletter banner, estimated-read pill. - **Body Black** (`#333335`): primary text — observed on axios.com, slightly warm ### Brand & Sub-Brand - **Brand Blue** (`#0044a5`) - **Blue Hover** (`#003a8c`) - **Blue Active** (`#002e72`) - **Blue Soft** (`#cfdaef`) — selected nav background, badge tint - **Blue Deep** (`#001f4d`) — heaviest blue - **Brand Red** (`#d6062b`) — breaking news, live indicator (rare use) - **Newsletter Banner** (`#0044a5`) — same as brand - **Axios Pro** (`#0044a5`) — Pro tier marker - **Axios Local** (`#0044a5`) — city editions share the same blue ### Accent - **Editorial Link Blue** (`#0044a5`) — inline body links - **Link Hover** (`#003a8c`) - **Link Visited** (`#666668`) — visited dims ### Interactive - **Default Link** (`#0044a5` text + underline-on-hover) - **Active CTA** (blue fill on white text) - **Disabled** (`#aaaab0` text, `#e8e8e8` fill) - **Selected** (blue-soft chip with blue text) ### Neutral Scale - **Body** (`#333335`) — observed on axios.com (rgb 51, 51, 53) - **Strong Black** (`#000000`) — TIME-BAR rules, max-contrast headlines - **Muted** (`#666668`) — bylines, datelines - **Soft** (`#888889`) — captions, photo credits - **Faint** (`#aaaab0`) — disabled - **Hairline** (`#e0e0e0`) — universal 1px rule ### Surface & Borders - **White Canvas** (`#ffffff`) - **Surface Soft** (`#f5f5f5`) — Why it matters: block backdrop, time-bar zone tint - **Surface Strong** (`#e8e8e8`) — disabled fill - **Surface Quote** (`#f0f4fb`) — blue-tinted pull-quote surface - **Surface Blue Tint** (`#e6eef9`) — selected nav, brand-tinted backgrounds - **Hairline** (`#e0e0e0`) - **Border Strong** (`#999999`) — form input border - **Border Rule** (`#000000`) — TIME-BAR rules, section break ### Shadow Colors Shadows are **neutral black-tinted**, kept light. Axios favors flat broadsheet over elevated UI: - `rgba(0,0,0,0.04) 0 1px 2px` — minimal ambient - `rgba(0,0,0,0.06) 0 2px 6px` — dropdown - `rgba(0,0,0,0.1) 0 8px 20px` — overlay - `rgba(0,0,0,0.3) 0 16px 40px` — modal ### Semantic - **Success** (`#2a8a4f` on `#dff0e7`) — confirmation messages - **Warning** (`#cc7a00` on `#fde9cc`) — amber for advisory - **Danger / Breaking** (`#d6062b` on `#fbd6dc`) — breaking news, form errors - **Info** (`#0044a5` on `#cfdaef`) — info shares brand blue ## Typography ### Font Family **Display & Body**: `Atiza` — a Tiempos cousin in the Storm Type Foundry / Klim Type Foundry humanist serif lineage. Atiza handles all editorial typography on axios.com — both headlines and body. The single-serif discipline is unusual in news design (most peers split display and body into separate serif families); Axios uses one face for both roles. Available in 400, 500, 600, 700. Fallback: `"Tiempos Headline", Georgia, "Times New Roman", serif`. **UI**: `NB International Pro` — Klim Type Foundry's NB International, used for navigation, button labels, bylines, section labels, and the smart-brevity branded labels ("Why it matters:", "The big picture:"). Available in 400, 500, 600, 700. Fallback: `"Helvetica Neue", Helvetica, Arial, sans-serif`. **Sans Emphasis**: `NB International Pro` at weight 700 — used for the TIME-BAR labels and the "Why it matters:" summary text. The sans-emphasis runs in uppercase tracked 0.04em–0.06em, contrasting with the Atiza serif body. **Mono**: `NB International Pro Mono` — used rarely on code blocks. Fallback: `Menlo, Consolas, monospace`. **OpenType features**: Atiza uses standard ligatures and tightly-tuned kerning at display sizes. NB International Pro is used in tracked-uppercase mode for all section labels, button labels, and meta. ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes | |------|------|------|--------|-------------|----------------|-------------|-------| | masthead-wordmark | NB International Pro | 28 | 700 | 1.0 | -0.01em | liga | "axios" wordmark | | headline-mega | Atiza | 56 | 700 | 1.05 | -0.02em | — | Cover-class headline | | headline-jumbo | Atiza | 42 | 600 | 1.08 | -0.015em | — | Top-of-fold lead | | headline-xl | Atiza | 32 | 600 | 1.13 | -0.005em | — | Above-fold secondary | | headline-lg | Atiza | 26 | 600 | 1.18 | 0 | — | River lead | | headline-md | Atiza | 22 | 600 | 1.22 | 0 | — | River sub | | headline-sm | Atiza | 18 | 600 | 1.25 | 0 | — | Compact module | | deck | Atiza | 18 | 400 | 1.4 | 0 | — | Standfirst — serif, weight 400 | | body-md | Atiza | 18 | 400 | 1.6 | 0 | — | Default running text | | body-sm | Atiza | 16 | 400 | 1.55 | 0 | — | Compact card body | | bullet | Atiza | 17 | 400 | 1.6 | 0 | — | Bullet-first prose with hanging indent | | pull-quote | Atiza | 28 | 500 | 1.3 | 0 | — | Pull-quote with blue left bar | | section-label | NB International Pro | 14 | 700 | 1.0 | 0.04em | uppercase | "POLITICS" / "BUSINESS" | | time-bar-label | NB International Pro | 13 | 700 | 1.0 | 0.06em | uppercase | "WHY IT MATTERS:" / "THE BIG PICTURE:" | | why-it-matters | NB International Pro | 16 | 700 | 1.3 | 0 | — | "Why it matters:" summary text | | byline | NB International Pro | 13 | 600 | 1.3 | 0 | — | "Sara Fischer" | | dateline | NB International Pro | 12 | 500 | 1.3 | 0.02em | — | "Nov 5, 2024" | | nav-link | NB International Pro | 13 | 600 | 1.0 | 0.06em | uppercase | "Politics" / "Business" | | button-label | NB International Pro | 14 | 600 | 1.0 | 0.04em | — | "Subscribe" / "Sign in" | | caption | NB International Pro | 13 | 400 | 1.4 | 0 | — | Photo / chart caption | | photo-credit | NB International Pro | 11 | 500 | 1.3 | 0.04em | uppercase | "PHOTO: GETTY" | | micro-meta | NB International Pro | 11 | 500 | 1.2 | 0.04em | uppercase | "PRO" / "EXCLUSIVE" | | estimated-read | NB International Pro | 12 | 600 | 1.2 | 0.02em | — | "5 min read" pill | | code-micro | NB International Pro Mono | 12 | 400 | 1.4 | 0 | — | Code blocks (rare) | ### Principles - **Single-serif discipline (Atiza for both display and body).** Most peers split display and body into different faces; Axios uses Atiza for everything editorial. The discipline ports the brand's "one voice" editorial system into typographic form. - **Sans for TIME-BAR labels and section labels (NB International Pro tracked uppercase).** The serif/sans contrast between body Atiza and chrome NB International Pro is identifying — bullet-first prose punctuated by sans-emphasis labels. - **TIME-BARS are the most-identifying typographic gesture.** 4px black horizontal rule + uppercase NB International Pro 13/700 tracked 0.06em label ("WHY IT MATTERS:" / "THE BIG PICTURE:") + then content. Every article uses them. - **Body line-height 1.6 — generous.** The bullet-first prose calls for breathing room. - **Headlines lean weight 600–700.** Axios runs heavier display weights than the FT or Reuters — the smart-brevity brand calls for confident headlines. - **Negative tracking on display sizes.** -0.005em → -0.02em on headlines. - **Tracked uppercase for chrome and labels.** 0.02em–0.06em on bylines, datelines, button labels, nav links, section labels. - **Estimated-read pill is the smart-brevity signature meta.** "5 min read" in blue-tinted pill — every story carries one. ## Layout ### Spacing System - Base unit: **4px** - Scale: `2 · 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64 · 80 · 96 · 120` - Section padding: 64px between page bands; 32px on mobile - TIME-BAR vertical rhythm: 20px above rule, 12px below rule, then content - Why it matters: block: 24px×32px internal padding, 32px above and below ### Grid & Container - Max content width: **1200px** centered on 12-column grid - Reading column: **660px** (slightly wider than peers — bullet hanging indents need horizontal room) - Feature container: **980px** for hero + sidebar pairings - Footer: 5-column link list ### Whitespace Philosophy Axios runs **rhythmic density** — the page is dense (many headlines, dense reporting) but punctuated by TIME-BARS, Why it matters: blocks, and bullet-first structure that gives readers visual handholds. The whitespace is calibrated to the bullet rhythm — generous between sections, tight within bullets. The result is a page that feels both substantive and fast. ### Section Cadence - Politics / Business / Tech / World / Health / Science / Sports: white canvas with hairline-separated cards - Axios Pro (premium tier): white canvas with blue-tinted card accents, "PRO" badges - Axios Local (city editions): white canvas with city-name in masthead, same chromatic system as national - Newsletter archive: warm-cream-near-white backdrop with each newsletter rendered as a TIME-BAR-structured page - Live blogs: white canvas with red live indicator ### Breakpoints | Name | Width | Key Changes | |------|-------|-------------| | Mobile | <640px | Top banner stays sticky; masthead becomes hamburger + wordmark + Subscribe; section nav into hamburger; river cards 1-up; TIME-BARS adjust to 12px above / 8px below; bullet hanging indent reduces to 16px | | Tablet | 640–1024px | Section nav as horizontal scroller; river cards 2-up | | Desktop | 1024–1440px | Full section nav; river cards 3-up; sidebar appears on article pages with newsletter signup card | | Wide | >1440px | Content caps at 1200px | ### Touch Targets - Primary CTAs: 44×44px - Section nav: 44px tap area - Newsletter banner dismiss: 32×32px - Estimated-read pill: 32×32px touch area ### Collapsing Strategy - Newsletter banner stays sticky at all breakpoints - Section nav becomes scroller, then hamburger - Subscribe stays visible at all breakpoints - River cards drop column count: 4 → 3 → 2 → 1 - Sidebar collapses below article body on tablet - TIME-BAR rules hold their 4px weight at all breakpoints (the rule is brand-load-bearing) ### Image Behavior - River-card images: `aspect-ratio: 16/9` desktop, `4/3` mobile - Hero images: full-bleed up to 980px - Photo credits in uppercase NB International Pro 11/500 always present beneath images ### Container Queries Newsletter signup card uses container queries to switch between full-width banner and right-rail card layouts. ## Elevation & Depth | Level | Treatment | Use | |-------|-----------|-----| | 0 — Flat | no shadow | Article body, hero, section bands | | 1 — Hairline | 1px `#e0e0e0` rule | River cards, table rows | | 2 — TIME-BAR | 4px black rule | The signature section punctuation | | 3 — Section Rule | 1px `#000000` rule | Section break | | 4 — Why it matters block | gray-tinted backdrop | Smart-brevity capsule summary | | 5 — Brand Card | blue ground (`#0044a5`) | Newsletter cards, paywall, CTAs | | 6 — Dropdown | `rgba(0,0,0,0.06) 0 2px 6px` | Account menu | | 7 — Modal | `rgba(0,0,0,0.3) 0 16px 40px` | Paywall modal | ### Shadow Philosophy Axios's depth is **typographic, not elevational**. The TIME-BAR (4px black rule) is the most-load-bearing depth signal — it punctuates the page and creates rhythm. The Why it matters: block creates a tinted-backdrop depth signal. The brand-blue card (newsletter, paywall) creates chromatic depth. Shadows are reserved for chrome (dropdowns, modals) and stay neutral. ## Shapes | Tier | Value | Use | |------|-------|-----| | None | 0px | Cards, photos, sections, alerts, paywall, TIME-BARS — broadsheet aesthetic | | Small | 2px | Tight chrome (rare) | | Standard | 4px | Buttons, text inputs | | Comfortable | 6px | Newsletter card (the only rounded card) | | Pill | 9999px | Estimated-read pill, save-article chip — when shape is round | Axios sits in the **square broadsheet** camp with selective concessions to ergonomics. Buttons and inputs at 4px (between Bloomberg's 0px and the pill-CTA brands). Newsletter cards get 6px because they're marketing primitives, not editorial surfaces. Estimated-read pills are 12px (rounded but rectangular). Cards, photos, and editorial surfaces stay 0px. ## Components ### TIME-BARS (the signature) **`time-bar`** — A 4px solid black horizontal rule (`#000000`) sitting above a section label in NB International Pro 13/700 uppercase tracked 0.06em ("WHY IT MATTERS:", "THE BIG PICTURE:", "WHAT'S NEXT:", "YES, BUT:", "CATCH UP QUICK:", "BY THE NUMBERS:"). The TIME-BAR sits between paragraphs and punctuates every article. Padding: 20px 0 12px. The most-identifying typographic gesture in the Axios system. **`why-it-matters-block`** — Gray-tinted backdrop (`#f5f5f5`) with the TIME-BAR above and bold uppercase label "WHY IT MATTERS:" + 16/700 sans summary text. Padding: 24×32px. Used at the top of every article as the smart-brevity capsule summary. **`bullet-list`** — Bullet-first prose. Atiza body 17/400 with 24px hanging indent and bold blue square markers (`#0044a5`). Each bullet typically opens with a bolded NB International Pro phrase ("**The big picture:** ...") that signals the bullet's role. ### Buttons **`button-primary`** — Blue fill (`#0044a5`), white text in NB International Pro 14/600 (sentence case, NOT uppercase — Axios diverges from broadsheet uppercase CTA convention), 4px radius, 14×24px padding, 44px height. Press: darkens to `#003a8c`. **`button-secondary`** — Transparent fill, blue text, 1px blue border, 4px radius. "Already a subscriber? Sign in" over white. **`button-text-link`** — Plain blue text (`#0044a5`), no surface, no border. Subtle underline grows on hover. ### Cards **`card-headline`** — White surface, 0px radius, top 1px hairline (`#e0e0e0`), no shadow. Atiza 22/600 headline, Atiza 16/400 deck, NB International Pro 13/600 byline, "5 MIN READ" estimated-read pill in blue-tinted backdrop. **`card-photo`** — Image-above + headline below, 16:9 aspect ratio. **`card-newsletter`** — **Blue ground** (`#0044a5`) with white headline ("Sign up for Axios AM"), white email input, 6px radius (the only non-zero card radius). The blue card is the brand's most-frequently-deployed marketing primitive. ### Pull-Quote **`pull-quote`** — Blue-tinted backdrop (`#f0f4fb`) with **4px Axios blue left bar** (`#0044a5`). Atiza 28/500, no italic. The blue bar marks the pull-out without italic. ### Inputs / Forms **`text-input`** — White surface, 1px `#999999` border, 4px radius, 44px height, 12×14px padding. Focus: border thickens to 2px Axios blue. **`paywall-cta`** — **Blue ground** (`#0044a5`) with white Atiza headline, white-outline Subscribe button. Used for Axios Pro tier promotion. ### Navigation **`top-nav`** — White surface, 64px height, with the "axios" wordmark in NB International Pro 28/700 (lowercase, the brand's signature wordmark style). Section nav (Politics, Business, Tech, World, Health, Science, Sports, Pro, Local) horizontally arranged. **`section-nav`** — Horizontal NB International Pro 13/600 uppercase tracked links separated by ample whitespace. Hover: blue underline grows from below over 200ms. **`newsletter-cta-banner`** — Sticky top banner: "Get smarter, faster" in white NB International Pro 14/700 on Axios blue (`#0044a5`) ground. 16×24px padding. Dismissible with X. ### Decorative **`time-bar`** (see above) — the signature. **`hairline-rule`** — 1px `#e0e0e0` gray rule between river stories. **`estimated-read-pill`** — Blue-tinted pill (`#e6eef9`) with blue text (`#0044a5`), 12px radius, 4×10px padding, NB International Pro 12/600 "5 min read". **`live-indicator`** — Red dot (`#d6062b`) + "LIVE" label in red NB International Pro 11/700 uppercase. Used on live blogs. ### Easing - **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)` - **Emphasized**: `cubic-bezier(0.2, 0, 0, 1)` - **Out-soft**: `cubic-bezier(0.0, 0, 0.2, 1)` ### Durations | Bucket | Value | Use | |--------|-------|-----| | Fast | 100ms | Color swaps, hairline thickening | | Standard | 200ms | Card hover, link underline grow, nav transitions | | Slow | 320ms | Modal enter, paywall reveal, newsletter banner appearance | ### Per-Component Recipes - **Card hover**: image scales 1.0 → 1.02; headline color shifts to Axios blue (`#0044a5`) over 200ms; subtle 1px blue underline grows under the headline. - **Section-nav link hover**: blue underline grows from below over 200ms standard; active section gets persistent 2px blue underline. - **Newsletter-banner appearance**: slides down from top over 320ms emphasized on first page load; persists until dismissed. - **Paywall modal enter**: scrim fades 0 → 0.6 black alpha over 200ms; modal translates 16px to 0 + opacity 0 → 1 over 320ms emphasized. - **TIME-BAR appearance**: when an article expands inline (live-blog updates), the TIME-BAR fades in over 200ms with a subtle 4px-rule-grow from left to right. - **Estimated-read pill hover**: tint deepens from `#e6eef9` to `#cfdaef` over 100ms. - **Live indicator**: red dot pulses 1.0 → 1.4 → 1.0 over 1000ms; suppressed when reduced motion is honored. ### Page Transitions 200ms cross-fade. Newsletter banner persists across page transitions for marketing continuity. ### Reduced Motion Live-indicator pulse suppressed; newsletter-banner appears without slide-down (just fade); card hovers degrade to color-only; transforms suppressed; TIME-BAR rule-grow → instant draw. ### Contrast Pairs | Pair | Ratio | Level | |------|-------|-------| | #333335 body on #ffffff | 12.0 | AAA | | #ffffff on #0044a5 (CTA) | 9.5 | AAA | | #0044a5 on #ffffff (link) | 9.5 | AAA | | #ffffff on #1a1a1a (dark) | 13.5 | AAA | | #666668 muted on #ffffff | 7.5 | AAA | | #000000 TIME-BAR rule on #ffffff | 21.0 | AAA | | #d6062b breaking on #ffffff | 5.5 | AA body | | #2a8a4f success on #ffffff | 4.5 | AA body | ### Focus Indicators Focus ring: `2px solid #0044a5` (Axios blue) with 2px outline-offset. Blue pairs cleanly with white ground. ### ARIA Patterns - **Newsletter banner**: `role="banner"`, dismiss button `aria-label="Dismiss newsletter signup"` - **TIME-BAR sections**: rendered as `
` with `

` for the section label so screen readers announce "Why it matters" as a section heading - **Why it matters: block**: `role="region"` with `aria-label="Why it matters"` - **Bullet list**: native `