astro.build

DESIGN.md

Narrative design system document — paste directly into Claude Code, Cursor, or Bolt.

---
version: alpha
name: astro.build
description: "Dark-canvas product system built on #0c0f19 with #61dafb as the single brand accent. Type anchored in Obviously at 36px / weight 300. Extracted automatically from https://astro.build/ — rendered styles via getComputedStyle() + CSS custom properties (token-only values may not be painted)."
narrative: |
  astro.build is built on a near-black canvas (rgb(12, 15, 25)).
  The system uses rgb(97, 218, 251) as the high-saturation accent for primary actions.
  Fully-rounded CTAs (9999px) signal a friendly, tactile interaction model alongside Obviously as the primary typeface.
  A layered elevation system (4 distinct shadows) building a clear front-to-back hierarchy.
  Interactions are smoothed by transitions across many elements, with little or no keyframe animation.

colors:
  canvas: "#0c0f19"
  surface-2: "#0d0f14"
  ink: "#f2f6fa"
  ink-muted: "#bfc1c9"
  ink-subtle: "#ffffff"
  primary: "#61dafb"
  on-primary: "#111111"
  primary-hover: "rgba(50, 69, 255, 0.4)"
  hairline: "rgba(133, 139, 152, 0.2)"

typography:
  display-xl:
    fontFamily: "Obviously, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: 0
  display-md:
    fontFamily: "ui-sans-serif, Georgia, 'Times New Roman', serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0
  body:
    fontFamily: "ui-sans-serif, Georgia, 'Times New Roman', serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  button:
    fontFamily: "ui-sans-serif, Georgia, 'Times New Roman', serif"
    fontSize: 16px
    fontWeight: 300
    lineHeight: 1.5
    letterSpacing: 0

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 20px
  xl: 9999px

spacing:
  xxs: 2px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 24px
  xl: 32px
  xxl: 80px

components:
  button-pill:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-subtle}"
    typography: "{typography.display-md}"
    rounded: "{rounded.xl}"
    padding: 8px 16px
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.display-md}"
    rounded: "{rounded.xs}"
    padding: 12px
  button-pill-2:
    backgroundColor: "#060913"
    textColor: "{colors.ink}"
    typography: "{typography.display-md}"
    rounded: "{rounded.xl}"
  card-standard-card:
    backgroundColor: "{colors.canvas}"
    typography: "{typography.display-md}"
    rounded: "{rounded.md}"
  input-text-input:
    backgroundColor: "#060913"
    textColor: "{colors.ink}"
    typography: "{typography.display-md}"
    rounded: "{rounded.sm}"
    padding: 4px 12px
  navigation-main-nav:
    backgroundColor: "transparent"
    typography: "{typography.display-md}"
    rounded: "{rounded.none}"
  tab-ghost-tab:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-md}"
    rounded: "{rounded.none}"
    padding: 4px 32px
  tab-ghost-tab-2:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-md}"
    rounded: "{rounded.sm}"

extracted_at: "2026-06-11T06:01:25.069Z"
completeness: 85
scoreVersion: "v2"

---

# Design System — astro.build
> Extracted automatically by Prism from https://astro.build
> Date: 2026-06-11
> Viewport: Desktop 1440x900 + Mobile 390x844
> Values are extracted, not hand-written: rendered styles via getComputedStyle() + colors declared in CSS custom properties (token-only values are marked `(token)` and may not be painted).


## 0. Design DNA

**Density**: moderate  |  **Motion**: expressive  |  **Weight**: heavy  |  **Aesthetic**: dark-premium

| Dimension | Value | Signal |
|---|---|---|
| Canvas | dark | `#0c0f19` |
| Type posture | sans-led (MDIO) | "is a JavaScript web framework " |
| Color assertion | dual-accent | #61dafb |
| Whitespace | moderate | section rhythm 48px |
| Interaction | expressive | 2 keyframes, 12 transitions |
| Radius language | soft-pill | from token scale |

**Prism fingerprint**: `dark-canvas · sans-display · dual-accent · soft-pill · expressive-motion`

> **🤖 TL;DR for AI agents** (read this first — saves you scanning the full doc):
>
> - **Canvas**: `rgb(12, 15, 25)` is the page background. Every component composits against this.
> - **Accent**: `rgb(97, 218, 251)` for primary CTAs ONLY. Never decorative.
> - **Body type**: 16px (token: `typography.body`). Default for ALL text not in a heading role.
> - **Section rhythm**: 48px between major bands. Card padding: 24px.
> - **Default radius**: 8px on buttons/inputs. Pills (`9999px`) only for icon-buttons or status chips.
>
> **Before generating UI**: import this DESIGN.md, scan §2 (Color Palette) + §4 (Components) + §10 (Agent Guide). Skip §11–12 unless extending.

## 1. Visual Theme & Atmosphere

**Signature:** a gradient wash in the hero. This is the brand's most recognizable visual — reproduce it, don't replace it with a generic card or flat panel.

astro.build commits fully to dark-mode as the native medium, not as a toggled alternative. The canvas is a dark surface (`#0c0f19`) where elevation is communicated through subtle white-opacity gradations rather than traditional shadows — semi-transparent white borders act as the primary depth indicator, like wireframes etched in moonlight. 

Headlines are set in **Obviously**, a sans-serif display face (the dominant type signature, e.g. "is a JavaScript web framework optimized for building fast, c" at 36px). Body text is set in **MDIO**, deployed with OpenType features enabled globally (`"calt", "cv09", "liga", "salt", "ss06", "ss11"`). These aren't decorative — they're load-bearing: without them, the typeface reverts to its generic state and the design loses its specific texture. Headlines use weight 700 for confident, assertive presence — the brand wants to be heard. 

Body text reads in Off-White (`#f2f6fa`). **#61dafb** (`#61dafb`) is the single high-saturation color in the system — it earns its presence only on interactive elements, making CTAs and links the unmistakable focal points against the otherwise neutral palette. Elevation is built from multi-layer shadow stacks (4 distinct) — each combines several blurred layers at varying offsets to build a clear front-to-back hierarchy. 
Border radius varies from pill-shaped (fully rounded) to moderately rounded elements, creating visual rhythm. Motion design uses smooth easing curves for polished state transitions. The site uses a variable font with ITAL + WDTH + WGHT axes, enabling precise weight/width control across the type hierarchy. 

**Key Characteristics:**
- Background: Jet Black (`#0c0f19`)
- Primary typeface: Obviously
- Primary text: Off-White (`#f2f6fa`)
- Accent: #61dafb (`#61dafb`)
- Display: 48px weight 700
- Shadow system: 4 distinct elevation levels
- Custom fonts loaded: Obviously, Inter, MDIO, md-io-fallback, obviously-fallback, inter-fallback

## 2. Color Palette & Roles

