---
version: alpha
name: opencode.ai
description: "Light product system built on #fdfcfc with #201d1d as the primary CTA accent. Type anchored in Berkeley Mono at 38px / weight 700. Extracted automatically from https://opencode.ai/ — rendered styles via getComputedStyle() + CSS custom properties (token-only values may not be painted)."
narrative: |
  opencode.ai is built on a mid-dark canvas (hsl(0, 20%, 99%)).
  The system uses rgb(32, 29, 29) as a near-neutral accent (low saturation).
  Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside monospace typography (Berkeley Mono) — developer-first identity.
  Berkeley Mono is paired with IBM Plex Mono for secondary roles.
  Depth comes from borders and surface contrast rather than shadows — a flat, structural elevation model.
  Motion is minimal — a few targeted transitions, no decorative animation.

colors:
  background: "#fdfcfc"
  surface-1: "#fdfcfc"
  surface-2: "#f8f7f7"
  ink: "#1d1d1f"
  ink-muted: "rgba(29, 29, 31, 0.65)"
  ink-subtle: "#8d8b8b"
  primary: "#201d1d"
  on-primary: "#ffffff"
  primary-hover: "#0056b3"
  hairline: "#646262"
  semantic-error: "#ff3b30"
  semantic-success: "#30d158"
  semantic-warning: "#ff9f0a"

typography:
  display-xl:
    fontFamily: "Berkeley Mono, 'SF Mono', 'JetBrains Mono', Menlo, monospace"
    fontSize: 38px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0
  display-md:
    fontFamily: "Berkeley Mono, 'SF Mono', 'JetBrains Mono', Menlo, monospace"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0
  body:
    fontFamily: "Berkeley Mono, 'SF Mono', 'JetBrains Mono', Menlo, monospace"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  button:
    fontFamily: "Berkeley Mono, 'SF Mono', 'JetBrains Mono', Menlo, monospace"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 2
    letterSpacing: 0

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

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

components:
  button-ghost:
    backgroundColor: "transparent"
    textColor: "#000000"
    typography: "{typography.display-md}"
    rounded: "{rounded.none}"
    padding: 1px 6px
  button-ghost-2:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.display-md}"
    rounded: "{rounded.none}"
    padding: 16px 0px
  button-secondary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface-1}"
    typography: "{typography.display-md}"
    rounded: "{rounded.xs}"
    padding: 4px 20px
  input-text-input:
    backgroundColor: "{colors.surface-2}"
    textColor: "{colors.primary}"
    typography: "{typography.display-md}"
    rounded: "{rounded.sm}"
    padding: 20px
  tab-pill-tab:
    backgroundColor: "{colors.surface-2}"
    textColor: "{colors.hairline}"
    typography: "{typography.display-md}"
    rounded: "{rounded.sm}"
    padding: 0px 20px

extracted_at: "2026-06-11T05:01:57.437Z"
completeness: 53
scoreVersion: "v2"

---

# Design System — opencode.ai
> Extracted automatically by Prism from https://opencode.ai
> 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**: product-neutral

| Dimension | Value | Signal |
|---|---|---|
| Canvas | neutral | `#ffffff` |
| Type posture | sans-led (Berkeley Mono) | "The open source AI coding agen" |
| Color assertion | dual-accent | #201d1d |
| Whitespace | moderate | section rhythm 48px |
| Interaction | expressive | 0 keyframes, 3 transitions |
| Radius language | 4px-rounded | from token scale |

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

> **🤖 TL;DR for AI agents** (read this first — saves you scanning the full doc):
>
> - **Canvas**: `hsl(0, 20%, 99%)` is the page background. Every component composits against this.
> - **Accent**: `rgb(32, 29, 29)` 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**: 6px on buttons/inputs. Pills (`9999px`) only for icon-buttons or status chips.
> - **Forbidden**: Do NOT introduce heavy box-shadows — this system relies on borders for separation
>
> **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

opencode.ai sits on a pure white canvas (`#fdfcfc`), a neutral foundation calibrated for sustained reading and component contrast. 

Typography is anchored in **Berkeley Mono**. Headlines use weight 700 for confident, assertive presence — the brand wants to be heard. 

Body text reads in Near-Black (`#1d1d1f`) — softened from pure black, a small but deliberate detail that lowers reading friction. **Near-Black** (`#201d1d`) provides interactive distinction without visual aggression. Shadow is absent by design — depth is conveyed through borders, spacing, and color differentiation rather than light simulation. 


**Key Characteristics:**
- Background: Pure White (`#fdfcfc`)
- Primary typeface: IBM Plex Mono
- Primary text: Near-Black (`#1d1d1f`)
- Accent: Near-Black (`#201d1d`)
- Custom fonts loaded: IBM Plex Mono, IBM Plex Sans, IBM Plex Sans Condensed, IBM Plex Sans Hebrew, IBM Plex Sans Devanagari, IBM Plex Sans Thai, IBM Plex Sans Thai Looped, IBM Plex Serif, IBM Plex Sans Arabic

## 2. Color Palette & Roles

### Background & Surface
- **Background** (`#fdfcfc`): Page background (primary)
- **Bg Surface** (`#f5f5f7`): Surface / elevated background (CSS var)
- **Surface Hover** (`#ffffff`): Surface / elevated background (CSS var)
- **Background Weak** (`#f8f7f7`): Surface / elevated background
- **Light Grey** (`#dad9d9`): Surface / elevated background

