docker.com

DESIGN.md

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

---
version: alpha
name: docker.com
description: "Light product system built on #f9fafb with #2560ff as the primary CTA accent. Type anchored in Repro at 64px / weight 500. Extracted automatically from https://docker.com/ — rendered styles via getComputedStyle() + CSS custom properties (token-only values may not be painted)."
narrative: |
  docker.com is built on a soft, near-white canvas (rgb(249, 250, 251)).
  The system uses rgb(37, 96, 255) as the high-saturation accent for primary actions.
  Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside Repro as the primary typeface.
  A layered elevation system (10 distinct shadows) building a clear front-to-back hierarchy.
  Motion is a first-class concern — 15 keyframe animations plus transition-driven interactions.

colors:
  background: "#f9fafb"
  surface-1: "#ffffff"
  surface-2: "rgba(255, 255, 255, 0.8)"
  ink: "#2c333f"
  ink-subtle: "#2c333f"
  primary: "#2560ff"
  on-primary: "#ffffff"
  primary-hover: "#003db5"
  hairline: "#2c333f"
  primary-focus: "#c0e0fa"

typography:
  display-xl:
    fontFamily: "Repro, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 64px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -1.92px
  display-md:
    fontFamily: "Inter, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.264px
  headline:
    fontFamily: "Inter, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: -0.225px
  body:
    fontFamily: "Inter, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: -0.15px
  body-sm:
    fontFamily: "Inter, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.14
    letterSpacing: -0.225px
  caption:
    fontFamily: "Inter, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: -0.15px
  button:
    fontFamily: "Inter, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: -0.15px
  eyebrow:
    fontFamily: "JetBrains Mono, 'SF Mono', 'JetBrains Mono', Menlo, monospace"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 14px
  lg: 18px
  xl: 48px
  pill: 999px

spacing:
  xxs: 2px
  xs: 6px
  sm: 8px
  md: 12px
  lg: 24px
  xl: 40px
  xxl: 64px

components:
  button-icon-button:
    backgroundColor: "#000000"
    textColor: "transparent"
    typography: "{typography.body-sm}"
    rounded: "{rounded.none}"
    padding: 6px 0px 6px 10px
  button-primary-brand:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.xs}"
    padding: 8px 12px
  button-light--invert:
    backgroundColor: "{colors.on-primary}"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.xs}"
    padding: 8px 12px
  input-text-input:
    backgroundColor: "{colors.on-primary}"
    textColor: "{colors.hairline}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.none}"
    padding: 8px
  navigation-main-nav:
    backgroundColor: "{colors.background}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.none}"
    padding: 0px 24px
  status-badge-tinted:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.xl}"
    padding: 1px 5px
  tab-ghost-tab:
    backgroundColor: "transparent"
    textColor: "#94a3b8"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    padding: 10px 14px 8px

extracted_at: "2026-06-11T06:09:06.769Z"
completeness: 92
scoreVersion: "v2"

---

# Design System — docker.com
> Extracted automatically by Prism from https://docker.com
> 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 | `#f9fafb` |
| Type posture | sans-led (Inter) | "Invisible to developers.Total " |
| Color assertion | dual-accent | #2560ff |
| Whitespace | moderate | section rhythm 48px |
| Interaction | expressive | 15 keyframes, 10 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**: `rgb(249, 250, 251)` is the page background. Every component composits against this.
> - **Accent**: `rgb(37, 96, 255)` for primary CTAs ONLY. Never decorative.
> - **Body type**: 16px (token: `typography.body`). Default for ALL text not in a heading role.
> - **Section rhythm**: 48px between major bands. Card padding: 24px.
> - **Default radius**: 8px on buttons/inputs. Pills (`9999px`) only for icon-buttons or status chips.
>
> **Before generating UI**: import this DESIGN.md, scan §2 (Color Palette) + §4 (Components) + §10 (Agent Guide). Skip §11–12 unless extending.

## 1. Visual Theme & Atmosphere

**Signature:** a multi-stop brand gradient (a hero mesh/ribbon — usually an SVG or image, not a CSS background) — colours: #e7eaef, #e5f2fc, #002978, #2560ff. This is the brand's most recognizable visual — reproduce it, don't replace it with a generic card or flat panel.

docker.com sits on a off-white canvas (`#f9fafb`), a neutral foundation calibrated for sustained reading and component contrast. 

Headlines are set in **Repro**, a sans-serif display face (the dominant type signature, e.g. "Invisible to developers.Total control for security." at 64px). A second display voice — **Inter** (sans) — appears in lower bands (e.g. "Your laptop. One command."), used for editorial accent. Body text is set in **Inter**. Negative letter-spacing at display sizes (-1.53px at 51px) compresses headlines into engineered blocks, dense and precise. 

Body text reads in Charcoal (`#2c333f`) — softened from pure black, a small but deliberate detail that lowers reading friction. **#2560ff** (`#2560ff`) 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 (10 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: Off-White (`#f9fafb`)
- Primary typeface: IBM Plex Mono
- Primary text: Charcoal (`#2c333f`)
- Accent: #2560ff (`#2560ff`)
- Display: 51px weight 500, letter-spacing -1.53px
- Shadow system: 10 distinct elevation levels
- Custom fonts loaded: IBM Plex Mono, Inter, Repro, JetBrains Mono, Manrope

## 2. Color Palette & Roles

### Background & Surface
- **Off-White** (`#f9fafb`): Page background (primary)
- **Pure White** (`#ffffff`): Surface / elevated background
- **Off-White** (`#f4f5f7`): Surface / elevated background
- **Light Gray** (`#e8eef6`): Surface / elevated background
- **#d6dce6** (`#d6dce6`): Surface / elevated background