### Background & Surface
- **Jet Black** (`#0c0f19`): Page background (primary)
- **Jet Black** (`#060913`): Surface / elevated background
- **Pure Black** (`#000000`): Surface / elevated background
- **Near-Black** (`#0d0f14`): Surface / elevated background
- **Dark Gray** (`#343841`): Surface / elevated background

### Text & Content
- **Off-White** (`#f2f6fa`): Primary body text
- **Translucent Medium Gray (20%)** (`rgba(133, 139, 152, 0.2)`): Secondary text
- **Light Grey** (`#bfc1c9`): Secondary text
- **#4af2c8** (`#4af2c8`): Secondary text
- **#61dafb** (`#61dafb`): Secondary text

### Accent & Interactive
- **Translucent Deep Purple (40%)** (`rgba(50, 69, 255, 0.4)`): Interactive / accent
- **Translucent #264a89 (50%)** (`rgba(38, 74, 137, 0.5)`): Interactive / accent
- **#54b9ff** (`#54b9ff`): Interactive / accent
- **#4bf3c8** (`#4bf3c8`): Interactive / accent
- **#ffd493** (`#ffd493`): Interactive / accent
- **Lavender** (`#acafff`): Interactive / accent
- **#00daef** (`#00daef`): Interactive / accent

### Border & Divider
- **Translucent Charcoal (30%)** (`rgba(44, 44, 44, 0.3)`): Borders / dividers
- **Near-Black** (`#23262d`): Borders / dividers
- **Near-Black** (`#17191e`): Borders / dividers
- **Near-Black** (`#1c1c1c`): Borders / dividers

### Full Extracted Palette
**65 colors rendered on the page** + **6** more declared in design tokens (CSS custom properties — not necessarily painted). (21 categorized above + 50 additional below.)
Rendered values are read via `getComputedStyle()`; token values come from CSS variable declarations. Third-party logo colors are filtered out.

- `#e5e7eb` — Whitesmoke
- `#ffffff` — Pure White
- `#545864` — Slate
- `#07040f` — Pure Black
- `#eef0f9` — Light Gray
- `#8b909d` — Cool Gray
- `#030712` — Jet Black
- `#6b7aab` — Slate Gray
- `#2f3854` — Dark Gray
- `#d83333` — Vermillion
- `#3178c6` — Steel Blue
- `#1a3e57` — #1a3e57
- `#00d8ff` — #00d8ff
- `#41b883` — #41b883
- `#35495e` — Slate
- `#ff3e00` — Bright Orange
- `#88ff88` — Mint
- `#673ab8` — #673ab8
- `#76b3e1` — #76b3e1
- `#518ac8` — Steel Blue
- `#18b6f6` — Sky Bright
- `#ac7ef4` — #ac7ef4
- `#539e43` — #539e43
- `#f4801f` — #f4801f
- `#f9ab41` — #f9ab41
- `#05bdba` — #05bdba
- `#fffbf9` — Off-White
- `#e27152` — Warm Terracotta
- `#32e6e2` — #32e6e2
- `#146ef5` — M Tricolor Blue
- `#f38020` — #f38020
- `#faae40` — #faae40
- *…+18 more in `raw-css.json` (`desktop.allColors`).*

### CSS Custom Properties (Design Tokens)

**Shadow Token**
- `--tw-ring-shadow`: `0 0 #0000`
- `--tw-shadow-colored`: `0 0 #0000`
- `--tw-ring-offset-shadow`: `0 0 #0000`
- `--tw-drop-shadow`: ``

**Spacing Token**
- `--tw-border-spacing-x`: `0`
- `--tw-numeric-spacing`: ``
- `--tw-border-spacing-y`: `0`

**Other tokens**
- `--ec-frm-inlBtnBgHoverOrFocusOpa`: `0.2`
- `--ec-tm-markBg`: `#264a8980`
- `--ec-tm-lineMarkerAccentWd`: `0.15rem`
- `--ec-codeBg`: `#17191e`
- `--tw-text-opacity`: `1`
- `--tw-ring-color`: `rgb(59 130 246 / .5)`
- `--ec-frm-edActTabBg`: `#17191e`
- `--ec-frm-trmBg`: `#23262d`

## 3. Typography Rules

### Font Families
- **Primary**: `ui-sans-serif`
- **Secondary**: `Obviously`
- **Font 3**: `Inter`
- **Font 4**: `MDIO`
- **Font 5**: `md-io-fallback`

### Custom Fonts Loaded
- **Obviously** weight 100 1000 (normal)
- **Inter** weight 300 600 (normal)
- **MDIO** weight 400 (normal)
- **md-io-fallback** weight normal (normal)
- **obviously-fallback** weight normal (normal)
- **inter-fallback** weight normal (normal)

### Typography Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | Obviously | 48px | 700 | 1.1 | normal | Main headline (h1) |
| Sub-heading | ui-sans-serif | 16px | 600 | 1.5 | normal | Third-level heading (h3) |
| Card Title | ui-sans-serif | 16px | 400 | 1.5 | normal | Card headings |
| Button Large | ui-sans-serif | 16px | 300 | 1.5 | normal | Button label (16px) |

### Full Font Size Scale

Sizes detected in the design (descending): `200px`, `48px`, `36px`, `30px`, `20px`, `18px`, `16px`, `14.40px`, `14px`, `13.60px`, `13.33px`, `12px`

> 10 size(s) detected outside the sampled hierarchy (200px, 36px, 30px, 20px, 18px, 14.4px, 14px, 13.6px, 13.3333px, 12px). These appear on elements not in the sampled set — likely additional display sizes, marketing-section overrides, or third-party-widget styles.

### OpenType & Variable Font Features

The typography uses these OpenType features intentionally — this is a sophisticated type system, not a default fallback:

- **contextual alternates** (`calt`) — connections between letters refined contextually
- **ligatures** — common letter pairs replaced with refined glyphs (fi, fl, etc.)
- **slashed zero** (`zero`) — distinguishes 0 from O, useful for code/data

**Clone instruction:** Enable these in your CSS:
```css
body {
  font-feature-settings: "calt", "zero", "cv09", "liga", "salt", "ss06", "ss11";
}
```

**Variable font axes:**
- ITAL axis
- WDTH axis
- WGHT axis

## 4. Component Stylings

### Buttons

**Pill**
- Background: `#0c0f19` `{colors.canvas}`
- Text: `#ffffff` `{colors.ink-subtle}`
- Padding: 8px 16px
- Radius: 9999px
- Border: 1px solid rgba(133, 139, 152, 0.2)
- Font: 16px weight 600
- Use: Status pills, tags, chips

**Ghost**
- Background: `transparent`
- Text: `#bfc1c9` `{colors.ink-muted}`
- Padding: 12px
- Radius: 6px
- Font: 16px weight 400
- Use: Subtle action, toolbar, nav button

**Pill**
- Background: `rgba(6, 9, 19, 0.55)`
- Text: `#f2f6fa` `{colors.ink}`
- Padding: 0px
- Radius: 9999px
- Font: 16px weight 400
- Use: Status pills, tags, chips