### Text & Content
- **Text** (`#1d1d1f`): Primary body text
- **Text Secondary** (`#424245`): Text (CSS var)
- **Text Disabled** (`#86868b`): Text (CSS var)
- **Text Muted** (`#6e6e73`): Text (CSS var)
- **Black** (`#000000`): Secondary text

### Accent & Interactive
- **Accent** (`#007aff`): Accent / interactive (CSS var)
- **Accent Hover** (`#0056b3`): Accent / interactive (CSS var)
- **Accent Active** (`#004085`): Accent / interactive (CSS var)
- **#03b000** (`#03b000`): Interactive / accent

### Border & Divider
- **Border Muted** (`#e5e5ea`): Border (CSS var)
- **Border** (`#d2d2d7`): Border (CSS var)
- **Text Weaker** (`#d0cfce`): Borders / dividers
- **Grey** (`#bcbbbb`): Borders / dividers
- **Light Grey** (`#cfcecd`): Borders / dividers

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

- `#646262` — Slate Grey
- `#201d1d` — Text Strong
- `#9a9898` — Text Weak
- `rgba(15, 0, 0, 0.12)` — Translucent Border Weak (12%)
- `#8d8b8b` — Icon
- `#8e8b8b` — Grey
- `#ff9f0a` — Warning *(token)*
- `#ff3b30` — Danger *(token)*
- `#30d158` — Success *(token)*
- `#995f06` — #995f06 *(token)*
- `#a50011` — #a50011 *(token)*
- `#d70015` — #d70015 *(token)*
- `#cc7f08` — #cc7f08 *(token)*

### CSS Custom Properties (Design Tokens)

**Warning**
- `--color-warning`: `#ff9f0a`
- `--color-warning-text`: `#000000`
- `--color-warning-active`: `#995f06`
- `--color-warning-hover`: `#cc7f08`

**Text Color**
- `--color-text-secondary`: `#424245`
- `--color-text-disabled`: `#86868b`
- `--color-text`: `#1d1d1f`
- `--color-text-muted`: `#6e6e73`

**Background**
- `--color-bg-surface`: `#f5f5f7`
- `--color-surface`: `#f5f5f7`
- `--color-surface-border`: `#d2d2d7`
- `--color-surface-hover`: `#ffffff`

**Primary Brand Color**
- `--color-accent`: `#007aff`
- `--color-accent-hover`: `#0056b3`
- `--color-accent-active`: `#004085`
- `--color-primary-hover`: `#0056b3`

**Error / Destructive**
- `--color-danger`: `#ff3b30`
- `--color-danger-text`: `#ffffff`
- `--color-danger-active`: `#a50011`
- `--color-danger-hover`: `#d70015`

**Border**
- `--color-border-muted`: `#e5e5ea`
- `--color-border`: `#d2d2d7`
- `--color-border-weak`: `hsla(0, 100%, 3%, 0.12)`

**Success**
- `--color-success`: `#30d158`

**Spacing Token**
- `--space-36`: `9rem`
- `--space-16`: `4rem`
- `--space-14`: `3.5rem`
- `--space-1-5`: `0.375rem`

**Font Size Token**
- `--font-size-6xl`: `3.75rem`
- `--font-size-sm`: `0.8125rem`
- `--font-size-2xl`: `1.5rem`
- `--font-size-2xs`: `0.6875rem`

**Border Radius Token**
- `--border-radius-sm`: `0.1875rem`
- `--border-radius-md`: `0.3125rem`
- `--border-radius-lg`: `0.5rem`

**Other tokens**
- `--color-white`: `#ffffff`
- `--color-black`: `#000000`
- `--color-icon`: `hsl(0, 1%, 55%)`

## 3. Typography Rules

### Font Families
- **Primary**: `Berkeley Mono`
- **Secondary**: `IBM Plex Mono`
- **Font 3**: `IBM Plex Sans`
- **Font 4**: `IBM Plex Sans Condensed`
- **Font 5**: `IBM Plex Sans Hebrew`

