A deep-navy framework page whose signature is extreme weight contrast inside one display family — Obviously at 700 sitting directly above a 300-weight line of the same face, over Inter body copy at an exceptionally light 200; colour arrives as a family of angled two-stop gradients each published twice, at full strength on a badge and as a 15-25% alpha wash for the card ground behind it, while the chrome itself stays resolutely monochrome pills on translucent gray.
Browse Astro in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: astro.build (live DOM, computed styles), 2026-07-19. Coverage: home / framework landing. No logged-in surface exists. Note: the page also publishes an --ec-* token set from Expressive Code (the code-block component library used in Astro's docs). Those are component tokens, recorded separately in §2 rather than treated as brand chrome.
Astro is a dark, deep-navy framework page — canvas #0c0f19 over #060913 — with a genuinely unusual typographic setup: the display face Obviously is used across an extreme weight range, from 700 at 48px down to 300 at 36px, so the hero headline and the sentence beneath it are the same family at opposite ends of the scale. Body copy runs Inter at weight 200, which is lighter than almost anything else in this library. Colour arrives as a family of angled two-stop gradients — indigo→violet, red→magenta, mint→blue, yellow→coral — each also published as a 15-25% alpha wash for card grounds, so the same gradient appears twice at two intensities. Chrome itself is nearly monochrome: translucent gray pills on the navy. Feels: deep, spacey, gradient-lit, technical.
| Token | Hex | Role / usage |
|---|---|---|
canvas | #0c0f19 | Page ground (deep navy) |
canvas-2 | #0d0f14 | Secondary ground |
deep | #060913 | Deepest ground |
deep-alpha | rgba(5,9,18,0.55) | Translucent chip ground |
panel | #17191e | Code / panel fill |
panel-2 | #23262d | Tab bar fill |
surface | #343841 | Raised chrome, scrollbar thumb |
glass | rgba(43,43,43,0.30) | Secondary button fill |
glass-2 | rgba(44,44,44,0.50) | Tertiary button fill |
glass-3 | rgba(14,16,20,0.50) | Faint panel |
white | #ffffff | Primary button fill, headings |
| Token | Hex | Role / usage |
|---|---|---|
text | #f2f6fa | Headlines |
text-2 | #eef0f9 | Code foreground / bright text |
body | #bfc1c9 | Body copy (most common) |
muted | #858b98 | Meta, secondary labels |
on-accent | #030712 | Text on a bright accent fill |
border rgba(135,140,150,0.20) · border-2 rgba(132,139,152,0.30) · border-strong rgb(84,88,100)
| Token | Hex | Role / usage |
|---|---|---|
blue | #54b9ff | Link / highlight |
mint | #4bf3c8 | Highlight, code selection foreground |
periwinkle | #acafff | Highlight |
sand | #ffd493 | Highlight |
red | #d83333 | Brand red, gradient stop |
cyan-react | #61dafb | Framework-demo accent (React) |
Each is published both as a solid two-stop gradient and as a low-alpha wash for the card behind it:
| Name | Gradient | Wash |
|---|---|---|
| Indigo→violet | linear-gradient(83.21deg, rgb(50,69,255) 0%, rgb(184,69,237) 100%) | linear-gradient(to right bottom, rgba(50,69,255,.25), rgba(74,242,200,.25)) |
| Deep indigo→purple | linear-gradient(to right top, rgb(19,33,172), rgb(136,26,189)) | — |
| Red→magenta | linear-gradient(66.77deg, rgb(216,51,51) 0%, rgb(240,65,255) 100%) | linear-gradient(to right bottom, rgba(216,51,51,.2), rgba(240,65,255,.2)) |
| Mint→blue | linear-gradient(247.23deg, rgb(74,242,200) 0%, rgb(47,76,179) 100%) | — |
| Yellow→coral | linear-gradient(266.93deg, rgb(248,228,46) 0%, rgb(255,125,84) 100%) | linear-gradient(to right bottom, rgba(248,228,46,.15), rgba(255,125,84,.15)) |
--ec-*, docs code blocks)codeBg #17191e · codeFg #eef0f9 · codeSelBg #3d4dfff0 · brdCol rgb(84,88,100) · gtrFg #686c76 · gtrBrdCol #686c7633 · gtrHlFg #858b98f9 · uiSelBg #094771 · uiSelFg #4bf3c8 · focusBrd #00daef · sbThumbCol #343841 · sbThumbHoverCol #555965 · tm-markBg #264a8980 / markBrdCol #5570b3d0 · tm-insBg #26561c80 / insBrdCol #4e7e41d0 / insDiffIndCol #7eb070d0 · tm-delBg #81322b80 / delBrdCol #ae594fd0 / delDiffIndCol #e68a7ed0 · frm-edActTabBg #17191e · frm-edTabBarBg #23262d · frm-trmTtbFg #cccccc
Rules. Chrome is monochrome — translucent gray pills on navy. The gradients are for cards, badges and illustration, never for buttons. Accent hexes (blue, mint, periwinkle, sand) appear as text and highlights, not as fills.
Obviously, obviously-fallback — worked across an extreme weight rangeInter, inter-fallbackui-sans-serif, system-ui| Role | Family | Size/Line | Weight |
|---|---|---|---|
| Hero h1 | Obviously | 48/52.8 | 700 |
| Lead h2 | Obviously | 36/40 | 300 |
| Section h2 | Obviously | 30/36 | 400 |
| Card label h2 | ui-sans-serif | 16/24 | 600 |
| Product label h2 | ui-sans-serif | 16/24 | 500 (#858b98) |
| Lead paragraph | Inter | 18/27 | 200 |
| Body | ui-sans-serif | 16/24 | 300 |
| Button label | ui-sans-serif | 16 | 400 (600 on skip link) |
Patterns: the display family spans 300 to 700 with no settled mid-weight — the hero at 700 sits directly above a 300-weight line in the same face, which is the page's signature typographic contrast. Body copy at Inter 200 is exceptionally light. Tracking is normal at every size. Sentence case; no uppercase eyebrows.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.