Astro 7.1 · Available now

The web framework for content-driven websites

Astro is a JavaScript web framework optimized for building fast, content-driven websites.

Astro powers the world’s fastest marketing sites, blogs, e-commerce and documentation.

Get Started Integrate your stack

Astro Islands

Each gradient appears twice — full strength on the badge, diluted as the ground of the card behind it.

Server-First

Astro improves website performance by rendering on the server by default.

Content-Driven

Astro was designed for content-rich sites, not single-page applications.

Customizable

Used by the largest teams: bring your own UI framework and integrations.

Zero Lock-in

Deep indigo to purple — a full-strength gradient used as a card ground.

Mint to blue

The fourth gradient in the family, at full strength.

src/pages/index.astroastro.config.mjsTerminal

1---
2import Layout from "../layouts/Layout.astro"
3import Counter from "../components/Counter.jsx"
4import Old from "../components/Old.jsx"
5---
6
7<Layout title="Home">
8  <Counter client:visible />
9</Layout>  selection

Monochrome pills on navy

Primary · 42px · 9999px · 16/400 — chrome never carries a gradient

Get Started Hover Disabled

Secondary & tertiary · translucent gray on rgba(132,139,152,.30) hairlines

Integrate your stack Hover Disabled Browse more themes Hover

Filter pills 40px · version chip 36px · skip link · embedded demo button (the one 8px radius)

Trending E-Commerce Blog Astro 7.1 · Available now Skip to content Add to cart

Accent hexes — text and highlights, never fills

#54b9ff link #4bf3c8 mint #acafff periwinkle #ffd493 sand #d83333 red

Code-panel row in field position · 8px radius · --ec-codeBg on an --ec-brdCol hairline — default and focus

›npm create astro@latest

›npx astro add react

Chrome stays monochrome — every control is a 9999px pill on translucent gray, and the only 8px radius belongs to embedded framework demos and code panels. The gradients live on cards and badges. No form fields were exposed on the marketing site, so input styles were not captured. The pair above instead stands the real Expressive Code panel row up in field position, borrowing only captured tokens: --ec-codeBg #17191e body, an --ec-brdCol rgb(84,88,100) hairline, the 8px panel radius, the mono code face and --ec-gtrFg #686c76 for the resting text and caret, with the prompt in --ec-uiSelFg #4bf3c8. Its focus state uses the one focus value the site does publish — the real captured Expressive Code --ec-focusBrd #00daef — on the border and caret, lifting the text to --ec-codeFg #eef0f9. Hover fills and transition timings were not captured; the button hover states above step the captured glass fills.

One family, 700 against 300

Hero h1 · Obviously · 48/52.8 · 700The web framework

Lead h2 · Obviously · 36/40 · 300Optimized for content

Section h2 · Obviously · 30/36 · 400Astro Islands

Card label h2 · ui-sans-serif · 16/24 · 600Server-First

Product label h2 · ui-sans-serif · 16/24 · 500 · #858b98Snapback Cap

Lead paragraph · Inter · 18/27 · 200Astro powers the world’s fastest sites.

Body · ui-sans-serif · 16/24 · 300Astro improves website performance.

Button label · ui-sans-serif · 16 · 400 (600 skip)Get Started

Navy ladder, gradient family

Surfaces

deep#060913

deep-alphargba(5,9,18,.55)

canvas#0c0f19

canvas-2#0d0f14

panel#17191e

panel-2#23262d

surface#343841

glassrgba(43,43,43,.30)

glass-2rgba(44,44,44,.50)

glass-3rgba(14,16,20,.50)

white#ffffff

Text & borders

text#f2f6fa

text-2#eef0f9

body#bfc1c9

muted#858b98

on-accent#030712

borderrgba(135,140,150,.20)

border-2rgba(132,139,152,.30)

border-strongrgb(84,88,100)

Accents — text and highlights only

blue#54b9ff

mint#4bf3c8

periwinkle#acafff

sand#ffd493

red#d83333

cyan-react#61dafb

Gradient family — full strength above, its own low-alpha wash below

indigo 83.21deg · wash .25

red 66.77deg · wash .20

yellow 266.93deg · wash .15

mint 247.23deg · no wash

deep indigo → purple

Expressive Code component tokens (--ec-*) — not brand chrome

codeBg#17191e

codeFg#eef0f9

codeSelBg#3d4dfff0

gtrFg#686c76

gtrBrdCol#686c7633

gtrHlFg#858b98f9

uiSelBg#094771

uiSelFg#4bf3c8

focusBrd#00daef

sbThumbCol#343841

sbThumbHover#555965

tm-markBg#264a8980

tm-markBrd#5570b3d0

tm-insBg#26561c80

tm-insBrd#4e7e41d0

tm-insDiffInd#7eb070d0

tm-delBg#81322b80

tm-delBrd#ae594fd0

tm-delDiffInd#e68a7ed0

frm-trmTtbFg#cccccc

frm-shdCol#ffffff00

Ladder and glass, no shadow

8px panel / demo

9999px chrome

#060913

#0c0f19

#17191e

#23262d

#343841

#555965

Depth is the surface ladder plus translucent glass fills and rgba hairlines — no meaningful drop-shadow recipe was resolved, and the Expressive Code frame publishes a fully transparent --ec-frm-shdCol: #ffffff00. The gradient family is the entire effect layer; there is no WebGL, canvas or backdrop-filter. Motion values were not captured.