**Icon Button**
- Background: `#17191e`
- Text: `#ffffff` `{colors.ink-subtle}`
- Padding: 0px
- Radius: 3.2px
- Font: 13.3333px weight 400
- Use: Toolbar/UI icons

**Primary Brand**
- Background: `#61dafb` `{colors.primary}`
- Text: `#030712`
- Padding: 8px 16px
- Radius: 8px
- Font: 16px weight 400
- Use: Primary CTA / brand action

### Cards & Containers

**Standard Card**
- Background: `#0c0f19` `{colors.canvas}`
- Padding: 0px
- Radius: 16px
- Border: 1px solid rgba(133, 139, 152, 0.2)
- Use: Content containers, listing items
- Hover: border: `1px solid rgba(133, 139, 152, 0.4)`, borderColor: `#858b98`

### Inputs & Forms

**Text Input**
- Background: `#060913`
- Text: `#f2f6fa` `{colors.ink}`
- Padding: 4px 12px
- Radius: 8px
- Border: 1px solid rgb(35, 38, 45)
- Font: 16px weight 400
- Use: Text fields, search inputs
- Focus: boxShadow: `rgb(84, 88, 100) 0px 0px 0px 1px`, outline: `rgba(0, 0, 0, 0) solid 2px`

### Navigation

**Main Nav**
- Background: `transparent`
- Padding: 0px
- Radius: none
- Shadow: `rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px`
- Font: 16px weight 400
- Use: Static flex nav — N/A items

### Tabs

**Ghost Tab**
- Background: `transparent`
- Text: `#f2f6fa` `{colors.ink}`
- Padding: 4px 32px
- Radius: 0px
- Font: 16px weight 400
- Use: Navigation tabs, filter tabs

**Ghost Tab**
- Background: `transparent`
- Text: `#f2f6fa` `{colors.ink}`
- Padding: 0px
- Radius: 8px
- Font: 16px weight 400
- Use: Navigation tabs, filter tabs


## 4b. Component Behaviors (State Matrix)

### Interaction State Narrative

- **Input**:
  - **focus:** shadow added
- **Card**:
  - **hover:** border changes

*State transitions extracted via Playwright simulation — exact values in the YAML matrix below.*

```yaml
component-behaviors:
  button:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(191, 193, 201)"
  input:
    default:
      bg: "rgb(6, 9, 19)"
      fg: "rgb(242, 246, 250)"
      border: "1px solid rgb(35, 38, 45)"
    focus:
      bg: "transparent"
      fg: "inherit"
      shadow: "rgb(84, 88, 100) 0px 0px 0px 1px"
  link:
    default:
      bg: "rgb(12, 15, 25)"
      fg: "rgb(255, 255, 255)"
      border: "1px solid rgba(133, 139, 152, 0.2)"
  card:
    default:
      bg: "rgb(12, 15, 25)"
      fg: "rgb(242, 246, 250)"
      border: "1px solid rgba(133, 139, 152, 0.2)"
    hover:
      bg: "transparent"
      fg: "inherit"
      border: "1px solid rgba(133, 139, 152, 0.4)"
  navLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(242, 246, 250)"
  tab:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(242, 246, 250)"
  footerLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(191, 193, 201)"
```

**Agent usage**: Validate generated components against this matrix. If your output's `:hover` state changes properties not listed here, you are off-brand.


## 4c. Component Vocabulary (Closed System)

*This brand uses ONLY the following component vocabulary. Introducing new variants without justification breaks the system's tonal coherence.*

### Buttons
- **4 shape(s)** in this system: `Pill`, `Ghost`, `Icon Button`, `Primary Brand`
- **DO NOT introduce new buttons variants** without justification

### Cards & Containers
- **1 shape(s)** in this system: `Standard Card`
- **DO NOT introduce new cards & containers variants** without justification

### Inputs & Forms
- **1 shape(s)** in this system: `Text Input`
- **DO NOT introduce new inputs & forms variants** without justification

### Navigation
- **1 shape(s)** in this system: `Main Nav`
- **DO NOT introduce new navigation variants** without justification

### Tabs
- **1 shape(s)** in this system: `Ghost Tab`
- **DO NOT introduce new tabs variants** without justification

## 5. Layout Principles

### Layout Type
**top-nav + content**

### Grid
Flexbox column

### Max Width
1200px

### Spacing System
Compact spacing — information density prioritized

| Token | Value |
|-------|-------|
| xxs | 2px |
| xs | 4px |
| sm | 8px |
| md | 12px |
| base | 16px |
| lg | 24px |
| xl | 32px |
| 2xl | 48px |
| 3xl | 80px |

### Border Radius Scale
| Name | Value | Use |
|------|-------|-----|
| None | 0px | No rounding |
| Xs | 4px | Tiny corners (badges, micro elements) |
| Sm | 8px | Buttons, inputs, small elements |
| Md | 12px | Cards, containers |
| Lg | 20px | Large rounded elements, pill segments |
| Xl | 9999px | Category strips, featured containers |
| Full | 9999px | Pills, avatars, circular elements |

### Shape Language

| Component | Border Radius |
|-----------|---------------|
| Buttons | `9999px` |
| Cards & Containers | `16px` |
| Inputs & Forms | `8px` |
| Navigation | `none` |
| Tabs | `0px` |
| Page Body | `0px` |
| Primary Input | `8px` |

**Shape Personality**: Sharp + Pill Contrast — Angular precision with pill-shaped accents (status badges, tags). Creates strong visual hierarchy.

**Full Radius Spectrum**: 3.2px, 4px, 6px, 7.5px, 8px, 12px, 16px, 20px (from `allBorderRadii` scan)


## 5b. Spacing Rhythm Names

**Measured section padding**: bands use ~32px internal vertical padding (up to 160px) — **compact**. (Distinct from the gap *between* sections above.) Reproduce this generous vertical breathing room; cramped spacing is the #1 tell of a cheap clone.

*Named spacing tokens with explicit use cases. Use these names in YOUR code instead of raw pixels for consistency.*

| Name | Value | Use case |
|------|-------|----------|
| **hero** | `80px` | Top/bottom of full-bleed hero sections |
| **section** | `32px` | Between major bands (color change, content shift) |
| **subsection** | `24px` | Within a section, between content groups |
| **card** | `12px` | Card padding, list-item spacing |
| **compact** | `8px` | Form fields, tight clusters, badge padding |
| **micro** | `4px` | Icon-text gap, tag inner padding |

**Agent rule**: NEVER hardcode raw pixel values for spacing in generated UI. Always reference these named tokens (`spacing-rhythm.section`, etc.).

## 5c. Widget & Structure Library

Structural patterns extracted from the page DOM — these are the **blueprints** an agent should follow to reproduce the page architecture (not just CSS values).

**5/8 structural patterns detected.**

### Hero Pattern