### Custom Fonts Loaded
- **IBM Plex Mono** weight 700 (normal)
- **IBM Plex Mono** weight 200 (normal)
- **IBM Plex Mono** weight 400 (italic)
- **IBM Plex Mono** weight 300 (normal)
- **IBM Plex Mono** weight 500 (normal)
- **IBM Plex Mono** weight 600 (normal)
- **IBM Plex Mono** weight 450 (normal)
- **IBM Plex Mono** weight 100 (normal)
- **IBM Plex Sans** weight 700 (normal)
- **IBM Plex Sans** weight 200 (normal)
- **IBM Plex Sans** weight 400 (italic)
- **IBM Plex Sans** weight 300 (normal)
- **IBM Plex Sans** weight 500 (normal)
- **IBM Plex Sans** weight 600 (normal)
- **IBM Plex Sans** weight 450 (normal)
- **IBM Plex Sans** weight 100 (normal)
- **IBM Plex Sans Condensed** weight 700 (normal)
- **IBM Plex Sans Condensed** weight 200 (normal)
- **IBM Plex Sans Condensed** weight 400 (italic)
- **IBM Plex Sans Condensed** weight 300 (normal)
- **IBM Plex Sans Condensed** weight 500 (normal)
- **IBM Plex Sans Condensed** weight 600 (normal)
- **IBM Plex Sans Condensed** weight 450 (normal)
- **IBM Plex Sans Condensed** weight 100 (normal)
- **IBM Plex Sans Hebrew** weight 700 (normal)
- **IBM Plex Sans Hebrew** weight 200 (normal)
- **IBM Plex Sans Hebrew** weight 300 (normal)
- **IBM Plex Sans Hebrew** weight 500 (normal)
- **IBM Plex Sans Hebrew** weight 400 (normal)
- **IBM Plex Sans Hebrew** weight 600 (normal)
- **IBM Plex Sans Hebrew** weight 450 (normal)
- **IBM Plex Sans Hebrew** weight 100 (normal)
- **IBM Plex Sans Devanagari** weight 700 (normal)
- **IBM Plex Sans Devanagari** weight 200 (normal)
- **IBM Plex Sans Devanagari** weight 300 (normal)
- **IBM Plex Sans Devanagari** weight 500 (normal)
- **IBM Plex Sans Devanagari** weight 400 (normal)
- **IBM Plex Sans Devanagari** weight 600 (normal)
- **IBM Plex Sans Devanagari** weight 450 (normal)
- **IBM Plex Sans Devanagari** weight 100 (normal)
- **IBM Plex Sans Thai** weight 700 (normal)
- **IBM Plex Sans Thai** weight 200 (normal)
- **IBM Plex Sans Thai** weight 300 (normal)
- **IBM Plex Sans Thai** weight 500 (normal)
- **IBM Plex Sans Thai** weight 400 (normal)
- **IBM Plex Sans Thai** weight 600 (normal)
- **IBM Plex Sans Thai** weight 450 (normal)
- **IBM Plex Sans Thai** weight 100 (normal)
- **IBM Plex Sans Thai Looped** weight 700 (normal)
- **IBM Plex Sans Thai Looped** weight 200 (normal)
- **IBM Plex Sans Thai Looped** weight 300 (normal)
- **IBM Plex Sans Thai Looped** weight 500 (normal)
- **IBM Plex Sans Thai Looped** weight 400 (normal)
- **IBM Plex Sans Thai Looped** weight 600 (normal)
- **IBM Plex Sans Thai Looped** weight 450 (normal)
- **IBM Plex Sans Thai Looped** weight 100 (normal)
- **IBM Plex Serif** weight 700 (normal)
- **IBM Plex Serif** weight 200 (normal)
- **IBM Plex Serif** weight 400 (italic)
- **IBM Plex Serif** weight 300 (normal)
- **IBM Plex Serif** weight 500 (normal)
- **IBM Plex Serif** weight 600 (normal)
- **IBM Plex Serif** weight 450 (normal)
- **IBM Plex Serif** weight 100 (normal)
- **IBM Plex Sans Arabic** weight 700 (normal)
- **IBM Plex Sans Arabic** weight 200 (normal)
- **IBM Plex Sans Arabic** weight 300 (normal)
- **IBM Plex Sans Arabic** weight 500 (normal)
- **IBM Plex Sans Arabic** weight 400 (normal)
- **IBM Plex Sans Arabic** weight 600 (normal)
- **IBM Plex Sans Arabic** weight 450 (normal)
- **IBM Plex Sans Arabic** weight 100 (normal)

### Typography Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | Berkeley Mono | 38px | 700 | 1.5 | normal | Main headline (h1) |
| Sub-heading | Berkeley Mono | 16px | 700 | 1.5 | normal | Third-level heading (h3) |
| Body | Berkeley Mono | 16px | 400 | 1.5 | normal | Standard reading text |
| Button Large | Berkeley Mono | 16px | 500 | 2 | normal | Button label (16px) |

### Full Font Size Scale

Sizes detected in the design (descending): `38px`, `16px`, `14px`

> 1 size(s) detected outside the sampled hierarchy (14px). 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

**Ghost**
- Background: `transparent`
- Text: `#000000`
- Padding: 1px 6px
- Radius: 0px
- Font: 16px weight 400
- Use: Subtle action, toolbar, nav button

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

**Secondary**
- Background: `#201d1d` `{colors.primary}`
- Text: `#fdfcfc` `{colors.surface-1}`
- Padding: 4px 20px
- Radius: 4px
- Font: 16px weight 500
- Use: Secondary action

**Secondary**
- Background: `#201d1d` `{colors.primary}`
- Text: `#fdfcfc` `{colors.surface-1}`
- Padding: 8px 16px 8px 10px
- Radius: 4px
- Font: 16px weight 500
- Use: Secondary action

**Secondary**
- Background: `#201d1d` `{colors.primary}`
- Text: `#fdfcfc` `{colors.surface-1}`
- Padding: 8px 12px 8px 20px
- Radius: 4px
- Font: 16px weight 500
- Use: Secondary action

**Light / Invert**
- Background: `#fdfcfc` `{colors.surface-1}`
- Text: `#201d1d` `{colors.primary}`
- Padding: 8px 12px 8px 20px
- Radius: 4px
- Border: 1px solid rgba(15, 0, 0, 0.12)
- Font: 16px weight 500
- Use: Bright CTA on dark sections

### Inputs & Forms

**Text Input**
- Background: `#f8f7f7` `{colors.surface-2}`
- Text: `#201d1d` `{colors.primary}`
- Padding: 20px
- Radius: 6px
- Border: 1px solid rgba(15, 0, 0, 0.12)
- Font: 16px weight 400
- Use: Text fields, search inputs
- Focus: backgroundColor: `rgb(250, 252, 233)`, border: `1px solid rgb(32, 29, 29)`, borderColor: `rgb(32, 29, 29)`

