bun.sh

DESIGN.md

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

---
version: alpha
name: bun.sh
description: "Dark-canvas product system built on #14151a with #f472b6 as the single brand accent. Type anchored in system-ui at 72px / weight 800. Extracted automatically from https://bun.sh/ — rendered styles via getComputedStyle() + CSS custom properties (token-only values may not be painted)."
narrative: |
  bun.sh is built on a near-black canvas (rgb(20, 21, 26)).
  The system uses rgb(244, 114, 182) as the accent for primary actions and brand signals.
  System-ui as the primary typeface.
  A layered elevation system (7 distinct shadows) building a clear front-to-back hierarchy.
  Motion is a first-class concern — 13 keyframe animations plus transition-driven interactions.

colors:
  canvas: "#14151a"
  surface-2: "#14151a"
  ink: "#ffffff"
  ink-muted: "#d1d5db"
  ink-subtle: "#687076"
  primary: "#f472b6"
  on-primary: "#111111"
  primary-hover: "#ff79c6"
  hairline: "rgba(255, 255, 255, 0.16)"

typography:
  display-xl:
    fontFamily: "system-ui"
    fontSize: 72px
    fontWeight: 800
    lineHeight: 1
    letterSpacing: 0
  display-lg:
    fontFamily: "Oxygen, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 60px
    fontWeight: 800
    lineHeight: 1
    letterSpacing: 0
  display-md:
    fontFamily: "Oxygen, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.33
    letterSpacing: 0
  headline:
    fontFamily: "Oxygen, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0
  body:
    fontFamily: "Oxygen, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  button:
    fontFamily: "Oxygen, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.56
    letterSpacing: 0

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 30px
  xl: 40px
  pill: 9999px

spacing:
  xxs: 2px
  xs: 8px
  sm: 12px
  md: 15px
  lg: 24px
  xl: 32px
  xxl: 96px

components:
  button-dark--solid:
    backgroundColor: "#090a11"
    textColor: "#7f8497"
    typography: "{typography.body}"
    rounded: "{rounded.xl}"
    padding: 0px 8px
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body}"
    rounded: "{rounded.xs}"
    padding: 8px 4px
  button-primary-brand:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface-2}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
  input-text-input:
    backgroundColor: "transparent"
    textColor: "{colors.hairline}"
    typography: "{typography.body}"
    rounded: "{rounded.xs}"
    padding: 8px 12px
  navigation-main-nav:
    backgroundColor: "transparent"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 0px 48px
  tab-pill-tab:
    backgroundColor: "#282a36"
    textColor: "{colors.primary}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 16px
  code-block-inline-code--pre:
    backgroundColor: "#282a36"
    textColor: "#282a36"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    padding: 3px 40px 3px 16px

extracted_at: "2026-06-11T05:43:54.981Z"
completeness: 93
scoreVersion: "v2"

---

# Design System — bun.sh
> Extracted automatically by Prism from https://bun.sh
> 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 | `#14151a` |
| Type posture | sans-led (Roboto) | "Who uses Bun?" |
| Color assertion | dual-accent | #f472b6 |
| Whitespace | moderate | section rhythm 48px |
| Interaction | expressive | 13 keyframes, 11 transitions |
| Radius language | 6px-rounded | from token scale |

**Prism fingerprint**: `dark-canvas · sans-display · dual-accent · 6px-rounded · expressive-motion`

> **🤖 TL;DR for AI agents** (read this first — saves you scanning the full doc):
>
> - **Canvas**: `rgb(20, 21, 26)` is the page background. Every component composits against this.
> - **Accent**: `rgb(244, 114, 182)` 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

bun.sh commits fully to dark-mode as the native medium, not as a toggled alternative. The canvas is a dark surface (`#14151a`) 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 **system-ui**, a sans-serif display face (the dominant type signature, e.g. "Who uses Bun?" at 72px). Body text is set in **Roboto** with OpenType utility features (`"kern"`) for data-dense contexts. Headlines use weight 800 for confident, assertive presence — the brand wants to be heard. 

Body text reads in Pure White (`#ffffff`). **Hot Pink** (`#f472b6`) 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: Near-Black (`#14151a`)
- Primary typeface: Oxygen
- Primary text: Pure White (`#ffffff`)
- Accent: Hot Pink (`#f472b6`)
- Display: 53.3333px weight 800
- Shadow system: 7 distinct elevation levels

## 2. Color Palette & Roles

### Background & Surface
- **Near-Black** (`#14151a`): Page background (primary)
- **Near-Black** (`#14151b`): Surface / elevated background
- **Pure Black** (`#000000`): Surface / elevated background
- **Charcoal** (`#282a36`): Surface / elevated background
- **Dark Gray** (`#3b3f4b`): Surface / elevated background