- **Composition:** centered — Centered composition — heading + subheading + CTAs stacked vertically, content centered horizontally. Common for SaaS marketing pages.
- **Viewport coverage:** full-viewport hero (≥70% screen height)
- **Heading:** "The web framework for content-driven websites" — 48px center-aligned
- **Subheading:** "Astro powers the world's fastest marketing sites, blogs, e-commerce websites, and more."
- **Media:** present, positioned top
- **CTAs:** 2 (primary: "Astro Mart SS26 New merch available now!")
- **Clone instruction:** Reproduce the **centered** layout. Use the heading font-size token at the documented size. Place media top of text.

### Navigation Pattern

- **Position:** static (scrolls with page)
- **Layout:** logo-left-links-left — Logo and links both on the left (CTAs typically right)
- **Height:** 80px
- **Logo:** ✓ present
- **Nav links:** 4 primary items
- **CTAs in nav:** 0 (no buttons — links only)
- **Clone instruction:** Build a static logo left links left navigation. Link-only — no button styling needed.

### Card Grid Pattern

- **Card count:** 6 cards detected
- **Columns (desktop):** 4-up grid
- **Card dimensions:** 392×249px (aspect 1.57:1)
- **Gap:** 16px between cards
- **Content:** ✓ image
- **Image position:** top
- **Clone instruction:** Build a 4-column grid (desktop) with cards at ~1.57:1 aspect ratio. Each card has an image at the top.

### FAQ Pattern

- **Item count:** 3 questions
- **Format:** accordion (expand/collapse)
- **Layout:** two-column
- **Avg question length:** 9 chars
- **Clone instruction:** Build 3 expandable accordion items in a two-column layout.

### Footer Pattern

- **Columns:** 1
- **Links:** 27 total
- **Height:** 402px
- **Includes:** ✓ newsletter signup | ✓ social icons |  ✓ copyright
- **Clone instruction:** Build a 1-column footer with ~27 links per column, newsletter signup, social media links, and a copyright line.

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Page background, content blocks |
| Layered (Level 1) | <br>`rgba(0, 0, 0, 0.1) 0px 1px 3px 0px`,<br>`rgba(0, 0, 0, 0.1) 0px 1px 2px -1px` | Cards, elevated surfaces |
| Layered (Level 2) | <br>`rgba(24, 24, 27, 0.01) 0px 25px 7px 0px`,<br>`rgba(24, 24, 27, 0.04) 0px 16px 6px 0px`,<br>`rgba(24, 24, 27, 0.15) 0px 9px 5px 0px`,<br>`rgba(24, 24, 27, 0.26) 0px 4px 4px 0px`,<br>`rgba(24, 24, 27, 0.29) 0px 1px 2px 0px` | Cards, elevated surfaces |
| Layered (Level 3) | <br>`rgba(24, 24, 27, 0.03) 0px 5px 2px 0px`,<br>`rgba(24, 24, 27, 0.1) 0px 3px 2px 0px`,<br>`rgba(24, 24, 27, 0.17) 0px 1px 1px 0px`,<br>`rgba(24, 24, 27, 0.2) 0px 0px 1px 0px` | Cards, elevated surfaces |

**Shadow Philosophy**: Multi-layered shadow system creating natural, atmospheric depth. Each shadow level combines multiple layers for realistic elevation.

## 7. Motion & Interaction

### Dominant Easing Curves

| Curve | Semantic Name |
|-------|---------------|
| `cubic-bezier(0.4,0,0.2,1)` | Material Standard — Balanced |
| `cubic-bezier(0,0,0.2,1)` | Material Decelerate — Entrance |
| `cubic-bezier(0.25,0.46,0.45,0.94)` | Quad Out — Smooth Ease |

### Duration Scale

| Value | Tier | Typical Use |
|-------|------|-------------|
| `150ms` | Fast | Hover states, micro-interactions |
| `200ms` | Normal | Panel open/close, navigation |
| `300ms` | Normal | Panel open/close, navigation |
| `500ms` | Slow | Hero animations, page transitions |
| `1.5s` | Cinematic | Splash, marketing reveals |

### Copy-Paste Transition Snippets

**Color / Background**
```css
transition: color 0.3s cubic-bezier(0, 0, 0.2, 1), background-color 0.3s cubic-bezier(0, 0, 0.2, 1), border-color 0.3s cubic-bezi...;
```

**Transform**
```css
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
```

**All Props**
```css
transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
```

**Color / Background**
```css
transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.15s cub...;
```

### Keyframe Animation Catalog

| Animation Name | Type | Animated Props | Use Hint |
|----------------|------|----------------|----------|
| `float` | Slide | transform | UI transition |
| `marquee` | Slide | transform | UI transition |

### Motion Fingerprint

- **Speed Character**: Deliberate & Calm (median duration: `300ms`)
- **Dominant Easing**: custom cubic-bezier curves
- **Animation Library**: 2 unique animations (2 total including variants)

> This design moves with deliberate & calm timing using custom cubic-bezier curves, creating a UI that feels calm and controlled.

## 8. Do's and Don'ts

### Do
- Use dark background (`#0c0f19`) as the foundation — this is a dark-mode-native design
- Use ui-sans-serif as the primary typeface — it defines the brand personality
- Use the extracted shadow patterns for elevation — they are tuned to match the brand palette
- Use full-pill radius (9999px) only for specific elements (avatars, pills, toggles)
- Use #61dafb (`#61dafb`) as the primary accent — it's the brand's signature interactive color
- Use 8px border-radius on buttons — the standard corner rounding for interactive elements
- Use 16px border-radius on cards — consistent with the grid card corners
- Style form inputs with a `1px solid rgb(35, 38, 45)` border — use border-based inputs, not floating labels or underline-only
- Maintain nav height at 80px — consistent vertical space for the navigation bar
- Respect the 4px–32px spacing range — the design uses a wide scale for visual breathing room
- Make the hero full-viewport (≥70% screen height) — this design uses an immersive hero, not a tall navbar
- Include exactly 2 CTAs in the hero (primary + secondary) — this design pattern is multi-action, not single-purpose
- Each card includes a top image — imagery is part of the card identity, not optional
- Use a 4-column grid on desktop — density matters for this content type
- Use expandable accordion for the FAQ — saves vertical space and lets users self-navigate
- Include a newsletter signup in the footer — email capture is part of the conversion funnel

### Don't
- Don't use light backgrounds — the dark canvas is the native medium
- Don't substitute with generic sans-serif or serif — the custom font carries the brand
- Don't invent new shadow values — use only the extracted shadow levels
- Don't apply pill radius on rectangular buttons or cards — it's reserved for specific interactive elements
- Don't introduce additional saturated accent colors — the palette is intentionally controlled
- Don't remove the input border — the border is the primary affordance indicator for form fields
- Don't collapse or hide the nav on scroll without an explicit scroll-triggered animation — the design uses fixed nav presence
- Don't make the nav sticky — this design lets it scroll away to maximize content focus
- Don't put a CTA button in the nav — this design uses links only at the top


