expo.dev

DESIGN.md

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

---
version: alpha
name: expo.dev
description: "Light product system built on #fcfcfd with #30a46c as the primary CTA accent. Type anchored in Inter at 64px / weight 700. Extracted automatically from https://expo.dev/ — rendered styles via getComputedStyle() + CSS custom properties (token-only values may not be painted)."
narrative: |
  expo.dev is built on a soft, near-white canvas (rgb(252, 252, 253)).
  The system uses rgb(48, 164, 108) as the accent for primary actions and brand signals.
  Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside Inter as the primary typeface.
  A layered elevation system (7 distinct shadows) building a clear front-to-back hierarchy.
  Motion is a first-class concern — 24 keyframe animations plus transition-driven interactions.

colors:
  background: "#fcfcfd"
  surface-1: "#f0f0f3"
  surface-2: "#f9f9fb"
  ink: "#1c2024"
  ink-subtle: "#5c5c5c"
  primary: "#30a46c"
  on-primary: "#111111"
  primary-hover: "#363d49"
  hairline: "#80838d"
  primary-focus: "#2547d0"
  semantic-error: "#ffcdce"
  semantic-success: "#8eceaa"
  semantic-warning: "#ab6400"
  semantic-info: "#0588f0"

typography:
  display-xl:
    fontFamily: "Inter, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 64px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -3px
  display-md:
    fontFamily: "JetBrains Mono, 'SF Mono', 'JetBrains Mono', Menlo, monospace"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0
  headline:
    fontFamily: "JetBrains Mono, 'SF Mono', 'JetBrains Mono', Menlo, monospace"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0
  body:
    fontFamily: "Inter, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
  button:
    fontFamily: "Inter, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 14px
  lg: 20px
  xl: 32px
  pill: 9999px

spacing:
  xxs: 2px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 24px
  xl: 48px
  xxl: 88px

components:
  button-pill:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.headline}"
    rounded: "{rounded.lg}"
    padding: 0px 16px
  button-pill-2:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.headline}"
    rounded: "{rounded.xl}"
    padding: 0px 8px 0px 16px
  card-standard-card:
    backgroundColor: "{colors.background}"
    typography: "{typography.display-md}"
    rounded: "{rounded.lg}"
  navigation-main-nav:
    backgroundColor: "transparent"
    typography: "{typography.display-md}"
    rounded: "{rounded.none}"
    padding: 12px 12px 4px
  status-badge-tinted:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.ink}"
    typography: "{typography.display-md}"
    rounded: "{rounded.pill}"
  tab-pill-tab:
    backgroundColor: "#ffffff"
    textColor: "{colors.ink}"
    typography: "{typography.display-md}"
    rounded: "{rounded.lg}"
    padding: 8px
  tab-ghost-tab:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-md}"
    rounded: "{rounded.md}"
    padding: 16px

extracted_at: "2026-06-11T05:00:37.209Z"
completeness: 93
scoreVersion: "v2"

---

# Design System — expo.dev
> Extracted automatically by Prism from https://expo.dev
> 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**: sparse  |  **Motion**: animated  |  **Weight**: heavy  |  **Aesthetic**: soft-rounded

| Dimension | Value | Signal |
|---|---|---|
| Canvas | neutral | `#fcfcfd` |
| Type posture | sans-led (Inter) | "Everything you need to build a" |
| Color assertion | dual-accent | #30a46c |
| Whitespace | sparse | section rhythm 68px |
| Interaction | animated | 24 keyframes, 9 transitions |
| Radius language | soft-pill | from token scale |

**Prism fingerprint**: `neutral-canvas · sans-display · dual-accent · soft-pill · animated-motion`

> **🤖 TL;DR for AI agents** (read this first — saves you scanning the full doc):
>
> - **Canvas**: `rgb(252, 252, 253)` is the page background. Every component composits against this.
> - **Accent**: `rgb(48, 164, 108)` for primary CTAs ONLY. Never decorative.
> - **Body type**: 16px (token: `typography.body`). Default for ALL text not in a heading role.
> - **Section rhythm**: 68px 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

expo.dev sits on a pure white canvas (`#fcfcfd`), a neutral foundation calibrated for sustained reading and component contrast. 

Typography is anchored in **Inter**. Headlines use weight 700 for confident, assertive presence — the brand wants to be heard. Negative letter-spacing at display sizes (-3px at 64px) compresses headlines into engineered blocks, dense and precise. 

