editorial · serif · sans · structured · news · light · smart-brevity · bullets
Axios
Smart-brevity in chromatic form — blocky white canvas, Tiempos-flavored Atiza serif, signature `Why it matters:` time-bars and bullet-first prose.
By webdesignhot · www.axios.com
$ npx design-md add axios
Learn more about the CLI → Compare to…
Adidas Pure-black sport-utility, AdihausDIN/adidasFG uppercase, three-stripe geometry — the engineering canon for global sportswear. Adobe Creative-suite chrome — paper-white canvas, magenta-to-orange wordmark gradient, and Adobe Clean carrying every product grid. AgentKit Three swappable themes for AI agent products — editorial dark, daylight bright, fintech cool-blue. Airbnb Pure-white marketplace canvas with one Rausch coral and Cereal — generous photography, soft pills, modest type. Airtable White-canvas editorial workflow software with full-bleed coral and forest signature cards punctuating a near-black pill-CTA system. Alibaba Electric orange `#ff6a00` + dense merchant grids — the global B2B wholesale floor as a website. Amazon Smile-orange CTA, Amazon Ember sans, dense product grids — the canonical everything-store interface. Amazon Web Services Squid-ink navy with Smile-orange CTAs — the densest tile-portal on the cloud-platform internet. Anthropic Editorial broadsheet for AI safety — cream canvas, Anthropic Serif body, terracotta clay accent, magazine geometry. Apple White-canvas product theatre — SF Pro Text, 980px pill CTAs, and a single-blue accent system. Apple Music Pink-red gradient hero with album-grid kinesthetics — SF Pro precision, signature `#fa233b` brand pink, glassy dark canvas. Apple TV+ Pure-black cinematic theatre with SF Pro and ruthless minimalism — content as the only voice. Arc Browser-as-personality marketing — buttery cream canvas, Marlin Soft display, hand-tooled blue-and-coral palette. Are.na Bare grey-and-orange minimalism — a single Helvetica-class sans, hairline borders, and a stubborn refusal to optimise for engagement. Asana Approachable work management in soft purple — Asana Sans at modest weights with a rainbow accent palette and warm sky-tinted whitespace. Astro Cosmos navy canvas with violet-to-orange brand gradient — Mona Sans display, Inter body, Astro''s star-chart MPA framework dressed as an observatory dashboard. ASUS Republic of Gamers red `#cd0000` on black with bold sans — Taiwan engineering meets esports brutalism. Audi Vorsprung durch Technik on near-black — Audi Type sans, four-rings precision, and a near-monochrome canvas with `#bb0a30` reserved for sport. Auth0 Twilight-blue dark canvas with TWK Lausanne 300 display + Aeonik body — the original identity-platform aesthetic. Axiom Deep-navy observability with a cyan electric accent — Inter for body, JetBrains Mono for every event label, and a structural grid that reads as logs at planet scale. Base Coinbase-adjacent L2 minimalism — coinbaseSans on white, signature electric blue Baseten White canvas with Inter and a signature `#6c5ce7` purple — ML model deployment dressed in approachable workshop chrome. BBC News Signature BBC red (`#bb1919`), Reith Sans + Reith Serif, the global broadcaster authority typography of the world''s public-service news. Bear Off-white canvas, a custom bearsans display, a red bear icon, and tealish handwritten underlines — a Markdown notes app dressed as a Mac Pro magazine. beehiiv Aggressive black-on-yellow newsletter punch — heavy display sans, hyper-flat cards, and a `#ffd60a` highway-yellow that reads like a tabloid front page. Binance Trading-floor near-black with a single high-voltage Binance Yellow doing all the brand work — BinanceNova for type, BinancePlex for numbers. Bloomberg Iconic black-orange financial broadsheet — BWHaasHead headlines, AvenirNextPForBBG chrome, terminal-grade data density. Bluesky Sky-blue `#0085ff` on bright white with Inter sans — the AT-Protocol social network rendered as airy, federated, open. Blur Pure-black canvas, neon `#ff8700` orange voltage, and JetBrains-Mono-default everywhere — brutalist NFT trader terminal as competitive instrument. BMW Corporate-blue calm — BMW Type Next on a cream-tinted white, dark navy hero bands, and the M-stripe triplet in reserve. BMW M Performance black on M-blue/M-violet/M-red — the motorsport variant that turns BMW corporate into track-day theatre. Booking.com Deep-blue commerce engine — Bookin Sans on white, yellow CTA voltage, dense booking-funnel maximalism. Bose Pure black canvas, Helvetica restraint, and premium-audio confidence — sound presented as engineering art. Brex Cool grey-blue surfaces, magenta-to-purple-to-indigo gradient, Söhne 600 — fintech as fast, modern, slightly flashy. Bugatti French-engineered austerity — pure black canvas, three Bugatti typefaces, and full-bleed photography as the only voltage. Bun Cream canvas with chunky pink accents and the wide-eyed mascot — a JS runtime dressed as a 1970s bakery sign. Cal.com Open-source calendly with one bold custom font — Cal Sans on a soft `#f4f4f4` paper canvas. Calm Signature `#0066ff` deep blue + Aktiv Grotesk + meditation-deep cool atmospheric calm. Capacities Cream-yellow canvas, Inter at 700 with a Crimson Pro serif fallback, and a yellow underline as page ornament — a PKM that thinks like a sketchbook. Cartesia Bright clinical white with a single deep-blue action — voice-AI presented as scientific instrument rather than consumer product. Cash App Electric `#00d54b` green on near-black, Cash Sans monospace-flavoured geometry, and p2p-money youth aesthetic. Character.AI Cool zinc canvas, custom atHauss sans, and dark pill CTAs — a roleplay social product dressed in TikTok-grade neutrality. Chevrolet Gold-cross American classic — Louis sans on white with a `#cd9834` bowtie, a `#003876` corporate blue, and Camaro/Corvette red drama in reserve. Claude.ai Cream paper canvas, Anthropic Sans for body and Anthropic Serif for the headline — an AI assistant set in literary type. Clerk Geist + Suisse on near-black canvas with `#6c47ff` violet CTA — the drop-in-auth dev-tool aesthetic. ClickHouse Near-pure black canvas with electric yellow as the brand voltage — database performance dressed in voltmeter chrome. Cloudinary Media-API technical infrastructure in confident blue — Inter at modest weights with a deep navy-blue brand and a single chromatic accent for media moments. Cohere Stark white editorial canvas with deep green-black product bands and a CohereText/Unica77 type split. Coinbase Institutional-grade calm — pure white canvas, a single Coinbase Blue, and Coinbase Display set at weight 400 instead of 700. Composio Near-black canvas with deep-electric-blue voltage and a 2x2 terminal-mockup hero — agent infrastructure dressed as developer instrumentation. Corsair Yellow `#ffff00` lightning on black with Roboto — RGB-everything peripherals and PC components. Costco Warehouse blue + signature red, Helvetica utilitarian — bulk-buying signage translated to web. Coursera University-blue `#0056d2` on warm-white parchment with Source Sans — the canonical online-degree marketplace. Cursor Warm cream IDE-marketing — `#f7f7f4` canvas, `#26251e` ink, custom CursorGothic display, JetBrains Mono code, vivid orange accent. Datadog NationalWeb on white with the iconic `#632ca6` purple — observability dressed as an enterprise dashboard, structurally dense, chromatically restrained, multicolour where the data demands it. Deel A warm dark canvas with electric coral and orange accents — global payroll dressed as a confident product portrait. DeepSeek Deep-blue Chinese-tech minimalism — a research lab dressed in `#4d6bfe` and stark white space. Dell Pragmatic blue `#007db8` with custom Roboto-derivative — business-first PC commerce since the dorm room. Deno Inkwell black on warm white with the dinosaur mascot — TypeScript runtime as Eric Carle children's book. Descript Cream-pink canvas, a custom Brett display serif, and a wine-dark CTA — an AI video editor that ships like a magazine. Discord Indigo-ground hangout — gg sans body, ABC Ginto Nord display, 12-16px tile radii, white pill CTAs. Disney+ Deep navy gradient streaming hall with custom Inspire display sans and the unmistakable Disney+ wordmark arc. DoorDash Signature red-orange CTA, custom DoorDash Sans, delivery-funnel commerce — the dominant on-demand local marketplace. ElevenLabs Near-black voice-tech ground with white voice-wave aesthetic — Inter at studio scale, pill CTAs, and a single saturated accent that reads as both wayfinding and brand. Epic Games Pure-black canvas with custom Brutal Type / Heading Now display — Fortnite-saturated marketing meets PC-storefront merchandising. Ethereum Off-white canvas, ethereum-blue `#1c64f2` voltage, and Inter + serif duet — community-owned protocol as open documentation. Etsy Burnt-orange CTA, Graphik humanist sans, handcrafted-warmth aesthetic — the marketplace for makers and small batch. Excalidraw Literal hand-drawn whiteboard — wobbly SVG strokes, Virgil-style handwriting, and a deliberately primitive UI that turns digital sketching into nostalgia. Expedia Navy commerce + Mango yellow voltage — Expedia Sans, dense travel-funnel density with One Key loyalty colour-coding. Fantastical White paper, Effra geometric sans, full-round blue pills, and a rainbow of app-icon glass squares — a calendar app marketed like Apple''s Pro Apps. Ferrari Cinematic editorial in near-black — Rosso Corsa restraint, FerrariSans 500, and full-bleed cavallino photography. Figma Bright multi-color section bands with figmaSans display and figmaMono eyebrows — a marketing site that designs in scenes. Financial Times Salmon-pink page (`#fff1e5`) — the world''s most recognizable newspaper background, paired with Financier display + MetricWeb sans for global markets coverage. Fireworks AI Light canvas with Inter sans and a signature `#6720ff` purple-amber-orange spark — fast-inference platform dressed in speed-of-light kinetic chrome. Fly.io Mackinac display + Fragment Mono on a violet-saturated canvas — a PaaS that dresses like a small-press magazine. Ford American-truck heritage in corporate blue — Antenna sans, oval-script wordmark, and a deep `#003478` voltage that has carried the brand since 1927. Framer Black-on-white maximalism with electric gradient floods — Inter Display at heroic sizes, motion as a first-class material. Frontegg PP Neue Machina display + Neue Montreal body — plug-and-play user-management with deep-blue gravitas. Gemini (Google) Blue-into-violet gradient, Google Sans, soft Material 3 surfaces — Google''s house style applied to a chat interface. Ghost Warm-cream content CMS aesthetic — Inter for chrome, a soft serif for the writing surface, and a single confident green for action. GitHub Dark-canvas developer-platform marketing — Mona Sans variable headings, lime-green accent, near-black ground. GitHub Copilot Pure-white canvas, pure-black inverted CTAs, Mona Sans display — GitHub's editorial confidence applied to AI tooling. Grafana Dark observability canvas with the iconic `#f46800` orange — Inter for body, Roboto Mono everywhere a label hides, multi-colour chart palette ripped straight from a real dashboard. Granola White paper, a custom Quadrant book serif, and an olive-green CTA — an AI notepad that dresses like a stationery shop. Grubhub Friendly red-orange CTA, Sentinel display + Avenir body, dense delivery-app commerce — the long-running incumbent. HashiCorp Black canvas hosting a per-product color portfolio — Terraform purple, Vault yellow, Consul red, Waypoint cyan — multi-product identity made literal. Hashnode Developer publishing platform — deep navy canvas, electric blue brand, Inter sans + JetBrains Mono code chrome. HBO Max Deep purple-black premium streaming canvas with custom Sharp Grotesk and the unmistakable Max wordmark. Headspace Signature `#ffac1d` orange + custom round display + meditation-friendly playful warmth. Height AI-PM workspace dressed in chalk pastels — Inter at modest weights over a near-paper canvas, with a single confident accent and an AI-purple voltage moment. Honda Reliability-first restraint — HondaGlobalFont on white, signature red HP Cyan-blue `#0096d6` HP-circle on white with Forma DJR — the 84-year-old technology brand''s mainstream face. Hugging Face AI community canvas — deep blue-black ground, Source Sans Pro headlines, pill auth + 8px tile cards. Hulu Near-black canvas anchored on Hulu Green `#1ce783` with Graphik sans — the bright, cable-meets-streaming UI. IBM Carbon Design System made literal — pure-white canvas, IBM Plex Sans at light 300, square corners, and one assertive `#0f62fe` blue. Ideogram A bright white canvas with a single saturated violet cue — a typography-first AI image tool that lets the gallery do all the talking. Instacart Grocery-shopping-list practical — Instacart Sans on white, signature carrot green Kagi A premium search engine dressed in warm cream and Plex — the indie answer to ad-funded search. KAYAK Burnt-orange flight-search density — Open Sans on white, comparison-engine maximalism, price-graph data viz. Khan Academy Signature `#14bf96` mint green on white with Lato sans — free-for-everyone education in a warm, encouraging register. Kinde White canvas with Inter 72/500 display + dev-friendly pink-coral accent — the approachable auth-billing-access platform. Kit A cream newsletter canvas with a custom KitSans display, a Libre Franklin secondary, and a pastel-rainbow chip set — the editorial register reborn from ConvertKit. Kraken Kraken Purple `#7132f5` on white — Kraken-Brand display + Kraken-Product UI for a calmer, less-bombastic crypto exchange. Krea A pure-black studio with Suisse Intl set quietly at 60px — a creative-AI gallery that lets the work and the cobalt CTA carry the colour. Lamborghini Cathedral of darkness — true black canvas, Lamborghini Gold accents, and LamboType angled-terminal display. LangChain Deep navy canvas with Inter precision and a quietly confident teal accent — agent orchestration dressed as engineering documentation. Linear Dark-canvas product surface — pure-black ground, indigo accent, custom Inter weights, pill CTAs. LiveKit Realtime audio-video infra — Public Sans 300 weight on near-black, signature cyan LlamaIndex White canvas with Inter and a signature `#1b9aff` blue — RAG infrastructure dressed as a clean technical reference card. Logitech Soft consumer-tech blue gradients with Brown sans — design for the way you work, play, and create. Lovable Pink-into-violet gradient on white — vibe-coding dressed in playful, friendly chromatics. Magic Eden Mint-cream canvas, magenta-mint accent duet, and a custom Foundry display — Solana-native marketplace as boutique gallery. Mailchimp Cavendish-yellow chunkiness — a custom display serif (Cooper Light), the signature `#ffe01b` block, and a brand voice that hugs you while it ships campaigns. Mastercard Cream-canvas editorial fintech, circular-portrait orbits, MarkForMC at 450 weight — institutional-but-warm payments brand. MasterClass Pure-black cinema with custom display serif and editorial reverence — celebrity-instructor learning as a premium streaming product. Medium Editorial reading-first publishing — magazine-grade serif body, GT Super display, signature green-on-white pill CTAs. Mercedes-Benz Three-pointed-star authority — MBCorpo on near-black canvas, silver-blue Mercury A near-pure white canvas with a literary serif headline and a signature mercury-mint accent — banking dressed as a quiet magazine. Meta Optimistic blue (#0467df) on a white corporate canvas — Optimistic Display headlines, generous space, social-platform conglomerate at rest. Microsoft Fluent surfaces — off-white canvas, Segoe UI Variable Display, and a Cortana-blue action color carrying every product. Midjourney A deep cosmic canvas where JetBrains Mono headlines float over a wide-gamut OKLCH rainbow — a research lab dressed as a chapel. MiniMax Stark monochrome canvas broken open by vibrant gradient product cards — coral, magenta, blue, purple as model identity. Mintlify Documentation-platform marketing — pure white canvas, mint-green accent, Inter at tight tracking, near-black pill CTAs. Miro Canary-yellow Mistral Butter-yellow canvas, Arial as a deliberate anti-tech statement, and zero-radius rectangles — French AI as a brutalist art-school manifesto. Modal Serverless GPU infra in lime-green — `#0c0c0c` canvas, electric `#7fee64` accent, custom Modal Mono on every chip and code block. Monday.com Project management in confident red-pink — Poppins display at bold weights with a colorful saturated palette and a playfully energetic visual rhythm. MongoDB Signature MongoDB green Motion AI-calendar productivity in green-and-purple — Inter at modest weights with a green-to-purple voltage gradient signaling the AI scheduler, anchored by a clean white canvas. MSI Dragon-red `#ff0000` on jet black with bold display sans — the Taipei dragon-heritage gaming hardware brand. Mux Video API for developers — Aeonik on light-cream, Rotonto display, JetBrainsMono CTAs, sharp 0px corners. Neon Serverless Postgres dressed in late-night green — a near-black canvas with a single electric mint accent. Netflix Pure-black streaming theatre with signature `#e50914` red and Netflix Sans — the canonical media-tile grid. Nike Pure black, pure white, Helvetica Now — pill CTAs and full-bleed athletic photography on a single soft cloud gray. Notion Off-white canvas with Lyon serif accents and a custom NotionInter — a workspace dressed as a literary magazine. Nuxt Forest-green `#00dc82` glow on a near-black canvas — Vue-flavored warmth dressed for the cosmos. NVIDIA Engineering-grade canvas — pure black hero / paper-white body / one violently saturated `#76b900` green that carries every CTA and corner square. Omnivore Open-source read-it-later — near-white reading canvas, focused emerald-on-paper brand, archival elegance after the Eleven Labs sunset. OpenAI Pure white canvas, OpenAI Sans set in calm 500-weight, and a single black pill for the only action that matters — try ChatGPT. OpenRouter Pure-black canvas with custom display typography and pragmatic mono — LLM-router infrastructure dressed as a terminal billing dashboard. OpenSea Pure-black canvas, electric `#2081e2` blue, and Inter at trader-pro density — the original NFT marketplace as financial terminal. Optimism Pure-white canvas, signature `#ff0420` red voltage, and Inter at confident L2 register — Ethereum rollup as bold optimistic infrastructure. Ory White canvas with Inter 48/400 display + signature deep-navy `#0f172a` CTA — open-source-first identity for technical teams. Oura Pure-black canvas with Inter precision and gold-stamped scores — the premium-ring health-precision aesthetic. Paper Website A literal sheet-of-paper website — single literary serif, off-white sheet canvas, narrow reading columns, ink-blue links. PayPal Dual-blue corporate trust — PayPal Sans Big over white, with a deep-navy ink and a sky-blue counterpoint. Peloton Signature `#cb1e4e` red on midnight ink, Inter display, instructor-led premium-fitness storefront. Perplexity Cream paper canvas, custom pplxSans, and the unmistakable Tropic-cyan accent — a reference-library answer engine dressed in warm tones. Pinecone White canvas with Inter and a signature `#1cb0d0` cyan — vector database technical-marketing dressed in clean blueprint chrome. Plaid Pale blue trust on white, classical Stripe-adjacent type, and a Benjamin-Franklin-as-mascot moment of personality. Plain B2B support tool with a Dinamo grotesk and a single radioactive `#1ad379` action — Linear-restraint applied to support. PlanetScale Pure-black canvas, blood-red accent, mono-set numerals — a database brand styled like a financial terminal. Polar Dev-tool obsidian — 8rem editorial display headlines, indigo accents, Louize serif moments. Polygon Deep purple `#8247e5` voltage, soft surface ladder, and Inter at enterprise calm — Ethereum L2 as institutional infrastructure. Porsche Engineering-purity black-on-white — Porsche Next at 96px regular, Rosso PostHog Cream-canvas analytics with mustard-yellow CTAs and IBM Plex — open-source craft, not SaaS gloss. Postmark Postal-yellow #ffde00 + warm-black #1c1d1f + paper-white canvas — the transactional email API designed like a friendly post office sign. Prime Video Amazon-blue streaming canvas with Ember sans and the dense, utility-first marketplace UI vocabulary. PropelAuth White canvas with SF Pro Rounded display 60/900 + deep-navy ink — B2B multi-tenant auth with Apple-tinted polish. Qwik Electric purple-to-blue gradient on near-black — resumable execution dressed as a lightning bolt. Railway Ship software peacefully — IBM Plex Serif headlines on a deep eggplant canvas, with a single confident violet for action. Raindrop.io White paper, system-ui sans, soft watercolor blob backgrounds, and a vivid `#0b7ed0` blue CTA — a bookmark manager that ships like a creative-tool sketch. Ramp Off-yellow `#fcfb70` and black-on-white editorial — finance ops dressed as a printed annual report. Raycast Near-black canvas, glowing keycaps, monospaced shortcut chips — a marketing site that thinks like a launcher. Razer Neon `#44d62c` snake-green on jet black with Roboto — the For Gamers, By Gamers visual signature. Readwise Pastel-orange book-club warmth — soft cream canvas, friendly Tiempos serif accents, and a tangerine that signals 'this is your library.' Reddit Front-page-of-the-internet orange — community-card density, IBM Plex Sans display, and a confident Remix Signature `#3992ff` blue on pure white with Inter — a nested-routes web framework dressed as a manifesto poster. Render Lavender on white — a PaaS that swapped Heroku purple for a candy-bright #8a05ff and kept the airy whitespace. Replicate AI-API marketing — light page chrome, dark hero canvas, rb-Freigeist Neue display, JetBrains Mono code, sharp 0px corners. Replit Saturated turquoise on `#0e1525` ink — the cloud-IDE aesthetic with IBM Plex DNA and a JetBrains Mono soul. Resend Pure-black canvas with Domaine Display serif at 96px and Commit Mono code chips — email infra that thinks in italics. Retool Pragmatic blue #3a55fc + Inter + dense product mocks — the internal-tool platform that designed itself like a well-organised admin panel. Reuters Global newswire restraint — signature orange (`#ff8000`), Knowledge Medium custom sans, broadsheet rigor for the world''s oldest news agency. Riot Games Crimson `#d13639` red on near-black with custom Riot Beam display — esports-tournament drama and competitive-MOBA editorial. Rive Chunky animated display type and saturated playful colour — interactive graphics platform that wears its motion design on its sleeve. Roblox Bright `#ed1d24` red on white with Builder Sans — the youth-block-builder playground turned multi-billion-game social platform. RunPod Deep slate canvas with Inter and a signature `#673ab7` purple — accessible GPU cloud dressed in friendly developer chrome. Runway A near-black research canvas with ABC Normal headlines pulled tight at -2.5px — a film studio, an ML lab, and a brutalist gallery in one shell. Salesforce Cloud-trust dashboards — Salesforce Sans on a sky-blue ground, with Astro the bear standing guard over a dense CRM portal. SAP Enterprise-ERP precision in cobalt — SAP72 sans, signal-blue accents, and a calm white canvas built for trust. Segment Twilio Segment's customer-data-platform canvas — Whitney SSm humanist sans, navy-on-white, single confident `#1866ee` blue. Semafor Paper-cream canvas (`#f8f5d7`) with FeatureFlatHeadline serif and signature flag-style topic columns — global-news editorial built for the post-Twitter era. SendGrid Functional API-blue on white — the email-platform dashboard aesthetic, now folded under the Twilio umbrella. Sentry Deep-aubergine observability — Dammit Sans display, Rubik body, JetBrains Mono code, signature violet #7553ff and pill CTAs. shadcn/ui Copy-paste components in pure black-on-white — the most influential design system not actually shipped as a library. Shopify Dark-first commerce theatre — 96px NeueHaasGrotesk at weight 330, electric mint focus rings, and stacked multi-layer shadows. Signal Privacy-first messaging in `#3a76f0` Signal blue with Inter sans — minimal, ad-free, end-to-end-encrypted by default. Slack Aubergine workspace marketing — Salesforce-Avant-Garde headlines, all-caps 4px CTAs, white canvas with `#4a154b` accents. SolidJS Deep navy with a blue-to-cyan brand gradient — reactive primitives dressed as a circuit diagram. Sonos Pure black canvas, Inter typography, and audio-system minimalism — speakers presented as gallery objects. SoundCloud Signature `#ff5500` orange on `#f2f2f2` paper with Interstate sans — waveform-first audio social UI. SpaceX Pure-black cinematic photography, D-DIN aerospace stencil type, ghost-button minimalism — the interface disappears. Spotify Electric `#1ed760` green on near-black canvas with Spotify Mix sans — the canonical streaming-audio tile grid. Square Pure black on pure white, Square Sans grids, and retail-POS minimalism — commerce as black-and-white geometry. Starbucks Forest-green storefront — SoDoSans, full-pill buttons, warm-cream canvas, and a floating Frap CTA the brand calls home. Steam Deep blue-gray `#1b2838` with Motiva Sans — the utilitarian PC-gaming library that runs the world's largest digital storefront. SteelSeries Esports orange `#ff6900` on near-black with Inter — Danish precision peripherals for competitive play. Strava Signature `#fc4c02` orange + Inter on white — endurance-athlete data-driven storefront with map-overlay heritage. Stripe Editorial fintech polish — light Söhne headlines at weight 300, navy-not-black text, signature `#533afd` purple CTAs. Stytch Paper-cream canvas with Booton display + Chivo Mono body — passwordless-modern auth, joined Twilio. Substack Magazine-on-the-internet — Spectral serif body at 19px, Cahuenga display, signature `#ff6719` orange CTAs. Suno A near-black booth with cream Neue Montreal and a hot-pink cue light — a music studio, a record sleeve, and a chat app fused into one canvas. Sunsama Thoughtful daily planning in warm cream and ink — Inter at modest weights over a paper-cream canvas with sage and rose accents and a calm, unhurried voice. Supabase Off-black canvas, signature emerald `#3ecf8e`, Circular as display, Postgres-grade type discipline. Superhuman White paper canvas, a custom Super Sans variable, and a single confident lavender — premium email dressed as a stationery brand. Supreme Box-logo red, Courier monospace, skate-deadpan minimalism — the most influential streetwear store on the web. Svelte Hot orange #ff3e00 against clean white with a confident sans — the framework that wears its flame as a wordmark. Tailwind CSS The system applied to itself — Inter Variable on white canvas, signature cyan #06b6d4, every component built from Tailwind utilities. Tana Pure black canvas, a custom tanaClassic serif at 83px, and a pale-pistachio CTA — a knowledge graph dressed as a literary supplement. Target Bullseye red CTA, Helvetica Neue, photographic hero — friendly mass-market design with confident chromatic restraint. Telegram Cloud-blue messaging — Tesla Cinematic showroom on white — one Electric Blue CTA, Universal Sans, and viewport-height car photography. The Atlantic Modern serif headlines on cream-paper, signature Atlantic orange `#fbb33b`, long-form magazine reading rendered for the web. The Economist Deep cinnabar red `#e3120b`, Milo serif body, Econ Sans labels — the global-affairs weekly rendered with cover-illustration discipline. The Guardian Guardian Egyptian slab serif, signature navy `#052962`, structured ruled hierarchy with bold section accents. The New York Times Cheltenham serif headlines on paper-white, signature breaking-news red, the canonical American broadsheet rendered for the web. The New Yorker Adobe Caslon Pro + Irvin headline cap — a century of editorial gravitas in cream paper, ink black, and signature cartoon line. The Washington Post Postoni serif blackletter masthead, "Democracy Dies in Darkness" tagline, sober ink-on-paper political broadsheet. Things Cool light-blue canvas, system-ui sans, vivid Things-blue accent — a task manager that ships like an Apple Pro Display. Threads Instagram-adjacent text-first social — pure-black canvas, system-sans clarity, and a quiet brand restraint built from the @ glyph alone. TikTok Electric cyan-magenta on pure black — vertical-video voltage with custom Proxima Nova display and a bold neon brand grammar. tldraw Casual whiteboard sketchy — hand-drawn UI primitives, dotted-grid canvas, and a soft pastel palette that wears its toy-like energy with confidence. Together AI Deep navy on near-white with Inter sans — open-source LLM cloud rendered as developer-platform infrastructure. Toyota Japanese-reliability mainstream — `#eb0a1e` Toyota red on white, ToyotaType sans, and a calm-confident marketing surface for the world's most-sold automotive brand. Turbo Vercel-grade pure-black canvas with a magenta-to-blue Turbo gradient — the build system that wears its speed as a sweep. Turso SQLite at the edge — a deep-teal canvas with a CRT-bright cyan accent (#00face) that reads as a glowing edge node. Twilio Signal-red `#f22f46` against clean white — communications APIs given the visual weight of a broadcast colour. Twitch Purple `#9146ff` on `#0e0e10` canvas with Inter — the live-streaming UI built around chat, raids, and gaming density. Uber Eats Pure-black ground, Uber Move custom sans, Uber-app continuity — the operating system of food delivery. Udemy Signature `#a435f0` purple on white with Sailec sans — the open course-marketplace bazaar made approachable. Uniqlo Signature red `#ff0000`, Helvetica Neue system stack, japanese-utility-functional grid — the LifeWear engine. v0 A near-white prompt canvas with GeistSans and pure OKLCH grayscale — Vercel''s AI builder dressed as the calmest text editor on the internet. Venmo A single confident `#3d95ce` blue, Aktiv Grotesk geometry, and a social-feed informality — payments dressed as group chat. Vercel Brutalist developer-product polish — near-white canvas, near-pure black-on-near-white type, Geist sans + mono, conic-gradient accents. Vite Electric purple #646cff + Manrope display + a literal lightning-bolt mark — the build tool that designed itself to feel as fast as it is. Vodafone Vodafone Red broadcast band, monumental 144px display, two-tier button system — corporate-newsroom telecom design. Volkswagen People's-car blue — the deep `#001e50` corporate hue, custom VW Sans, and a friendly-German marketing surface that sells everyday mobility with confidence. Walmart Spark-yellow on big-box blue, Antonio Display + Bogle sans — everyday low prices made loud. Warp Near-black canvas, neon-lime cursor, real terminal screenshots — a marketing site that boots like a shell. Weaviate White canvas with Inter and a signature `#1cdb46` open-source green — modular vector database dressed in approachable engineering chrome. webdesignhot AI-era editorial dark — pure black with one acid-lime accent. Webflow Indigo-to-purple gradient discipline with a precise structural sans — the visual builder that markets itself like a design conference. WHOOP Lime `#a0d10b` voltage on jet-black, Inter precision, recovery-data athlete-grade aesthetic. WIRED Newsstand-density editorial grid, sharp-corner buttons, mono ALL-CAPS kickers — Conde Nast meets engineering lab. Wise A flexible bright-lime green on cream-white — money that travels in sans-serif and a single confident accent. Workday HR-warm professional in tangerine — Adelle Sans humanist curves, signature `#f37721` orange, and a calm white people-first canvas. WorkOS Pure-white canvas with Untitled Sans 80/500 display + indigo-violet h2 — the B2B-enterprise gravitas aesthetic. X Pure-black canvas with Chirp display — algorithmic minimalism, single-letter wordmark, ruthless type discipline. Y Combinator Brutalist orange monolith — system-font sans on white canvas, signature `#f26625` orange-red blocks with hard 0px corners. You.com Crisp white developer-doc canvas, custom Lumen Sans, and the indigo `#5368EE` accent — a search API rebrand done as enterprise infrastructure. YouTube YouTube Sans + Roboto + signature `#ff0000` red — content-density at planetary scale. Zora Cream-white canvas, electric purple-orange duet, and a custom display — onchain creator network as zine cover.
try on →
1440 × 900
mobile · 390 × 844
Tokens design.md/v1.5
- 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 AAA · 12.6
#333335 - text-strong
#000000 - text-muted
#666668 - text-soft
#888889 - text-faint — · 2.3
#aaaab0 - text-on-blue
#ffffff - text-on-dark
#ffffff - brand AAA · 8.9
#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 — · 1.3
#e0e0e0 - border-soft
#f0f0f0 - border-strong — · 2.8
#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
Ship faster than ever.
headline-mega "Atiza" 56px w700 -0.02em
Ship faster than ever.
headline-jumbo "Atiza" 42px w600 -0.015em
Ship faster than ever.
headline-xl "Atiza" 32px w600 -0.005em
The quick brown fox jumps over the lazy dog.
masthead-wordmark "NB International Pro" 28px w700 -0.01em
The quick brown fox jumps over the lazy dog.
pull-quote "Atiza" 28px w500 0
Ship faster than ever.
headline-lg "Atiza" 26px w600 0
Ship faster than ever.
headline-md "Atiza" 22px w600 0
Ship faster than ever.
headline-sm "Atiza" 18px w600 0
The quick brown fox jumps over the lazy dog.
deck "Atiza" 18px w400 0
The quick brown fox jumps over the lazy dog.
body-md "Atiza" 18px w400 0
The quick brown fox jumps over the lazy dog.
bullet "Atiza" 17px w400 0
The quick brown fox jumps over the lazy dog.
body-sm "Atiza" 16px w400 0
The quick brown fox jumps over the lazy dog.
why-it-matters "NB International Pro" 16px w700 0
OUR DESIGN SYSTEM
section-label "NB International Pro" 14px w700 0.04em
OUR DESIGN SYSTEM
button-label "NB International Pro" 14px w600 0.04em
OUR DESIGN SYSTEM
time-bar-label "NB International Pro" 13px w700 0.06em
The quick brown fox jumps over the lazy dog.
byline "NB International Pro" 13px w600 0
The quick brown fox jumps over the lazy dog.
nav-link "NB International Pro" 13px w600 0.06em
OUR DESIGN SYSTEM
caption "NB International Pro" 13px w400 0
The quick brown fox jumps over the lazy dog.
dateline "NB International Pro" 12px w500 0.02em
The quick brown fox jumps over the lazy dog.
estimated-read "NB International Pro" 12px w600 0.02em
npx design-md add linear
code-micro "NB International Pro Mono" 12px w400 0
The quick brown fox jumps over the lazy dog.
photo-credit "NB International Pro" 11px w500 0.04em
The quick brown fox jumps over the lazy dog.
micro-meta "NB International Pro" 11px w500 0.04em
- step-0 2px
- step-1 4px
- step-2 8px
- step-3 12px
- step-4 16px
- step-5 20px
- step-6 24px
- step-7 32px
- step-8 40px
- step-9 48px
- step-10 64px
- step-11 80px
- step-12 96px
- step-13 120px
- micro
0px - none
0px - sm
2px - md
4px - lg
6px - pill
9999px
Text link →
Card preview
A complete kit — everything your product needs.
Hero, pricing, FAQ, dashboard, docs — every layout your product needs.
New
Stable
v1.0
Export
4 formats · paste-ready
Tailwind
theme.extend block for tailwind.config.js
CSS variables
:root { --bg, --text, --brand, … } you can paste anywhere
DTCG JSON
W3C Design Tokens Community Group format
Figma Variables
Importable into Figma → Variables → Import
---
name: Axios
tagline: Smart-brevity in chromatic form — blocky white canvas, Tiempos-flavored Atiza serif, signature `Why it matters:` time-bars and bullet-first prose.
author: webdesignhot
source_url: https://www.axios.com
spec: design.md/v1.5
quality: curated
featured: false
categories: [media]
tags: [editorial, serif, sans, structured, news, light, smart-brevity, bullets]
preview_swatch: ['#ffffff', '#0044a5', '#333335']
related: [theatlantic, ft, theguardian]
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' # the canonical Axios white
bg-section: '#ffffff'
bg-section-newsletter: '#fafafa' # newsletter-archive section ground
bg-dark: '#1a1a1a' # paywall, footer
bg-darkest: '#000000'
surface: '#ffffff'
surface-soft: '#f5f5f5'
surface-strong: '#e8e8e8'
surface-quote: '#f0f4fb' # blue-tinted pull-quote surface
surface-blue-tint: '#e6eef9' # selected nav, brand-tinted backgrounds
text: '#333335' # observed body color rgb(51, 51, 53)
text-strong: '#000000'
text-muted: '#666668'
text-soft: '#888889'
text-faint: '#aaaab0'
text-on-blue: '#ffffff'
text-on-dark: '#ffffff'
brand: '#0044a5' # the Axios signature blue
brand-hover: '#003a8c'
brand-active: '#002e72'
brand-soft: '#cfdaef' # tint surface
brand-deep: '#001f4d' # darkest blue
brand-secondary: '#d6062b' # Axios red — used for breaking and live indicators
link: '#0044a5' # blue as inline link color
link-hover: '#003a8c'
link-visited: '#666668'
on-brand: '#ffffff'
on-dark: '#ffffff'
border: '#e0e0e0' # default hairline
border-soft: '#f0f0f0'
border-strong: '#999999'
border-rule: '#000000' # black section rule
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' # the signature section-label rule color
time-bar-bg: '#f5f5f5' # subtle backdrop for "Why it matters:" zone
newsletter-banner: '#0044a5' # the morning-newsletter banner blue
typography:
display:
family: '"Atiza", "Tiempos Headline", Georgia, "Times New Roman", serif'
weights: [400, 500, 600, 700]
opentype-features: ['liga', 'kern']
body:
family: '"Atiza", "Tiempos Text", Georgia, "Times New Roman", serif'
weights: [400, 500, 700]
ui:
family: '"NB International Pro", "Helvetica Neue", Helvetica, Arial, sans-serif'
weights: [400, 500, 600, 700]
sans-emphasis:
family: '"NB International Pro", sans-serif'
weights: [600, 700]
mono:
family: '"NB International Pro Mono", Menlo, Consolas, monospace'
weights: [400, 500]
scale:
masthead-wordmark: { size: 28, weight: 700, lineHeight: 1.0, tracking: '-0.01em', family: ui, opentype: ['liga'] }
headline-mega: { size: 56, weight: 700, lineHeight: 1.05, tracking: '-0.02em', family: display }
headline-jumbo: { size: 42, weight: 600, lineHeight: 1.08, tracking: '-0.015em', family: display }
headline-xl: { size: 32, weight: 600, lineHeight: 1.13, tracking: '-0.005em', family: display }
headline-lg: { size: 26, weight: 600, lineHeight: 1.18, tracking: '0', family: display }
headline-md: { size: 22, weight: 600, lineHeight: 1.22, tracking: '0', family: display }
headline-sm: { size: 18, weight: 600, lineHeight: 1.25, tracking: '0', family: display }
deck: { size: 18, weight: 400, lineHeight: 1.4, tracking: '0', family: body }
body-md: { size: 18, weight: 400, lineHeight: 1.6, tracking: '0', family: body }
body-sm: { size: 16, weight: 400, lineHeight: 1.55, tracking: '0', family: body }
bullet: { size: 17, weight: 400, lineHeight: 1.6, tracking: '0', family: body }
pull-quote: { size: 28, weight: 500, lineHeight: 1.3, tracking: '0', family: display }
section-label: { size: 14, weight: 700, lineHeight: 1.0, tracking: '0.04em', family: sans-emphasis, transform: uppercase }
time-bar-label: { size: 13, weight: 700, lineHeight: 1.0, tracking: '0.06em', family: sans-emphasis, transform: uppercase }
why-it-matters: { size: 16, weight: 700, lineHeight: 1.3, tracking: '0', family: sans-emphasis, transform: none }
byline: { size: 13, weight: 600, lineHeight: 1.3, tracking: '0', family: ui }
dateline: { size: 12, weight: 500, lineHeight: 1.3, tracking: '0.02em', family: ui }
nav-link: { size: 13, weight: 600, lineHeight: 1.0, tracking: '0.06em', family: ui, transform: uppercase }
button-label: { size: 14, weight: 600, lineHeight: 1.0, tracking: '0.04em', family: ui }
caption: { size: 13, weight: 400, lineHeight: 1.4, tracking: '0', family: ui }
photo-credit: { size: 11, weight: 500, lineHeight: 1.3, tracking: '0.04em', family: ui, transform: uppercase }
micro-meta: { size: 11, weight: 500, lineHeight: 1.2, tracking: '0.04em', family: ui, transform: uppercase }
estimated-read: { size: 12, weight: 600, lineHeight: 1.2, tracking: '0.02em', family: ui }
code-micro: { size: 12, weight: 400, lineHeight: 1.4, tracking: '0', family: mono }
radius:
micro: 0
sm: 2
md: 4
lg: 6
pill: 9999
none: 0
spacing:
base: 4
scale: [2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 120]
layout:
page-width: 1200
prose-width: 660
feature-width: 980
header-height: 64
time-bar-rule-weight: 4
section-rule-weight: 1
hairline-weight: 1
components:
time-bar:
bg: 'transparent'
color: '#000000'
border: 'top 4px solid #000000'
padding: '20px 0 12px'
use: 'The signature Axios horizontal rule — 4px solid black, with section-label like "Why it matters:" in NB International Pro 13/700 uppercase tracked 0.06em. Punctuates every article between paragraphs.'
why-it-matters-block:
bg: '#f5f5f5'
color: '#000000'
padding: '24px 32px'
use: '"Why it matters:" section block — gray-tinted backdrop with bold uppercase label and 16/700 sans summary. The smart-brevity signature.'
bullet-list:
bg: 'transparent'
color: '#333335'
use: 'Bullet-first prose — Atiza body 17/400 with 24px hanging indent and bold blue square bullet markers in #0044a5.'
button-primary:
bg: '#0044a5'
color: '#ffffff'
radius: 4
padding: '14px 24px'
height: 44
font: button-label
use: 'Subscribe, Sign in — primary CTA. Blue fill with white text.'
button-primary-hover:
bg: '#003a8c'
color: '#ffffff'
use: 'Pointer-down on blue CTAs.'
button-secondary:
bg: 'transparent'
color: '#0044a5'
border: '1px solid #0044a5'
radius: 4
padding: '14px 24px'
height: 44
use: 'Already a subscriber, secondary actions.'
button-text-link:
bg: 'transparent'
color: '#0044a5'
use: 'Inline body links — blue text with subtle underline on hover.'
card-headline:
bg: '#ffffff'
color: '#333335'
radius: 0
border: 'top 1px solid #e0e0e0'
use: 'Default river card. Atiza 22/600 headline, Atiza 16/400 deck, NB International Pro 13/600 byline, "5 MIN READ" estimated-read meta in uppercase 11/500.'
card-photo:
bg: '#ffffff'
color: '#333335'
radius: 0
use: 'Photo card with image-above + headline below; 16:9 aspect ratio.'
card-newsletter:
bg: '#0044a5'
color: '#ffffff'
radius: 6
padding: '32px'
use: 'Newsletter signup card — blue ground with white headline ("Sign up for Axios AM") and white email input.'
pull-quote:
bg: '#f0f4fb'
color: '#000000'
border: 'left 4px solid #0044a5'
padding: '24px 32px'
use: 'Blue-tinted pull-quote surface with 4px Axios blue left bar. Atiza 28/500.'
text-input:
bg: '#ffffff'
color: '#333335'
radius: 4
height: 44
padding: '12px 14px'
border: '1px solid #999999'
focus: 'border thickens to 2px Axios blue'
use: 'Email entry, search input.'
paywall-cta:
bg: '#0044a5'
color: '#ffffff'
padding: '40px 32px'
use: 'Axios Pro paywall — blue ground with white Atiza headline, white-outline Subscribe button.'
nav-section-link:
color: '#000000'
font: nav-link
padding: '14px 12px'
use: 'Section nav (Politics, Business, Tech, World, Health, Science, Sports). Hover: blue underline grows from below.'
edition-selector:
bg: 'transparent'
color: '#000000'
use: 'Top-right edition picker (Axios Local cities + Axios national).'
newsletter-cta-banner:
bg: '#0044a5'
color: '#ffffff'
padding: '16px 24px'
use: '"Get smarter, faster" — top sticky banner promoting newsletter signup. Dismissible.'
estimated-read-pill:
bg: '#e6eef9'
color: '#0044a5'
radius: 12
padding: '4px 10px'
font: estimated-read
use: '"5 min read" pill — blue-tinted backdrop with blue text. Marks reading-time on every story.'
motion:
ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)'
ease-out-soft: 'cubic-bezier(0.0, 0, 0.2, 1)'
duration-fast: 100
duration-standard: 200
duration-slow: 320
card-hover: 'image scales 1.0 → 1.02; headline color shifts to blue over 200ms; subtle 1px blue underline grows under headline'
reduced-motion: 'respects prefers-reduced-motion: reduce — transforms suppressed, transitions become instant color sets, newsletter-banner pulse suppressed.'
breakpoints:
mobile: 640
tablet: 768
desktop: 1024
wide: 1440
shadows:
ambient: 'rgba(0,0,0,0.04) 0 1px 2px'
standard: 'rgba(0,0,0,0.06) 0 2px 6px'
elevated: 'rgba(0,0,0,0.1) 0 8px 20px'
deep: 'rgba(0,0,0,0.3) 0 16px 40px'
ring: '0 0 0 2px #0044a5'
accessibility:
contrast-text-on-bg: 12.0 # #333335 on #ffffff — AAA at body sizes
contrast-text-on-blue: 9.5 # #ffffff on #0044a5 — AAA
contrast-link-on-bg: 9.5 # #0044a5 on #ffffff — AAA
contrast-text-on-dark: 13.5 # #ffffff on #1a1a1a — AAA
contrast-muted-on-bg: 7.5 # #666668 on #ffffff — AAA body
focus-ring: '2px solid #0044a5 (Axios blue) + 2px outline-offset'
reduced-motion-honored: true
touch-target-min: 44
keyboard-nav: 'Tab moves Axios wordmark → primary nav → utility (Subscribe, Sign in, Search). Skip-link first.'
dark-mode: optional
colors-dark:
bg: '#0d0d0d'
surface: '#1a1a1a'
surface-soft: '#262626'
surface-strong: '#333333'
text: '#ffffff'
text-strong: '#ffffff'
text-muted: '#b3b3b3'
text-soft: '#8a8a8a'
brand: '#5b8fdb' # blue lifts for AA on dark
link: '#5b8fdb'
border: '#333333'
border-rule: '#5b8fdb'
---
## 1. Visual Theme & Atmosphere
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
## 2. Color Palette & Roles
### 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
## 3. Typography Rules
### 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.
## 4. Component Stylings
### 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.
## 5. Layout Principles
### 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
## 6. Shapes & Radius Scale
| 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.
## 7. Depth & Elevation
| 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.
## 8. Interaction & Motion
### 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.
## 9. Accessibility & A11y
### 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 `<section>` with `<h2>` 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 `<ul>` / `<li>` semantics
- **Paywall modal**: `role="dialog"`, `aria-modal="true"`, focus trapped, Esc closes
- **Live blog**: `role="feed"`, new entries `aria-live="polite"`
- **Estimated-read pill**: `aria-label="5 minute read"`
### Keyboard Navigation
- Top banner: Tab → newsletter signup → dismiss
- Top nav: Tab moves wordmark → section nav → Subscribe → Sign in → Search
- Article body: Tab traverses links in reading order (TIME-BAR sections preserve linear reading)
- Skip-link first
### Screen Reader Hints
- TIME-BAR section labels announce as section headings
- Estimated-read pill announces as "5 minute read"
- Newsletter banner announces as "Banner: Get smarter, faster — sign up for Axios AM"
- Live blog entries announce with timestamp ("3 minutes ago")
### Reduced Motion
Live-indicator pulse suppressed; newsletter-banner appears without slide-down; card hovers → color-only; TIME-BAR rule-grow → instant draw.
## 10. Responsive Behavior
### 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.
## 11. Content & Voice
### Tone
Direct, scannable, smart-brevity-precise. Axios's voice is calibrated for time-pressed professional readers — sentences are short, structures are bullet-first, and headlines lead with the news + the take ("US imposes new sanctions on Russian oil — and oil prices barely moved"). The brand's editorial system is the visual system; bullet structure with branded section labels is both editorial method and visual signature.
### Microcopy Patterns
- **Smart-brevity branded labels**: "Why it matters:" / "The big picture:" / "What's next:" / "Yes, but:" / "Catch up quick:" / "By the numbers:" / "Reality check:" / "Of note:" — uppercase NB International Pro 13/700 tracked 0.06em
- **Subscribe verbs**: "Subscribe to Pro", "Sign up for AM", "Continue", "Sign in"
- **Newsletter messages**: "Get smarter, faster" — the brand tagline
- **Date format**: "Nov 5, 2024" — short US convention
- **Section labels in NB International Pro uppercase**: "POLITICS", "BUSINESS", "TECH"
- **Estimated-read pill**: "5 min read" — every story carries one
- **Bullet-first prose**: each bullet opens with a bold sans phrase ("**The big picture:** ...") then continues in serif body
- **Photo credit**: "PHOTO: GETTY" or "PHOTO: REUTERS"
- **Breaking**: red dot + "BREAKING" label
### CTA Verb Conventions
- Primary: **"Subscribe to Pro"**, **"Sign up for AM"**, **"Sign in"**, **"Continue"**, **"Read"**
- Secondary: **"Save"**, **"Share"**, **"Listen"**
- Tertiary: **"More on this story"**, **"Catch up quick"**, **"View all"**
- Avoided: "Click here", "Submit", "Buy now", "Learn more"
### Empty States
- Saved articles: "Your saved articles will appear here. Subscribe to Axios Pro for unlimited saving."
- Search no results: "No stories match your search. Try different keywords or check our sections."
- Newsletter archive: "No newsletters in this archive yet — subscribe to Axios AM to receive them in your inbox."
- Bookmark empty: "Bookmarks help you save stories for later. Sign in to use them."
## 12. Dark Mode & Theming
Axios supports a **system-level dark mode**. The token swap lifts the blue for AA on dark:
- `bg`: `#0d0d0d` — near-black canvas
- `surface`: `#1a1a1a`
- `surface-soft`: `#262626`
- `text`: `#ffffff` — body inverts to pure white
- `text-strong`: `#ffffff`
- `text-muted`: `#b3b3b3`
- `text-soft`: `#8a8a8a`
- `brand`: `#5b8fdb` — blue lifts for AA on dark
- `link`: `#5b8fdb`
- `border`: `#333333`
- `border-rule`: `#5b8fdb` — section rules invert from black to lifted-blue
The TIME-BAR rules in dark mode become `#5b8fdb` (lifted blue) instead of pure black — the chromatic flip preserves the rhythmic punctuation in dark mode while keeping AA contrast.
## 13. Lineage & Influences
Axios's visual lineage is **the smart-brevity editorial system**. Jim VandeHei, Mike Allen, and Roy Schwartz founded Axios in 2017 after leaving Politico, with a thesis that political and business news could be reformatted as bullet-first prose with branded section labels. The thesis became a Harvard Business School case study (2022) and a book ("Smart Brevity," 2022). The web product ports the editorial system to typographic and chromatic form: TIME-BARS, "Why it matters:" blocks, bullet-first prose, estimated-read pills.
The **Atiza** typeface is in the Tiempos / Storm Type Foundry humanist serif lineage. Tiempos itself was designed by Kris Sowersby (Klim) — the same designer who drew Reuters's Knowledge and the FT's Financier. The Atiza/Tiempos cousin relationship places Axios in the modern news-typography ecosystem alongside the FT and Reuters, but with a single-serif discipline (one face for both display and body) that's distinct.
**NB International Pro** (Klim/Sowersby) carries chrome and section labels — it's the same typeface family used by countless modern publications and design systems. The serif/sans contrast between Atiza body and NB International Pro labels is identifying.
What Axios rejects: continuous-prose articles (every article is bullet-first), italic decks (Axios uses sans 700 emphasis instead), rounded card corners on editorial (newsletter cards get 6px), the salmon-pink-broadsheet of the FT, the terminal-orange of Bloomberg, the pure-broadsheet-roman of NYT/WaPo. Axios's editorial-system-as-visual-system is what makes it distinctive — the visual decisions all trace back to the bullet-first thesis.
**Influences:**
- VandeHei / Allen / Schwartz (2017) — founding thesis: smart brevity
- "Smart Brevity" (book, 2022) — codified the editorial system
- Klim Type Foundry — NB International Pro and the Tiempos lineage that Atiza descends from — [klim.co.nz](https://klim.co.nz)
- Politico — earlier shop where the founders refined the bullet-first newsletter format
- AP / Reuters — wire-service typography that Axios both inherits from and reformats
## 14. Do's and Don'ts
**Do**
- Use **TIME-BARS** (4px black horizontal rule + uppercase NB International Pro 13/700 tracked 0.06em label) to punctuate every article between paragraphs
- Use the smart-brevity branded labels: "Why it matters:", "The big picture:", "What's next:", "Yes, but:", "Catch up quick:", "By the numbers:", "Reality check:"
- Open every article with a "Why it matters:" block — gray-tinted backdrop (`#f5f5f5`) with bold uppercase label and 16/700 sans summary
- Structure prose as bullet-first with bold blue square markers (`#0044a5`) and 24px hanging indent
- Use Atiza serif for editorial body and headlines — single-serif discipline
- Use NB International Pro for chrome, navigation, section labels, estimated-read pills
- Use Axios blue (`#0044a5`) for primary CTAs, links, focus rings, newsletter banners
- Mark every story with an estimated-read pill ("5 min read") in blue-tinted backdrop
- Run a sticky "Get smarter, faster" newsletter banner in Axios blue at the top of pages
- Use newsletter cards with blue ground (`#0044a5`) and 6px radius for marketing CTAs
- Use sentence-case button labels ("Subscribe", "Sign in") — Axios diverges from broadsheet uppercase convention
**Don't**
- Don't write continuous prose articles — Axios is bullet-first, always
- Don't drop the TIME-BARS — every article uses them; without them the page loses its identity
- Don't use a different typeface for headlines vs body — Atiza handles both, single-serif discipline
- Don't use italic decks or pull-quotes — Axios uses sans 700 emphasis instead
- Don't push display weight to 800+ — restraint at 600–700 is brand voice
- Don't apply heavy shadows to article cards — depth comes from TIME-BARS and tinted blocks, not elevation
- Don't use orange or red as a primary brand color — Axios blue is the brand
- Don't drop the "Why it matters:" block at the top of articles — it's the smart-brevity capsule summary
- Don't use uppercase button labels — Axios diverges to sentence case
- Don't use rounded card corners on editorial surfaces — broadsheet aesthetic for cards (newsletter cards excepted at 6px)
## 15. Agent Prompt Guide
### Quick Color Reference
```
Axios-Blue: #0044a5 (brand, links, CTAs, focus ring, newsletter banner)
Blue-Hover: #003a8c
White-Canvas: #ffffff
Body: #333335 (observed on axios.com)
Time-Bar-Black: #000000 (the 4px rule)
Why-It-Matters-BG: #f5f5f5 (gray-tinted block backdrop)
Hairline: #e0e0e0
Brand-Red: #d6062b (breaking news only)
Newsletter-Banner: #0044a5 (same as brand)
```
### Example Component Prompts
- "Create an Axios article opening on white (#ffffff): section label in NB International Pro 14/700 uppercase tracked 0.04em ('POLITICS') in black; headline in Atiza 42/600 #333335 with -0.015em tracking; Atiza 18/400 deck; NB International Pro 13/600 byline ('Sara Fischer') with 'NOV 5, 2024' dateline; '5 min read' pill in blue-tinted (#e6eef9) backdrop with blue (#0044a5) text. Below: a **'Why it matters:' block** — gray-tinted (#f5f5f5) backdrop, 24×32px padding, with **TIME-BAR** (4px solid #000000 rule) above and uppercase 'WHY IT MATTERS:' label in NB International Pro 13/700 tracked 0.06em, then bold sans 16/700 summary text."
- "Build an Axios bullet-first prose section: 4px black TIME-BAR rule, uppercase NB International Pro 13/700 'THE BIG PICTURE:' label, then bullet list with bold blue (#0044a5) square markers, 24px hanging indent, Atiza 17/400 body. Each bullet opens with a bold NB International Pro phrase ('**Reality check:** ...') in sentence case followed by Atiza serif continuation."
- "Design an Axios newsletter signup card: blue ground (#0044a5) with 6px radius, 32px padding. White Atiza headline 'Sign up for Axios AM' at 26/600. White email input with white-outline 'Sign up' button. The card is the brand's most-frequently-deployed marketing primitive."
- "Create an Axios primary CTA: Axios blue fill (#0044a5) with white text in NB International Pro 14/600 **sentence case** ('Subscribe' — NOT uppercase, Axios diverges from broadsheet convention), 4px radius, 14×24px padding, 44px height. Hover: darkens to #003a8c."
- "Build the 'Get smarter, faster' newsletter banner: sticky top banner, Axios blue (#0044a5) ground full-width, white text in NB International Pro 14/700 'Get smarter, faster — Sign up for Axios AM →', dismiss X icon top-right (32×32px). Slides down from top over 320ms emphasized on first page load."
- "Design an Axios pull-quote: blue-tinted backdrop (#f0f4fb) with **4px Axios blue (#0044a5) left bar**, 24×32px padding. Atiza 28/500 (no italic, sans-emphasis style is for labels only). The blue bar marks the pull-out without italic — Axios sans-emphasis discipline."
### Iteration Guide
1. **TIME-BARS are mandatory.** Every article uses 4px black horizontal rules with uppercase NB International Pro 13/700 tracked 0.06em section labels ("WHY IT MATTERS:", "THE BIG PICTURE:", "WHAT'S NEXT:"). Without TIME-BARS the page loses its identity.
2. **Bullet-first prose, never continuous.** Articles are bullet lists with bold blue square markers and hanging indents — not blocks of running text. Each bullet opens with a bolded sans phrase signaling the bullet's role.
3. **Atiza for editorial, NB International Pro for chrome.** Single-serif discipline (Atiza handles both display and body); single-sans for labels and chrome.
4. **Smart-brevity branded labels are part of the system.** "Why it matters:", "The big picture:", "What's next:", "Yes, but:", "Catch up quick:" — these are typography, not just copy. They mark structure.
5. **Estimated-read pill on every story.** "5 min read" in blue-tinted (#e6eef9) backdrop with blue (#0044a5) text — the smart-brevity meta signature.
6. **Sentence-case button labels.** Axios diverges from broadsheet uppercase CTA convention — buttons read "Subscribe", "Sign in", "Continue".
7. **Newsletter cards are brand-blue grounds.** Use `#0044a5` ground with white text and 6px radius for marketing CTAs (the only place radius creeps above 4).
8. **Body color #333335.** Slightly warm — observed on axios.com. Don't use pure black for body.
1. Visual Theme & Atmosphere
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
2. Color Palette & Roles
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 (
#0044a5text + underline-on-hover) - Active CTA (blue fill on white text)
- Disabled (
#aaaab0text,#e8e8e8fill) - 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 ambientrgba(0,0,0,0.06) 0 2px 6px— dropdownrgba(0,0,0,0.1) 0 8px 20px— overlayrgba(0,0,0,0.3) 0 16px 40px— modal
Semantic
- Success (
#2a8a4fon#dff0e7) — confirmation messages - Warning (
#cc7a00on#fde9cc) — amber for advisory - Danger / Breaking (
#d6062bon#fbd6dc) — breaking news, form errors - Info (
#0044a5on#cfdaef) — info shares brand blue
3. Typography Rules
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.
4. Component Stylings
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.
5. Layout Principles
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
6. Shapes & Radius Scale
| 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.
7. Depth & Elevation
| 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.
8. Interaction & Motion
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
#e6eef9to#cfdaefover 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.
9. Accessibility & A11y
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 buttonaria-label="Dismiss newsletter signup" - TIME-BAR sections: rendered as
<section>with<h2>for the section label so screen readers announce “Why it matters” as a section heading - Why it matters: block:
role="region"witharia-label="Why it matters" - Bullet list: native
<ul>/<li>semantics - Paywall modal:
role="dialog",aria-modal="true", focus trapped, Esc closes - Live blog:
role="feed", new entriesaria-live="polite" - Estimated-read pill:
aria-label="5 minute read"
Keyboard Navigation
- Top banner: Tab → newsletter signup → dismiss
- Top nav: Tab moves wordmark → section nav → Subscribe → Sign in → Search
- Article body: Tab traverses links in reading order (TIME-BAR sections preserve linear reading)
- Skip-link first
Screen Reader Hints
- TIME-BAR section labels announce as section headings
- Estimated-read pill announces as “5 minute read”
- Newsletter banner announces as “Banner: Get smarter, faster — sign up for Axios AM”
- Live blog entries announce with timestamp (“3 minutes ago”)
Reduced Motion
Live-indicator pulse suppressed; newsletter-banner appears without slide-down; card hovers → color-only; TIME-BAR rule-grow → instant draw.
10. Responsive Behavior
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/9desktop,4/3mobile - 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.
11. Content & Voice
Tone
Direct, scannable, smart-brevity-precise. Axios’s voice is calibrated for time-pressed professional readers — sentences are short, structures are bullet-first, and headlines lead with the news + the take (“US imposes new sanctions on Russian oil — and oil prices barely moved”). The brand’s editorial system is the visual system; bullet structure with branded section labels is both editorial method and visual signature.
Microcopy Patterns
- Smart-brevity branded labels: “Why it matters:” / “The big picture:” / “What’s next:” / “Yes, but:” / “Catch up quick:” / “By the numbers:” / “Reality check:” / “Of note:” — uppercase NB International Pro 13/700 tracked 0.06em
- Subscribe verbs: “Subscribe to Pro”, “Sign up for AM”, “Continue”, “Sign in”
- Newsletter messages: “Get smarter, faster” — the brand tagline
- Date format: “Nov 5, 2024” — short US convention
- Section labels in NB International Pro uppercase: “POLITICS”, “BUSINESS”, “TECH”
- Estimated-read pill: “5 min read” — every story carries one
- Bullet-first prose: each bullet opens with a bold sans phrase (“The big picture: …”) then continues in serif body
- Photo credit: “PHOTO: GETTY” or “PHOTO: REUTERS”
- Breaking: red dot + “BREAKING” label
CTA Verb Conventions
- Primary: “Subscribe to Pro”, “Sign up for AM”, “Sign in”, “Continue”, “Read”
- Secondary: “Save”, “Share”, “Listen”
- Tertiary: “More on this story”, “Catch up quick”, “View all”
- Avoided: “Click here”, “Submit”, “Buy now”, “Learn more”
Empty States
- Saved articles: “Your saved articles will appear here. Subscribe to Axios Pro for unlimited saving.”
- Search no results: “No stories match your search. Try different keywords or check our sections.”
- Newsletter archive: “No newsletters in this archive yet — subscribe to Axios AM to receive them in your inbox.”
- Bookmark empty: “Bookmarks help you save stories for later. Sign in to use them.”
12. Dark Mode & Theming
Axios supports a system-level dark mode. The token swap lifts the blue for AA on dark:
bg:#0d0d0d— near-black canvassurface:#1a1a1asurface-soft:#262626text:#ffffff— body inverts to pure whitetext-strong:#fffffftext-muted:#b3b3b3text-soft:#8a8a8abrand:#5b8fdb— blue lifts for AA on darklink:#5b8fdbborder:#333333border-rule:#5b8fdb— section rules invert from black to lifted-blue
The TIME-BAR rules in dark mode become #5b8fdb (lifted blue) instead of pure black — the chromatic flip preserves the rhythmic punctuation in dark mode while keeping AA contrast.
13. Lineage & Influences
Axios’s visual lineage is the smart-brevity editorial system. Jim VandeHei, Mike Allen, and Roy Schwartz founded Axios in 2017 after leaving Politico, with a thesis that political and business news could be reformatted as bullet-first prose with branded section labels. The thesis became a Harvard Business School case study (2022) and a book (“Smart Brevity,” 2022). The web product ports the editorial system to typographic and chromatic form: TIME-BARS, “Why it matters:” blocks, bullet-first prose, estimated-read pills.
The Atiza typeface is in the Tiempos / Storm Type Foundry humanist serif lineage. Tiempos itself was designed by Kris Sowersby (Klim) — the same designer who drew Reuters’s Knowledge and the FT’s Financier. The Atiza/Tiempos cousin relationship places Axios in the modern news-typography ecosystem alongside the FT and Reuters, but with a single-serif discipline (one face for both display and body) that’s distinct.
NB International Pro (Klim/Sowersby) carries chrome and section labels — it’s the same typeface family used by countless modern publications and design systems. The serif/sans contrast between Atiza body and NB International Pro labels is identifying.
What Axios rejects: continuous-prose articles (every article is bullet-first), italic decks (Axios uses sans 700 emphasis instead), rounded card corners on editorial (newsletter cards get 6px), the salmon-pink-broadsheet of the FT, the terminal-orange of Bloomberg, the pure-broadsheet-roman of NYT/WaPo. Axios’s editorial-system-as-visual-system is what makes it distinctive — the visual decisions all trace back to the bullet-first thesis.
Influences:
- VandeHei / Allen / Schwartz (2017) — founding thesis: smart brevity
- “Smart Brevity” (book, 2022) — codified the editorial system
- Klim Type Foundry — NB International Pro and the Tiempos lineage that Atiza descends from — klim.co.nz
- Politico — earlier shop where the founders refined the bullet-first newsletter format
- AP / Reuters — wire-service typography that Axios both inherits from and reformats
14. Do’s and Don’ts
Do
- Use TIME-BARS (4px black horizontal rule + uppercase NB International Pro 13/700 tracked 0.06em label) to punctuate every article between paragraphs
- Use the smart-brevity branded labels: “Why it matters:”, “The big picture:”, “What’s next:”, “Yes, but:”, “Catch up quick:”, “By the numbers:”, “Reality check:”
- Open every article with a “Why it matters:” block — gray-tinted backdrop (
#f5f5f5) with bold uppercase label and 16/700 sans summary - Structure prose as bullet-first with bold blue square markers (
#0044a5) and 24px hanging indent - Use Atiza serif for editorial body and headlines — single-serif discipline
- Use NB International Pro for chrome, navigation, section labels, estimated-read pills
- Use Axios blue (
#0044a5) for primary CTAs, links, focus rings, newsletter banners - Mark every story with an estimated-read pill (“5 min read”) in blue-tinted backdrop
- Run a sticky “Get smarter, faster” newsletter banner in Axios blue at the top of pages
- Use newsletter cards with blue ground (
#0044a5) and 6px radius for marketing CTAs - Use sentence-case button labels (“Subscribe”, “Sign in”) — Axios diverges from broadsheet uppercase convention
Don’t
- Don’t write continuous prose articles — Axios is bullet-first, always
- Don’t drop the TIME-BARS — every article uses them; without them the page loses its identity
- Don’t use a different typeface for headlines vs body — Atiza handles both, single-serif discipline
- Don’t use italic decks or pull-quotes — Axios uses sans 700 emphasis instead
- Don’t push display weight to 800+ — restraint at 600–700 is brand voice
- Don’t apply heavy shadows to article cards — depth comes from TIME-BARS and tinted blocks, not elevation
- Don’t use orange or red as a primary brand color — Axios blue is the brand
- Don’t drop the “Why it matters:” block at the top of articles — it’s the smart-brevity capsule summary
- Don’t use uppercase button labels — Axios diverges to sentence case
- Don’t use rounded card corners on editorial surfaces — broadsheet aesthetic for cards (newsletter cards excepted at 6px)
15. Agent Prompt Guide
Quick Color Reference
Axios-Blue: #0044a5 (brand, links, CTAs, focus ring, newsletter banner)
Blue-Hover: #003a8c
White-Canvas: #ffffff
Body: #333335 (observed on axios.com)
Time-Bar-Black: #000000 (the 4px rule)
Why-It-Matters-BG: #f5f5f5 (gray-tinted block backdrop)
Hairline: #e0e0e0
Brand-Red: #d6062b (breaking news only)
Newsletter-Banner: #0044a5 (same as brand)Example Component Prompts
- “Create an Axios article opening on white (#ffffff): section label in NB International Pro 14/700 uppercase tracked 0.04em (‘POLITICS’) in black; headline in Atiza 42/600 #333335 with -0.015em tracking; Atiza 18/400 deck; NB International Pro 13/600 byline (‘Sara Fischer’) with ‘NOV 5, 2024’ dateline; ‘5 min read’ pill in blue-tinted (#e6eef9) backdrop with blue (#0044a5) text. Below: a ‘Why it matters:’ block — gray-tinted (#f5f5f5) backdrop, 24×32px padding, with TIME-BAR (4px solid #000000 rule) above and uppercase ‘WHY IT MATTERS:’ label in NB International Pro 13/700 tracked 0.06em, then bold sans 16/700 summary text.”
- “Build an Axios bullet-first prose section: 4px black TIME-BAR rule, uppercase NB International Pro 13/700 ‘THE BIG PICTURE:’ label, then bullet list with bold blue (#0044a5) square markers, 24px hanging indent, Atiza 17/400 body. Each bullet opens with a bold NB International Pro phrase (‘Reality check: …’) in sentence case followed by Atiza serif continuation.”
- “Design an Axios newsletter signup card: blue ground (#0044a5) with 6px radius, 32px padding. White Atiza headline ‘Sign up for Axios AM’ at 26/600. White email input with white-outline ‘Sign up’ button. The card is the brand’s most-frequently-deployed marketing primitive.”
- “Create an Axios primary CTA: Axios blue fill (#0044a5) with white text in NB International Pro 14/600 sentence case (‘Subscribe’ — NOT uppercase, Axios diverges from broadsheet convention), 4px radius, 14×24px padding, 44px height. Hover: darkens to #003a8c.”
- “Build the ‘Get smarter, faster’ newsletter banner: sticky top banner, Axios blue (#0044a5) ground full-width, white text in NB International Pro 14/700 ‘Get smarter, faster — Sign up for Axios AM →’, dismiss X icon top-right (32×32px). Slides down from top over 320ms emphasized on first page load.”
- “Design an Axios pull-quote: blue-tinted backdrop (#f0f4fb) with 4px Axios blue (#0044a5) left bar, 24×32px padding. Atiza 28/500 (no italic, sans-emphasis style is for labels only). The blue bar marks the pull-out without italic — Axios sans-emphasis discipline.”
Iteration Guide
- TIME-BARS are mandatory. Every article uses 4px black horizontal rules with uppercase NB International Pro 13/700 tracked 0.06em section labels (“WHY IT MATTERS:”, “THE BIG PICTURE:”, “WHAT’S NEXT:”). Without TIME-BARS the page loses its identity.
- Bullet-first prose, never continuous. Articles are bullet lists with bold blue square markers and hanging indents — not blocks of running text. Each bullet opens with a bolded sans phrase signaling the bullet’s role.
- Atiza for editorial, NB International Pro for chrome. Single-serif discipline (Atiza handles both display and body); single-sans for labels and chrome.
- Smart-brevity branded labels are part of the system. “Why it matters:”, “The big picture:”, “What’s next:”, “Yes, but:”, “Catch up quick:” — these are typography, not just copy. They mark structure.
- Estimated-read pill on every story. “5 min read” in blue-tinted (#e6eef9) backdrop with blue (#0044a5) text — the smart-brevity meta signature.
- Sentence-case button labels. Axios diverges from broadsheet uppercase CTA convention — buttons read “Subscribe”, “Sign in”, “Continue”.
- Newsletter cards are brand-blue grounds. Use
#0044a5ground with white text and 6px radius for marketing CTAs (the only place radius creeps above 4). - Body color #333335. Slightly warm — observed on axios.com. Don’t use pure black for body.
Drop axios into your project, then ship the actual sections in an afternoon.
1 · install design
npx design-md add axios 2 · ship landing page
npx agentkit init --design axios editorial serif
The Atlantic
Modern serif headlines on cream-paper, signature Atlantic orange `#fbb33b`, long-form ma…
Docs
Install
The Atlantic
webdesignhot
editorial serif
Financial Times
Salmon-pink page (`#fff1e5`) — the world''s most recognizable newspaper background, pair…
Docs
Install
Financial Times
webdesignhot
editorial serif
The Guardian
Guardian Egyptian slab serif, signature navy `#052962`, structured ruled hierarchy with…
Docs
Install
The Guardian
webdesignhot