### Text & Content
- **Charcoal** (`#2c333f`): Primary body text
- **Pure Black** (`#000000`): Secondary text
- **Navy Blue** (`#00084d`): Secondary text
- **Navy Blue** (`#0b214a`): Secondary text
- **Navy Blue** (`#00153c`): Secondary text

### Accent & Interactive
- **#2560ff** (`#2560ff`): Interactive / accent
- **Cool Gray** (`#8b99b2`): Interactive / accent
- **Slate** (`#434c5f`): Interactive / accent
- **Sage** (`#a9b4c6`): Interactive / accent
- **Cobalt Blue** (`#003db5`): Interactive / accent
- **#ff5f57** (`#ff5f57`): Interactive / accent
- **#febc2e** (`#febc2e`): Interactive / accent

### Border & Divider
- **Silver** (`#c8cfda`): Borders / dividers
- **Light Grey** (`#cccccc`): Borders / dividers
- **Light Blue** (`#c4cbe0`): Borders / dividers
- **Whitesmoke** (`#e7eaef`): Borders / dividers
- **Light Gray** (`#e6ebf2`): Borders / dividers
- **Silver** (`#b9c2cf`): Borders / dividers

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

- `#28c840` — #28c840
- `#5b6573` — Dim Gray
- `#8a97ab` — Cool Gray
- `#4d8fe0` — Cornflower Blue
- `#4a5a78` — Slate
- `rgba(96, 134, 196, 0.45)` — Translucent Steel Blue (45%)
- `#0c1322` — Deep Navy
- `#5b9cf0` — Cornflower Blue
- `#6da6ef` — Cornflower Blue
- `rgba(15, 23, 42, 0.07)` — Translucent Deep Navy (7%)
- `#001965` — #001965
- `#0b1220` — Deep Navy
- `#2563eb` — M Tricolor Blue
- `#0e1217` — Near-Black
- `#ff5f56` — #ff5f56
- `#ffbd2e` — #ffbd2e
- `#27c93f` — #27c93f
- `#6c7686` — Slate Gray
- `#f3c151` — #f3c151
- `#58d68d` — #58d68d
- `#0c1530` — Deep Navy
- `#aac4f8` — Lavender
- `#363941` — Dark Gray
- `#8a93ab` — Cool Gray
- `#9be9c4` — #9be9c4
- `#a9c8f3` — Light Blue
- `#7da3f4` — Cornflower Blue
- `#82cccc` — Sky Blue
- `#475569` — Slate
- `#8aa1c5` — Cool Gray
- `#94a3b8` — Cool Gray
- `#cbd5e1` — Light Blue
- *…+24 more in `raw-css.json` (`desktop.allColors`).*

### CSS Custom Properties (Design Tokens)

**Shadow Token**
- `--buttonPrimaryActiveShadow`: `#c0e0fa`
- `--buttonCtaActiveShadow`: `transparent`
- `--buttonPrimaryFocusShadow`: `#c0e0fa`
- `--buttonTertiaryShadow`: `transparent`

**Spacing Token**
- `--masonGap`: `1.25rem`
- `--tableGridGap`: `0.75rem`
- `--leftPadding`: `2rem`
- `--subSectionPadding`: `1.25rem`

**Motion Token**
- `--tabActiveAnimationColor`: `#2560ff`

**Other tokens**
- `--menuLinkLabelColor`: `#000`
- `--buttonPrimaryFocusBorder`: `transparent`
- `--buttonCtaDisabledText`: `#6c7e9d`
- `--homerHoverColor`: `#6c7e9d`
- `--eyebrowColor`: `#fff`
- `--textGradientSecondary`: `#fff,#fff`
- `--buttonSecondaryActiveText`: `#000`
- `--codeBoxBackgroundColor`: `#e7eaef`

## 3. Typography Rules

### Font Families
- **Primary**: `Inter`
- **Secondary**: `Repro`
- **Font 3**: `IBM Plex Mono`
- **Font 4**: `JetBrains Mono`
- **Font 5**: `Manrope`

### Custom Fonts Loaded
- **IBM Plex Mono** weight 100 (normal)
- **IBM Plex Mono** weight 200 (normal)
- **IBM Plex Mono** weight 300 (normal)
- **IBM Plex Mono** weight 400 (normal)
- **IBM Plex Mono** weight 500 (normal)
- **IBM Plex Mono** weight 600 (normal)
- **IBM Plex Mono** weight 700 (normal)
- **Inter** weight 100 (normal)
- **Inter** weight 200 (normal)
- **Inter** weight 300 (normal)
- **Inter** weight 400 (normal)
- **Inter** weight 500 (normal)
- **Inter** weight 600 (normal)
- **Inter** weight 700 (normal)
- **Inter** weight 800 (normal)
- **Inter** weight 900 (normal)
- **Repro** weight 500 (normal)
- **Repro** weight 700 (normal)
- **Repro** weight 800 (normal)
- **Repro** weight 900 (normal)
- **JetBrains Mono** weight 400 (normal)
- **JetBrains Mono** weight 500 (normal)
- **JetBrains Mono** weight 700 (normal)
- **Manrope** weight 500 (normal)
- **Manrope** weight 700 (normal)