Body text reads in Near-Black (`#1c2024`) — softened from pure black, a small but deliberate detail that lowers reading friction. **Teal** (`#30a46c`) 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 (7 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. 

**Key Characteristics:**
- Background: Pure White (`#fcfcfd`)
- Primary typeface: Inter
- Primary text: Near-Black (`#1c2024`)
- Accent: Teal (`#30a46c`)
- Display: 64px weight 700, letter-spacing -3px
- Shadow system: 7 distinct elevation levels
- Custom fonts loaded: Inter, JetBrains Mono

## 2. Color Palette & Roles

### Background & Surface
- **Pure White** (`#fcfcfd`): Page background (primary)
- **Pure White** (`#ffffff`): Surface / elevated background
- **Whitesmoke** (`#d9d9e0`): Surface / elevated background
- **Off-White** (`#f0f0f3`): Surface / elevated background
- **Whitesmoke** (`#e0e1e6`): Surface / elevated background

### Text & Content
- **Near-Black** (`#1c2024`): Primary body text
- **Pure Black** (`#000000`): Secondary text
- **Charcoal** (`#363a3f`): Secondary text
- **Near-Black** (`#171717`): Secondary text

### Accent & Interactive
- **Teal** (`#30a46c`): Interactive / accent
- **#8eceaa** (`#8eceaa`): Interactive / accent
- **Teal** (`#218358`): Interactive / accent
- **#b8ae63** (`#b8ae63`): Interactive / accent
- **M Tricolor Blue** (`#0d74ce`): Interactive / accent
- **#f76b15** (`#f76b15`): Interactive / accent
- **M Tricolor Blue** (`#0072de`): Interactive / accent

### Border & Divider
- **Light Grey** (`#cdced6`): Borders / dividers
- **Grey** (`#b0b4ba`): Borders / dividers
- **Whitesmoke** (`#e8e8ec`): Borders / dividers

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

- `#80838d` — Medium Gray
- `#60646c` — Dim Gray
- `#f9f9fb` — Off-White
- `#0090ff` — Sky Bright
- `#2b9a66` — Teal
- `#405d96` — #405d96
- `#feebec` — Warm Cream *(token)*
- `#fefbe9` — Warm Cream *(token)*
- `#5c5c5c` — Slate Grey *(token)*
- `#476cff` — Ring Blue *(token)*
- `#4f3422` — Charcoal *(token)*
- `#335cff` — #335cff *(token)*
- `#ebebeb` — Whitesmoke *(token)*
- `#363d49` — Dark Gray *(token)*
- `#cc4e00` — #cc4e00 *(token)*
- `#ffcdce` — Pink *(token)*
- `#f4a9aa` — #f4a9aa *(token)*
- `#0588f0` — #0588f0 *(token)*
- `#fefcfb` — Pure White *(token)*
- `#e6e6e6` — Whitesmoke *(token)*
- `#fefcfe` — Pure White *(token)*
- `#ab6400` — #ab6400 *(token)*
- `#8b8d98` — Medium Gray *(token)*
- `#47c2ff` — #47c2ff *(token)*
- `#2547d0` — #2547d0 *(token)*
- `#5eb1ef` — Cornflower Blue *(token)*
- `#ffba18` — Amber *(token)*
- `#d1afec` — Plum *(token)*
- `#402060` — #402060 *(token)*
- `#fee9f5` — Warm Cream *(token)*
- `#fff7c2` — Vibrant Yellow *(token)*
- `#ffdfb5` — Vibrant Yellow *(token)*
- *…+83 more in `raw-css.json` (`desktop.allColors`).*

### CSS Custom Properties (Design Tokens)

**Spacing Token**
- `--dialog-card-gap`: `.375rem`
- `--tw-space-x-reverse`: `0`
- `--legal-links-gap`: `.75rem`
- `--accordion-padding`: `.875rem`

**Border Radius Token**
- `--accordion-radius`: `.625rem`
- `--widget-radius`: `0`
- `--dialog-card-radius`: `1.25rem`
- `--banner-border-radius-sm`: `.3125rem`

**Shadow Token**
- `--button-shadow-neutral-hover`: `none`
- `--accordion-focus-shadow`: `0 0 0 2px #476cff`
- `--button-shadow-primary`: `0px 1px 2px 0px #0e121b0f,inset 0 0 0 1px #335cff`
- `--tw-inset-ring-shadow`: `0 0 #0000`

**Motion Token**
- `--banner-entry-animation`: `c15t-enter-OSOPL .15s ease-out`
- `--legal-links-transition`: `text-decoration .2s ease`
- `--button-hover-transition-full`: `background-color .15s ease-in-out,box-shadow .15s ease-in-out,color .15s ease-in-out`

**Z-Index Token**
- `--dialog-overlay-z-index`: `1000000000`
- `--dialog-z-index`: `1000000000`
- `--widget-z-index`: `50`

**Font Size Token**
- `--button-font-size`: `.875rem`
- `--dialog-branding-font-size`: `1rem`
- `--dialog-title-font-size`: `.875rem`
- `--dialog-description-font-size`: `1rem`

**Font Weight Token**
- `--dialog-description-font-weight`: `400`
- `--button-font-weight`: `500`
- `--font-weight-extrabold`: `800`
- `--font-weight-medium`: `500`

**Other tokens**
- `--accordion-icon-color`: `#5c5c5c`
- `--text-base--line-height`: `1.4`
- `--widget-border-color`: `#ebebeb`
- `--switch-background-color-dark`: `#333`
- `--expo-theme-button-primary-destructive-text`: `#fff`
- `--banner-title-color`: `#171717`
- `--dialog-overlay-background-color`: `#00000080`
- `--expo-theme-text-link`: `#0d74ce`

## 3. Typography Rules

### Font Families
- **Primary**: `Inter`
- **Secondary**: `JetBrains Mono`
- **Font 3**: `ui-monospace`
- **Font 4**: `system-ui`

### Custom Fonts Loaded
- **Inter** weight 100 900 (normal)
- **JetBrains Mono** weight 100 800 (normal)

### Typography Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | Inter | 64px | 700 | 1.1 | -3px | Main headline (h1) |
| Sub-heading | JetBrains Mono | 16px | 600 | 1.4 | normal | Third-level heading (h3) |
| Card Title | Apple Color Emoji | 16px | 400 | 1.5 | normal | Card headings |
| Body | Inter | 16px | 400 | 1.4 | normal | Standard reading text |
| Label Heading | JetBrains Mono | 14px | 600 | 1.4 | normal | Small heading (H4) |
| Button | Inter | 14px | 400 | 1.4 | normal | Button label (14px) |
| Button | Inter | 14px | 500 | 1.4 | normal | Button label (14px) |

### Font Weight Scale

CSS custom properties define 12 explicit weight steps:
- `--font-weight-light`: `300` — Light
- `--dialog-description-font-weight`: `400` — Regular
- `--font-weight-normal`: `400` — Regular
- `--tw-font-weight`: `400` — Regular
- `--button-font-weight`: `500` — Medium
- `--font-weight-medium`: `500` — Medium
- `--dialog-branding-font-weight`: `500` — Medium
- `--dialog-title-font-weight`: `600` — SemiBold
- `--font-weight-semibold`: `600` — SemiBold
- `--font-weight-bold`: `700` — Bold
- `--font-weight-extrabold`: `800` — ExtraBold
- `--font-weight-black`: `900` — Black

### Full Font Size Scale

Sizes detected in the design (descending): `64px`, `48px`, `20px`, `18px`, `16px`, `14px`, `12px`

> 4 size(s) detected outside the sampled hierarchy (48px, 20px, 18px, 12px). These appear on elements not in the sampled set — likely additional display sizes, marketing-section overrides, or third-party-widget styles.

## 4. Component Stylings

### Buttons

**Pill**
- Background: `transparent`
- Text: `#1c2024` `{colors.ink}`
- Padding: 0px 16px
- Radius: 24px
- Font: 14px weight 400
- Use: Status pills, tags, chips
- Focus: outline: `rgb(5, 136, 240) solid 2px`

**Pill**
- Background: `transparent`
- Text: `#1c2024` `{colors.ink}`
- Padding: 0px 8px 0px 16px
- Radius: 36px
- Border: 1px solid rgba(0, 0, 0, 0)
- Font: 14px weight 400
- Use: Status pills, tags, chips
- Focus: outline: `rgb(5, 136, 240) solid 2px`

### Cards & Containers

**Standard Card**
- Background: `#fcfcfd` `{colors.background}`
- Padding: 0px
- Radius: 20px
- Border: 1px solid rgb(232, 232, 236)
- Shadow: `rgba(0, 0, 0, 0.12) 0px 15px 25px 0px, rgba(0, 0, 0, 0.05) 0px 5px 10px 0px`
- Use: Content containers, listing items

### Navigation

**Main Nav**
- Background: `transparent`
- Padding: 12px 12px 4px
- Radius: none
- Font: 16px weight 400
- Use: Static flex nav — N/A items

### Status Badges

**Tinted**
- Background: `#30a46c` `{colors.primary}`
- Text: `#1c2024` `{colors.ink}`
- Padding: 0px
- Radius: 9999px
- Font: 16px weight 400
- Use: Status indicator, label, pill

### Tabs

**Pill Tab**
- Background: `#ffffff`
- Text: `#1c2024` `{colors.ink}`
- Padding: 8px
- Radius: 24px
- Font: 16px weight 400
- Use: Navigation tabs, filter tabs

**Ghost Tab**
- Background: `transparent`
- Text: `#1c2024` `{colors.ink}`
- Padding: 16px
- Radius: 16px
- Font: 16px weight 500
- Use: Navigation tabs, filter tabs


## 4b. Component Behaviors (State Matrix)

### Interaction State Narrative

- **Link**:
  - **hover:** shadow added

*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(28, 32, 36)"
    focus:
      bg: "transparent"
      fg: "inherit"
  link:
    default:
      bg: "color(srgb 0.976471 0.976471 0.984314 / 0.8)"
      fg: "rgb(28, 32, 36)"
      border: "1px solid rgb(217, 217, 224)"
    hover:
      bg: "transparent"
      fg: "inherit"
  card:
    default:
      bg: "rgb(252, 252, 253)"
      fg: "rgb(28, 32, 36)"
      border: "1px solid rgb(232, 232, 236)"
      shadow: "rgba(0, 0, 0, 0.12) 0px 15px 25px 0px, rgba(0, 0, 0, 0.05) 0"
  navLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(28, 32, 36)"
  tab:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(28, 32, 36)"
  footerLink:
    default:
      bg: "rgb(0, 0, 0)"
      fg: "rgb(28, 32, 36)"
      shadow: "rgba(0, 0, 0, 0.05) 0px 5px 10px 0px, rgba(0, 0, 0, 0.12) 0p"
```

**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
- **1 shape(s)** in this system: `Pill`
- **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

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

### Status Badges
- **1 shape(s)** in this system: `Tinted`
- **DO NOT introduce new status badges variants** without justification

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

## 5. Layout Principles

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

### Grid
Single column, centered content

### Max Width
440px

### Spacing System
Generous spacing — editorial breathing room

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

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

### Shape Language

| Component | Border Radius |
|-----------|---------------|
| Buttons | `24px` |
| Cards & Containers | `20px` |
| Navigation | `none` |
| Status Badges | `9999px` |
| Tabs | `24px` |
| Page Body | `0px` |

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

**Full Radius Spectrum**: 4px, 8px, 12px, 14px, 16px, 20px, 24px, 32px (from `allBorderRadii` scan)


## 5b. Spacing Rhythm Names

**Measured section padding**: bands use ~144px internal vertical padding (up to 144px) — **very airy / premium**. (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** | `88px` | Top/bottom of full-bleed hero sections |
| **section** | `48px` | 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:** "Everything you need to build apps" — 64px center-aligned
- **Subheading:** "Expo is a full-stack React Native framework with powerful cloud services to help you move faster at every stage of the app lifecycle."
- **Media:** present, positioned top
- **CTAs:** 5 (primary: "What's new?Introducing EAS Observe")
- **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:** unknown — Layout not classified
- **Height:** 68px
- **Logo:** ✓ present
- **Nav links:** 4 primary items
- **CTAs in nav:** 4
- **Clone instruction:** Build a static unknown navigation. Reserve 4 slots for primary CTAs.

### Card Grid Pattern

- **Card count:** 3 cards detected
- **Columns (desktop):** 1-up grid
- **Card dimensions:** 1396×1490px (aspect 0.94:1)
- **Gap:** 0px between cards
- **Content:** ✗ no image
- **Clone instruction:** Build a 1-column grid (desktop) with cards at ~0.94:1 aspect ratio. Text/icon-only cards (no photography).

### CTA Banner Pattern

- **Banner count:** 2
- **Position:** multiple
- **Visual treatment:** ✓ contrasting background
- **Primary CTA text:** "Publish"
- **Clone instruction:** Place multiple CTA banners across page sections. Use contrasting solid background.

### Footer Pattern

- **Columns:** 5
- **Links:** 42 total
- **Height:** 524px
- **Includes:** ✗ no newsletter | ✓ social icons |  ✓ copyright
- **Clone instruction:** Build a 5-column footer with ~8 links per column, 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.08) 0px 3px 6px 0px`,<br>`rgba(0, 0, 0, 0.07) 0px 2px 4px 0px` | Cards, elevated surfaces |
| Layered (Level 2) | <br>`rgba(0, 0, 0, 0.15) 0px 20px 40px 0px` | Cards, elevated surfaces |
| Layered (Level 3) | <br>`rgba(0, 0, 0, 0.1) 0px 10px 20px 0px`,<br>`rgba(0, 0, 0, 0.05) 0px 3px 6px 0px` | Cards, elevated surfaces |
| Layered (Level 4) | <br>`rgba(0, 0, 0, 0.05) 0px 5px 10px 0px`,<br>`rgba(0, 0, 0, 0.12) 0px 15px 25px 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

### Easing System

| CSS Variable | Curve | Semantic Name |
|--------------|-------|---------------|
| `--widget-accordion-ease` | `cubic-bezier(.4,0,.2,1)` | Ease Out — Decelerating |
| `--accordion-ease` | `cubic-bezier(.4,0,.2,1)` | Ease Out — Decelerating |
| `--default-transition-timing-function` | `cubic-bezier(.4, 0, .2, 1)` | Ease Out — Decelerating |
| `--switch-ease` | `cubic-bezier(.4,0,.2,1)` | Ease Out — Decelerating |
| `--ease-out` | `cubic-bezier(0, 0, .2, 1)` | Ease Out — Decelerating |
| `--ease-in-out` | `cubic-bezier(.4, 0, .2, 1)` | Ease Out — Decelerating |

### Duration Scale

| CSS Variable | Value | Tier |
|--------------|-------|------|
| `--switch-duration` | `.2s` | Normal |
| `--accordion-duration` | `.2s` | Normal |
| `--banner-animation-duration` | `.2s` | Normal |
| `--dialog-animation-duration` | `.2s` | Normal |
| `--default-transition-duration` | `.15s` | Fast |
| `--widget-accordion-duration` | `.2s` | Normal |

### Copy-Paste Transition Snippets

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

**Opacity**
```css
transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
```

**Transform**
```css
transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), translate 0.15s cubic-bezier(0.4, 0, 0.2, 1), scale 0.15s cubic-bezier(...;
```

**Opacity**
```css
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
```

### Keyframe Animation Catalog

| Animation Name | Type | Animated Props | Use Hint |
|----------------|------|----------------|----------|
| `spin` | Rotate / Spin | transform | Loading indicator |
| `pulse` | Fade | opacity | Attention / status |
| `status-pulse` | Fade + Move | opacity, transform | Attention / status |
| `fadeIn` | Fade | opacity | Element entrance |
| `fadeOut` | Fade | opacity | Element exit |
| `slideDownAndFade` | Fade + Move | opacity, transform | Panel / drawer enter |
| `slideRightAndFade` | Fade + Move | opacity, transform | UI transition |
| `slideLeftAndFade` | Fade + Move | opacity, transform | UI transition |
| `slideUpAndFade` | Fade + Move | opacity, transform | Panel / drawer enter |
| `largeSlideUpAndFadeIn` | Fade + Move | opacity, transform | Element entrance |
| `largeSlideDownAndFadeIn` | Fade + Move | opacity, transform | Element entrance |
| `progressBar` | Custom | background-position-x, background-position-y | UI transition |
| `contentLoading` | Custom | background-position-x, background-position-y | Loading indicator |
| `recapHeroEntrance` | Fade + Move | opacity, transform | UI transition |
| `marquee` | Slide | transform | UI transition |
| `caret-blink` | Fade | opacity | Attention / status |
| `collapsibleOpen` | Fade | opacity, grid-template-rows | UI transition |
| `collapsibleClosed` | Fade | opacity, grid-template-rows | UI transition |
| `c15t-accordionDown-BXyWj` | Fade | opacity, height | UI transition |
| `c15t-accordionUp-JM5v8` | Fade | height, opacity | UI transition |

> *4 additional animations omitted (repetitive variants). See raw keyframes in `raw-css.json`.*

### Motion Fingerprint

- **Speed Character**: Balanced Pacing (median duration: `200ms`)
- **Dominant Easing**: custom cubic-bezier curves
- **Animation Library**: 24 unique animations (24 total including variants)

> This design moves with balanced pacing timing using custom cubic-bezier curves, creating a UI that feels natural and fluid.

## 8. Do's and Don'ts

### Do
- Use Pure White (`#fcfcfd`) as the page background — it's intentionally not pure white
- Use Near-Black (`#1c2024`) for text — not pure black, it's warmer and more readable
- Use Inter as the primary typeface — it defines the brand personality
- Use negative letter-spacing (-3px) at display sizes for compressed, editorial headlines
- 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 Teal (`#30a46c`) as the primary accent — it's the brand's signature interactive color
- Use 24px border-radius on primary buttons — the brand uses generously-rounded CTAs
- Use 20px border-radius on cards — consistent with the grid card corners
- Maintain nav height at 68px — consistent vertical space for the navigation bar
- Respect the 4px–48px 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 5 CTAs in the hero (primary + secondary) — this design pattern is multi-action, not single-purpose
- Repeat the primary CTA across 2 banner sections — conversion paths are layered, not single
- Build a content-dense footer (5 columns, ~42 links) — this site treats the footer as a sitemap, not an afterthought

### Don't
- Don't use pure white (`#ffffff`) as a page background — the warm tone is part of the brand identity
- Don't use pure black (`#000000`) for text — the near-black adds warmth
- Don't substitute with generic sans-serif or serif — the custom font carries the brand
- Don't increase letter-spacing on headings — the type is designed to run tight at scale
- 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 use sharp-cornered or pill buttons — 24px is the CTA border-radius standard
- 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


## 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(252, 252, 253)` as the base canvas"
    why: "Every component is designed to composit against this exact tone"
    test: "document.body.style.backgroundColor === 'rgb(252, 252, 253)'"
  - id: brand-accent-001
    type: do
    rule: "Reserve `rgb(48, 164, 108)` for primary CTAs and brand-mark signals only"
    why: "Single chromatic assertion device — overuse dilutes meaning"
    test: "querySelectorAll('[style*=\"rgb(48, 164, 108)\"]').length <= 3 per fold"
```

## 9. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | 468px | Single column, compact spacing |
| Mobile Large | 640px | Expanded mobile layout |
| Mobile Large | 767px | Expanded mobile layout |
| Tablet | 1008px | Multi-column grids begin |
| Large Desktop | 1328px | Maximum content width |
| Large Desktop | 1500px | Maximum content width |

### Token Diff — Desktop vs Mobile

| Element | Property | Desktop | Mobile |
|---------|----------|---------|--------|
| heading | font-size | `64px` | `32px` |
| heading | font-weight | `700` | `600` |
| heading | line-height | `70.4px` | `35.2px` |
| heading | letter-spacing | `-3px` | `-0.5px` |
| card | width | `360px` | `348px` |

### Collapsing Strategy
- Headlines: 64px → 32px 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, 0 on mobile (the rest hide behind a menu toggle).
- **Nav CTAs reduced** on mobile (4 → 0) — the design prioritizes content over conversion buttons at small sizes.
- **Footer columns collapse:** 5 columns (desktop) → 2 columns (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.*

- **Canvas / 2D rendering** — animated/interactive canvas (charts, graphs, particle fields). Reproduce as live data-viz (e.g. an animated SVG/Canvas line chart), NOT a static image.
- **WebGL** — GPU 3D/shader graphics (hero atmosphere is rendered, not a flat gradient).
- **Clip-path shapes** — 8 non-rectangular cut(s).
- **CSS-variable animations** (2) — animated custom properties.

> **Motion fingerprint**: WebGL/3D canvas, non-rectangular shapes (10)

## 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://static.expo.dev/static/home/9-2025/og-image.png
  *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.78:1 (landscape (16:9-ish))
- Rendered size: 1280×720px
- Alt text: "Deploy Expo"
- *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): 7 (13%)
- Portrait (<0.87): 0 (0%)
- Square (0.87–1.15): 46 (87%)

**Media Format Mix:**
- JPG: 2 (typically photographic content)
- WebP: 15 (optimized photo/illustration hybrid)
- PNG: 20 (logos, transparent UI elements, mockups)
- SVG: 9 (icons, illustrations, decorative geometry)

**Average rendered image size:** 224×168px
**Above-fold image count:** 1 / 53

**Decorative Patterns Detected:**
- 2 multi-stop linear gradients (mesh-like, 3+ color stops) — the brand leans on rich color transitions for visual depth
- 7 radial gradients — circular color blooms used for spotlight/glow effects
- 4 large decorative SVG shapes (≥200×200px, non-icon) — likely blob/illustration accents
- **Glassmorphism** detected (`backdrop-filter: blur`) — layered transparent surfaces with blur, modern OS-like aesthetic

**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: Pure White (`#fcfcfd`)
- Primary text: Near-Black (`#1c2024`)
- Accent: Teal (`#30a46c`)
- Border: Medium Gray (`#80838d`)
- Font: Inter
- Body: 16px weight 400

### Example Component Prompts
- "Create a hero section on Pure White background (#fcfcfd). Headline at 64px Inter weight 700, line-height 1.1, letter-spacing -3px, color #1c2024."
- "Create the primary CTA button: `#30a46c` background, `#1c2024` text, 9999px border-radius, 12px 24px padding, 700 weight, Inter font."
- "Design a card on `#fcfcfd` background. Border: 1px solid rgb(232, 232, 236). Radius: 20px. Shadow: use extracted shadow. Padding: 0px."
- "Build navigation: relative on `#fcfcfd`. Inter 16px weight 400 for links."

### Iteration Guide
1. **Canvas**: Set the light canvas to Pure White (`#fcfcfd`) — every component is composited against this exact base.
2. **Typography**: All type in Inter, weight range 300–900. Never exceed 900 — heavier weights break the brand's tonal restraint.
3. **Accent**: Teal (`#30a46c`) is the sole interactive color. On hover → #8eceaa (`#8eceaa`). Use CSS transitions, not opacity/brightness filters.
4. **Focus**: Render focus rings in #2547d0 (`#2547d0`) — never hide focus outlines. The ring color is distinct from the accent to avoid ambiguity.
5. **Motion**: All transitions use `cubic-bezier(0.4,0,0.2,1)`. Timing: 150ms for micro-interactions, 200ms for layout changes. Never use linear for UI transitions — preserve the brand's easing personality.
6. **Shape**: CTAs at `0px`, cards at `20px`. Apply border-radius from the extracted scale only — don't invent intermediate values.
7. **Spacing**: Use the `--ca-space-*` token scale (4px–48px). All padding, margin, and gap values are multiples from this scale — no magic numbers.
8. **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-background: #fcfcfd;
  --ca-surface-1: #f0f0f3;
  --ca-surface-2: #f9f9fb;
  --ca-ink: #1c2024;
  --ca-ink-subtle: #5c5c5c;
  --ca-primary: #30a46c;
  --ca-on-primary: #111111;
  --ca-primary-hover: #363d49;
  --ca-hairline: #80838d;
  --ca-primary-focus: #2547d0;
  --ca-semantic-error: #ffcdce;
  --ca-semantic-success: #8eceaa;
  --ca-semantic-warning: #ab6400;
  --ca-semantic-info: #0588f0;
}

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