### Text & Content
- **Pure White** (`#ffffff`): Primary body text
- **Light Grey** (`#d1d5db`): Secondary text
- **Hot Pink** (`#f472b6`): Secondary text
- **Translucent Cool Gray (15%)** (`rgba(156, 163, 175, 0.15)`): Secondary text
- **Hot Pink** (`#ff79c6`): Secondary text

### Accent & Interactive
- **Slate Gray** (`#6b7280`): Interactive / accent
- **Translucent Slate (40%)** (`rgba(79, 86, 102, 0.4)`): Interactive / accent
- **Soft Pink** (`#fbcfe8`): Interactive / accent
- **#e9f284** (`#e9f284`): Interactive / accent
- **Pink** (`#f9a8d4`): Interactive / accent
- **Translucent #ec4899 (20%)** (`rgba(236, 72, 153, 0.2)`): Interactive / accent
- **Cornflower Blue** (`#60a5fa`): Interactive / accent

### Border & Divider
- **Charcoal** (`#282a35`): Borders / dividers
- **Near-Black** (`#0d0e11`): Borders / dividers
- **Charcoal** (`#1f2937`): Borders / dividers
- **Near-Black** (`#0d1117`): Borders / dividers
- **Near Black** (`#161b22`): Borders / dividers
- **Near-Black** (`#282828`): Borders / dividers

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

- `#e5e7eb` — Whitesmoke
- `#f9fafb` — Off-White
- `#f8f8f2` — Off-White
- `#f1fa8c` — #f1fa8c
- `#1e40af` — Cobalt Blue
- `#34d399` — #34d399
- `#fcd34d` — #fcd34d
- `#e67e22` — #e67e22
- `#a855f7` — #a855f7
- `#c084fc` — #c084fc
- `#8043c8` — Slate Blue
- `#22d3ee` — #22d3ee
- `#06b6d4` — Sky Bright
- `rgba(234, 179, 8, 0.2)` — Translucent Amber (20%)
- `#facc15` — Gold
- `rgba(34, 197, 94, 0.2)` — Translucent #22c55e (20%)
- `#4ade80` — #4ade80
- `rgba(59, 130, 246, 0.1)` — Translucent Ring Blue (10%)
- `rgba(147, 197, 253, 0.9)` — Translucent Baby Blue (90%)
- `rgba(239, 68, 68, 0.2)` — Translucent Vermillion (20%)
- `#f87171` — Coral
- `#d946ef` — #d946ef
- `#e879f9` — Magenta
- `rgba(157, 23, 77, 0.3)` — Translucent #9d174d (30%)
- `#f3f4f6` — Off-White
- `#0ea5e9` — Sky Bright
- `#ff5f57` — #ff5f57
- `#febc2e` — #febc2e
- `#28c840` — #28c840
- `#86efac` — Mint
- `#fdba74` — #fdba74
- `#d8b4fe` — Lavender
- *…+226 more in `raw-css.json` (`desktop.allColors`).*

### Gradients & Decorative Fills

- `linear-gradient(-26.5deg,#565872,#31355b)` — (--docsearch-key-gradient)

### CSS Custom Properties (Design Tokens)

**Spacing Token**
- `--inkeep-space-3-5`: `0.875rem`
- `--inkeep-space-80`: `20rem`
- `--inkeep-space-96`: `24rem`
- `--inkeep-space-6`: `1.5rem`

**Motion Token**
- `--inkeep-transition-property-dimensions`: `width,height`
- `--inkeep-transition-duration-faster`: `100ms`
- `--inkeep-transition-duration-slow`: `300ms`

**Shadow Token**
- `--inkeep-shadows-boxShadow`: `none`
- `--inkeep-shadows-base`: `0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06)`
- `--inkeep-shadows-sm`: `0 1px 2px 0 rgba(0, 0, 0, 0.05)`
- `--tw-drop-shadow`: ``

**Other tokens**
- `--inkeep-colors-inkeepPrimary-medium`: `#f267ad`
- `--inkeep-colors-telegram-900`: `#003F5E`
- `--inkeep-fontSizes-sm`: `0.875rem`
- `--inkeep-colors-purple-800`: `#44337A`
- `--inkeep-colors-grayAlpha-800`: `rgba(1, 15, 25, 0.79)`
- `--inkeep-fontSizes-2xs`: `0.625rem`
- `--inkeep-colors-blue-800`: `#2a4365`
- `--tw-ring-color`: `rgba(59,130,246,.5)`

## 3. Typography Rules

### Font Families
- **Primary**: `system-ui`
- **Secondary**: `JetBrains Mono`
- **Font 3**: `Arial Narrow`