### Tabs

**Pill Tab**
- Background: `#f8f7f7` `{colors.surface-2}`
- Text: `#646262` `{colors.hairline}`
- Padding: 0px 20px
- Radius: 6px 6px 0px 0px
- Font: 16px weight 400
- Use: Navigation tabs, filter tabs


## 4b. Component Behaviors (State Matrix)

### Interaction State Narrative

- **Input**:
  - **focus:** bg #f8f7f7 → #fafce9, shadow added, border changes
- **FooterLink**:
  - **hover:** bg transparent → #f8f7f7

*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(0, 0, 0)"
  input:
    default:
      bg: "rgb(248, 247, 247)"
      fg: "rgb(32, 29, 29)"
      border: "1px solid rgba(15, 0, 0, 0.12)"
    focus:
      bg: "rgb(250, 252, 233)"
      fg: "inherit"
      border: "1px solid rgb(32, 29, 29)"
      shadow: "rgb(248, 250, 199) 0px 0px 0px 3px"
  link:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(32, 29, 29)"
  navLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(32, 29, 29)"
    hover:
      bg: "transparent"
      fg: "inherit"
  tab:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(32, 29, 29)"
  footerLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(32, 29, 29)"
    hover:
      bg: "rgb(248, 247, 247)"
      fg: "inherit"
```

**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
- **3 shape(s)** in this system: `Ghost`, `Secondary`, `Light / Invert`
- **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

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

## 5. Layout Principles

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

### Grid
Flexbox column

### Max Width
1200px

### Spacing System
Compact spacing — information density prioritized

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

### Border Radius Scale
| Name | Value | Use |
|------|-------|-----|
| None | 0px | No rounding |
| Xs | 4px | Tiny corners (badges, micro elements) |
| Sm | 6px | 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 | `0px` |
| Inputs & Forms | `6px` |
| Tabs | `6px 6px 0px 0px` |
| Page Body | `0px` |
| Navigation | `0px` |
| Primary Input | `6px` |

**Shape Personality**: Moderate Rounding — Medium corners (4–12px). Modern SaaS standard, neither sharp nor pill.

**Full Radius Spectrum**: 0px, 4px, 6px (from `allBorderRadii` scan)


## 5b. Spacing Rhythm Names

**Measured section padding**: bands use ~64px internal vertical padding (up to 96px) — **generous**. (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** | `64px` | Top/bottom of full-bleed hero sections |
| **section** | `32px` | Between major bands (color change, content shift) |
| **subsection** | `24px` | Within a section, between content groups |
| **card** | `12px` | Card padding, list-item spacing |
| **compact** | `8px` | Form fields, tight clusters, badge padding |
| **micro** | `4px` | Icon-text gap, tag inner padding |

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

## 5c. Widget & Structure Library

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

**5/8 structural patterns detected.**

### Hero Pattern

- **Composition:** left-aligned — 
- **Viewport coverage:** 534px tall (not full-viewport)
- **Heading:** "The open source AI coding agent" — 38px left-aligned
- **Subheading:** "Free models included or connect any model from any provider, including Claude, GPT, Gemini and more."
- **CTAs:** 1 (primary: "curl -fsSL https://opencode.ai/install | bash")
- **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:** 40px
- **Logo:** ✓ present
- **Nav links:** 6 primary items
- **CTAs in nav:** 1
- **Clone instruction:** Build a static unknown navigation. Reserve 1 slot for primary CTA.

### Card Grid Pattern

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

### FAQ Pattern

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

### Footer Pattern

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

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Page background, content blocks |

**Shadow Philosophy**: Flat design — no shadows used. Borders and spacing define structure.

## 7. Motion & Interaction

### Duration Scale

| Value | Tier | Typical Use |
|-------|------|-------------|
| `150ms` | Fast | Hover states, micro-interactions |
| `180ms` | Normal | Panel open/close, navigation |

### Copy-Paste Transition Snippets

**Opacity**
```css
transition: opacity 0.18s;
```

### Motion Fingerprint

- **Speed Character**: Balanced Pacing (median duration: `180ms`)
- **Dominant Easing**: standard CSS easings

> This design moves with balanced pacing timing using standard CSS easings, creating a UI that feels natural and fluid.

## 8. Do's and Don'ts

### Do
- Use Background (`#fdfcfc`) as the page background — it's intentionally not pure white
- Use Text (`#1d1d1f`) for text — not pure black, it's warmer and more readable
- Use Berkeley Mono as the primary typeface — it defines the brand personality
- Use Text Strong (`#201d1d`) as the primary accent — it's the brand's signature interactive color
- Use small 4px radius for buttons — this design system uses subtle rounding, not pill shapes
- Style form inputs with a `1px solid rgba(15, 0, 0, 0.12)` border — use border-based inputs, not floating labels or underline-only
- Maintain nav height at 40px — consistent vertical space for the navigation bar
- Respect the 4px–32px spacing range — the design uses a wide scale for visual breathing room
- Use a single primary CTA in the hero — the design intentionally avoids choice paralysis
- Each card uses an icon (not photo) — the visual language is illustrative, not photographic
- Use expandable accordion for the FAQ — saves vertical space and lets users self-navigate

### 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 introduce additional saturated accent colors — the palette is intentionally controlled
- Don't over-round buttons with pill or large radius — the system uses restrained, sharp-ish corners
- Don't remove the input border — the border is the primary affordance indicator for form fields
- Don't collapse or hide the nav on scroll without an explicit scroll-triggered animation — the design uses fixed nav presence
- Don't make the nav sticky — this design lets it scroll away to maximize content focus


