What is Astro's primary brand color?

Astro's brand voltage is not a single hex — it is a gradient mesh spanning violet (#b845ed) through fuchsia (#f041ff) through royal blue (#3245ff). The page meta themeColor is a middle-purple sitting between these anchors, but it does not appear on the rendered page as a standalone fill. No single color carries the brand in isolation; the gradient is the identity. The closest single-hex representation for token purposes is violet (#b845ed), which has the highest gradient frequency (12 occurrences) and anchors the warmer end of the mesh. The aqua (#4bf3c8) is a secondary interactive accent, not a brand color.

What typeface does Astro use, and what should I use as a substitute?

Astro's display headings use Obviously (wired as the font family with fallback to obviously-fallback, system-ui, sans-serif). Obviously appears at 48px / weight 700 for the hero h1, at 36px / weight 700 for section h2s, at 30px / weight 700 for feature headings, and at 20px / weight 700 for callout text. A weight-300 variant of Obviously also appears at 36px for one section-level subheading. Body, nav, and all UI text run system-ui sans-serif at weights 300–600. For open-source substitutes: Obviously is a proprietary family from OH no Type Co — Neue Montreal at weight 700 or Cabinet Grotesk at weight 800 are the closest alternatives for the bold display tier.

Why does Astro use a near-black (#0c0f19) instead of pure black?

The near-black canvas (#0c0f19 — clustered from three close values #0c0f19, #0d0f14, #060913) carries a very slight blue-violet cast in its oklch hue (h=271). This blue-violet undertone is deliberate: it makes the purple-to-blue gradient mesh in the hero read as continuous with the page surface rather than sitting on top of a neutral black. Against pure #000000, the gradient would feel pasted; against the blue-tinted near-black, it reads as depth. Linear uses the same technique with a blue-tinted near-black; Astro applies it to support purple-spectrum voltages instead of violet-purple.

What is Astro's corner-radius philosophy?

Astro runs a two-tier radius scale. The dominant tier is 9999px pill — 58 occurrences in the captured page, used for the 'Astro 6.1' version badge, the 'Get Started' and 'Available now' CTAs, the framework integration badges (React, Vue, Preact, Svelte, SolidJS), and the newsletter email input. The second tier covers cards and code surfaces: 8px (27 occurrences) for code panels and dark UI blocks, 12px (20 occurrences) for feature cards, and 16px (21 occurrences) for larger card surfaces. There is no tight 2–4px tier. The system is pill-or-card: either fully rounded or soft-square.

Can I use this DESIGN.md to build my own web-framework marketing site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Astro's specific moves: deep near-black blue-tinted canvas, purple-to-blue gradient atmosphere behind the hero, Obviously-equivalent bold display at weight 700, system-ui body at weight 300, ghost-pill CTAs, and the teal terminal accent for code surfaces. One important caveat on the gradient: the Astro gradient is a radial mesh, not a linear sweep — the token system captures the color anchors but not the radial geometry. AI tools will need the gradient CSS written explicitly to reproduce the atmospheric depth.

Astro Design System

Astro's marketing design system: purple-blue gradient voltage on a deep near-black canvas, Obviously display at weight 700, system-ui body at weight 300, pill CTAs, 17 color token…

About Astro DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source astro.build

Developer Tools & IDEs

Astro's marketing page makes the framework comparison benchmark a design feature. Below the hero, a full-width bar chart shows Astro at 66% Core Web Vitals score versus WordPress at 48%, Gatsby at 47%, Next.js at 30%, and Nuxt at 28% — the chart is not tucked into a "performance" section but given its own named section called "Astro Islands," with a teal aqua bar color that matches the terminal selection-text token. The gradient behind the hero headline spans violet through fuchsia through royal blue in a radial mesh — not a single directional gradient, but an atmospheric wash that makes the canvas read as deep space. The hero h1 runs Obviously at 48px / weight 700, the body runs system-ui at weight 300 — a 400-point weight gap between the loudest and quietest typographic moments on the page.

The DESIGN.md file packages the system as machine-readable tokens for React and AI tools. Inside: 17 color tokens anchored on the near-black canvas, a gradient vocabulary (violet, fuchsia, royal blue, aqua accent), and a structural gray tier; 13 typography tokens spanning Obviously at 36–48px display and system-ui at 14–16px body; 6 radius values dominated by the 9999px pill for CTAs and navigation chips, with 8–16px for cards; and 20 component definitions covering the photographic-gradient hero, the ghost-pill primary CTA, the embedded terminal panel, the performance chart bar, and the framework feature grid.

Feed this file to Claude or Cursor and it reproduces Astro's specific moves: deep near-black canvas with radial gradient atmosphere, ghost-pill CTAs rather than filled-color buttons, Obviously-equivalent display at heavy weight 700, body text at unusually light weight 300, and the teal terminal accent reserved for interactive feedback states. The most distinctive move worth borrowing is the weight-300 body — it requires a high-quality neutral sans and sufficient line-height to remain legible, but it gives the page a deliberate contrast against the weight-700 headline that most framework sites never attempt.

What makes it distinct

Gradient as primary voltageAstro's brand identity is a purple-to-royal-blue gradient mesh (#b845ed through #3245ff), not a single hex; neither color stands alone as the brand accent
Weight 300 bodybody text runs system-ui at weight 300 (light), the lightest body weight among major framework marketing sites; it signals confidence by restraint rather than legibility by weight
Ghost CTA on dark canvasthe primary hero button is white pill outline with white text, not a gradient fill; the gradient stays in the atmosphere behind the headline, never in the UI chrome
Obviously for displaya proprietary geometric sans runs all h1 / h2 display at weight 700, then drops to weight 300 for one section-level subheading — the weight extremes define the entire typographic scale
Aqua terminal accent#4bf3c8 appears as the selection-text color in the embedded terminal panel, a bright teal that reads as interactive feedback, not as brand voltage

Live at astro.build

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

astro.build

Explore Astro

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Astro design system FAQ

Common questions about Astro's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Astro — official site

Astro's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.