### Typography Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | Repro | 64px | 500 | 1.05 | -1.92px | Main headline (h2) |
| Sub-heading | Inter | 22px | 500 | 1.25 | -0.264px | Third-level heading (h3) |
| Label Heading | Inter | 18px | 500 | 1.4 | -0.225px | Small heading (H4) |
| Card Title | Inter | 16px | 400 | 1.5 | normal | Card headings |
| Link Large | Inter | 16px | 600 | 1.14 | -0.225px | Link (16px) — Decoration: none |
| Eyebrow / Overline | JetBrains Mono | 15px | 400 | 1.5 | normal | Label above heading, uppercase tag |
| Button | Inter | 14px | 500 | 1.3 | -0.15px | Button label (14px) |
| Button Small | Inter | 12px | 500 | 1.3 | -0.15px | Button label (12px) |
| Caption / Badge | Inter | 12px | 700 | 1.3 | -0.15px | uppercase, small text (12px) |

### Full Font Size Scale

Sizes detected in the design (descending): `64px`, `60px`, `51px`, `40px`, `32px`, `24px`, `22px`, `20px`, `19px`, `18px`, `16px`, `15px`, `14.50px`, `14px`, `13px`, `12.80px`, `12.50px`, `12px`, `11.50px`, `11px`, `10px`

> 14 size(s) detected outside the sampled hierarchy (60px, 51px, 40px, 32px, 24px, 20px, 19px, 14.5px, 13px, 12.8px, 12.5px, 11.5px, 11px, 10px). 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

**Icon Button**
- Background: `#000000`
- Text: `transparent`
- Padding: 6px 0px 6px 10px
- Radius: 0px
- Border: 1px solid rgb(204, 204, 204)
- Font: 16px weight 400
- Use: Toolbar/UI icons

**Primary Brand**
- Background: `#2560ff` `{colors.primary}`
- Text: `#ffffff` `{colors.on-primary}`
- Padding: 8px 12px
- Radius: 4px
- Border: 1px solid rgb(0, 61, 181)
- Shadow: `rgb(192, 224, 250) 0px 0px 1px 1px inset`
- Font: 12px weight 500
- Use: Primary CTA / brand action

**Light / Invert**
- Background: `#ffffff` `{colors.on-primary}`
- Text: `#2560ff` `{colors.primary}`
- Padding: 8px 12px
- Radius: 4px
- Border: 1px solid rgb(169, 180, 198)
- Font: 12px weight 500
- Use: Bright CTA on dark sections

**Primary Brand**
- Background: `#2560ff` `{colors.primary}`
- Text: `#ffffff` `{colors.on-primary}`
- Padding: 12px 20px
- Radius: 8px
- Border: 1px solid rgb(0, 61, 181)
- Shadow: `rgb(192, 224, 250) 0px 0px 1px 1px inset`
- Font: 14px weight 500
- Use: Primary CTA / brand action

### Inputs & Forms

**Text Input**
- Background: `#ffffff` `{colors.on-primary}`
- Text: `#2c333f` `{colors.hairline}`
- Padding: 8px
- Radius: 0px
- Border: 1px solid rgb(200, 207, 218)
- Shadow: `rgb(200, 207, 218) 0px 1px 2px 0px`
- Font: 16px weight 400
- Use: Text fields, search inputs

### Navigation

**Main Nav**
- Background: `#f9fafb` `{colors.background}`
- Padding: 0px 24px
- Radius: none
- Font: 16px weight 400
- Use: Fixed/sticky block nav — N/A items
- Hover: textDecoration: `underline`

### Status Badges

**Tinted**
- Background: `#2560ff` `{colors.primary}`
- Text: `#ffffff` `{colors.on-primary}`
- Padding: 1px 5px
- Radius: 100px
- Font: 10px weight 600
- Use: Status indicator, label, pill

### Tabs

**Ghost Tab**
- Background: `transparent`
- Text: `#94a3b8`
- Padding: 10px 14px 8px
- Radius: 0px
- Font: 13px weight 400
- Use: Navigation tabs, filter tabs


## 4b. Component Behaviors (State Matrix)

### Interaction State Narrative