/* 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: 48px;
  --ca-space-2xl: 68px;
  --ca-space-3xl: 88px;
  --ca-radius-none: 0px;
  --ca-radius-xs: 4px;
  --ca-radius-sm: 8px;
  --ca-radius-md: 14px;
  --ca-radius-lg: 20px;
  --ca-radius-xl: 32px;
  --ca-radius-full: 9999px;
}

/* Motion */
:root {
  --ca-ease-out: cubic-bezier(0, 0, .2, 1);
  --ca-ease-in-out: cubic-bezier(.4, 0, .2, 1);
}
```


## 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: hero
    tag: div
    classes: ["relative", "isolate", "z-0", "min-h-dvh"]
    height: 9155px
    width: 1430px
    layout: block
    children: 2
    bg: "rgb(255, 255, 255)"
  - section: feature-section
    tag: section
    classes: ["relative", "py-12", "max-sm:py-0", "max-sm:pb-4"]
    height: 1533px
    width: 1430px
    layout: block
    children: 3
    vertical-padding: ~48px
    padding: "48px 0px"
  - section: unknown
    tag: div
    classes: ["c15t-root-tnx7V", "c15t-bottomLeft-wv7ez", "p-4!", "pointer-events-auto"]
    height: 142px
    width: 392px
    layout: flex-column justify=normal
    children: 1
    padding: "16px"
  - section: feature-section
    tag: section
    classes: ["dark-theme", "bg-palette-black", "py-24", "text-palette-white"]
    height: 1898px
    width: 1430px
    layout: block
    children: 1
    bg: "rgb(0, 0, 0)"
    vertical-padding: ~96px (airy)
    padding: "96px 0px"
  - section: feature-section
    tag: section
    classes: ["relative", "h-fit", "py-36", "max-md:py-24"]
    height: 698px
    width: 1430px
    layout: block
    children: 2
    bg: "rgb(249, 249, 251)"
    vertical-padding: ~144px (airy)
    padding: "144px 0px"
  - section: feature-section
    tag: section
    classes: ["relative", "h-fit", "py-36", "max-md:py-24"]
    height: 454px
    width: 1430px
    layout: block
    children: 2
    bg: "rgb(249, 249, 251)"
    vertical-padding: ~144px (airy)
    padding: "144px 0px"
  - section: feature-section
    tag: section
    classes: ["relative", "h-fit", "py-36", "max-md:py-24"]
    height: 870px
    width: 1430px
    layout: block
    children: 2
    bg: "rgb(249, 249, 251)"
    vertical-padding: ~144px (airy)
    padding: "144px 0px"
  - section: feature-section
    tag: section
    classes: ["relative", "h-fit", "py-36", "max-md:py-24"]
    height: 878px
    width: 1430px
    layout: block
    children: 2
    bg: "rgb(249, 249, 251)"
    vertical-padding: ~144px (airy)
    padding: "144px 0px"
  - section: feature-section
    tag: section
    classes: ["relative", "h-fit", "py-36", "max-md:py-24"]
    height: 960px
    width: 1430px
    layout: block
    children: 2
    bg: "rgb(249, 249, 251)"
    vertical-padding: ~144px (airy)
    padding: "144px 0px"
  - section: content-section
    tag: section
    classes: ["relative", "h-fit", "p-0", "max-md:p-0"]
    height: 800px
    width: 1430px
    layout: block
    children: 2
    bg: "rgb(249, 249, 251)"
  - section: section
    tag: section
    classes: ["relative", "min-h-225", "overflow-hidden", "py-12"]
    height: 900px
    width: 1430px
    layout: block
    children: 3
    vertical-padding: ~48px
    padding: "48px 0px"
  - section: footer
    tag: footer
    height: 524px
    width: 1430px
    layout: block
    children: 1
    contains: chart/canvas (reproduce as live data-viz, not a flat image)
  - section: navigation
    tag: nav
    classes: ["flex", "gap-10", "py-10", "lg:gap-4"]
    height: 444px
    width: 1280px
    layout: flex-row justify=normal
    children: 2
    vertical-padding: ~68px (generous)
    contains: chart/canvas (reproduce as live data-viz, not a flat image)
    padding: "88px 0px 48px"
  - section: logo-strip
    tag: section
    classes: ["py-6", "text-xs", "text-secondary", "max-md:border-t"]
    height: 80px
    width: 1280px
    layout: block
    children: 1
    vertical-padding: ~24px
    padding: "24px 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:
    - "Expo is a full-stack React Native framework with powerful cloud services to help you move faster at"
    - "Build your app with the best tools in the universe"
    - "Get your app on every device"
    - "Get your latest changes to every user, instantly"
  sub-headings:
    - "Expo SDK"
    - "Web deployment"
    - "User population"
    - "Serving 100s of millions of end users"
    - "Product"
  ctas:
    - "Docs"
    - "Product"
    - "48.2K"
    - "Log in"
    - "Sign up"
    - "What's new? Introducing EAS Observe"
    - "Get started for free"
    - "Read the docs"
  navigation:
    - "Product"
    - "48.2K"
    - "Docs"
    - "Enterprise"
    - "Pricing"
    - "Blog"
    - "Log in"
    - "Sign up"
    - "Star us on GitHub"
    - "Expo CLI on GitHub"
  footer-links:
    - "Star us on GitHub"
    - "All Systems Operational"
```