## 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 `hsl(0, 20%, 99%)` as the base canvas"
    why: "Every component is designed to composit against this exact tone"
    test: "document.body.style.backgroundColor === 'hsl(0, 20%, 99%)'"
  - id: brand-accent-001
    type: do
    rule: "Reserve `rgb(32, 29, 29)` for primary CTAs and brand-mark signals only"
    why: "Single chromatic assertion device — overuse dilutes meaning"
    test: "querySelectorAll('[style*=\"rgb(32, 29, 29)\"]').length <= 3 per fold"
  - id: brand-depth-001
    type: dont
    rule: "Do NOT introduce drop shadows on cards or sections"
    why: "Containment is achieved via borders, not elevation — adding shadows breaks the depth contract"
    test: "getComputedStyle(card).boxShadow === 'none'"
```

## 9. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile Large | 550px | Expanded mobile layout |

### Token Diff — Desktop vs Mobile

| Element | Property | Desktop | Mobile |
|---------|----------|---------|--------|
| heading | font-size | `38px` | `22px` |
| heading | line-height | `57px` | `33px` |
| nav | display | `block` | `none` |
| nav | height | `40px` | `auto` |
| button | font-size | `16px` | `15px` |
| main | gap | `64px` | `48px` |

### Collapsing Strategy
- Headlines: 38px → 22px on mobile
- Navigation: block → none on mobile
- Cards: multi-column → stacked vertical on mobile
- Footer: multi-column → stacked single column on mobile

### Touch Targets
- Buttons: 1px 6px 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):

- **Footer columns collapse:** 5 columns (desktop) → 1 column (mobile).


## 7c. Visual Effects & Dynamic Behavior

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

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

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

## 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):**
- /social-share.png
  *This is the image shown when the site is shared on social media — represents the brand visual essence.*

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

**Decorative Patterns Detected:**
- 3 large decorative SVG shapes (≥200×200px, non-icon) — likely blob/illustration accents

**Clone instruction for decorative work:** Decorative SVG accents are part of the brand — generate or source blob/illustration shapes to scatter behind content.

**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: Pure White (`#fdfcfc`)
- Primary text: Near-Black (`#1d1d1f`)
- Accent: Near-Black (`#201d1d`)
- Border: Slate Grey (`#646262`)
- Font: Berkeley Mono
- Body: 16px weight 400

### Example Component Prompts
- "Create a hero section on Pure White background (#fdfcfc). Headline at 38px Berkeley Mono weight 700, line-height 1.5, color #1d1d1f."
- "Create the primary CTA button: `#201d1d` background, `#000000` text, 9999px border-radius, 1px 6px padding, 700 weight, Berkeley Mono font."
- "Build navigation: static on `#fdfcfc`. Berkeley Mono 16px weight 400 for links."

### Iteration Guide
1. **Canvas**: Set the light canvas to Pure White (`#fdfcfc`) — every component is composited against this exact base.
2. **Typography**: All type in Berkeley Mono, weight range 400–700. Never exceed 700 — heavier weights break the brand's tonal restraint.
3. **Accent**: Near-Black (`#201d1d`) is the sole interactive color. On hover → #03b000 (`#03b000`). Use CSS transitions, not opacity/brightness filters.
4. **Shape**: CTAs at `0px`. Apply border-radius from the extracted scale only — don't invent intermediate values.
5. **Spacing**: Use the `--ca-space-*` token scale (4px–32px). All padding, margin, and gap values are multiples from this scale — no magic numbers.
6. **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-1: #fdfcfc;
  --ca-surface-2: #f8f7f7;
  --ca-ink-muted: #1d1d1f;
  --ca-ink-subtle: #8d8b8b;
  --ca-primary: #201d1d;
  --ca-on-primary: #ffffff;
  --ca-primary-hover: #0056b3;
  --ca-hairline: #646262;
  --ca-semantic-error: #ff3b30;
  --ca-semantic-success: #30d158;
  --ca-semantic-warning: #ff9f0a;
}

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

