---
version: alpha
name: Astro
description: Dark design system extracted from astro.build (DOM-true values, Emblematic extractor 0.2.0, 2026-11-12).
colors:
  background: "#060913"
  surface: "#0C0F19"
  on-surface-variant: "#BFC1C9"
  on-surface: "#FFFFFF"
  color-5: "#1A3E57"
  color-6: "#3245FF4D"
  color-7: "#BC52EE1A"
  color-8: "#40DEBF4D"
  color-9: "#334BA94D"
  color-10: "#F2F6FA"
  color-11: "#D83333"
  color-12: "#0D0F144D"
  color-13: "#F041FF"
  color-14: "#000000"
  color-15: "#07040F"
  ec-sbthumbcol: "#343841"
  primary: "#FFFFFF"
  on-primary: "#00000000"
typography:
  display-lg:
    fontFamily: Obviously
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.1
  headline-md:
    fontFamily: Obviously
    fontSize: 36px
    fontWeight: 300
    lineHeight: 1.111
  body-md:
    fontFamily: SF Pro (system-ui)
    fontSize: 16px
    fontWeight: 300
    lineHeight: 1.5
  body-sm:
    fontFamily: Menlo
    fontSize: 13.6px
    fontWeight: 400
    lineHeight: 1.65
rounded:
  sm: 8px
  md: 12px
  lg: 16px
  full: 9999px
spacing:
  xxs: 3px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 21.5px
  3xl: 24px
  4xl: 32px
  5xl: 48px
  6xl: 80px
  base: 8px
  container: 1280px
components:
  button-primary:
    backgroundColor: "{colors.on-surface}"
    textColor: "#00000000"
    rounded: "{rounded.full}"
    padding: 8px
    height: 42px
  button-secondary:
    textColor: "{colors.on-surface-variant}"
    rounded: "{rounded.full}"
    padding: 8px
    height: 42px
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    padding: 0px
  input:
    backgroundColor: "{colors.background}"
    rounded: "{rounded.sm}"
    padding: 4px
    height: 40px
---

# Astro