## 7b. Enforceable Brand Rules

*Structured Do/Don't with reasoning and validation tests. Agents can programmatically verify generated UI.*

```yaml
rules:
  - id: brand-canvas-001
    type: do
    rule: "Always use the page background `rgb(12, 15, 25)` as the base canvas"
    why: "Every component is designed to composit against this exact tone"
    test: "document.body.style.backgroundColor === 'rgb(12, 15, 25)'"
  - id: brand-accent-001
    type: do
    rule: "Reserve `rgb(97, 218, 251)` for primary CTAs and brand-mark signals only"
    why: "Single chromatic assertion device — overuse dilutes meaning"
    test: "querySelectorAll('[style*=\"rgb(97, 218, 251)\"]').length <= 3 per fold"
```

## 9. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile Large | 640px | Expanded mobile layout |
| Tablet | 768px | Multi-column grids begin |
| Tablet | 1024px | Multi-column grids begin |
| Desktop | 1280px | Full feature layout |
| Large Desktop | 1536px | Maximum content width |

### Token Diff — Desktop vs Mobile

| Element | Property | Desktop | Mobile |
|---------|----------|---------|--------|
| heading | font-size | `48px` | `30px` |
| heading | line-height | `52.8px` | `33px` |
| nav | padding | `0px 32px` | `0px 16px` |
| button | width | `auto` | `24px` |
| card | border-radius | `16px` | `12px` |
| card | width | `394.656px` | `358px` |

### Collapsing Strategy
- Headlines: 48px → 30px on mobile
- Navigation: horizontal links → hamburger menu on mobile
- Cards: multi-column → stacked vertical on mobile
- Footer: multi-column → stacked single column on mobile

### Touch Targets
- Buttons: 0px padding
- Navigation: adequate spacing between items
- Interactive elements: minimum 44px touch target recommended

### Collapsing Narrative

How the structural patterns adapt from desktop to mobile (extracted from both viewport extractions):

- **Navigation collapses to hamburger** — 4 links visible on desktop, 1 on mobile (the rest hide behind a menu toggle).
- **Card grid: 4-up → 1-up** — cards stack as viewport narrows, becoming a vertical list on mobile.


## 7c. Visual Effects & Dynamic Behavior

*The live/dynamic layer beyond static CSS — reproduce these, not flat substitutes. This is often what separates a faithful clone from a wireframe.*

- **Clip-path shapes** — 4 non-rectangular cut(s).
- **Blend modes** — 1 mix-blend layer(s).
- **Scroll-driven reveals** — content animates in on scroll (CSS scroll-timeline). Build fade/translate reveal-on-scroll for below-fold bands.

> **Motion fingerprint**: non-rectangular shapes (4), blend modes, CSS scroll-driven animations

## 9b. Visual Tone & Photography

**Tone:** Photography-driven

The site is dominated by photography (JPG/WebP). Photos carry the brand voice as much as the typography. Use authentic, brand-appropriate imagery — generic stock will degrade quality.

**Canonical Brand Image (OG):**
- https://astro.build/og/astro.jpg
  *This is the image shown when the site is shared on social media — represents the brand visual essence.*

**Hero Image (above-fold dominant visual):**
- Aspect: 1.2:1 (landscape)
- Rendered size: 2353×1969px
- *Use this aspect ratio + composition for your clone's hero — mimicking the proportion preserves the visual hierarchy.*

**Aspect Ratio Distribution:**
- Landscape (1.15–2.3): 12 (92%)
- Portrait (<0.87): 0 (0%)
- Square (0.87–1.15): 1 (8%)

**Media Format Mix:**
- WebP: 13 (optimized photo/illustration hybrid)
- SVG: 1 (icons, illustrations, decorative geometry)

**Average rendered image size:** 543×375px
**Above-fold image count:** 1 / 13

**Decorative Patterns Detected:**
- 75 multi-stop linear gradients (mesh-like, 3+ color stops) — the brand leans on rich color transitions for visual depth
- 1 radial gradient — circular color blooms used for spotlight/glow effects
- 1 large decorative SVG shape (≥200×200px, non-icon) — likely blob/illustration accents

**Clone instruction for decorative work:** This is a gradient-rich design — invest in multi-stop CSS gradients (3+ color stops), not solid backgrounds.

**Imagery Guidance for clones:**
- Source authentic photography (or licensed stock that matches the brand mood) — placeholders will visibly degrade the clone.
- Match the dominant aspect ratio (see above) so card grids and hero compositions hold.

## 10. Agent Prompt Guide

### Quick Reference
- Background: Jet Black (`#0c0f19`)
- Primary text: Off-White (`#f2f6fa`)
- Accent: #61dafb (`#61dafb`)
- Border: Translucent Medium Gray (20%) (`rgba(133, 139, 152, 0.2)`)
- Font: ui-sans-serif
- Body: 16px weight 400

### Example Component Prompts
- "Create a hero section on Jet Black background (#0c0f19). Headline at 48px ui-sans-serif weight 700, line-height 1.1, color #f2f6fa."
- "Create the primary CTA button: `#61dafb` background, `#030712` text, 8px border-radius, 8px 16px padding, 700 weight, ui-sans-serif font."
- "Design a card on `#0c0f19` background. Border: 1px solid rgba(133, 139, 152, 0.2). Radius: 16px. Shadow: none. Padding: 0px."
- "Build navigation: static on `#0c0f19`. ui-sans-serif 16px weight 400 for links."

### Iteration Guide
1. **Canvas**: Set the dark canvas to Jet Black (`#0c0f19`) — every component is composited against this exact base.
2. **Typography**: All type in ui-sans-serif, weight range 300–700. Never exceed 700 — heavier weights break the brand's tonal restraint.
3. **Accent**: #61dafb (`#61dafb`) — one accent, applied consistently to CTAs, active states, and links. Never introduce a second saturated color.
4. **Motion**: All transitions use `cubic-bezier(0,0,0.2,1)`. Never use linear for UI transitions — preserve the brand's easing personality.
5. **Shape**: CTAs at `9999px`, cards at `16px`. Apply border-radius from the extracted scale only — don't invent intermediate values.
6. **Spacing**: Use the `--ca-space-*` token scale (4px–32px). All padding, margin, and gap values are multiples from this scale — no magic numbers.
7. **Tokens**: Import from §11 CSS Export (`--ca-*` vars). Never hardcode hex values — always reference a token so theming remains consistent.

## 11. CSS Design Tokens Raw Export

*Copy-paste ready `:root {}` block — all values extracted directly from the live site.*