**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:
  logo:
    count: 1
    avg-ratio: 2.02
    common-aspect: "~16:9 landscape"
    sample-alts:
      - "Team avatars"
  product:
    count: 5
    avg-ratio: 1.10
    common-aspect: "~1:1 square"
    sample-alts:
      - "Expo SDK image"
      - "Developer experience image"
      - "Expo Go device"
  thumbnail:
    count: 41
    avg-ratio: 1.00
    common-aspect: "~1:1 square"
    sample-alts:
      - "App Icon 1"
      - "App Icon 2"
      - "App Icon 3"
```

**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">
  Action
</button>
```
_Source pattern detected: padding `0px` · radius `0px` · weight `400`_

### Generic Card
```html
<div class="card">
  <!-- content -->
</div>
```
_Source pattern detected: padding `0px` · radius `20px` · shadow `rgba(0, 0, 0, 0.12) 0px 15px 25px 0px, rgba(0, 0, 0, 0.05) 0`_

**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** 2 · **auth** 1 · **product** 3 · **pricing** 1 · **docs** 11 · **blog** 3 · **social** 26 · **footer** 9 · **other** 3

**Primary actions (conversion path):**
- Account access — "Log in" (login/signup) → `https://expo.dev/login`
- Primary call-to-action — "Sign up" (the conversion path) → `https://expo.dev/signup`
- Primary call-to-action — "Get started for free" (the conversion path) → `https://expo.dev/signup?redirect_uri=/new`