### Typography Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | system-ui | 72px | 800 | 1 | normal | Main headline (h2) |
| Section Heading | Oxygen | 60px | 800 | 1 | normal | Section titles (h3) |
| Sub-heading | Oxygen | 24px | 700 | 1.33 | normal | Third-level heading (h3) |
| Label Heading | Oxygen | 20px | 600 | 1.4 | normal | Small heading (H4) |
| Button Large | Oxygen | 18px | 500 | 1.56 | normal | Button label (18px) |
| Body | Oxygen | 16px | 400 | 1.5 | normal | Standard reading text |
| Button Large | Oxygen | 16px | 500 | 1.5 | normal | Button label (16px) |

### Font Weight Scale

CSS custom properties define 9 explicit weight steps:
- `--inkeep-fontWeights-hairline`: `100` — Thin
- `--inkeep-fontWeights-thin`: `200` — ExtraLight
- `--inkeep-fontWeights-light`: `300` — Light
- `--inkeep-fontWeights-normal`: `400` — Regular
- `--inkeep-fontWeights-medium`: `500` — Medium
- `--inkeep-fontWeights-semibold`: `600` — SemiBold
- `--inkeep-fontWeights-bold`: `700` — Bold
- `--inkeep-fontWeights-extrabold`: `800` — ExtraBold
- `--inkeep-fontWeights-black`: `900` — Black

### Full Font Size Scale

Sizes detected in the design (descending): `72px`, `60px`, `53.33px`, `48px`, `36px`, `30px`, `24px`, `20.80px`, `20px`, `18.67px`, `18.60px`, `18px`, `17.50px`, `16px`, `15px`, `14.40px`, `14px`, `13px`, `12px`, `11px`

> 14 size(s) detected outside the sampled hierarchy (53.3333px, 48px, 36px, 30px, 20.8px, 18.6667px, 18.6px, 17.5px, 15px, 14.4px, 14px, 13px, 12px, 11px). 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

**Active OpenType features:**
- Kerning (kern) — `on`

## 4. Component Stylings

### Buttons

**Dark / Solid**
- Background: `#090a11`
- Text: `#7f8497`
- Padding: 0px 8px
- Radius: 40px
- Font: 16px weight 500
- Use: Solid dark CTA

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

**Primary Brand**
- Background: `#f472b6` `{colors.primary}`
- Text: `#14151a` `{colors.surface-2}`
- Padding: 8px 16px
- Radius: 8px
- Font: 18px weight 500
- Use: Primary CTA / brand action

**Pill**
- Background: `#282a35`
- Text: `#ffffff` `{colors.hairline}`
- Padding: 12px 18px
- Radius: 9999px
- Font: 16px weight 500
- Use: Status pills, tags, chips

**Secondary**
- Background: `#3b3f4b`
- Text: `#e5e7eb`
- Padding: 8px 16px
- Radius: 6px 6px 0px 0px
- Font: 16px weight 400
- Use: Secondary action

**Secondary**
- Background: `#282a36`
- Text: `#f472b6` `{colors.primary}`
- Padding: 16px
- Radius: 7px 7px 0px 0px
- Font: 16px weight 400
- Use: Secondary action

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

### Inputs & Forms

**Text Input**
- Background: `transparent`
- Text: `rgba(255, 255, 255, 0.92)` `{colors.hairline}`
- Padding: 8px 12px
- Radius: 6px
- Border: 0px none rgba(255, 255, 255, 0.92)
- Font: 16px weight 400
- Use: Text fields, search inputs

### Navigation

**Main Nav**
- Background: `transparent`
- Padding: 0px 48px
- Radius: none
- Font: 16px weight 400
- Use: Static flex nav — N/A items
- Hover: transform: `matrix(1, 0, 0, 1, 0, 0)`

### Tabs

**Pill Tab**
- Background: `#282a36`
- Text: `#f472b6` `{colors.primary}`
- Padding: 16px
- Radius: 7px 7px 0px 0px
- Font: 16px weight 400
- Use: Navigation tabs, filter tabs

### Code Blocks

**Inline Code / Pre**
- Background: `#282a36`
- Text: `#282a36`
- Padding: 3px 40px 3px 16px
- Radius: 0px
- Font: 18px weight 400 — "JetBrains Mono"
- Use: Code samples, CLI commands, syntax highlighting blocks


## 4b. Component Behaviors (State Matrix)

### Interaction State Narrative

- **NavLink**:
  - **hover:** transform applied

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

```yaml
component-behaviors:
  button:
    default:
      bg: "rgb(9, 10, 17)"
      fg: "rgb(127, 132, 151)"
  link:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(255, 255, 255)"
  navLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(229, 231, 235)"
    hover:
      bg: "transparent"
      fg: "inherit"
  tab:
    default:
      bg: "rgb(40, 42, 54)"
      fg: "rgb(244, 114, 182)"
  footerLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(156, 163, 175)"
```