*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(37, 96, 255)"
  input:
    default:
      bg: "rgb(255, 255, 255)"
      fg: "rgb(44, 51, 63)"
      border: "1px solid rgb(200, 207, 218)"
      shadow: "rgb(200, 207, 218) 0px 1px 2px 0px"
  link:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(37, 96, 255)"
  card:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(44, 51, 63)"
  navLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgba(255, 255, 255, 0.8)"
    hover:
      bg: "transparent"
      fg: "inherit"
  badge:
    default:
      bg: "rgb(249, 250, 251)"
      fg: "rgb(44, 51, 63)"
  footerLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(44, 51, 63)"
    hover:
      bg: "transparent"
      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: `Icon Button`, `Primary Brand`, `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

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

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

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

## 5. Layout Principles

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

### Grid
Single column, centered content

### Max Width
72.5rem

### Spacing System
Compact spacing — information density prioritized

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

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

### Shape Language

| Component | Border Radius |
|-----------|---------------|
| Buttons | `0px` |
| Inputs & Forms | `0px` |
| Navigation | `none` |
| Status Badges | `100px` |
| Tabs | `0px` |
| Page Body | `0px` |
| Primary Input | `0px` |

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

**Full Radius Spectrum**: 0px, 2px, 4px, 6px, 8px, 10px, 14px, 16px (from `allBorderRadii` scan)


## 5b. Spacing Rhythm Names

**Measured section padding**: bands use ~48px internal vertical padding (up to 48px) — **standard**. (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** | `40px` | 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** | `6px` | 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).

**4/8 structural patterns detected.**

### Hero Pattern

- **Composition:** left-aligned — 
- **Viewport coverage:** 275px tall (not full-viewport)
- **Heading:** "Accelerate agent adoption, safely." — 51px left-aligned
- **CTAs:** 1 (primary: "Learn more")
- **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:** 58px
- **Logo:** ✓ present
- **Nav links:** 5 primary items
- **CTAs in nav:** 5
- **Clone instruction:** Build a static unknown navigation. Reserve 5 slots for primary CTAs.

### Card Grid Pattern

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

### Footer Pattern

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

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Page background, content blocks |
| Layered (Level 1) | <br>`rgba(0, 0, 0, 0.14) 0px 50px 40px 0px` | Cards, elevated surfaces |
| Inset (Level 2) | <br>`rgb(192, 224, 250) 0px 0px 1px 1px inset` | Buttons, pressed-state elements |
| Inset (Level 3) | <br>`rgb(67, 76, 95) 0px 0px 1px 1px inset` | Buttons, pressed-state elements |
| Layered (Level 4) | <br>`rgb(200, 207, 218) 0px 1px 2px 0px` | Cards, elevated surfaces |

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

## 7. Motion & Interaction

### Dominant Easing Curves

| Curve | Semantic Name |
|-------|---------------|
| `cubic-bezier(0.4,0,0.2,1)` | Material Standard — Balanced |

### Duration Scale

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

### Copy-Paste Transition Snippets

**Transform**
```css
transition: transform 0.3s;
```

**Opacity**
```css
transition: opacity 0.2s, visibility 0.1s 0.2s, overflow 0.1s 0.2s;
```

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

**Filter**
```css
transition: filter 0.42s, opacity 1s;
```

### Keyframe Animation Catalog

| Animation Name | Type | Animated Props | Use Hint |
|----------------|------|----------------|----------|
| `borderHalfToneMove` | Custom | background-position-x, background-position-y | UI transition |
| `bounce` | Scale | transform | Playful feedback |
| `bounceOut` | Scale | transform | Playful feedback |
| `widthIn` | Custom | width | UI transition |
| `widthOut` | Custom | width | UI transition |
| `onetrust-fade-in` | Fade | opacity | Element entrance |
| `slide-down-custom` | Custom | bottom | Panel / drawer enter |
| `docker-gov-term-blink` | Fade | opacity | Attention / status |
| `docker-gov-term-type` | Custom | width | UI transition |
| `runtime-card-drift-a` | Scale | transform | UI transition |
| `runtime-card-drift-b` | Scale | transform | UI transition |
| `terminal-blink` | Fade | opacity | Attention / status |
| `runtime-term-type-1` | Custom | width | UI transition |
| `runtime-agent-pulse` | Fade | opacity | Attention / status |

### Motion Fingerprint

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

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

## 8. Do's and Don'ts

### Do
- Use Off-White (`#f9fafb`) as the page background — it's intentionally not pure white
- Use Charcoal (`#2c333f`) for text — not pure black, it's warmer and more readable
- Use Inter as the primary typeface — it defines the brand personality
- Keep font weights between 400-600 — the system uses a narrow weight range for subtle hierarchy
- Use negative letter-spacing (-1.53px) at display sizes for compressed, editorial headlines
- Use the extracted shadow patterns for elevation — they are tuned to match the brand palette
- Use full-pill radius (9999px) only for specific elements (avatars, pills, toggles)
- Use #2560ff (`#2560ff`) 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 rgb(200, 207, 218)` border — use border-based inputs, not floating labels or underline-only
- Maintain nav height at 58.2031px — consistent vertical space for the navigation bar
- Use a single primary CTA in the hero — the design intentionally avoids choice paralysis
- Each card includes a top image — imagery is part of the card identity, not optional
- Use a 4-column grid on desktop — density matters for this content type

### 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 use weight 700 (bold) or above — 600 is the maximum weight in this system
- Don't increase letter-spacing on headings — the type is designed to run tight at scale
- Don't invent new shadow values — use only the extracted shadow levels
- Don't apply pill radius on rectangular buttons or cards — it's reserved for specific interactive elements
- Don't introduce additional saturated accent colors — the palette is intentionally controlled
- Don't 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 `rgb(249, 250, 251)` as the base canvas"
    why: "Every component is designed to composit against this exact tone"
    test: "document.body.style.backgroundColor === 'rgb(249, 250, 251)'"
  - id: brand-accent-001
    type: do
    rule: "Reserve `rgb(37, 96, 255)` for primary CTAs and brand-mark signals only"
    why: "Single chromatic assertion device — overuse dilutes meaning"
    test: "querySelectorAll('[style*=\"rgb(37, 96, 255)\"]').length <= 3 per fold"
