# Astro · Design system migration spec

> Source: https://astro.build  ·  Curated by OpenDesign  ·  en

> Worth including as a prime example of a modern, high-end developer tool landing page with a strong, cohesive visual identity.

## 1. Identity DNA

Astro’s design system is built for precision and performance, much like a high-performance sports car engineered for the track. Every component is stripped of excess, prioritizing speed and directness. The system’s identity is rooted in being developer-focused and content-driven, a framework that gets out of the way.

**One-liner:** The web framework for content-driven websites.
**Keywords:** developer-focused · content-driven · fast · modern · modern-framework
**Analogy:** A high-performance sports car for building websites.

## 2. Color

The color system is anchored by a deep, dark background, creating a premium, high-contrast canvas. This foundation allows vibrant gradients and crisp white typography to stand out with clarity and focus.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#0D0F14` | main background |
| `--bg-soft` | `#12151C` | card background |
| `--ink` | `#F2F6FA` | body text |
| `--ink-soft` | `#BFC1C9` | secondary text |
| `--muted` | `#858B98` | placeholder |
| `--accent` | `#54B9FF` | single accent |
| `--line` | `rgba(133, 139, 152, 0.2)` | divider |

**Color principle:** Deep, dark backgrounds create a premium, high-contrast canvas for vibrant gradients and crisp white typography.

The principle is restraint: a limited palette of dark blues, purples, and whites maintains visual cohesion and avoids chromatic clutter.

## 3. Typography

Typography employs clean, geometric grotesque-sans for headlines and body, establishing a technical, modern voice. Monospace fonts are reserved strictly for code, creating a clear visual hierarchy between prose and command.

- **Display:** grotesque-sans
- **Body:** grotesque-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 64px | 1.0 | 700 | -1px | Hero headline |
| h2 | 30px | 1.2 | 600 | 0px | Section headlines |
| body | 16px | 1.5 | 400 | 0px | Paragraphs |
| caption | 13.6px | 1.65 | 400 | 0px | Small text and captions |

**Type rules:**
- Use clean, geometric grotesque-sans for headlines and body text to maintain a technical, modern feel.
- Deploy monospace fonts strictly for code snippets and CLI commands.
- Maintain tight letter spacing on large display text for impact.

## 4. Spacing

Spacing is governed by a strict 4px grid, creating a consistent and predictable rhythm throughout the interface.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Based on a 4px grid, with generous padding (16px, 24px, 32px) defining section boundaries and component spacing.

## 5. Surfaces

- **Radius:** sm 4px · md 8px · lg 16px · pill 9999px
- **Shadows:**
  - rgba(24, 24, 27, 0.3) 0px 1px 2px 0px
  - rgba(0, 0, 0, 0.1) 0px 1px 3px 0px
- **Borders:** 1px solid rgba(133, 139, 152, 0.2)

## 6. Layout

The layout skeleton begins with a centered, single-column hero for maximum impact. This structure then transitions into a multi-column grid to showcase themes and content modules efficiently.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered, single-column hero with stacked content, transitioning into a multi-column grid for theme showcases.

## 7. Motion & Interaction

Motion is functional and understated, applied consistently to interactive states. Transitions are smooth and measured, focusing on color, opacity, and transform changes to provide feedback without distraction.

- **Durations:** micro 150ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color and background-color transitions for interactive elements.
  - Subtle opacity and box-shadow transitions for hover states.
  - Transform transitions for interactive feedback.

- **Hover:** Smooth color and background-color transitions with a standard easing curve.
- **Click:** Standard pointer cursor with no immediate, jarring visual shifts.
- **Transition:** 150ms to 500ms transitions for color, background-color, border-color, fill, stroke, opacity, box-shadow, and transform.
- **Keyboard:** Focusable elements receive a custom focus ring or outline.

## 8. Voice & Don'ts

The editorial voice is confident, direct, and developer-centric. It avoids flowery language and passive constructions, opting instead for bold, value-oriented statements.

- **Tone:** Confident, developer-centric, and straightforward.
- **Headline style:** Bold, direct, and value-oriented statements.
- **CTA style:** Clear, action-oriented phrases like 'Get Started'.
- **Avoid:** Flowery or overly marketing-heavy language / Passive voice / Technical jargon without context

### Don'ts
- ❌ Don't use bright, saturated backgrounds — screenshot shows deep, dark gradients.
- ❌ Don't use decorative or serif fonts — screenshot shows clean, geometric sans-serifs.
- ❌ Don't use sharp, rectangular buttons — screenshot shows pill-shaped buttons with full rounding.
- ❌ Don't use thin, light text weights for headlines — screenshot shows bold (700) and semi-bold (600) weights.
- ❌ Don't use a busy or cluttered layout — screenshot shows generous white space and a clear hierarchy.
- ❌ Don't use a wide range of colors — screenshot shows a limited palette of dark blues, purples, and whites.

The system deliberately excludes decorative elements, saturated backgrounds, and cluttered layouts in favor of clarity and performance.

## System Prompt (paste into AI tool)

```
Astro is a modern web framework designed for content-driven websites. The design is premium and developer-focused, utilizing a dark mode palette with a deep navy (#0D0F14) base, vibrant purple gradients, and crisp white (#F2F6FA) text. Typography is clean and modern, relying on humanist/grotesque sans-serif categories for a technical feel. Critical design rules include: 1. Always use dark, high-contrast backgrounds. 2. Use pill-shaped (border-radius: 9999px) buttons for primary actions. 3. Never use decorative serif fonts for headlines or body text.
```