**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
- **5 shape(s)** in this system: `Dark / Solid`, `Ghost`, `Primary Brand`, `Pill`, `Secondary`
- **DO NOT introduce new buttons 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: `Pill Tab`
- **DO NOT introduce new tabs variants** without justification

### Code Blocks
- **1 shape(s)** in this system: `Inline Code / Pre`
- **DO NOT introduce new code blocks variants** without justification

## 5. Layout Principles

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

### Grid
Flexbox row

### Max Width
1280px

### Spacing System
Compact spacing — information density prioritized

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

### 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 | 30px | Large rounded elements, pill segments |
| Xl | 40px | Category strips, featured containers |
| Full | 9999px | Pills, avatars, circular elements |

### Shape Language

| Component | Border Radius |
|-----------|---------------|
| Buttons | `40px` |
| Inputs & Forms | `6px` |
| Navigation | `none` |
| Tabs | `7px 7px 0px 0px` |
| Code Blocks | `0px` |
| Page Body | `0px` |
| Primary Input | `6px` |

**Shape Personality**: Generously Rounded — Soft, friendly corners (8px+). Approachable, consumer-facing feel.

**Full Radius Spectrum**: 0px, 3px, 3.5px, 4px, 5px, 6px, 7px, 8px (from `allBorderRadii` scan)


## 5b. Spacing Rhythm Names

**Measured section padding**: bands use ~150px internal vertical padding (up to 150px) — **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** | `96px` | 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** | `15px` | Card padding, list-item spacing |
| **compact** | `12px` | Form fields, tight clusters, badge padding |
| **micro** | `8px` | 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:** left-aligned — 
- **Viewport coverage:** full-viewport hero (≥70% screen height)
- **Heading:** "Bun is a fast JavaScriptruntime|" — 53px left-aligned
- **Subheading:** "Bun is a fast, incrementally adoptable all-in-one JavaScript, TypeScript & JSX toolkit. Use individual tools like bun test or bun install in Node.js p"
- **CTAs:** 2 (primary: "Linux & macOS")
- **Clone instruction:** Reproduce the **left-aligned** layout. Use the heading font-size token at the documented size. Pair the centered text with the hero’s decorative visual (gradient / SVG / hero image — see §9b), not bare text.

### Navigation Pattern

- **Position:** static (scrolls with page)
- **Layout:** unknown — Layout not classified
- **Height:** 83px
- **Logo:** ✓ present
- **Nav links:** 5 primary items
- **CTAs in nav:** 1
- **Clone instruction:** Build a static unknown navigation. Reserve 1 slot for primary CTA.

### Card Grid Pattern

- **Card count:** 4 cards detected
- **Columns (desktop):** 2-up grid
- **Card dimensions:** 628×287px (aspect 2.19:1)
- **Gap:** 24px between cards
- **Content:** ✗ no image + icon + CTA
- **Clone instruction:** Build a 2-column grid (desktop) with cards at ~2.19:1 aspect ratio. Text/icon-only cards (no photography).

### CTA Banner Pattern

- **Banner count:** 4
- **Position:** multiple
- **Visual treatment:** ✓ contrasting background
- **Primary CTA text:** "JavaScript RuntimeStarts 3x faster than Node.jsA fast JavaSc"
- **Clone instruction:** Place multiple CTA banners across page sections. Use contrasting solid background.

### Footer Pattern

- **Columns:** 1
- **Links:** 21 total
- **Height:** 486px
- **Includes:** ✗ no newsletter | ✓ social icons |  
- **Clone instruction:** Build a 1-column footer with ~21 links per column, social media links.

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Page background, content blocks |
| Inset (Level 1) | <br>`rgb(40, 45, 85) 0px -2px 0px 0px inset`,<br>`rgb(81, 87, 125) 0px 0px 1px 1px inset`,<br>`rgba(3, 4, 9, 0.3) 0px 2px 2px 0px` | Buttons, pressed-state elements |
| Inset (Level 2) | <br>`rgb(204, 198, 187) 1px 1px 3px 0px inset` | Buttons, pressed-state elements |
| Layered (Level 3) | <br>`rgba(230, 126, 34, 0.05) 0px 10px 15px -3px`,<br>`rgba(230, 126, 34, 0.05) 0px 4px 6px -4px` | Cards, elevated surfaces |
| Layered (Level 4) | <br>`rgba(168, 85, 247, 0.05) 0px 10px 15px -3px`,<br>`rgba(168, 85, 247, 0.05) 0px 4px 6px -4px` | 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 |
|--------------|-------|---------------|
| `--inkeep-transition-easing-ease-in-out` | `cubic-bezier(0.4, 0, 0.2, 1)` | Material Standard — Balanced |
| `--inkeep-transition-easing-ease-out` | `cubic-bezier(0, 0, 0.2, 1)` | Material Decelerate — Entrance |
| `--inkeep-transition-easing-ease-in` | `cubic-bezier(0.4, 0, 1, 1)` | Material Accelerate — Exit |