```

## 9. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | 400px | Single column, compact spacing |
| Mobile | 476px | Single column, compact spacing |
| Mobile Large | 640px | Expanded mobile layout |
| Mobile Large | 767px | Expanded mobile layout |
| Tablet | 1023px | Multi-column grids begin |
| Desktop | 1100px | Full feature layout |
| Desktop | 1280px | Full feature layout |

### Token Diff — Desktop vs Mobile

| Element | Property | Desktop | Mobile |
|---------|----------|---------|--------|
| heading | font-size | `51px` | `36px` |
| heading | line-height | `53.55px` | `37.8px` |
| heading | letter-spacing | `-1.53px` | `-1.08px` |
| nav | height | `58.2031px` | `208.672px` |
| button | width | `40px` | `28px` |
| card | width | `1160px` | `390px` |

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

### Touch Targets
- Buttons: 6px 0px 6px 10px 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:** 1 on desktop → 0 on mobile (secondary CTAs dropped on small screens).
- **Card grid: 4-up → 1-up** — cards stack as viewport narrows, becoming a vertical list on mobile.


## 7c. Visual Effects & Dynamic Behavior

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

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

> **Motion fingerprint**: non-rectangular shapes (10), scroll-triggered reveal

## 9b. Visual Tone & Photography

**Tone:** Mixed photography + illustration

A balanced mix of photographic content and vector graphics. Photos likely carry product/lifestyle context while SVG handles icons, logos, and decorative accents.

**Canonical Brand Image (OG):**
- https://www.docker.com/app/uploads/2023/06/meta-image-homepage-1110x580.png (1110×580px)
  *This is the image shown when the site is shared on social media — represents the brand visual essence.*

**Hero Image (above-fold dominant visual):**
- Aspect: 3.02:1 (ultra-wide cinematic)
- Rendered size: 1158×384px
- Alt text: "blue gradieng background round"
- *Use this aspect ratio + composition for your clone's hero — mimicking the proportion preserves the visual hierarchy.*

**Aspect Ratio Distribution:**
- Landscape (1.15–2.3): 1 (14%)
- Portrait (<0.87): 0 (0%)
- Square (0.87–1.15): 3 (43%)
- Ultra-wide (>2.3): 3 (43%)

**Media Format Mix:**
- PNG: 6 (logos, transparent UI elements, mockups)
- SVG: 3 (icons, illustrations, decorative geometry)

**Average rendered image size:** 645×243px
**Above-fold image count:** 5 / 7

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

**Clone instruction for decorative work:** Decorative details are subtle — don't over-style; the design relies on restraint.

**Imagery Guidance for clones:**
- Mix photography and illustration intentionally: photos for product/context, vectors for icons + decorative accents.
- Respect the format split — replacing JPGs with illustrations (or vice versa) will shift the brand tone.

## 10. Agent Prompt Guide

### Quick Reference
- Background: Off-White (`#f9fafb`)
- Primary text: Charcoal (`#2c333f`)
- Accent: #2560ff (`#2560ff`)
- Border: Charcoal (`#2c333f`)
- Font: Inter
- Body: 16px weight 400

### Example Component Prompts
- "Create a hero section on Off-White background (#f9fafb). Headline at 51px Inter weight 500, line-height 1.05, letter-spacing -1.53px, color #2c333f."
- "Create the primary CTA button: `#2560ff` background, `#ffffff` text, 4px border-radius, 8px 12px padding, 500 weight, Inter font."
- "Design a card on `transparent` background. Border: none. Radius: 0px. Shadow: none. Padding: 0px."
- "Build navigation: static on `#f9fafb`. Inter 16px weight 400 for links."

### Iteration Guide
1. **Canvas**: Set the light canvas to Off-White (`#f9fafb`) — every component is composited against this exact base.
2. **Typography**: All type in Inter, weight range 400–600. Never exceed 600 — heavier weights break the brand's tonal restraint.
3. **Accent**: #2560ff (`#2560ff`) is the sole interactive color. On hover → Navy Blue (`#0b214a`). Use CSS transitions, not opacity/brightness filters.
4. **Focus**: Render focus rings in Light Blue (`#c0e0fa`) — never hide focus outlines. The ring color is distinct from the accent to avoid ambiguity.
5. **Motion**: All transitions use `cubic-bezier(0.4,0,0.2,1)`. Never use linear for UI transitions — preserve the brand's easing personality.
6. **Shape**: CTAs at `0px`, cards at `0px`. Apply border-radius from the extracted scale only — don't invent intermediate values.
7. **Spacing**: Use the `--ca-space-*` token scale (6px–40px). All padding, margin, and gap values are multiples from this scale — no magic numbers.
8. **Tokens**: Import from §11 CSS Export (`--ca-*` vars). Never hardcode hex values — always reference a token so theming remains consistent.

## 11. CSS Design Tokens Raw Export

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

```css
/* Colors */
:root {
  --ca-background: #f9fafb;
  --ca-on-primary: #ffffff;
  --ca-hairline: #2c333f;
  --ca-primary: #2560ff;
  --ca-primary-hover: #003db5;
  --ca-primary-focus: #c0e0fa;
}

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

/* Spacing & Radius */
:root {
  --ca-space-xxs: 2px;
  --ca-space-xs: 6px;
  --ca-space-sm: 8px;
  --ca-space-md: 12px;
  --ca-space-base: 16px;
  --ca-space-lg: 24px;
  --ca-space-xl: 40px;
  --ca-space-2xl: 48px;
  --ca-space-3xl: 64px;
  --ca-radius-none: 0px;
  --ca-radius-xs: 4px;
  --ca-radius-sm: 8px;
  --ca-radius-md: 14px;
  --ca-radius-lg: 18px;
  --ca-radius-xl: 48px;
  --ca-radius-full: 999px;
}
```


