---
title: "Astro design system"
variant: extended
source: https://astro.build/
captured_at: 2026-10-12
theme: dark
industry: devtools
generator: Design DNA (https://four.wiralomi.com/style/astro-build)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Astro · Design System

> A vivid, technical canvas for content-first web building.

**Theme:** dark · **Industry:** devtools · **Source:** https://astro.build/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Astro’s homepage combines a near-black technical foundation with luminous purple and blue gradients to introduce its web framework. Product demos, capability cards, sponsor marks, and direct start commands turn the long page into a practical developer-oriented tour.

## North star

Keep the page grounded in near-black, and reserve vivid gradients and bright accents for moments that explain or invite action.

## Overview

The page pairs a near-black canvas (#060913) with restrained dark card surfaces, letting its expansive purple-blue hero gradient carry the first impression. White and cool pale text establish a clear reading hierarchy; muted gray supports navigation, captions, and secondary copy. Cyan and mint appear as selective signals in code samples, charts, and interface details rather than as broad page fills. Oversized, bold display headings use Obviously, while light sans-serif body copy keeps dense technical explanations approachable. The layout begins with a centered, high-impact hero and logo rows, then shifts to left-aligned feature explanations and dark bordered cards. Product screenshots, code panels, theme previews, and sponsor logos supply visual variety without abandoning the dark system. Compact spacing and repeated card groupings support a long, information-rich page; rounded controls and subtle hairlines define interaction boundaries without prominent shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Canvas | `#060913` | `--color-midnight-canvas` | brand | Primary page background and the continuous dark foundation beneath the page sections. |
| Moonlit Gray | `#bfc1c9` | `--color-moonlit-gray` | neutral | Muted navigation, footer links, and secondary text on dark backgrounds. |
| Deep Panel | `#0c0f19` | `--color-deep-panel` | surface | Main feature-card background, usually paired with a thin border. |
| Slate Hairline | `#20232d` | `--color-slate-hairline` | semantic | Fine card, footer, and interface outlines that separate dark surfaces. |
| Cool Porcelain | `#f2f6fa` | `--color-cool-porcelain` | neutral | Primary pale text for navigation, card copy, and interface labels. |
| Bright White | `#ffffff` | `--color-bright-white` | neutral | High-contrast headings, selected links, logos, and light call-to-action surfaces. |
| Ocean Slate | `#1a3e57` | `--color-ocean-slate` | surface | Dark blue surface sampled in media and interface imagery, not a dominant page canvas. |
| Violet Dusk | `#181029` | `--color-violet-dusk` | accent | Deep violet gradient stop in atmospheric section and hero treatments. |
| Indigo Night | `#131b5a` | `--color-indigo-night` | accent | Deep indigo gradient stop within the page’s purple-blue visual atmosphere. |
| Electric Cyan | `#61dafb` | `--color-electric-cyan` | accent | Bright interactive and interface accent, including the measured add-to-cart demo button. |
| Deep Teal | `#174947` | `--color-deep-teal` | accent | Dark teal gradient stop used in atmospheric section treatments. |
| Blue Depth | `#131d40` | `--color-blue-depth` | accent | Dark blue gradient stop paired with teal in a low-key atmospheric treatment. |
| Black Plum | `#07040f` | `--color-black-plum` | surface | Near-black card surface used in selected panels and embedded media. |
| Editor Charcoal | `#17191e` | `--color-editor-charcoal` | surface | Code-editor and terminal mockup surfaces, with occasional card use. |
| Soft Graphite | `#858b98` | `--color-soft-graphite` | neutral | Lower-emphasis text and details within technical interface content. |
| Graphite Edge | `#252832` | `--color-graphite-edge` | semantic | Subtle outlines and interface boundaries, including sponsor and link treatments. |
| Mint Signal | `#4bf3c8` | `--color-mint-signal` | accent | Selective mint text and chart or interface highlights; not a general background color. |

### Semantic aliases

`--color-canvas` → `#060913` (Midnight Canvas) · `--color-surface` → `#0c0f19` (Deep Panel) · `--color-surface-2` → `#1a3e57` (Ocean Slate) · `--color-surface-3` → `#07040f` (Black Plum) · `--color-surface-4` → `#17191e` (Editor Charcoal) · `--color-text` → `#ffffff` (Bright White) · `--color-text-muted` → `#bfc1c9` (Moonlit Gray) · `--color-border` → `#20232d` (Slate Hairline) · `--color-accent` → `#1a3e57` (Ocean Slate) · `--color-accent-2` → `#61dafb` (Electric Cyan) · `--color-accent-3` → `#4bf3c8` (Mint Signal) · `--color-on-accent` → `#030712`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#060913` | 19.88:1 | AAA |
| `#ffffff` | `#0c0f19` | 19.13:1 | AAA |
| `#ffffff` | `#1a3e57` | 11.23:1 | AAA |
| `#ffffff` | `#07040f` | 20.32:1 | AAA |
| `#bfc1c9` | `#060913` | 11.06:1 | AAA |
| `#bfc1c9` | `#0c0f19` | 10.64:1 | AAA |
| `#bfc1c9` | `#1a3e57` | 6.25:1 | AA |
| `#bfc1c9` | `#07040f` | 11.31:1 | AAA |
| `#1a3e57` | `#060913` | 1.77:1 | fail |
| `#1a3e57` | `#0c0f19` | 1.7:1 | fail |

### Gradients

- `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%)`
- `linear-gradient(66.77deg, rgb(216, 51, 51) 0%, rgb(240, 65, 255) 100%)`
- `linear-gradient(83.21deg, rgb(50, 69, 255) 0%, rgb(184, 69, 237) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ui-sans-serif | `--font-body` | system | 300, 400, 600, 500, 700 | Body copy, navigation, buttons, and everyday interface text. | Inter |
| ui-monospace | `--font-mono` | system | 400, 300 | Captions, code snippets, terminal commands, and technical labels. | IBM Plex Mono |
| Obviously | `--font-display` | webfont | 700, 300 | Display headings, including the hero and section titles. | Space Grotesk |
| Inter | `--font-inter` | webfont | 200, 400 | Small supporting share of interface and text styles. | Inter |

- **ui-sans-serif:** Light-weight body and navigation; use regular button labels and semibold links. Sentence case throughout.
- **ui-monospace:** Regular or light monospace with compact, readable lines; use for code and utility details.
- **Obviously:** Bold hero and smaller section headings; light-weight large secondary headings. No all-caps treatment.
- **Inter:** Use sparingly as a clean webfont sans-serif; retain the measured light and regular weights.

### Type scale — Perfect Fourth (ratio ≈ 1.316, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 700 | 1.1 | 0 | — | Obviously | Centered hero statement introducing Astro’s content-driven web framework. |
| h2 | 36px | 300 | 1.11 | 0 | — | Obviously | Large section-level headings, with a light display treatment. |
| h3 | 30px | 700 | 1.2 | 0 | — | Obviously | Feature and content-card titles. |
| h4 | 20px | 700 | 1.4 | 0 | — | Obviously | Compact card or subsection headings. |
| body | 16px | 300 | 1.5 | 0 | — | ui-sans-serif | Explanatory feature copy, descriptions, and general content. |
| caption | 13.5px | 400 | 1.65 | 0 | — | ui-monospace | Small technical notes, labels, and interface captions. |
| button | 16px | 400 | 1.5 | 0 | — | ui-sans-serif | Primary actions and utility controls. |
| nav | 16px | 300 | 1.5 | 0 | — | ui-sans-serif | Header navigation and secondary navigation. |
| link | 16px | 600 | 1.5 | 0 | — | ui-sans-serif | Emphasized links within cards and content. |
| code | 13.5px | 400 | 1.65 | 0 | — | ui-monospace | Terminal commands and code-editor examples. |

OpenType features in use: `"calt", "zero"`, `"calt", "cv09", "liga", "salt", "ss06", "ss11"`.

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 2, 3, 4, 8, 12, 16, 20, 22, 24, 32 px.
- Section rhythm 32px · element gap 8px · card padding — · max content width 1216px.

Use a centered, wide content frame capped by the measured 1216px page maximum. The hero is centered, spacious, and visually distinct; below it, content shifts between aligned feature introductions, multi-column card grids, media demonstrations, and centered CTA or sponsor areas. Keep the long-page rhythm compact but clearly sectioned, with an 8px base spacing unit and measured 32px section gap. Dark full-width bands remain continuous, while cards and media create local structure.

## Shape & elevation

- Radius: button `9999px` · input `8px` · card `16px` · media `12px` · link `12px` · xs `8px` · sm `12px` · md `16px` · pill `9999px`
- Shadow `sm` (nav): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px`
- Shadow `sm-2` (card): `rgba(255, 255, 255, 0) 1.6px 1.6px 3.2px 0px`
- Shadow `sm-3` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, 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, `
- Motion: standard transition `0.3s cubic-bezier(0, 0, 0.2, 1)` on interactive elements.

The interface is mostly flat: dark surfaces, thin gray borders, and contrast do more work than shadows. Separate cards from the canvas with subtle hairlines and rounded corners; use modest layering for code and product mockups. Avoid conspicuous drop shadows or glossy, floating panels.

## Imagery

Favor interface imagery over lifestyle photography: code editors, terminal commands, charts, product previews, theme thumbnails, and sponsor logos. Frame demos in dark, subtly bordered panels with softly rounded corners. The hero’s purple-blue gradient is atmospheric backdrop rather than a photo. Keep illustration and UI color variation contained within the showcased product or logo artwork.

## Components

### Hero actions

A centered white pill-shaped Get Started action sits above a dark command strip. Use high contrast and make the copyable npm command feel like a compact terminal element.

### Navigation

Place the Astro mark at the left, muted lightweight links across the header, and a compact community or GitHub icon at the right.

### Feature cards

Use #0c0f19 panels with a 1px #20232d outline and rounded corners for concise feature descriptions and product capabilities.

### Code and product demo

Combine charcoal editor or terminal panels with an adjacent product preview, using cyan selectively for interface emphasis.

### Performance comparison

Show labeled framework rows and horizontal bars inside a dark bordered card, with brighter cyan-to-mint emphasis for Astro.

### Theme gallery

Present website previews as a compact image grid with category filters and dark framing; keep colorful preview art inside its own tiles.

### Sponsor grid

Arrange sponsor marks in a structured, dark grid with thin separators and generous logo visibility.

### Measured component styles

- **Primary button** (“Add to cart”): background #61dafb · text #030712 · radius 8px · padding 8px 16px · 400 16px ui-sans-serif
- **Secondary button** (“E-Commerce”): background #11131a · text #f2f6fa · radius 9999px · padding 8px 24px · 400 16px ui-sans-serif
- **Link** (“Content Collections”): transparent background · text #ffffff · radius 0px · padding 0px · 600 16px ui-sans-serif
- **Input**: transparent background · text #f2f6fa · border 1px solid #23262d · radius 8px · padding 4px 12px · 400 16px ui-sans-serif
- **Card** (“Content Collections Organize your Markdo”): background #0c0f19 · text #f2f6fa · border 1px solid #20232d · radius 16px · padding 0px · 400 16px ui-sans-serif
- **Navigation item** (“Documentation”): transparent background · text #bfc1c9 · radius 0px · padding 0px · 300 16px ui-sans-serif

## Do

- Use #060913 as the primary page canvas.
- Reserve vivid purple-blue gradients for prominent visual moments.
- Use #0c0f19 cards with #20232d hairline borders.
- Set display headings in a bold, distinctive sans-serif.
- Use monospace styling for code and terminal commands.
- Keep cyan and mint accents selective and functional.
- Balance dense feature content with clear section breaks.

## Don't

- Do not replace the dark canvas with a light page background.
- Do not spread gradients across every card or section.
- Do not use bright accents for long passages of body copy.
- Do not rely on heavy shadows to separate content.
- Do not make product imagery brighter than the page’s core hierarchy.
- Do not use oversized all-caps labels or generic marketing decoration.

## Agent prompt

Build a developer-tools page using Astro’s dark, technical visual language. Use Midnight Canvas (#060913) as the foundation, Cool Porcelain (#f2f6fa) and Bright White (#ffffff) for readable foregrounds, and Moonlit Gray (#bfc1c9) for secondary copy. Give content panels Deep Panel (#0c0f19) surfaces with Slate Hairline (#20232d) borders. Apply purple-blue gradients sparingly to a hero or featured visual; reserve Electric Cyan (#61dafb) and Mint Signal (#4bf3c8) for meaningful UI emphasis. Use a distinctive bold sans-serif for headings, lightweight sans-serif body text, and monospace for commands and technical labels. Structure the page with a centered hero, modular feature cards, dark-framed product examples, and clear section transitions. Keep shadows understated and controls rounded.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | feature-split | Dark section with a left-aligned introduction and three concise capability highlights. | Feature overview, Scannable benefit copy | Small category label, Icon-led feature columns, Muted supporting text |
| 2 | feature-grid | Multi-column grid of dark feature cards with text and embedded technical visuals. | Browse capabilities, Related feature discovery | Bordered cards, Code and interface mockups, Compact headings |
| 3 | gallery | Left-aligned theme and partner introductions followed by preview grids and a wide centered CTA panel. | Filter theme categories, Explore partner options, Start-building CTA | Website preview tiles, Small category controls, Gradient CTA surface |
| 4 | cta | Centered heading, primary action, and command inside a large visual panel. | Primary conversion action, Copyable start command | Gradient media panel, Pill-shaped action, Dark command strip |
| 5 | logo-cloud | Centered title above a structured sponsor grid. | Recognize sponsors, Browse supporting organizations | Dark logo cells, Fine dividers, Centered brand marks |
| 6 | footer | Multi-column footer with newsletter signup, link groups, and a lower legal and social row. | Newsletter signup, Browse resource links, Access legal and social destinations | Dark footer band, Compact form fields, Subtle separators |

## Source CSS custom properties (selected)

```css
--ec-codeFontFml: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;
--ec-codeFontSize: 0.85rem;
--ec-codeFontWg: 400;
--ec-codeBg: #17191e;
--ec-codeFg: #eef0f9;
--ec-codeSelBg: #3d4dfff0;
--ec-gtrFg: #686c76;
--ec-gtrHlFg: #858b98f9;
--ec-uiFontSize: 0.9rem;
--ec-uiFontWg: 400;
--ec-uiSelBg: #094771;
--ec-uiSelFg: #4bf3c8;
--ec-tm-lineMarkerAccentMarg: 0rem;
--ec-tm-lineMarkerAccentWd: 0.15rem;
--ec-tm-markBg: #264a8980;
--ec-tm-insBg: #26561c80;
--ec-tm-delBg: #81322b80;
--ec-frm-edActTabBg: #17191e;
--ec-frm-edActTabFg: #eef0f9;
--ec-frm-edTabBarBg: #23262d;
--ec-frm-edBg: #17191e;
--ec-frm-trmTtbFg: #cccccc;
--ec-frm-trmTtbDotsFg: #cccccc;
--ec-frm-trmTtbBg: #17191e;
--ec-frm-trmBg: #23262d;
--ec-frm-inlBtnFg: #eef0f9;
--ec-frm-inlBtnBg: #eef0f9;
--ec-frm-inlBtnBgIdleOpa: 0;
--ec-frm-inlBtnBgHoverOrFocusOpa: 0.2;
--ec-frm-inlBtnBgActOpa: 0.3;
--ec-frm-tooltipSuccessBg: #168659;
--ec-frm-tooltipSuccessFg: white;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/astro-build