**Signals:** 27/60 links carry a featured image · dominant link roles: footer-link (21), content-card (18), inline-link (16).


---
## Extraction Completeness: 93/100 (A)

| Category | Score | Max | Detail |
|----------|-------|-----|--------|
| Colors & Palette | 25 | 25 | 19 named colors |
| Typography | 18 | 20 | 7 roles defined |
| Components | 20 | 20 | 5 specs extracted |
| Motion & Interaction | 15 | 15 | Keyframes, easing vars |
| CSS Custom Properties | 10 | 10 | 552 vars |
| Responsive Breakpoints | 5 | 5 | 6 breakpoints |
| Variable Fonts | 0 | 5 | None detected |

## 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 (Inter, JetBrains Mono)** — detected but not downloaded. Substitute with your licensed copy or a close fallback (see Typography section for metrics).

| Category | What's missing | Fallback strategy |
|----------|----------------|-------------------|
| **Form inputs** | No text input fields detected on this page | Use the documented border-radius + accent border on focus; 12-16px padding inside |

### Per-section confidence

| Section | Confidence | Reason |
|---------|------------|--------|
| §1 Visual Theme | High | Body bg extracted via getComputedStyle() |
| §2 Colors | High | 552 CSS vars (semantic naming requires ≥20 for high) |
| §3 Typography | High | 7 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 | 6 breakpoints detected |
| §9b Photography | High | 53 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