```css
/* Colors */
:root {
  --ca-canvas: #0c0f19;
  --ca-surface-2: #0d0f14;
  --ca-ink: #f2f6fa;
  --ca-ink-muted: #bfc1c9;
  --ca-ink-subtle: #ffffff;
  --ca-primary: #61dafb;
  --ca-on-primary: #111111;
  --ca-primary-hover: #3245ff;
  --ca-hairline: #858b98;
}

/* Typography */
:root {
  --ca-font-primary: "Obviously", system-ui, sans-serif;
  --ca-text-display: 48px;
  --ca-text-body: 16px;
  --ca-text-button: 16px;
}

/* Spacing & Radius */
:root {
  --ca-space-xxs: 2px;
  --ca-space-xs: 4px;
  --ca-space-sm: 8px;
  --ca-space-md: 12px;
  --ca-space-base: 16px;
  --ca-space-lg: 24px;
  --ca-space-xl: 32px;
  --ca-space-2xl: 48px;
  --ca-space-3xl: 80px;
  --ca-radius-none: 0px;
  --ca-radius-xs: 4px;
  --ca-radius-sm: 8px;
  --ca-radius-md: 12px;
  --ca-radius-lg: 20px;
  --ca-radius-xl: 9999px;
  --ca-radius-full: 9999px;
}
```


## 13. Page Structure Skeleton

*The actual layout the source site uses. Reproduce these sections in order to match the site structure.*

```yaml
page-skeleton:
  - section: logo-strip
    tag: div
    classes: ["inset-x-0", "top-0", "z-20", "bg-black/30"]
    height: 80px
    width: full-bleed
    layout: block
    children: 2
    bg: "rgba(13, 15, 20, 0.3)"
  - section: header
    tag: header
    classes: ["shadow"]
    height: 80px
    width: full-bleed
    layout: block
    children: 2
  - section: header
    tag: nav
    classes: ["container", "flex", "items-center"]
    height: 80px
    width: 1280px
    layout: flex-row justify=normal
    children: 3
    padding: "0px 32px"
  - section: hero
    tag: main
    classes: ["relative", "z-10", "flex", "flex-1"]
    height: 8571px
    width: full-bleed
    layout: flex-column justify=normal
    children: 12
    vertical-padding: ~32px
  - section: feature-section
    tag: section
    classes: ["relative"]
    height: 764px
    width: full-bleed
    layout: block
    children: 3
    vertical-padding: ~32px
  - section: logo-strip
    tag: div
    classes: ["landing-section", "gap-4", "sm:gap-6"]
    height: 172px
    width: 1376px
    layout: flex-column justify=center
    children: 2
  - section: feature-section
    tag: section
    classes: ["mt-20", "sm:mt-36", "xs:p-6", "mx-auto"]
    height: 398px
    width: 1280px
    layout: block
    children: 2
    vertical-padding: ~32px
    padding: "32px"
  - section: feature-section
    tag: section
    classes: ["mt-20", "md:mt-24", "lg:mt-28", "xl:mt-36"]
    height: 610px
    width: 1280px
    layout: block
    children: 4
    vertical-padding: ~32px
    padding: "0px 32px"
  - section: feature-section
    tag: section
    classes: ["mt-20", "md:mt-24", "lg:mt-28", "xl:mt-36"]
    height: 787px
    width: full-bleed
    layout: block
    children: 4
  - section: content-section
    tag: section
    classes: ["mx-auto", "grid", "grid-cols-1", "md:grid-cols-2"]
    height: 392px
    width: 1216px
    layout: grid: 3-col gap=16px
    children: 2
  - section: feature-section
    tag: section
    classes: ["mt-20", "md:mt-24", "lg:mt-28", "xl:mt-36"]
    height: 1535px
    width: 1280px
    layout: block
    children: 2
    padding: "0px 32px"
  - section: feature-section
    tag: section
    classes: ["mt-20", "md:mt-24", "lg:mt-28", "xl:mt-36"]
    height: 759px
    width: full-bleed
    layout: block
    children: 6
  - section: section
    tag: section
    height: 522px
    width: 1216px
    layout: block
    children: 1
  - section: unknown
    tag: div
    classes: ["m-auto", "size-full", "landing-section", "absolute"]
    height: 247px
    width: 390px
    layout: flex-column justify=center
    children: 1
    bg-treatment: linear-gradient
  - section: unknown
    tag: div
    classes: ["m-auto", "size-full", "landing-section", "absolute"]
    height: 247px
    width: 390px
    layout: flex-column justify=center
    children: 1
    bg-treatment: linear-gradient
  - section: unknown
    tag: div
    classes: ["m-auto", "size-full", "landing-section", "absolute"]
    height: 247px
    width: 390px
    layout: flex-column justify=center
    children: 1
    bg-treatment: linear-gradient
  - section: unknown
    tag: div
    classes: ["m-auto", "size-full", "landing-section", "absolute"]
    height: 248px
    width: 392px
    layout: flex-column justify=center
    children: 1
    bg-treatment: linear-gradient
  - section: unknown
    tag: div
    classes: ["m-auto", "size-full", "landing-section", "absolute"]
    height: 247px
    width: 390px
    layout: flex-column justify=center
    children: 1
    bg-treatment: linear-gradient
  - section: unknown
    tag: div
    classes: ["m-auto", "size-full", "landing-section", "absolute"]
    height: 247px
    width: 390px
    layout: flex-column justify=center
    children: 1
    bg-treatment: linear-gradient
  - section: feature-section
    tag: section
    classes: ["mt-20", "md:mt-24", "lg:mt-28", "xl:mt-36"]
    height: 355px
    width: full-bleed
    layout: block
    children: 2
  - section: feature-section
    tag: section
    classes: ["mt-20", "sm:mt-36", "mx-auto", "w-full"]
    height: 706px
    width: 1280px
    layout: block
    children: 1
    padding: "0px 32px"
  - section: feature-section
    tag: div
    classes: ["landing-section", "h-full", "min-h-[24rem]", "gap-8"]
    height: 704px
    width: 1214px
    layout: flex-column justify=center
    children: 2
    vertical-padding: ~160px (airy)
    padding: "160px"
  - section: feature-section
    tag: section
    classes: ["mt-20", "md:mt-24", "lg:mt-28", "xl:mt-36"]
    height: 1362px
    width: 1280px
    layout: block
    children: 2
    padding: "0px 32px"
  - section: footer
    tag: footer
    classes: ["w-full", "border-t", "border-astro-dark-100/20", "bg-astro-dark-900"]
    height: 402px
    width: full-bleed
    layout: block
    children: 1
    bg: "rgb(6, 9, 19)"
    tone: dark
  - section: navigation
    tag: nav
    classes: ["flex", "flex-col", "lg:flex-row", "justify-between"]
    height: 284px
    width: 1376px
    layout: flex-row justify=space-between
    children: 2
    vertical-padding: ~48px
    padding: "48px 0px"
```

**Agent rule**: rebuild sections in this order (sorted by vertical position). Match the layout primitive (grid N-col / flex direction / block).


## 14. Copy Library (Real Content from Source)

*Actual text content extracted from the live page. Use these strings verbatim when reproducing the site — they carry the brand voice.*