### Duration Scale

| CSS Variable | Value | Tier |
|--------------|-------|------|
| `--inkeep-transition-duration-faster` | `100ms` | Fast |
| `--inkeep-transition-duration-slow` | `300ms` | Normal |
| `--inkeep-transition-duration-ultra-fast` | `50ms` | Instant |
| `--inkeep-transition-duration-slower` | `400ms` | Slow |
| `--inkeep-transition-duration-fast` | `150ms` | Fast |
| `--inkeep-transition-duration-normal` | `200ms` | Normal |
| `--inkeep-transition-duration-ultra-slow` | `500ms` | Slow |

### Copy-Paste Transition Snippets

**Transform**
```css
transition: transform 0.1s linear;
```

**All Props**
```css
transition: 0.3s ease-in-out;
```

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

**All Props**
```css
transition: 0.15s ease-in-out;
```

### Keyframe Animation Catalog

| Animation Name | Type | Animated Props | Use Hint |
|----------------|------|----------------|----------|
| `loaderbar` | Scale | transform | Loading indicator |
| `copy-as-markdown-copied` | Filter | filter | UI transition |
| `spin-starburst-93` | Rotate / Spin | transform | Loading indicator |
| `counter-spin-starburst-93` | Rotate / Spin | transform | Loading indicator |
| `scroll-1` | Slide | transform | UI transition |

### Motion Fingerprint

- **Speed Character**: Balanced Pacing (median duration: `200ms`)
- **Dominant Easing**: custom cubic-bezier curves
- **Animation Library**: 5 unique animations (13 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 dark background (`#14151a`) as the foundation — this is a dark-mode-native design
- Use Oxygen 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 Hot Pink (`#f472b6`) 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
- Maintain nav height at 83px — consistent vertical space for the navigation bar
- 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 uses an icon (not photo) — the visual language is illustrative, not photographic
- Repeat the primary CTA across 4 banner sections — conversion paths are layered, not single

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

## 9. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile Large | 580px | Expanded mobile layout |
| Mobile Large | 640px | Expanded mobile layout |
| Mobile Large | 767px | Expanded mobile layout |
| 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 | `53.3333px` | `37.3333px` |
| heading | line-height | `53.3333px` | `37.3333px` |
| nav | display | `flex` | `none` |
| nav | height | `83px` | `100%` |
| main | max-width | `1280px` | `none` |

### Collapsing Strategy
- Headlines: 53.3333px → 37.3333px on mobile
- Navigation: flex → none on mobile
- Cards: multi-column → stacked vertical on mobile
- Footer: multi-column → stacked single column on mobile

### Touch Targets
- Buttons: 0px 8px 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):

- **Hero CTAs:** 2 on desktop → 0 on mobile (secondary CTAs dropped on small screens).
- **Card grid: 2-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.*

- **Animated SVG** — path/line-draw animations.
- **Glassmorphism** — 5 frosted/blur layer(s) (e.g. `blur(2px)`).
- **Clip-path shapes** — 8 non-rectangular cut(s).

> **Motion fingerprint**: SVG animations, glassmorphism (5 layers), non-rectangular shapes (9)

## 9b. Visual Tone & Photography

**Tone:** No imagery

No detectable photographic content. The site composes entirely with typography, color blocks, and minimal vector graphics. Clone strategy: lean on type hierarchy + layout rhythm rather than visual media.

**Canonical Brand Image (OG):**
- https://bun.com/share_v3.png
  *This is the image shown when the site is shared on social media — represents the brand visual essence.*

**Media Format Mix:**
- SVG: 4 (icons, illustrations, decorative geometry)

**Decorative Patterns Detected:**
- 16 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
- 4 large decorative SVG shapes (≥200×200px, non-icon) — likely blob/illustration accents
- 3 background patterns (non-photo url() backgrounds) — textures/illustrations as backdrops
- **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:**
- Don't add stock imagery just to "fill space" — this site's clarity comes from typographic restraint.
- Use generous whitespace, strong type hierarchy, and color blocks for visual rhythm.

## 10. Agent Prompt Guide

### Quick Reference
- Background: Near-Black (`#14151a`)
- Primary text: Pure White (`#ffffff`)
- Accent: Hot Pink (`#f472b6`)
- Border: Translucent Pure White (16%) (`rgba(255, 255, 255, 0.16)`)
- Font: Oxygen
- Body: 16px weight 400