2 font file(s) captured (111KB total). When running `prism add`, fonts are saved to `extractions/expo.dev/fonts/` and embedded as base64 in the output HTML.

**@font-face declarations to use:**
```css
@font-face {
  font-family: 'Inter';
  /* src: url('/fonts/Inter.woff2') format('woff2'); */
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  /* src: url('/fonts/JetBrains-Mono.woff2') format('woff2'); */
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
```

### Keyframe Animations (Intercepted from CSS)

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

```
@keyframes rainbow { ... }
@keyframes searchUIBarLoader { ... }
@keyframes fade { ... }
@keyframes progressFill { ... }
@keyframes logo-carousel { ... }
@keyframes route-progress-trickle { ... }
@keyframes spin { ... }
@keyframes pulse { ... }
@keyframes status-pulse { ... }
@keyframes fadeIn { ... }
@keyframes fadeOut { ... }
@keyframes slideDownAndFade { ... }
@keyframes slideRightAndFade { ... }
@keyframes slideLeftAndFade { ... }
@keyframes slideUpAndFade { ... }
@keyframes largeSlideUpAndFadeIn { ... }
@keyframes largeSlideDownAndFadeIn { ... }
@keyframes progressBar { ... }
@keyframes contentLoading { ... }
@keyframes recapHeroEntrance { ... }
@keyframes marquee { ... }
@keyframes caret-blink { ... }
@keyframes collapsibleOpen { ... }
@keyframes collapsibleClosed { ... }
```

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