/* Spacing & Radius */
:root {
  --ca-space-xxs: 2px;
  --ca-space-xs: 4px;
  --ca-space-sm: 8px;
  --ca-space-md: 12px;
  --ca-space-base: 16px;
  --ca-space-lg: 24px;
  --ca-space-xl: 32px;
  --ca-space-2xl: 48px;
  --ca-space-3xl: 64px;
  --ca-radius-none: 0px;
  --ca-radius-xs: 4px;
  --ca-radius-sm: 6px;
  --ca-radius-md: 14px;
  --ca-radius-lg: 20px;
  --ca-radius-xl: 32px;
  --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: hero
    tag: div
    height: 4297px
    width: full-bleed
    layout: block
    children: 1
    vertical-padding: ~40px
  - section: section
    tag: section
    height: 80px
    width: 1078px
    layout: flex-row justify=space-between
    children: 3
    bg: "rgb(253, 252, 252)"
    vertical-padding: ~24px
    padding: "24px 80px"
  - section: feature-section
    tag: main
    height: 4297px
    width: full-bleed
    layout: flex-column justify=normal
    children: 2
    bg: "rgb(253, 252, 252)"
    vertical-padding: ~40px
    padding: "0px 0px 80px"
  - section: feature-section
    tag: section
    height: 534px
    width: 1078px
    layout: flex-column justify=normal
    children: 3
    vertical-padding: ~96px (airy)
    padding: "96px 80px"
  - section: section
    tag: section
    classes: ["tabs"]
    height: 125px
    width: 918px
    layout: block
    children: 2
  - section: section
    tag: section
    height: 607px
    width: 1078px
    layout: block
    children: 1
  - section: content-section
    tag: section
    height: 653px
    width: 1078px
    layout: block
    children: 3
    vertical-padding: ~64px (generous)
    padding: "64px 80px"
  - section: content-section
    tag: section
    height: 629px
    width: 1078px
    layout: block
    children: 1
    vertical-padding: ~64px (generous)
    padding: "64px 80px"
  - section: section
    tag: section
    height: 229px
    width: 1078px
    layout: block
    children: 1
    vertical-padding: ~64px (generous)
    padding: "64px 80px"
  - section: content-section
    tag: section
    height: 625px
    width: 1078px
    layout: block
    children: 2
    vertical-padding: ~64px (generous)
    padding: "64px 80px"
  - section: content-section
    tag: section
    height: 395px
    width: 1078px
    layout: flex-row justify=normal
    children: 1
    vertical-padding: ~64px (generous)
    padding: "64px 80px"
  - section: section
    tag: section
    height: 287px
    width: 1078px
    layout: block
    children: 2
    vertical-padding: ~64px (generous)
    padding: "64px 80px"
  - section: footer
    tag: footer
    height: 89px
    width: 1078px
    layout: flex-row justify=normal
    children: 5
```

**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:
  sub-headings:
    - "What is OpenCode?"
  ctas:
    - "curl"
    - "npm"
    - "curl -fsSL https://opencode.ai/install | bash"
    - "What is OpenCode?"
    - "Subscribe"
    - "English"
  navigation:
    - "Download"
    - "GitHub"
    - "Docs"
    - "Data"
    - "Zen"
    - "Go"
    - "Enterprise"
  footer-links:
    - "GitHub [160K]"
```

**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:
```

**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">
  curl
</button>
```
_Source pattern detected: padding `16px 0px` · radius `0px` · 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** 5 · **docs** 3 · **blog** 1 · **social** 3 · **legal** 2 · **footer** 3 · **other** 3

**Signals:** 4/20 links carry a featured image · dominant link roles: footer-link (8), navigation (5), content-card (3).


---
## Extraction Completeness: 53/100 (D)

| Category | Score | Max | Detail |
|----------|-------|-----|--------|
| Colors & Palette | 25 | 25 | 19 named colors |
| Typography | 10 | 20 | 4 roles defined |
| Components | 12 | 20 | 3 specs extracted |
| Motion & Interaction | 0 | 15 | No keyframes |
| CSS Custom Properties | 5 | 10 | 107 vars |
| Responsive Breakpoints | 1 | 5 | 1 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:*

- **Limited breakpoint data** — fewer than 3 media query breakpoints detected. The site may use fluid CSS (clamp/vw) or container queries for responsiveness rather than traditional breakpoints.
- **Sparse component extraction** — fewer than 5 component types detected. Highly dynamic sections (modals, datepickers, carousels) require interaction to render and are not captured in a static pass.

| 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 |
| **Keyframe animations** | No @keyframes declarations found (transitions only) | Use CSS transitions for state changes; avoid complex scroll-based animations |
| **Dark mode** | No dark-mode CSS variables or media queries detected | Light mode is canonical; do not generate dark-mode variants unless explicitly requested |

### Per-section confidence

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

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

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

### Font Loading

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

**@font-face declarations to use:**
```css
@font-face {
  font-family: 'IBM Plex Mono';
  /* src: url('/fonts/IBM-Plex-Mono.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  /* src: url('/fonts/IBM-Plex-Mono.woff2') format('woff2'); */
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  /* src: url('/fonts/IBM-Plex-Mono.woff2') format('woff2'); */
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  /* src: url('/fonts/IBM-Plex-Mono.woff2') format('woff2'); */
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  /* src: url('/fonts/IBM-Plex-Mono.woff2') format('woff2'); */
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  /* src: url('/fonts/IBM-Plex-Mono.woff2') format('woff2'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  /* src: url('/fonts/IBM-Plex-Mono.woff2') format('woff2'); */
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  /* src: url('/fonts/IBM-Plex-Mono.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  /* src: url('/fonts/IBM-Plex-Mono.woff2') format('woff2'); */
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  /* src: url('/fonts/IBM-Plex-Mono.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  /* src: url('/fonts/IBM-Plex-Mono.woff2') format('woff2'); */
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  /* src: url('/fonts/IBM-Plex-Mono.woff2') format('woff2'); */
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  /* src: url('/fonts/IBM-Plex-Mono.woff2') format('woff2'); */
  font-weight: 450;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  /* src: url('/fonts/IBM-Plex-Mono.woff2') format('woff2'); */
  font-weight: 450;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  /* src: url('/fonts/IBM-Plex-Mono.woff2') format('woff2'); */
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  /* src: url('/fonts/IBM-Plex-Mono.woff2') format('woff2'); */
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  /* src: url('/fonts/IBM-Plex-Sans.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  /* src: url('/fonts/IBM-Plex-Sans.woff2') format('woff2'); */
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  /* src: url('/fonts/IBM-Plex-Sans.woff2') format('woff2'); */
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  /* src: url('/fonts/IBM-Plex-Sans.woff2') format('woff2'); */
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  /* src: url('/fonts/IBM-Plex-Sans.woff2') format('woff2'); */
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  /* src: url('/fonts/IBM-Plex-Sans.woff2') format('woff2'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  /* src: url('/fonts/IBM-Plex-Sans.woff2') format('woff2'); */
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  /* src: url('/fonts/IBM-Plex-Sans.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  /* src: url('/fonts/IBM-Plex-Sans.woff2') format('woff2'); */
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  /* src: url('/fonts/IBM-Plex-Sans.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  /* src: url('/fonts/IBM-Plex-Sans.woff2') format('woff2'); */
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  /* src: url('/fonts/IBM-Plex-Sans.woff2') format('woff2'); */
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  /* src: url('/fonts/IBM-Plex-Sans.woff2') format('woff2'); */
  font-weight: 450;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  /* src: url('/fonts/IBM-Plex-Sans.woff2') format('woff2'); */
  font-weight: 450;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  /* src: url('/fonts/IBM-Plex-Sans.woff2') format('woff2'); */
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  /* src: url('/fonts/IBM-Plex-Sans.woff2') format('woff2'); */
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  /* src: url('/fonts/IBM-Plex-Sans-Condensed.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  /* src: url('/fonts/IBM-Plex-Sans-Condensed.woff2') format('woff2'); */
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  /* src: url('/fonts/IBM-Plex-Sans-Condensed.woff2') format('woff2'); */
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  /* src: url('/fonts/IBM-Plex-Sans-Condensed.woff2') format('woff2'); */
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  /* src: url('/fonts/IBM-Plex-Sans-Condensed.woff2') format('woff2'); */
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  /* src: url('/fonts/IBM-Plex-Sans-Condensed.woff2') format('woff2'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  /* src: url('/fonts/IBM-Plex-Sans-Condensed.woff2') format('woff2'); */
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  /* src: url('/fonts/IBM-Plex-Sans-Condensed.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  /* src: url('/fonts/IBM-Plex-Sans-Condensed.woff2') format('woff2'); */
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  /* src: url('/fonts/IBM-Plex-Sans-Condensed.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  /* src: url('/fonts/IBM-Plex-Sans-Condensed.woff2') format('woff2'); */
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  /* src: url('/fonts/IBM-Plex-Sans-Condensed.woff2') format('woff2'); */
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  /* src: url('/fonts/IBM-Plex-Sans-Condensed.woff2') format('woff2'); */
  font-weight: 450;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  /* src: url('/fonts/IBM-Plex-Sans-Condensed.woff2') format('woff2'); */
  font-weight: 450;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  /* src: url('/fonts/IBM-Plex-Sans-Condensed.woff2') format('woff2'); */
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  /* src: url('/fonts/IBM-Plex-Sans-Condensed.woff2') format('woff2'); */
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Hebrew';
  /* src: url('/fonts/IBM-Plex-Sans-Hebrew.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Hebrew';
  /* src: url('/fonts/IBM-Plex-Sans-Hebrew.woff2') format('woff2'); */
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Hebrew';
  /* src: url('/fonts/IBM-Plex-Sans-Hebrew.woff2') format('woff2'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Hebrew';
  /* src: url('/fonts/IBM-Plex-Sans-Hebrew.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Hebrew';
  /* src: url('/fonts/IBM-Plex-Sans-Hebrew.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Hebrew';
  /* src: url('/fonts/IBM-Plex-Sans-Hebrew.woff2') format('woff2'); */
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Hebrew';
  /* src: url('/fonts/IBM-Plex-Sans-Hebrew.woff2') format('woff2'); */
  font-weight: 450;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Hebrew';
  /* src: url('/fonts/IBM-Plex-Sans-Hebrew.woff2') format('woff2'); */
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Devanagari';
  /* src: url('/fonts/IBM-Plex-Sans-Devanagari.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Devanagari';
  /* src: url('/fonts/IBM-Plex-Sans-Devanagari.woff2') format('woff2'); */
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Devanagari';
  /* src: url('/fonts/IBM-Plex-Sans-Devanagari.woff2') format('woff2'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Devanagari';
  /* src: url('/fonts/IBM-Plex-Sans-Devanagari.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Devanagari';
  /* src: url('/fonts/IBM-Plex-Sans-Devanagari.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Devanagari';
  /* src: url('/fonts/IBM-Plex-Sans-Devanagari.woff2') format('woff2'); */
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Devanagari';
  /* src: url('/fonts/IBM-Plex-Sans-Devanagari.woff2') format('woff2'); */
  font-weight: 450;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Devanagari';
  /* src: url('/fonts/IBM-Plex-Sans-Devanagari.woff2') format('woff2'); */
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Thai';
  /* src: url('/fonts/IBM-Plex-Sans-Thai.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Thai';
  /* src: url('/fonts/IBM-Plex-Sans-Thai.woff2') format('woff2'); */
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Thai';
  /* src: url('/fonts/IBM-Plex-Sans-Thai.woff2') format('woff2'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Thai';
  /* src: url('/fonts/IBM-Plex-Sans-Thai.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Thai';
  /* src: url('/fonts/IBM-Plex-Sans-Thai.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Thai';
  /* src: url('/fonts/IBM-Plex-Sans-Thai.woff2') format('woff2'); */
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Thai';
  /* src: url('/fonts/IBM-Plex-Sans-Thai.woff2') format('woff2'); */
  font-weight: 450;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Thai';
  /* src: url('/fonts/IBM-Plex-Sans-Thai.woff2') format('woff2'); */
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Thai Looped';
  /* src: url('/fonts/IBM-Plex-Sans-Thai-Looped.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Thai Looped';
  /* src: url('/fonts/IBM-Plex-Sans-Thai-Looped.woff2') format('woff2'); */
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Thai Looped';
  /* src: url('/fonts/IBM-Plex-Sans-Thai-Looped.woff2') format('woff2'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Thai Looped';
  /* src: url('/fonts/IBM-Plex-Sans-Thai-Looped.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Thai Looped';
  /* src: url('/fonts/IBM-Plex-Sans-Thai-Looped.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Thai Looped';
  /* src: url('/fonts/IBM-Plex-Sans-Thai-Looped.woff2') format('woff2'); */
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Thai Looped';
  /* src: url('/fonts/IBM-Plex-Sans-Thai-Looped.woff2') format('woff2'); */
  font-weight: 450;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Thai Looped';
  /* src: url('/fonts/IBM-Plex-Sans-Thai-Looped.woff2') format('woff2'); */
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Serif';
  /* src: url('/fonts/IBM-Plex-Serif.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Serif';
  /* src: url('/fonts/IBM-Plex-Serif.woff2') format('woff2'); */
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Serif';
  /* src: url('/fonts/IBM-Plex-Serif.woff2') format('woff2'); */
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Serif';
  /* src: url('/fonts/IBM-Plex-Serif.woff2') format('woff2'); */
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Serif';
  /* src: url('/fonts/IBM-Plex-Serif.woff2') format('woff2'); */
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Serif';
  /* src: url('/fonts/IBM-Plex-Serif.woff2') format('woff2'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Serif';
  /* src: url('/fonts/IBM-Plex-Serif.woff2') format('woff2'); */
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Serif';
  /* src: url('/fonts/IBM-Plex-Serif.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Serif';
  /* src: url('/fonts/IBM-Plex-Serif.woff2') format('woff2'); */
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Serif';
  /* src: url('/fonts/IBM-Plex-Serif.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Serif';
  /* src: url('/fonts/IBM-Plex-Serif.woff2') format('woff2'); */
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Serif';
  /* src: url('/fonts/IBM-Plex-Serif.woff2') format('woff2'); */
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Serif';
  /* src: url('/fonts/IBM-Plex-Serif.woff2') format('woff2'); */
  font-weight: 450;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Serif';
  /* src: url('/fonts/IBM-Plex-Serif.woff2') format('woff2'); */
  font-weight: 450;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Serif';
  /* src: url('/fonts/IBM-Plex-Serif.woff2') format('woff2'); */
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Serif';
  /* src: url('/fonts/IBM-Plex-Serif.woff2') format('woff2'); */
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  /* src: url('/fonts/IBM-Plex-Sans-Arabic.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  /* src: url('/fonts/IBM-Plex-Sans-Arabic.woff2') format('woff2'); */
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  /* src: url('/fonts/IBM-Plex-Sans-Arabic.woff2') format('woff2'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  /* src: url('/fonts/IBM-Plex-Sans-Arabic.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  /* src: url('/fonts/IBM-Plex-Sans-Arabic.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  /* src: url('/fonts/IBM-Plex-Sans-Arabic.woff2') format('woff2'); */
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  /* src: url('/fonts/IBM-Plex-Sans-Arabic.woff2') format('woff2'); */
  font-weight: 450;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  /* src: url('/fonts/IBM-Plex-Sans-Arabic.woff2') format('woff2'); */
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
```

### Hover State CSS (Intercepted)

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

```css
[data-component="footer"] [data-slot="cell"] [data-component="language-picker"] [data-slot="trigger"]:hover {
  background: var(--color-background-weak);
  text-decoration: underline;
  text-underline-offset: var(--space-1);
  text-decoration-thickness: 1px;}

[data-component="legal"] [data-component="language-picker"] [data-slot="trigger"]:hover {
  background: transparent;
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: var(--space-1);
  text-decoration-thickness: 1px;}

[data-page="black"] [data-component="language-picker"] [data-slot="trigger"]:hover {
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 4px;}

[data-page="black"] [data-component="language-picker"] [data-slot="item"]:hover {
  background-color: rgba(255, 255, 255, 0.06);}
```

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

### Real Responsive Breakpoints
**1 breakpoints** read from the live `@media` rules (not guessed):
`550px`

### Measured Design Scale
**Type scale by usage** (× = paint count): `16px`×684 · `14px`×18 · `38px`×2

**Radius scale** (× = paint count): `4px`×7 · `6px`×2

**Weights** (× = paint count): `400`×600 · `500`×90 · `700`×14

**Layout gaps** (× = paint count): `12px`×15 · `16px`×9 · `10px`×7 · `24px`×4 · `8px`×3 · `64px`×2 · `32px`×2 · `40px`×1

### 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(--font-sans) }
body { background:var(--color-background) }
main { background:var(--color-background) }
main { gap:var(--vertical-padding); font-family:var(--font-mono); color:var(--color-text) }
h1 { font-size:38px; color:var(--color-text-strong); font-weight:700 }
a { color:var(--color-text-strong) }
input { background:var(--color-background-weak); border-radius:6px; color:var(--color-text-strong) }
input { color:var(--color-text-strong) }
```

> 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://opencode.ai | 2026-06-11T05:01:57.458Z*
*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.*