## 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: feature-section
    tag: div
    classes: ["wp-site-blocks"]
    height: 5234px
    width: 1160px
    layout: block
    children: 1
  - section: header
    tag: header
    classes: ["site-header", "wp-block-template-part"]
    height: 97px
    width: 1160px
    layout: block
    children: 2
    bg: "rgb(249, 250, 251)"
    padding: "0px 24px"
  - section: feature-section
    tag: div
    classes: ["wp-block-group", "is-layout-flow", "wp-block-group-is-layout-flow"]
    height: 5234px
    width: 1160px
    layout: block
    children: 3
  - section: unknown
    tag: div
    classes: ["toggle-container"]
    height: 87px
    width: 1158px
    layout: flex-row justify=center
    children: 1
  - section: feature-section
    tag: div
    classes: ["wp-block-ponyo-adam", "organism"]
    height: 385px
    width: 1160px
    layout: flex-column justify=normal
    children: 1
    bg: "rgb(249, 250, 251)"
  - section: feature-section
    tag: main
    classes: ["wp-block-group", "is-layout-flow", "wp-block-group-is-layout-flow"]
    height: 4447px
    width: 1160px
    layout: block
    children: 1
  - section: navigation
    tag: div
    classes: ["mega-menu-container", "wp-block-navigation__submenu-container"]
    height: 408px
    width: 1158px
    layout: block
    children: 1
    bg: "rgb(249, 250, 251)"
  - section: navigation
    tag: div
    classes: ["mega-menu-container", "wp-block-navigation__submenu-container"]
    height: 522px
    width: 1158px
    layout: block
    children: 2
    bg: "rgb(249, 250, 251)"
  - section: navigation
    tag: div
    classes: ["mega-menu-container", "wp-block-navigation__submenu-container"]
    height: 544px
    width: 1158px
    layout: block
    children: 1
    bg: "rgb(249, 250, 251)"
  - section: feature-section
    tag: div
    classes: ["container"]
    height: 384px
    width: 1158px
    layout: flex-row justify=normal
    children: 2
    vertical-padding: ~48px
  - section: content-section
    tag: div
    classes: ["container"]
    height: 288px
    width: 584px
    layout: block
    children: 6
  - section: feature-section
    tag: div
    classes: ["container"]
    height: 275px
    width: 438px
    layout: block
    children: 1
  - section: feature-section
    tag: div
    classes: ["container", "fade-in", "visible"]
    height: 275px
    width: 438px
    layout: flex-column justify=normal
    children: 3
  - section: pricing
    tag: div
    classes: ["container", "fade-in", "visible"]
    height: 292px
    width: 1158px
    layout: grid: 4-col gap=normal
    children: 4
  - section: content-section
    tag: div
    classes: ["wp-block-ponyo-matthew", "organism"]
    height: 386px
    width: 1160px
    layout: flex-column justify=normal
    children: 1
    bg: "rgb(249, 250, 251)"
    padding: "0px 0px 1px"
  - section: content-section
    tag: div
    classes: ["container"]
    height: 384px
    width: 1158px
    layout: block
    children: 2
    vertical-padding: ~48px
  - section: card-grid
    tag: div
    classes: ["container"]
    height: 290px
    width: 1078px
    layout: grid: 4-col gap=20px
    children: 3
  - section: logo-strip
    tag: div
    classes: ["wp-block-ponyo-victor", "organism"]
    height: 119px
    width: 1160px
    layout: flex-column justify=normal
    children: 1
    bg: "rgb(249, 250, 251)"
  - section: logo-strip
    tag: div
    classes: ["container", "ready"]
    height: 119px
    width: 1158px
    layout: block
    children: 1
  - section: feature-section
    tag: div
    classes: ["wp-block-ponyo-layout-default"]
    height: 714px
    width: 1160px
    layout: flex-column justify=normal
    children: 1
    bg: "rgb(255, 255, 255)"
  - section: feature-section
    tag: div
    classes: ["container"]
    height: 713px
    width: 1158px
    layout: grid: 1-col gap=normal
    children: 1
  - section: feature-section
    tag: div
    classes: ["column-container"]
    height: 713px
    width: 1158px
    layout: block
    children: 1
    vertical-padding: ~24px
  - section: feature-section
    tag: div
    classes: ["container", "fade-in", "visible"]
    height: 665px
    width: 1078px
    layout: flex-column justify=normal
    children: 7
  - section: feature-section
    tag: div
    classes: ["wp-block-ponyo-matthew", "organism"]
    height: 1145px
    width: 1160px
    layout: flex-column justify=normal
    children: 1
    bg: "rgb(249, 250, 251)"
    vertical-padding: ~48px
    padding: "48px 40px"
  - section: feature-section
    tag: div
    classes: ["container"]
    height: 1048px
    width: 1078px
    layout: block
    children: 2
```

**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:
    - "Invisible to developers. Total control for security."
    - "From the company that secured the developer laptop for the enterprise."
    - "87%"
    - "Build better, together"
    - "Products"
  sub-headings:
    - "Your laptop. One command."
    - "Your console. Fourteen checks."
    - "Isolation you can trust"
  ctas:
    - "Get started"
    - "Buy now"
    - "Sign In"
    - "Get Started"
    - "Learn more"
    - "Download Docker Desktop"
  navigation:
    - "Products"
    - "Support"
    - "Pricing"
    - "Get started"
    - "Buy now"
    - "Contact sales"
    - "Blog"
    - "Docs"
    - "Sign In"
    - "Get Started"
  footer-links:
    - "Products Overview"
```

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


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

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

```yaml
assets:
  logo:
    count: 1
    avg-ratio: 3.39
    common-aspect: "~16:6 banner"
  hero:
    count: 3
    avg-ratio: 4.46
    common-aspect: "~16:6 banner"
    sample-alts:
      - "blue gradieng background round"
      - "gray"
  thumbnail:
    count: 3
    avg-ratio: 1.00
    common-aspect: "~1:1 square"
    sample-alts:
      - "home"
      - "home governance"
      - "home hardened images"
```

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


## 16. Component HTML Templates

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

### Button (primary action)
```html
<button class="btn btn-primary">
  Action
</button>
```
_Source pattern detected: padding `0px` · radius `0px` · weight `500`_

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

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


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

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

**By purpose:** **nav** 5 · **cta** 3 · **auth** 1 · **product** 22 · **pricing** 5 · **docs** 4 · **blog** 4 · **social** 5 · **footer** 9 · **other** 2