### Example Component Prompts
- "Create a hero section on Near-Black background (#14151a). Headline at 53.3333px Oxygen weight 800, line-height 1, color #ffffff."
- "Create the primary CTA button: `#f472b6` background, `#14151a` text, 8px border-radius, 8px 16px padding, 500 weight, Oxygen font."
- "Build navigation: static on `#14151a`. Oxygen 16px weight 400 for links."

### Iteration Guide
1. **Canvas**: Set the dark canvas to Near-Black (`#14151a`) — every component is composited against this exact base.
2. **Typography**: All type in Oxygen, weight range 100–900. Never exceed 900 — heavier weights break the brand's tonal restraint.
3. **Accent**: Hot Pink (`#f472b6`) is the sole interactive color. On hover → Hot Pink (`#ff79c6`). Use CSS transitions, not opacity/brightness filters.
4. **Motion**: All transitions use `cubic-bezier(0.4,0,0.2,1)`. Timing: 50ms for micro-interactions, 200ms for layout changes. Never use linear for UI transitions — preserve the brand's easing personality.
5. **Shape**: CTAs at `6px`. Apply border-radius from the extracted scale only — don't invent intermediate values.
6. **Spacing**: Use the `--ca-space-*` token scale (8px–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-surface-2: #14151a;
  --ca-hairline: #ffffff;
  --ca-ink-muted: #d1d5db;
  --ca-ink-subtle: #687076;
  --ca-primary: #f472b6;
  --ca-on-primary: #111111;
  --ca-primary-hover: #ff79c6;
}

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