```yaml
copy:
  section-headings:
    - "Astro is a JavaScript web framework optimized for building fast, content-driven websites."
    - "Server-First"
    - "Astro Islands"
    - "Snapback Cap"
    - "Start building with Astro today"
    - "Astro is free, open-source software made possible by these wonderful sponsors"
  sub-headings:
    - "Content Collections"
  ctas:
    - "Skip to content"
    - "Astro Mart SS26 New merch available now!"
    - "React"
    - "Add to cart"
    - "Trending"
    - "E-Commerce"
  navigation:
    - "Astro Logo"
    - "Go to Astro's GitHub repo"
    - "Follow Astro on Bluesky"
    - "Join the Astro community on Discord"
    - "Follow Astro on LinkedIn"
    - "Follow Astro on Mastodon"
    - "Follow Astro on YouTube"
    - "Documentation"
    - "Blog"
  footer-links:
    - "Docs"
    - "MIT License © 2026"
    - "Follow Astro on Bluesky"
```

**Agent rule**: reuse these exact strings when generating UI. Do NOT translate or rephrase — brand voice is preserved through the original wording.


## 15. Asset Inventory (Image Roles & Ratios)

*Image inventory classified by role and aspect ratio. When reproducing the site, allocate this number of assets per role.*

```yaml
assets:
  product:
    count: 1
    avg-ratio: 0.92
    common-aspect: "~1:1 square"
    sample-alts:
      - "Official Astro Cap Swag"
  thumbnail:
    count: 5
    avg-ratio: 1.00
    common-aspect: "~1:1 square"
    sample-alts:
      - "React Logo"
      - "Vue Logo"
      - "Preact Logo"
```

**Agent rule**: when generating placeholder images, match these counts and aspect ratios. Use neutral placeholder backgrounds for `product` (e.g. `#f5f5f5`), full-color photography hints for `hero` and `editorial`.


## 16. Component HTML Templates

*Suggested HTML markup for reproducing the key components — based on what was detected in the source DOM.*

### Button (primary action)
```html
<button class="btn btn-primary">
  Skip to content
</button>
```
_Source pattern detected: padding `8px 16px` · radius `9999px` · weight `600`_

### Generic Card
```html
<div class="card">
  <!-- content -->
</div>
```
_Source pattern detected: padding `0px` · radius `16px` · shadow `none`_

**Agent rule**: use these markup skeletons as the structural baseline. Apply tokens from §2-3 for visual styling.


## 17. Content Architecture & Resources (Links by Purpose)

*The page's links classified by purpose — the information architecture to reproduce. Categories, featured images, devices and projects are extracted from the rendered DOM, not guessed.*

**By purpose:** **nav** 1 · **cta** 1 · **product** 1 · **docs** 16 · **blog** 2 · **social** 6 · **footer** 15 · **other** 18

**Primary actions (conversion path):**
- Primary call-to-action — "Get Started" (the conversion path) → `https://docs.astro.build/`

**Projects / case studies detected** (clustered by URL + featured image):

*Themes* — medium confidence, 5 items:

| Title | Featured image | Link |
|---|---|---|
| View Theme | `starlight-lp.Cy5G1hqN_ZFOB5U.webp?dp` (ar 1.58) | https://astro.build/themes/details/starlight/ |
| View Theme | `astroship.knBTcZAP_1de9UD.webp?dpl=6` (ar 1.58) | https://astro.build/themes/details/astroship/ |
| View Theme | `upstart.CcUaE69t_1GdbFf.webp?dpl=6a2` (ar 1.58) | https://astro.build/themes/details/upstart-trendy-and-modern-theme-for-saas-startups/ |
| View Theme | `prima-persona.Dzc-txkT_1SvKdo.webp?d` (ar 1.58) | https://astro.build/themes/details/prima-persona/ |
| View Theme | `darkrise.ClSscrKv_6H4PK.webp?dpl=6a2` (ar 1.58) | https://astro.build/themes/details/darkrise-astro/ |

*Agencies* — medium confidence, 4 items:

| Title | Featured image | Link |
|---|---|---|
| Bejamas | `bejamas.rFjqlsuX_ZKJaRs.webp?dpl=6a2` (ar 1.9) | https://astro.build/agencies/bejamas/ |
| Seibert Group GmbH | `seibert.DcbdgIId_Z1DY1Qr.webp?dpl=6a` (ar 1.9) | https://astro.build/agencies/seibert/ |
| Lucky Media | `lucky-media.CosPN2Hl_1uztKH.webp?dpl` (ar 1.9) | https://astro.build/agencies/lucky-media/ |
| Bits&Letters | `bits-and-letters.BxsfIPcD_Z2g0K6X.we` (ar 1.9) | https://astro.build/agencies/bits-and-letters/ |

**Signals:** 42/60 links carry a featured image · device mockups detected: tablet ×1, laptop ×6 · dominant link roles: content-card (22), footer-link (19), inline-link (17).


---
## Extraction Completeness: 85/100 (B)

| Category | Score | Max | Detail |
|----------|-------|-----|--------|
| Colors & Palette | 25 | 25 | 21 named colors |
| Typography | 10 | 20 | 4 roles defined |
| Components | 20 | 20 | 5 specs extracted |
| Motion & Interaction | 12 | 15 | Keyframes |
| CSS Custom Properties | 8 | 10 | 160 vars |
| Responsive Breakpoints | 5 | 5 | 5 breakpoints |
| Variable Fonts | 5 | 5 | ITAL, WDTH, WGHT axes |

## 12. Known Gaps & Confidence

Explicit list of what this extraction could NOT capture. Agents should not invent values for these — either skip the feature or use the documented baseline + heuristic fallback.

*Auto-detected extraction limitations — understand before building:*

- **Licensed web fonts (Obviously, Inter, MDIO)** — detected but not downloaded. Substitute with your licensed copy or a close fallback (see Typography section for metrics).

| Category | What's missing | Fallback strategy |
|----------|----------------|-------------------|
| **Dark mode** | Dark surface is the canonical medium; no separate light-mode variables detected | The dark canvas IS the design — reproduce it as the default. Do not generate a light-mode variant unless explicitly requested |

### Per-section confidence

| Section | Confidence | Reason |
|---------|------------|--------|
| §1 Visual Theme | High | Body bg extracted via getComputedStyle() |
| §2 Colors | High | 160 CSS vars (semantic naming requires ≥20 for high) |
| §3 Typography | Medium | 4 typography roles inferred |
| §4 Components | High | 5 component variants captured |
| §7 Motion | High | Keyframes + transitions |
| §8 Do's/Don'ts | High | 25 rules generated; design-decisions.json has evidence per rule |
| §9 Responsive | High | 5 breakpoints detected |
| §9b Photography | High | 13 images, hero present |

## 11.1 CSS Implementation Guide (CSS Interception Engine v2.15+)