**Primary actions (conversion path):**
- Primary call-to-action — "Get started" (the conversion path) → `https://app.docker.com/signup`
- Account access — "Sign In" (login/signup) → `https://app.docker.com/login`
- Primary call-to-action — "Get Started" (the conversion path) → `https://www.docker.com/get-started/`
- Primary call-to-action — "Getting Started" (the conversion path) → `https://www.docker.com/get-started/`

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

*Resources* — medium confidence, 4 items:

| Title | Featured image | Link |
|---|---|---|
| Insights on the state of AI agents from 800+ | — | https://www.docker.com/resources/the-state-of-agentic-ai-white-paper/ |
| Docker Hardened Images Minimal, signed, cont | `blue-gradieng-background-round-2320x` (ar 2.58) | https://www.docker.com/resources/containers-are-the-new-supply-chain-attack-vector-on-demand-webinar/ |
| Trainings | — | https://www.docker.com/resources/trainings |
| What is a Container | — | https://www.docker.com/resources/what-container/ |

*Billing* — medium confidence, 3 items:

| Title | Featured image | Link |
|---|---|---|
| Buy now | `incred-bgs-2048x601.png` (ar 3.42) | https://app.docker.com/billing/_/subscribe/?cycle=annual&quantity=1&tier=pro&ref=wwwPricing&refAction=wwwPricingProClicked |
| Buy now | `incred-bgs-2048x601.png` (ar 3.42) | https://app.docker.com/billing/_/subscribe/?cycle=annual&quantity=1&tier=team&ref=wwwPricing&refAction=wwwPricingTeamClicked |
| Buy now | `incred-bgs-2048x601.png` (ar 3.42) | https://app.docker.com/billing/_/subscribe/?quantity=1&tier=business&ref=wwwPricing&refAction=wwwPricingBusinessClicked |

*Blog* — medium confidence, 3 items:

| Title | Featured image | Link |
|---|---|---|
| Docker Sandboxes MicroVM isolation for every | `blue-gradieng-background-round-2320x` (ar 2.58) | https://www.docker.com/blog/why-microvms-the-architecture-behind-docker-sandboxes/ |
| Docker AI Governance One console for sandbox | `blue-gradieng-background-round-2320x` (ar 2.58) | https://www.docker.com/blog/docker-ai-governance-unlock-agent-autonomy-safely/ |
| .cls-1{fill:var(--iconColor, #1d63ed);} | — | https://www.docker.com/blog/feed |

**Signals:** 24/60 links carry a featured image · dominant link roles: footer-link (37), content-card (12), navigation (5).


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

| Category | Score | Max | Detail |
|----------|-------|-----|--------|
| Colors & Palette | 25 | 25 | 23 named colors |
| Typography | 20 | 20 | 9 roles defined |
| Components | 20 | 20 | 5 specs extracted |
| Motion & Interaction | 12 | 15 | Keyframes |
| CSS Custom Properties | 10 | 10 | 242 vars |
| Responsive Breakpoints | 5 | 5 | 7 breakpoints |
| Variable Fonts | 0 | 5 | None detected |

## 12. Known Gaps & Confidence

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

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

- **Licensed web fonts (IBM Plex Mono, Inter, Repro)** — detected but not downloaded. Substitute with your licensed copy or a close fallback (see Typography section for metrics).
- **1 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.

*✅ No critical extraction gaps detected — high-confidence reproduction expected.*

### Per-section confidence

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

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

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

### Font Loading

10 font file(s) captured (1762KB total). When running `prism add`, fonts are saved to `extractions/docker.com/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('truetype'); */
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  /* src: url('/fonts/IBM-Plex-Mono.woff2') format('truetype'); */
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  /* src: url('/fonts/IBM-Plex-Mono.woff2') format('truetype'); */
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  /* src: url('/fonts/IBM-Plex-Mono.woff2') format('truetype'); */
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  /* src: url('/fonts/IBM-Plex-Mono.woff2') format('truetype'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  /* src: url('/fonts/IBM-Plex-Mono.woff2') format('truetype'); */
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  /* src: url('/fonts/IBM-Plex-Mono.woff2') format('truetype'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  /* src: url('/fonts/IBM-Plex-Mono.woff2') format('truetype'); */
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  /* src: url('/fonts/IBM-Plex-Mono.woff2') format('truetype'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  /* src: url('/fonts/IBM-Plex-Mono.woff2') format('truetype'); */
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  /* src: url('/fonts/IBM-Plex-Mono.woff2') format('truetype'); */
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  /* src: url('/fonts/IBM-Plex-Mono.woff2') format('truetype'); */
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  /* src: url('/fonts/IBM-Plex-Mono.woff2') format('truetype'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  /* src: url('/fonts/IBM-Plex-Mono.woff2') format('truetype'); */
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  /* src: url('/fonts/Inter.woff2') format('truetype'); */
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  /* src: url('/fonts/Inter.woff2') format('truetype'); */
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  /* src: url('/fonts/Inter.woff2') format('truetype'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  /* src: url('/fonts/Inter.woff2') format('truetype'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  /* src: url('/fonts/Inter.woff2') format('truetype'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  /* src: url('/fonts/Inter.woff2') format('truetype'); */
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  /* src: url('/fonts/Inter.woff2') format('truetype'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  /* src: url('/fonts/Inter.woff2') format('truetype'); */
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  /* src: url('/fonts/Inter.woff2') format('truetype'); */
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Repro';
  /* src: url('/fonts/Repro.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Repro';
  /* src: url('/fonts/Repro.woff2') format('woff2'); */
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Repro';
  /* src: url('/fonts/Repro.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Repro';
  /* src: url('/fonts/Repro.woff2') format('woff2'); */
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Repro';
  /* src: url('/fonts/Repro.woff2') format('woff2'); */
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Repro';
  /* src: url('/fonts/Repro.woff2') format('woff2'); */
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Repro';
  /* src: url('/fonts/Repro.woff2') format('woff2'); */
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Repro';
  /* src: url('/fonts/Repro.woff2') format('woff2'); */
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
```

### Keyframe Animations (Intercepted from CSS)

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

```
@keyframes bounce { ... }
@keyframes bounceOut { ... }
@keyframes widthIn { ... }
@keyframes widthOut { ... }
@keyframes onetrust-fade-in { ... }
@keyframes spinner-spin { ... }
@keyframes overlay-spin { ... }
```

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

```css
@keyframes bounce{0%{transform:scale(1)}40%{transform:scale(1.09)}70%{transform:scale(1.08)}90%{transform:scale(1.1)}
@keyframes bounceOut{0%{transform:scale(1.1)}40%{transform:scale(.98)}90%{transform:scale(1.01)}
@keyframes widthIn{0%{width:0}
@keyframes widthOut{0%{width:100%}
@keyframes onetrust-fade-in{0%{opacity:0}100%{opacity:1}}
@-webkit-keyframes spinner-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}10%{-webkit-transform:rotate(135deg);transform:rotate(135deg)}25%{-webkit-transform:rotate(245deg);transform:rotate(245deg)}60%{-webkit-transform:rotate(700deg);transform:rotate(700deg)}75%{-webkit-transform:rotate(810deg);transform:rotate(810deg)}
@-webkit-keyframes overlay-spin{0%{opacity:1;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
```
</details>

### Brand Gradient Palette

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

```css
/* Gradient 1 */
background: linear-gradient(160deg,#fff,#f0f4ff 25%,#f0f4ff 75%,#fff);

```

### Hover State CSS (Intercepted)

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

```css
.wp-block-ponyo-button:hover{text-decoration:none}

.wp-block-ponyo-button.button-style__primary:hover{--backgroundColor:var(--buttonPrimaryHoverBackground);--borderColor:var(--buttonPrimaryHoverBorder);--copyColor:var(--buttonPrimaryHoverText)}

.wp-block-ponyo-button.button-style__secondary:hover{--backgroundColor:var(--buttonSecondaryHoverBackground);--borderColor:var(--buttonSecondaryHoverBorder);--copyColor:var(--buttonSecondaryHoverText)}

.wp-block-ponyo-button.button-style__tertiary:hover{--backgroundColor:var(--buttonTertiaryHoverBackground);--borderColor:var(--buttonTertiaryHoverBorder);--copyColor:var(--buttonTertiaryHoverText)}

.wp-block-ponyo-button.button-style__cta:hover{--backgroundColor:transparent;--borderColor:var(--buttonCtaHoverBorder);--copyColor:var(--buttonCtaHoverText)}

.wp-block-ponyo-button.button-style__cta:hover svg.arrow{transform:translateX(.125em)}

.wp-block-ponyo-carlos:active,.wp-block-ponyo-carlos:hover{background:var(--cardBackgroundHover)}

.wp-block-ponyo-carlos:hover{text-decoration:none}

.gform_button[type=submit]:hover,form.mktoForm .mktoButton:hover{--backgroundColor:var(--buttonPrimaryHoverBackground);--borderColor:var(--buttonPrimaryHoverBorder);--copyColor:var(--buttonPrimaryHoverText)}

a:hover{text-decoration:underline}
```

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

### Real Responsive Breakpoints
**20 breakpoints** read from the live `@media` rules (not guessed) — 14 most relevant:
`400px` · `425px` · `426px` · `476px` · `500px` · `530px` · `550px` · `600px` · `640px` · `767px` · `768px` · `769px` · `890px` · `896px` … (+6 more)

### Measured Design Scale
**Type scale by usage** (× = paint count): `16px`×719 · `14px`×363 · `12px`×108 · `15px`×47 · `13px`×44 · `12.5px`×27 · `20px`×22 · `32px`×10

**Radius scale** (× = paint count): `4px`×17 · `8px`×12 · `50%`×12 · `999px`×8 · `18px`×7 · `100px`×6 · `14px`×3 · `10px`×3

**Weights** (× = paint count): `400`×1095 · `500`×281 · `600`×35 · `700`×12

**Layout gaps** (× = paint count): `8px`×64 · `6px 12px`×30 · `12px`×26 · `10px`×25 · `6px`×11 · `20px`×5 · `3.5px`×3 · `24px`×3

**Elevation (real shadows)**:
```css
rgb(192, 224, 250) 0px 0px 1px 1px inset
rgba(15, 23, 42, 0.03) 0px 1px 2px 0px
rgba(0, 0, 0, 0.14) 0px 50px 40px 0px
rgb(67, 76, 95) 0px 0px 1px 1px inset
```

### 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 { color:var(--copyColor) }
body { font-family:Inter,Helvetica,Arial,sans-serif; font-size:16px }
body { background-color:var(--backgroundColor) }
header { background-color:var(--headerBackgroundColor) }
h1 { font-family:Repro,Helvetica,Arial,sans-serif; font-size:2.5rem; font-weight:500 }
h1 { color:var(--headlineColor) }
h1 { font-size:clamp(36px, 4vw, 51px); font-weight:500 }
h2 { font-size:3rem }
h2 { font-family:Repro,Helvetica,Arial,sans-serif; font-weight:500 }
h2 { color:var(--copyColor); font-family:Repro,Helvetica,Arial,sans-serif; font-size:3rem; font-weight:500 }
h2 { font-size:1.5rem }
button { font-family:inherit; font-size:100% }
```

> 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://docker.com | 2026-06-11T06:09:06.873Z*
*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.*