/* Spacing & Radius */
:root {
  --ca-space-xxs: 2px;
  --ca-space-xs: 8px;
  --ca-space-sm: 12px;
  --ca-space-md: 15px;
  --ca-space-base: 16px;
  --ca-space-lg: 24px;
  --ca-space-xl: 32px;
  --ca-space-2xl: 48px;
  --ca-space-3xl: 96px;
  --ca-radius-none: 0px;
  --ca-radius-xs: 4px;
  --ca-radius-sm: 8px;
  --ca-radius-md: 12px;
  --ca-radius-lg: 30px;
  --ca-radius-xl: 40px;
  --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: section
    tag: section
    height: 116px
    width: 243px
    layout: flex-column justify=normal
    children: 2
    bg: "rgb(40, 40, 40)"
    tone: dark
  - section: logo-strip
    tag: div
    classes: ["dark", "left-0", "top-0", "block"]
    height: 85px
    width: full-bleed
    layout: flex-row justify=center
    children: 1
    bg: "rgb(20, 21, 26)"
    tone: dark
  - section: header
    tag: header
    classes: ["w-screen-xl", "flex", "h-full", "w-full"]
    height: 83px
    width: full-bleed
    layout: flex-row justify=space-between
    children: 4
    padding: "0px 48px"
  - section: navigation
    tag: nav
    classes: ["hidden", "h-full", "list-none", "flex-row"]
    height: 83px
    width: 592px
    layout: flex-row justify=flex-end
    children: 7
  - section: hero
    tag: div
    classes: ["dark", "relative", "isolate", "flex"]
    height: 893px
    width: full-bleed
    layout: flex-row justify=center
    children: 2
    bg: "rgb(20, 21, 26)"
    tone: dark
    vertical-padding: ~112px (airy)
    padding: "96px 48px 128px"
  - section: feature-section
    tag: main
    classes: ["mx-auto", "my-0", "flex", "w-full"]
    height: 669px
    width: 1280px
    layout: flex-row justify=space-between
    children: 2
  - section: feature-section
    tag: section
    classes: ["dark", "mx-auto", "flex", "flex-col"]
    height: 1207px
    width: full-bleed
    layout: flex-column justify=normal
    children: 6
    bg: "rgb(13, 14, 17)"
    tone: dark
    vertical-padding: ~150px (airy)
    padding: "150px 15px"
  - section: feature-section
    tag: section
    classes: ["dark", "border-t-[2px]", "border-gray-800", "bg-gray-950"]
    height: 1740px
    width: full-bleed
    layout: block
    children: 2
    bg: "rgb(13, 14, 17)"
    tone: dark
    vertical-padding: ~128px (airy)
    padding: "128px 0px"
  - section: unknown
    tag: div
    classes: ["video-player-wrapper", "relative"]
    height: 331px
    width: 588px
    layout: block
    children: 2
  - section: unknown
    tag: div
    classes: ["play-button-railway-video-section", "group", "absolute", "inset-0"]
    height: 331px
    width: 588px
    layout: flex-row justify=center
    children: 1
  - section: unknown
    tag: div
    classes: ["video-player-wrapper", "relative"]
    height: 331px
    width: 588px
    layout: block
    children: 2
  - section: unknown
    tag: div
    classes: ["video-player-wrapper", "relative"]
    height: 331px
    width: 588px
    layout: block
    children: 2
  - section: feature-section
    tag: section
    classes: ["dark", "mx-auto", "flex", "flex-col"]
    height: 3097px
    width: full-bleed
    layout: flex-column justify=normal
    children: 2
    bg: "rgb(13, 14, 17)"
    tone: dark
    vertical-padding: ~128px (airy)
    padding: "128px 16px"
  - section: feature-section
    tag: section
    classes: ["dark", "border-t-[2px]", "border-gray-800", "bg-gray-950"]
    height: 1315px
    width: full-bleed
    layout: block
    children: 1
    bg: "rgb(13, 14, 17)"
    tone: dark
    vertical-padding: ~128px (airy)
    padding: "128px 0px"
  - section: feature-section
    tag: section
    classes: ["dark", "mx-auto", "flex", "flex-col"]
    height: 1091px
    width: full-bleed
    layout: flex-column justify=normal
    children: 3
    bg: "rgb(13, 14, 17)"
    tone: dark
    vertical-padding: ~120px (airy)
    padding: "120px 15px"
  - section: feature-section
    tag: section
    classes: ["dark", "border-t-[2px]", "border-gray-800", "bg-gray-950"]
    height: 1031px
    width: full-bleed
    layout: block
    children: 2
    bg: "rgb(13, 14, 17)"
    tone: dark
    vertical-padding: ~128px (airy)
    padding: "128px 0px"
  - section: unknown
    tag: div
    classes: ["video-player-wrapper", "relative"]
    height: 637px
    width: 448px
    layout: block
    children: 2
  - section: feature-section
    tag: section
    classes: ["dark", "mx-auto", "border-t-[2px]", "border-gray-800"]
    height: 1141px
    width: full-bleed
    layout: block
    children: 1
    bg: "rgb(13, 14, 17)"
    tone: dark
    vertical-padding: ~150px (airy)
    padding: "150px 15px"
  - section: feature-section
    tag: section
    classes: ["dark", "mx-auto", "flex", "flex-col"]
    height: 964px
    width: full-bleed
    layout: flex-column justify=normal
    children: 12
    bg: "rgb(20, 21, 26)"
    tone: dark
    vertical-padding: ~150px (airy)
    padding: "150px 15px"
  - section: feature-section
    tag: section
    classes: ["dark", "mx-auto", "flex", "flex-col"]
    height: 1016px
    width: full-bleed
    layout: flex-column justify=normal
    children: 7
    bg: "rgb(13, 14, 17)"
    tone: dark
    vertical-padding: ~150px (airy)
    padding: "150px 15px"
  - section: feature-section
    tag: section
    classes: ["dark", "mx-auto", "flex", "flex-col"]
    height: 962px
    width: full-bleed
    layout: flex-column justify=normal
    children: 4
    bg: "rgb(13, 14, 17)"
    tone: dark
    vertical-padding: ~150px (airy)
    padding: "150px 15px"
  - section: feature-section
    tag: section
    classes: ["dark", "mx-auto", "flex", "flex-col"]
    height: 698px
    width: full-bleed
    layout: flex-column justify=normal
    children: 5
    bg: "rgb(13, 14, 17)"
    tone: dark
    vertical-padding: ~150px (airy)
    padding: "150px 15px"
  - section: feature-section
    tag: section
    classes: ["dark", "relative", "mx-auto", "flex"]
    height: 922px
    width: full-bleed
    layout: flex-column justify=normal
    children: 2
    bg: "rgb(13, 14, 17)"
    tone: dark
    vertical-padding: ~150px (airy)
    padding: "150px 15px"
  - section: footer
    tag: footer
    classes: ["border-t-[2px]", "border-gray-800", "bg-gray-950", "p-4"]
    height: 486px
    width: full-bleed
    layout: block
    children: 2
    bg: "rgb(13, 14, 17)"
    tone: dark
    vertical-padding: ~48px
    padding: "48px"
```

**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:
    - "Bundling 10,000 React components"
    - "Four tools, one toolkit"
    - "Who uses Bun?"
    - "Bun is a JavaScript runtime."
    - "Bun is an npm-compatible package manager."
    - "Bun is a test runner that makes the rest look like test walkers."
  sub-headings:
    - "JavaScript Runtime"
    - "Claude Code uses Bun"
    - "Railway Functions powered by Bun"
    - "Builtin Core Features"
    - "HTTP & WebSockets"
    - "Lee Robinson"
  ctas:
    - "Build"
    - "Ask AI"
    - "Linux & macOS"
    - "Windows"
    - "Bundler"
    - "Express"
    - "Bun.serve() HTTP & WebSocket server"
  navigation:
    - "Discord"
    - "Build"
    - "Docs"
    - "Reference"
    - "Guides"
    - "Blog"
  footer-links:
    - "Reference"
    - "Blog"
    - "We're hiring →"
```

**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: 2
    avg-ratio: 2.88
    common-aspect: "~16:6 banner"
    sample-alts:
      - "Bun"
      - "Replit logo"
  thumbnail:
    count: 8
    avg-ratio: 1.04
    common-aspect: "~1:1 square"
    sample-alts:
      - "Bun logo"
      - "Discord logo"
      - "GitHub 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">
  Bun v1.3.14
Bun.Image — a built-in image processing API, 7x faster warm installs with the isolated l
</button>
```
_Source pattern detected: padding `8px 4px` · radius `6px` · weight `400`_

**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** 3 · **docs** 44 · **blog** 9 · **social** 1 · **other** 3

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

*Docs* — medium confidence, 12 items:

| Title | Featured image | Link |
|---|---|---|
| Learn about single file executables | — | https://bun.sh/docs/bundler/executables |
| Learn about Bun's WebSocket server | — | https://bun.sh/docs/api/websockets |
| Node.js compatibility Aiming to be a drop-in | — | https://bun.com/docs/runtime/nodejs-apis |
| Web Standard APIs Support for web standard A | — | https://bun.com/docs/api/fetch |
| Native Addons Call C-compatible native code  | — | https://bun.com/docs/api/ffi |
| TypeScript First-class support, including "p | — | https://bun.com/docs/runtime/typescript |
| JSX First-class support without configuratio | — | https://bun.com/docs/runtime/jsx |
| Module loader plugins Plugin API for importi | — | https://bun.com/docs/runtime/plugins |

**Signals:** 44/60 links carry a featured image · dominant link roles: content-card (41), inline-link (15), logo-link (2).


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

| Category | Score | Max | Detail |
|----------|-------|-----|--------|
| Colors & Palette | 25 | 25 | 23 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 | 599 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:*

- **2 parasitic shadow(s) detected** — colored box-shadows (not near-black) found in allShadows. These likely originate from browser extensions or third-party injected widgets (e.g. Grammarly, chat overlays), not from the site's own design system. Discard them when building.

| Category | What's missing | Fallback strategy |
|----------|----------------|-------------------|
| **Photography** | No photographic content detected on this page | Don't add stock imagery; clarity comes from type + color blocks |

### Per-section confidence

| Section | Confidence | Reason |
|---------|------------|--------|
| §1 Visual Theme | High | Body bg extracted via getComputedStyle() |
| §2 Colors | High | 599 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 | 18 rules generated; design-decisions.json has evidence per rule |
| §9 Responsive | High | 6 breakpoints detected |
| §9b Photography | Low | 0 images, hero not detected |

## 11.2 Measured Reality (CDP Engine)

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

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

### Measured Design Scale
**Type scale by usage** (× = paint count): `16px`×2036 · `14px`×1159 · `18px`×175 · `12px`×151 · `20px`×104 · `13px`×49 · `24px`×36 · `48px`×27

**Radius scale** (× = paint count): `4px`×130 · `8px`×124 · `9999px`×119 · `6px`×25 · `5px`×11 · `3px`×9 · `7px`×8 · `12px`×6

**Weights** (× = paint count): `400`×3183 · `500`×253 · `600`×207 · `700`×74 · `800`×61 · `300`×20 · `900`×20

**Layout gaps** (× = paint count): `4px`×90 · `8px`×64 · `16px`×17 · `12px`×7 · `32px`×4 · `24px`×4 · `8px 16px`×4 · `64px`×4

**Elevation (real shadows)**:
```css
rgba(0, 0, 0, 0.25) 0px 25px 50px -12px
rgba(131, 24, 67, 0.1) 0px 10px 15px -3px, rgba(131, 24, 67, 0.1) 0px 4px 6px -4px
rgba(230, 126, 34, 0.05) 0px 10px 15px -3px, rgba(230, 126, 34, 0.05) 0px 4px 6px -4px
rgba(168, 85, 247, 0.05) 0px 10px 15px -3px, rgba(168, 85, 247, 0.05) 0px 4px 6px -4px
```

### 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
body { font-family:var(--system-font) }
body { background-color:rgb(249 250 251/var(--tw-bg-opacity,1)) }
body { background-color:rgb(20 21 26/var(--tw-bg-opacity,1)) }
header { gap:2rem }
nav { gap:1.5rem }
main { gap:2rem }
h1 { font-size:28pt }
h1 { font-weight:800 }
@media (min-width: 768px) h1 { font-size:32pt }
@media (min-width: 1024px) h1 { font-size:38pt }
@media (min-width: 1280px) h1 { font-size:40pt }
h1 { color:rgb(249 250 251/var(--tw-text-opacity,1)) }
```

> 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://bun.sh | 2026-06-11T05:43:55.263Z*
*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.*