> Extracted from [https://astro.build/](https://astro.build/) on 2026-11-12 by Emblematic. Every value below was read from the rendered DOM (computed styles, `document.fonts`, and the fonts Chrome actually used to paint text), not estimated from pixels. When the YAML front matter and this prose disagree, the YAML wins. Copy values from this file exactly; don't transcribe them from memory. Don't copy logos, imagery, illustrations or marketing copy.

## Overview

Astro uses a dark canvas (#060913) with a palette. Type is set in **SF Pro (system-ui)**, **Obviously** (display), **Menlo** (mono), with 16px body text. Layout: 1280px container, top-static+transparent navigation, 11 sections. Built with astro, tailwind, mintlify, cloudflare.

## Colors

Area-weighted from painted backgrounds, text and borders on the 1440px light capture. Roles are inferred from usage (largest background, most text, interactive fills). Every hex is an exact computed value; a role marked *unverified* is a best guess that has not passed review, so its canonical token (e.g. `primary`) is left out of the front matter.

| Token | Hex | OKLCH | Role | Share of paint | CSS variable |
|---|---|---|---|---|---|
| `background` | `#060913` | 0.142 0.023 268.4 | bg | 41.5% | — |
| `surface` | `#0C0F19` | 0.171 0.022 271.1 | surface | 20.6% | — |
| `on-surface-variant` | `#BFC1C9` | 0.812 0.011 274.9 | muted | 3.0% | — |
| `on-surface` | `#FFFFFF` | 1 0 0 | text | 1.3% | `--tw-ring-offset-color` |
| `color-5` | `#1A3E57` | 0.35 0.06 241.7 | other | 6.1% | — |
| `color-6` | `#3245FF4D` (on bg `#131B5A`) | 0.519 0.268 268.7 | other | 4.5% | — |
| `color-7` | `#BC52EE1A` (on bg `#181029`) | 0.641 0.233 313 | other | 4.5% | — |
| `color-8` | `#40DEBF4D` (on bg `#174947`) | 0.812 0.136 176.4 | other | 4.1% | — |
| `color-9` | `#334BA94D` (on bg `#131D40`) | 0.45 0.153 268.7 | other | 4.1% | — |
| `color-10` | `#F2F6FA` | 0.971 0.007 247.9 | other | 1.5% | — |
| `color-11` | `#D83333` | 0.58 0.201 26.2 | other | 0.83% | — |
| `color-12` | `#0D0F144D` (on bg `#080B13`) | 0.169 0.011 268 | other | 0.82% | — |
| `color-13` | `#F041FF` | 0.704 0.286 324.5 | other | 0.82% | — |
| `color-14` | `#000000` | 0 0 0 | other | 0.80% | — |
| `color-15` | `#07040F` | 0.121 0.028 297.8 | other | 0.72% | — |
| `ec-sbthumbcol` | `#343841` | 0.34 0.017 266.4 | other | 0.65% | `--ec-sbThumbCol` |

Sparse chromatic highlights (not accents): `#61DAFB`, `#6B7AAB`.

Contrast: text on background 19.88:1, muted text 11.06:1, accent 19.88:1.

Gradients in use: `linear-gradient(270deg, rgba(188, 82, 238, 0.1) 100%, rgba(50, 69, 255, 0.3) 100%)`; `linear-gradient(270deg, rgba(64, 222, 191, 0.3) 0%, rgba(51, 75, 169, 0.3) 100%)`.

The site does not change under `prefers-color-scheme: dark`.

## Typography

| Family | Role | Weights | Share of text | Source |
|---|---|---|---|---|
| **SF Pro (system-ui)** (CSS: `ui-sans-serif`) | body | 300, 400, 500, 600, 700 | 58.8% | system (stack `ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "`, resolved on macos) |
| **Obviously** | display | 300, 700 | 32.7% | webfont |
| **Menlo** (CSS: `ui-monospace`) | mono | 300, 400 | 6.3% | system (stack `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Libe`, resolved on macos) |
| **Inter** | other | 200, 400 | 2.1% | webfont |

Declared in `@font-face` but not used to paint text on this page: MDIO. Don't treat these as the page's fonts.

Scale (px): 12, 13.5, 14, 16, 18, 20, 30, 36, 48. Effective ratio ≈ 1.246 (close to a major third). Body 16px at line-height 1.5; display 48px with tracking 0em. Headings are sentence case. On a 390px viewport the body is 16px and display 30px.

## Layout

Spacing follows a 8px base unit; the most used steps are 3, 4, 8, 12, 16, 20, 21.5, 24, 32, 48, 80px. Sections open with about 147px of space before their first line of text. Content sits in a 1280px container on a 2-column grid. Text density 0.071 (text area / page area).

Section order (desktop). Kinds below the review threshold are shown as *section*:

1. **nav** (80px, bg #060913)
2. **hero** — “The web framework for content-driven websites” (764px, bg #060913)
3. **section** — “Customizable” (542px, bg #060913)
4. **logos** — “Astro Islands” (754px, bg #060913)
5. **section** — “Snapback Cap” (931px, bg #060913)
6. **section** — “Fully Featured” (1643px, bg #060913)
7. **section** — “Themes” (904px, bg #060913)
8. **section** — “Get professional Astro support” (499px, bg #060913)
9. **section** — “Start building with Astro today” (850px, bg #060913)
10. **section** — “Astro is free, open-source software made possible by these wonderful sponsors” (1474px, bg #060913)
11. **footer** — “Legal” (430px, bg #060913)

## Elevation & Depth

Style: subtle. Most used shadows:

- `rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px`
- `rgba(24, 24, 27, 0.03) 0px 5px 2px 0px, rgba(24, 24, 27, 0.1) 0px 3px 2px 0px, rgba(24, 24, 27, 0.17) 0px 1px 1px 0px, rgba(24, 24, 27, 0.2) 0px 0px 1px 0px`

## Shapes

Dominant corner radius 16px; radii in use: 8px, 12px, 16px, pill. Borders: hairline (1px).

## Components

- **button-primary**: backgroundColor `#FFFFFF`, textColor `#00000000`, rounded `9999px`, padding `8px 16px`, height `42px`, fontFamily `SF Pro (system-ui)`, fontSize `16px`, fontWeight `400` (e.g. “Get Started”)
- **button-secondary**: textColor `#BFC1C9`, rounded `9999px`, padding `8px 16px`, height `42px`, fontFamily `SF Pro (system-ui)`, fontSize `16px`, fontWeight `400`, border `1px solid #858B984D` (e.g. “Integrate your favorite framew”)
- **card**: rounded `16px`, padding `0px`, backgroundColor `#0C0F19`, border `1px solid #858B9833`
- **input**: rounded `8px`, height `40px`, padding `4px 12px`, backgroundColor `#060913`, border `1px solid #23262D`

## Do's and Don'ts

- Do set body copy in SF Pro (system-ui) at 16px / 1.5.
- Do use Obviously only for display sizes, not for body text.
- Don't introduce font weights beyond 200, 300, 400, 500, 600, 700.
- Do keep corners at 16px for most controls, and use the larger radii only for cards and media.
- Do snap spacing to multiples of 8px.
- Don't copy this site's logos, illustrations, photography or copy; use the system, not the brand assets.

## Provenance

Spec v2, extractor 0.2.0. Render quality: **ok**. Vision pass: not run. Fields below confidence 0.7 are hedged or left out above: `color.accent_strategy`, `layout.columns`, `layout.hero`, `layout.section_count`, `sections[].kind`, `space.section_padding_px`. Full per-field provenance is in `spec.json`.