```css
@keyframes rainbow{0%{background-position:0 0}50.01%{background-position:200% 0}
@keyframes searchUIBarLoader{0%{width:0}80%{opacity:1;width:100%}
@keyframes fade{0%,80%,to{opacity:0}40%{opacity:1}}
@keyframes progressFill{0%{height:0%}
@keyframes logo-carousel{0%{transform:translateX(var(--carousel-start))}
@keyframes route-progress-trickle{0%{width:0%}20%{width:50%}80%{width:80%}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{50%{opacity:.5}}
@keyframes status-pulse{0%{opacity:0;transform:scale(1)}20%{opacity:.65}
@keyframes fadeIn{0%{opacity:0}
@keyframes fadeOut{0%{opacity:1}
@keyframes slideDownAndFade{0%{opacity:0;transform:translateY(8px)}
@keyframes slideRightAndFade{0%{opacity:0;transform:translate(8px)}
@keyframes slideLeftAndFade{0%{opacity:0;transform:translate(-8px)}
@keyframes slideUpAndFade{0%{opacity:0;transform:translateY(-8px)}
@keyframes largeSlideUpAndFadeIn{0%{opacity:0;transform:translateY(16px)}
@keyframes largeSlideDownAndFadeIn{0%{opacity:0;transform:translateY(-16px)}
@keyframes progressBar{0%{background-position:0 0}
@keyframes contentLoading{0%{background-position:-400px 0}
@keyframes recapHeroEntrance{0%{opacity:0;transform:translateY(100px)rotate(-3deg)}
@keyframes marquee{0%{transform:translate(0)}
@keyframes caret-blink{0%,70%,to{opacity:1}20%,50%{opacity:0}}
@keyframes collapsibleOpen{0%{opacity:0;grid-template-rows:0fr}
@keyframes collapsibleClosed{0%{opacity:1;grid-template-rows:1fr}
```
</details>

### Brand Gradient Palette

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

