---
name: Astro
description: "Worth including as a prime example of a modern, high-end developer tool landing page with a strong, cohesive visual identity."
version: alpha

colors:
  background: "#0D0F14"
  primary: "#F2F6FA"
  secondary: "#BFC1C9"
  tertiary: "#54B9FF"
  neutral: "#858B98"
  bg-soft: "#12151C"
  line: "rgba(133, 139, 152, 0.2)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 64px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1px"
  h2:
    fontFamily: grotesque-sans
    fontSize: 30px
    lineHeight: 1.2
    fontWeight: 600
    letterSpacing: "0px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: grotesque-sans
    fontSize: 13.6px
    lineHeight: 1.65
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 16px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

The web framework for content-driven websites.

*A high-performance sports car for building websites.*

## Colors

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

- **Background (`#0D0F14`)** — uses `bg` token
- **Primary text (`#F2F6FA`)** — uses `ink` token
- **Secondary text (`#BFC1C9`)** — uses `ink-soft` token
- **Accent (`#54B9FF`)** — uses `accent` token
- **Muted (`#858B98`)** — uses `muted` token
- **Borders (`rgba(133, 139, 152, 0.2)`)** — uses `line` token

## Typography

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

- 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.

## Layout

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

*Rhythm:* Based on a 4px grid, with generous padding (16px, 24px, 32px) defining section boundaries and component spacing.

## Elevation & Depth

- 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)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 16px
- `pill`: 9999px

## Components

- **button:** Pill-shaped with solid backgrounds (white or purple) and high contrast text.
- **card:** Dark background with subtle borders and rounded corners, used to showcase themes.
- **chip:** Pill-shaped category filters with subtle borders.
- **input:** Dark background code block with monospace font and a copy icon.
- **hero:** Full-width section with a striking linear gradient background and centered typography.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```