*Ready-to-use CSS from Prism's CSS Interception Engine — intercepted directly from the site's CSS files (bypasses CORS). Copy-paste into your `<style>` block.*

### Font Loading

3 font file(s) captured (191KB total). When running `prism add`, fonts are saved to `extractions/astro.build/fonts/` and embedded as base64 in the output HTML.

**@font-face declarations to use:**
```css
@font-face {
  font-family: 'Obviously';
  /* src: url('/fonts/Obviously.woff2') format('woff2-variations'); */
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  /* src: url('/fonts/Inter.woff2') format('woff2-variations'); */
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'MDIO';
  /* src: url('/fonts/MDIO.woff2') format('woff2-variations'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'md-io-fallback';
  /* src: url('/fonts/md-io-fallback.woff2') format('woff'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'obviously-fallback';
  /* src: url('/fonts/obviously-fallback.woff2') format('woff'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'inter-fallback';
  /* src: url('/fonts/inter-fallback.woff2') format('woff'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
```

### Keyframe Animations (Intercepted from CSS)

**1 @keyframes found** — these are the real animation definitions:

```
@keyframes float { ... }
```

<details><summary>Full keyframes CSS (1 animations)</summary>

```css
@keyframes float{0%,to{transform:translate3d(0,-8px,0)}50%{transform:translate3d(0,8px,0)}}
```
</details>

### Brand Gradient Palette

**6 complex gradients captured** from the site's CSS. The first few are the most prominent visual decorations:

```css
/* Gradient 1 */
background: linear-gradient(to bottom,transparent,10%,white,90%,transparent);

/* Gradient 2 */
background: linear-gradient(to bottom,transparent 0%,white 15%,white 85%,transparent 100%);

/* Gradient 3 */
background: linear-gradient(to right,transparent 0%,white 6%,white 94%,transparent 100%);

/* Gradient 4 */
background: radial-gradient(#000c,#000000c9 5.64%,#000000c2 10.6%,#000000b7 14.9%,#000000a8 18.7%,#00000097 22.2%,#00000084 25.4%,#00000070 28.5%,#0000005c 31.5%,#00000048 34.6%,#00000035 37.8%,#00000024 41.3%,#00000015 45.1%,#0000000a 49.4%,#00000003 54.36%,#0000 60%);

/* Gradient 5 */
background: linear-gradient(to bottom,white 0%,white 33%,transparent 90%);

```

### Hover State CSS (Intercepted)

**2 hover rule lines** captured from CSS files. Key interactive transitions from real CSS (not inferred):

```css
.expressive-code pre::-webkit-scrollbar-thumb:hover{background-color:var(--ec-sbThumbHoverCol)}

.expressive-code .copy button:hover,.expressive-code .copy button:focus:focus-visible{opacity:1}

.expressive-code .copy button:hover div,.expressive-code .copy button:focus:focus-visible div{opacity:var(--ec-frm-inlBtnBgHoverOrFocusOpa)}

.expressive-code .frame:hover .copy button:not(:hover),.expressive-code .frame:focus-within :focus-visible ~ .copy button:not(:hover),.expressive-code .frame .copy .feedback.show ~ button:not(:hover){opacity:0.75}

.\!link:hover{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}

.link:hover{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}

.link-underline:hover{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}

.link-underline:hover{--tw-border-opacity: 1;border-color:rgb(133 139 152 / var(--tw-border-opacity, 1))}

.prose :where(a):hover{text-decoration-line:none}

.\!button:hover{background-color:#ffffff1a}

.button:hover{background-color:#ffffff1a}

.\!button.button-primary:hover{background-image:linear-gradient(83.21deg,#3245ff,#b845ed);--tw-brightness: brightness(.75);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}

.button.button-primary:hover{background-image:linear-gradient(83.21deg,#3245ff,#b845ed);--tw-brightness: brightness(.75);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}

.\!button.button-white:hover{--tw-brightness: brightness(.75);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}

.button.button-white:hover{--tw-brightness: brightness(.75);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}
```

> **Note**: All values above are extracted from the live site's CSS files. The font files are saved locally by Prism and embedded in the output HTML. Use them as-is for maximum fidelity.

## 11.2 Measured Reality (CDP Engine)

Captured directly from Chrome's engine across **all 1868 rendered nodes** — not a sample. These are the values the page *actually paints*, weighted by how often they appear.

### Real Responsive Breakpoints
**5 breakpoints** read from the live `@media` rules (not guessed):
`640px` · `768px` · `1024px` · `1280px` · `1536px`

### Measured Design Scale
**Type scale by usage** (× = paint count): `16px`×1478 · `13.6px`×220 · `14px`×58 · `12px`×42 · `30px`×24 · `20px`×20 · `36px`×8 · `13.3333px`×6

**Radius scale** (× = paint count): `9999px`×61 · `8px`×41 · `12px`×28 · `16px`×21 · `6px`×18 · `4px`×6 · `3.2px`×4 · `20px`×1

**Weights** (× = paint count): `400`×1534 · `300`×161 · `600`×124 · `700`×32 · `500`×14 · `200`×2

**Layout gaps** (× = paint count): `8px`×103 · `16px`×21 · `4px`×21 · `12px`×5 · `24px`×4 · `48px`×3 · `32px`×3 · `16px normal`×3

**Elevation (real shadows)**:
```css
rgba(24, 24, 27, 0.01) 0px 25px 7px 0px, rgba(24, 24, 27, 0.04) 0px 16px 6px 0px, rgba(24, 24, 27, 0.15) 0px 9px 5px 0px, rgba(24, 24, 27, 0.26) 0px 4px 4px 0px, rgba(24, 24, 27, 0.29) 0px 1px 2px 0px
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
```

### Provenance — measured styles on key elements
Read from the live CSSOM (includes runtime-injected CSS). This is *what actually styles the page*, by element:

```css
header { box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow) }
h1 { font-family:Obviously,obviously-fallback,system-ui,sans-serif }
h1 { font-size:1.875rem }
h1 { font-weight:700 }
@media (min-width: 768px) h1 { font-size:2.25rem }
@media (min-width: 1280px) h1 { font-size:3rem }
h2 { font-family:Obviously,obviously-fallback,system-ui,sans-serif }
h2 { font-size:1.5rem }
h2 { font-weight:300 }
@media (min-width: 768px) h2 { font-size:1.875rem }
@media (min-width: 1280px) h2 { font-size:2.25rem }
button { font-family:inherit; font-size:100%; font-weight:inherit; color:inherit }
```

> Selectors normalised to their semantic element — source class names are often build-hashed (`.bgDIHX`) and not reusable. The declarations + CSS vars are the transferable part.

---
*Generated by Prism — automated Playwright extraction + design analysis.*
*Source: https://astro.build | 2026-06-11T06:01:25.114Z*
*Values extracted via getComputedStyle() (rendered) + CSS custom properties (tokens, marked `(token)`). Token-only values may not be painted — verify against the live site before shipping.*