```css
/* Gradient 1 */
background: linear-gradient(45deg,#fb0094,#00f,#0f0,#ff0,red,#fb0094,#00f,#0f0,#ff0,red);

/* Gradient 2 */
background: linear-gradient(-65deg,#0000,#0000 36px,#ffffff40 36px 72px);

/* Gradient 3 */
background: linear-gradient(to right, var(--tw-mask-right-from-color);

```

### Hover State CSS (Intercepted)

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

```css
.react-datepicker__navigation:hover :before{border-color:#a6a6a6}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover{cursor:pointer;background-color:var(--expo-theme-background-default)}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover{background-color:var(--expo-theme-button-primary-background)}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover{cursor:default;background-color:#0000}

.react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected,.react-datepicker__week-number--keyboard-selected):hover{background-color:var(--expo-theme-background-default);border-radius:4px}

.react-datepicker__week-number--selected:hover{background-color:#1d5d90}

.react-datepicker__week-number--keyboard-selected:hover{background-color:#1d5d90}

.react-datepicker__day:hover,.react-datepicker__month-text:hover,.react-datepicker__quarter-text:hover,.react-datepicker__year-text:hover{background-color:var(--blue-2);color:var(--blue-11);border-radius:4px}

.react-datepicker__day--holidays:hover .overlay,.react-datepicker__month-text--holidays:hover .overlay,.react-datepicker__quarter-text--holidays:hover .overlay,.react-datepicker__year-text--holidays:hover .overlay{visibility:visible;opacity:1}

.react-datepicker__day--selected:hover,.react-datepicker__day--in-selecting-range:hover,.react-datepicker__day--in-range:hover,.react-datepicker__month-text--selected:hover,.react-datepicker__month-text--in-selecting-range:hover,.react-datepicker__month-text--in-range:hover,.react-datepicker__quarter-text--selected:hover,.react-datepicker__quarter-text--in-selecting-range:hover,.react-datepicker__quarter-text--in-range:hover,.react-datepicker__year-text--selected:hover,.react-datepicker__year-text--in-selecting-range:hover,.react-datepicker__year-text--in-range:hover{background-color:var(--blue-5);color:var(--blue-11)}

.react-datepicker__day--keyboard-selected:hover,.react-datepicker__month-text--keyboard-selected:hover,.react-datepicker__quarter-text--keyboard-selected:hover,.react-datepicker__year-text--keyboard-selected:hover{background-color:var(--blue-9)}

.react-datepicker__day--disabled:hover,.react-datepicker__month-text--disabled:hover,.react-datepicker__quarter-text--disabled:hover,.react-datepicker__year-text--disabled:hover{background-color:#0000}

.dark-theme .react-datepicker__view-calendar-icon input:hover,.dark-theme .react-datepicker__view-calendar-icon input:focus{background-color:var(--expo-theme-background-subtle)}

.react-datepicker__year-read-view:hover,.react-datepicker__month-read-view:hover,.react-datepicker__month-year-read-view:hover{cursor:pointer}

.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow{border-top-color:#b3b3b3}

.react-datepicker__year-dropdown:hover,.react-datepicker__month-dropdown:hover,.react-datepicker__month-year-dropdown:hover{cursor:pointer}

.react-datepicker__year-option:hover,.react-datepicker__month-option:hover,.react-datepicker__month-year-option:hover{background-color:#ccc}

.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming{border-bottom-color:#b3b3b3}

.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous{border-top-color:#b3b3b3}

[cmdk-list]::-webkit-scrollbar-thumb:hover{background-color:var(--slate-6)}
```

> **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 1146 rendered nodes** — not a sample. These are the values the page *actually paints*, weighted by how often they appear.

### Real Responsive Breakpoints
**11 breakpoints** read from the live `@media` rules (not guessed):
`300px` · `468px` · `640px` · `767px` · `787px` · `788px` · `1008px` · `1024px` · `1328px` · `1500px` · `1572px`

### Measured Design Scale
**Type scale by usage** (× = paint count): `16px`×673 · `14px`×364 · `12px`×83 · `48px`×12 · `20px`×8 · `64px`×3 · `18px`×2

**Radius scale** (× = paint count): `24px`×50 · `9999px`×32 · `8px`×21 · `36px`×10 · `16px`×9 · `32px`×4 · `20px`×3 · `4px`×3

**Weights** (× = paint count): `400`×870 · `500`×157 · `600`×111 · `700`×6 · `900`×1

**Layout gaps** (× = paint count): `8px`×61 · `24px`×20 · `16px`×10 · `12px`×10 · `6px`×5 · `32px`×4 · `4px`×4 · `12px 32px`×3

**Elevation (real shadows)**:
```css
rgba(0, 0, 0, 0.1) 0px 10px 20px 0px, rgba(0, 0, 0, 0.05) 0px 3px 6px 0px
rgba(0, 0, 0, 0.08) 0px 3px 6px 0px, rgba(0, 0, 0, 0.07) 0px 2px 4px 0px
rgba(0, 0, 0, 0.15) 0px 20px 40px 0px
rgba(0, 0, 0, 0.05) 0px 5px 10px 0px, rgba(0, 0, 0, 0.12) 0px 15px 25px 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
h1 { font-size:24px; font-weight:600 }
h1 { font-size:64px; font-weight:600 }
h1 { font-weight:var(--font-weight-bold) }
h2 { font-size:20px; font-weight:600 }
h2 { font-size:18px; font-weight:600 }
h2 { font-weight:var(--font-weight-normal) }
h2 { color:var(--expo-theme-text-secondary) }
a { border-radius:24px }
a { font-size:14px; font-weight:var(--tw-font-weight,400) }
a { font-weight:var(--font-weight-normal) }
card { background-color:var(--expo-theme-background-screen)!important }
card { box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)!important }
```

> 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://expo.dev | 2026-06-11T05:00:37.405Z*
*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.*