Screenshot of Astro

Astro

astro.build

The reference for a developer-tool hero that floods the whole viewport with one violet-to-magenta nebula gradient (linear-gradient(83.21deg, #3245ff, #b845ed)) under heavy white display type, so the page reads as a single bloom of brand colour rather than the usual near-black dev-docs dark theme.

Developer Tool flagship

Design tokens

background
surface
text
textMuted
accent
border
tone1
tone2
display
Obviously
body
Inter
mono

Do / Don't

Reference it for

  • Full-bleed purple nebula background: a violet-magenta radial bloom (peak around #6b2fb5) fading to a deep indigo top (#160a2e), no section breaks, the colour IS the layout
  • Oversized white display headline in a wide quirky grotesk (Astro's 'Obviously', open apertures) at ~48-72px, two lines, dead-centred
  • Centred single-column hero stack: pill announcement chip, headline, two-line muted subhead, then CTA, all on one vertical axis
  • Dual CTA pattern stacked vertically: a solid white pill 'Get Started' (9999px radius, violet label) above a dark mono 'npm create astro@latest' copy-command box with a copy icon
  • Pill-shaped everything: announcement badge split into a coloured label segment + dark body segment with an arrow affordance, 9999px radius
  • Monospace install command in a near-black inset box (inset 0 0 0 1px hairline) as a primary conversion element, not a footnote
  • Greyscale logo wall under 'Used by the largest companies around the world', two rows of white-knockout logos at low opacity for trust without colour noise
  • Thin transparent top nav (logo left, centred text links with dropdown carets, GitHub mark right) floating directly on the gradient with no bar fill

Do not copy

  • The Astro wordmark and the rocket/compass 'A' logo mark
  • The exact 'Obviously' display face with its salt/ss06/ss11 alternates (licensed, brand-specific)
  • The 'The web framework for content-driven websites' headline and 'npm create astro@latest' command verbatim
  • The specific Google/Visa/Microsoft/Porsche/OpenAI logo set
  • The 'Astro Mart SS26 - New merch available now!' announcement chip copy
  • The signature purple-magenta nebula as-is (it is now a recognisable Astro brand signature)