airtable.com

DESIGN.md

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

---
version: alpha
name: airtable.com
description: "Light product system built on #ffffff with #ffffff as the primary CTA accent. Type anchored in Haas at 32px / weight 400. Extracted automatically from https://airtable.com/ — rendered styles via getComputedStyle() + CSS custom properties (token-only values may not be painted)."
narrative: |
  airtable.com is built on a pure-white canvas (rgb(255, 255, 255)).
  The system uses rgb(255, 255, 255) as the singular interactive color.
  Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside Haas as the primary typeface.
  A restrained elevation system (3 distinct shadows) — shadows reserved for the few elements that must lift off the page.
  Motion is a first-class concern — 41 keyframe animations plus transition-driven interactions.

colors:
  background: "#ffffff"
  surface-1: "#f0f6ff"
  surface-2: "#f8fafc"
  ink: "#333333"
  ink-subtle: "#181d26"
  primary: "#ffffff"
  on-primary: "#111111"
  primary-hover: "#ffffff"
  hairline: "#333333"
  primary-focus: "rgba(7, 12, 20, 0.82)"

typography:
  display-xl:
    fontFamily: "Haas, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0
  display-md:
    fontFamily: "Haas, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.35
    letterSpacing: 0.12px
  body:
    fontFamily: "Haas, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0
  body-sm:
    fontFamily: "Haas, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0
  button:
    fontFamily: "Haas, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 0.9
    letterSpacing: 0.2px

rounded:
  none: 0px
  xs: 2px
  sm: 6px
  md: 12px
  lg: 20px
  xl: 32px
  pill: 999px

spacing:
  xxs: 2px
  xs: 4px
  sm: 16px
  md: 20px
  lg: 32px
  xl: 40px
  xxl: 64px

components:
  button-light--invert:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.ink-subtle}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 16px 24px
  cta-banner-full-width-cta:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.hairline}"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    padding: 48px 0px
  status-badge-neutral-dark:
    backgroundColor: "transparent"
    textColor: "{colors.primary-hover}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  status-badge-tinted:
    backgroundColor: "#912e1f"
    textColor: "#9297a0"
    typography: "{typography.button}"
    rounded: "{rounded.xs}"
  status-badge-neutral-light:
    backgroundColor: "#b6e995"
    textColor: "#9297a0"
    typography: "{typography.button}"
    rounded: "{rounded.xs}"

extracted_at: "2026-06-11T04:59:38.492Z"
completeness: 87
scoreVersion: "v2"

---

# Design System — airtable.com
> Extracted automatically by Prism from https://airtable.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**: medium  |  **Aesthetic**: soft-rounded

| Dimension | Value | Signal |
|---|---|---|
| Canvas | neutral | `#ffffff` |
| Type posture | sans-led (Haas Groot Disp) | "Start building with Airtable" |
| Color assertion | dual-accent | #ffffff |
| Whitespace | moderate | section rhythm 48px |
| Interaction | expressive | 41 keyframes, 3 transitions |
| Radius language | soft-pill | from token scale |

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

> **🤖 TL;DR for AI agents** (read this first — saves you scanning the full doc):
>
> - **Canvas**: `rgb(255, 255, 255)` is the page background. Every component composits against this.
> - **Accent**: `rgb(255, 255, 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: 32px.
> - **Default radius**: 6px on buttons/inputs. Pills (`9999px`) only for icon-buttons or status chips.
>
> **Before generating UI**: import this DESIGN.md, scan §2 (Color Palette) + §4 (Components) + §10 (Agent Guide). Skip §11–12 unless extending.

## 1. Visual Theme & Atmosphere

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

airtable.com uses a pure-white canvas (`#ffffff`), letting typography, color and imagery carry the visual weight. 

Headlines are set in **Haas**, a sans-serif display face (the dominant type signature, e.g. "Start building with Airtable" at 32px). Body text is set in **Haas Groot Disp**. 

Body text reads in Charcoal (`#333333`) — softened from pure black, a small but deliberate detail that lowers reading friction. **White** (`#ffffff`) provides interactive distinction without visual aggression. Elevation comes from a small, deliberate set of shadows (3 distinct), each a multi-layer stack — several blurred layers at varying offsets — used sparingly rather than across the whole UI. 
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: White (`#ffffff`)
- Primary typeface: Haas
- Primary text: Charcoal (`#333333`)
- Accent: White (`#ffffff`)
- Shadow system: 3 distinct elevation levels
- Custom fonts loaded: Haas, Haas Groot Disp, ATSeasonSans, haasGrot, haasGrot Fallback, haasGrotThin, haasGrotThin Fallback, Source Sans 3

## 2. Color Palette & Roles

### Background & Surface
- **White** (`#ffffff`): Page background (primary)
- **Ghost White** (`#f0f6ff`): Surface / elevated background
- **Off-White** (`#f8fafc`): Surface / elevated background
- **Whitesmoke** (`#e0e2e6`): Surface / elevated background
- **Warm Cream** (`#faf5e8`): Surface / elevated background

### Text & Content
- **Charcoal** (`#333333`): Primary body text
- **Pure Black** (`#000000`): Secondary text
- **Near Black** (`#181d26`): Secondary text
- **Translucent Jet Black (82%)** (`rgba(7, 12, 20, 0.82)`): Secondary text
- **Translucent Deep Navy (69%)** (`rgba(4, 14, 32, 0.69)`): Secondary text

### Accent & Interactive
- **M Tricolor Blue** (`#1b61c9`): Interactive / accent
- **#dd04a8** (`#dd04a8`): Interactive / accent
- **Plum** (`#f797ef`): Interactive / accent
- **#39caff** (`#39caff`): Interactive / accent
- **Violet** (`#7c37ef`): Interactive / accent
- **Bright Orange** (`#f5620c`): Interactive / accent
- **Teal** (`#0d7f78`): Interactive / accent

### Border & Divider
- **Light Grey** (`#cccccc`): Borders / dividers
- **Silver** (`#c0c6d1`): Borders / dividers

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

- `#949494` — Grey
- `#444444` — Charcoal
- `#fcb42a` — #fcb42a
- `#458fff` — Ring Blue
- `#0dbdb4` — #0dbdb4
- `#9b67f0` — Amethyst
- `#fc4777` — Warm Rose
- `#9297a0` — Cool Gray
- `#36c5f0` — #36c5f0
- `#2eb67d` — Emerald
- `#ecb22e` — #ecb22e
- `#e01e5a` — Ruby
- `#4185f3` — Ring Blue
- `#1767d1` — M Tricolor Blue
- `#e94235` — Vermillion
- `#30a753` — Success Green
- `#f9bc00` — Amber
- `#0f8038` — Forest Green
- `#00a1e0` — Sky Bright
- `#2684ff` — Ring Blue
- `#03363d` — Navy Blue
- `#0076a8` — #0076a8
- `#41454d` — Dark Gray
- `#39bf45` — Success Green
- `#0ab2fa` — Sky Bright
- `#e848c0` — #e848c0
- `#01ddd5` — #01ddd5
- `#097a76` — Teal
- `rgba(1, 20, 53, 0.12)` — Translucent Deep Navy (12%)
- `#333840` — Charcoal
- `#912e1f` — #912e1f
- `#b6e995` — #b6e995
- *…+15 more in `raw-css.json` (`desktop.allColors`).*

### CSS Custom Properties (Design Tokens)

**Shadow Token**
- `--tw-inset-shadow-alpha`: `100%`
- `--tw-ring-shadow`: `0 0 #0000`
- `--tw-drop-shadow-alpha`: `100%`
- `--tw-inset-ring-shadow`: `0 0 #0000`

**Font Weight Token**
- `--font-weight-bold`: `700`
- `--font-weight-semibold`: `600`
- `--font-weight-medium`: `500`
- `--font-weight-normal`: `400`

**Motion Token**
- `--default-transition-duration`: `.15s`
- `--default-transition-timing-function`: `cubic-bezier(.4, 0, .2, 1)`

**Border Radius Token**
- `--radius-lg`: `.5rem`
- `--radius-xs`: `.125rem`

**Spacing Token**
- `--spacing`: `.25rem`

**Other tokens**
- `--theme_button-text-secondary-active`: `#070c14d1`
- `--theme_spotlight-text-strong`: `#fff`
- `--theme_button-text-secondary-focus`: `#040e20b0`
- `--text-lg`: `1.125rem`
- `--theme_button-text-secondary-loading`: `#040e20b0`
- `--color-blue-700`: `lab(36.9089% 35.0961 -85.6872)`
- `--theme_button-text-primary-active`: `#fff`
- `--theme_anchor-link-primary-hover`: `#1b61c9cc`

## 3. Typography Rules

### Font Families
- **Primary**: `Haas Groot Disp`
- **Secondary**: `Haas`
- **Font 3**: `ATSeasonSans`
- **Font 4**: `haasGrot`
- **Font 5**: `haasGrot Fallback`

### Custom Fonts Loaded
- **Haas** weight 400 (normal)
- **Haas** weight 500 (normal)
- **Haas** weight 700 (normal)
- **Haas Groot Disp** weight 500 (normal)
- **Haas Groot Disp** weight 600 (normal)
- **Haas Groot Disp** weight 700 (normal)
- **Haas Groot Disp** weight 900 (normal)
- **ATSeasonSans** weight 100 900 (normal)
- **haasGrot** weight 300 (normal)
- **haasGrot** weight 400 (normal)
- **haasGrot** weight 500 (normal)
- **haasGrot** weight 700 (normal)
- **haasGrot** weight 900 (normal)
- **haasGrot Fallback** weight normal (normal)
- **haasGrotThin** weight 400 (normal)
- **haasGrotThin Fallback** weight normal (normal)
- **Source Sans 3** weight normal (normal)

### Typography Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | Haas | 40px | 400 | 1.2 | normal | Main headline (h1) |
| Sub-heading | Haas | 24px | 400 | 1.35 | 0.12px | Third-level heading (h3) |
| Card Title | Haas Groot Disp | 20px | 400 | 1.5 | normal | Card headings |
| Button Large | Haas | 20px | 500 | 0.9 | 0.2px | Button label (20px) |
| Link Large | Haas | 20px | 400 | 1.25 | normal | Link (20px) — Decoration: underline |
| Button Large | Haas | 16px | 500 | 1.3 | normal | Button label (16px) |
| Button | Haas | 14px | 400 | 1.25 | normal | Button label (14px) |
| Link | Haas | 14px | 500 | 1.3 | 0.14px | Link (14px) — Decoration: none |

### Font Weight Scale

CSS custom properties define 4 explicit weight steps:
- `--font-weight-normal`: `400` — Regular
- `--font-weight-medium`: `500` — Medium
- `--font-weight-semibold`: `600` — SemiBold
- `--font-weight-bold`: `700` — Bold

### Full Font Size Scale

Sizes detected in the design (descending): `48px`, `40px`, `32px`, `24px`, `20px`, `18px`, `16px`, `14px`

> 3 size(s) detected outside the sampled hierarchy (48px, 32px, 18px). 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

**Light / Invert**
- Background: `#ffffff` `{colors.primary-hover}`
- Text: `#181d26` `{colors.ink-subtle}`
- Padding: 16px 24px
- Radius: 12px
- Border: 1px solid rgb(255, 255, 255)
- Font: 16px weight 500
- Use: Bright CTA on dark sections
- Focus: outline: `rgba(7, 12, 20, 0.82) none 0px`

### CTA Banners

**Full-width CTA**
- Background: `#ffffff` `{colors.primary-hover}`
- Text: `#333333` `{colors.hairline}`
- Padding: 48px 0px
- Radius: 0px
- Font: 20px weight 400
- Use: Full-width conversion strip with headline + button
- Focus: outline: `rgba(7, 12, 20, 0.82) none 0px`

### Status Badges

**Neutral Dark**
- Background: `transparent`
- Text: `#ffffff` `{colors.primary-hover}`
- Padding: 4px 12px
- Radius: 999px
- Font: 14px weight 600
- Use: Status indicator, label, pill

**Tinted**
- Background: `#912e1f`
- Text: `#9297a0`
- Padding: 0px
- Radius: 2px
- Font: 18px weight 400
- Use: Status indicator, label, pill

**Neutral Light**
- Background: `#b6e995`
- Text: `#9297a0`
- Padding: 0px
- Radius: 2px
- Font: 18px weight 400
- Use: Status indicator, label, pill


## 4b. Component Behaviors (State Matrix)

### Interaction State Narrative

- **FooterLink**:
  - **hover:** text #181d26 → #333333

*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: "rgba(7, 12, 20, 0.82)"
    focus:
      bg: "transparent"
      fg: "inherit"
  link:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(24, 29, 38)"
  card:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(51, 51, 51)"
  navLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(24, 29, 38)"
  footerLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(24, 29, 38)"
      border: "2px solid rgba(0, 0, 0, 0)"
    hover:
      bg: "transparent"
      fg: "rgb(51, 51, 51)"
```

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


## 4c. Component Vocabulary (Closed System)

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

### Buttons
- **1 shape(s)** in this system: `Light / Invert`
- **DO NOT introduce new buttons variants** without justification

### CTA Banners
- **1 shape(s)** in this system: `Full-width CTA`
- **DO NOT introduce new cta banners variants** without justification

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

## 5. Layout Principles

### Layout Type
**hero + sections**

### Grid
Single column, centered content

### Max Width
1200px

### Spacing System
Compact spacing — information density prioritized

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

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

### Shape Language

| Component | Border Radius |
|-----------|---------------|
| Buttons | `12px` |
| CTA Banners | `0px` |
| Status Badges | `999px` |
| Page Body | `0px` |
| Navigation | `0px` |

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

**Full Radius Spectrum**: 0px, 2px, 6px, 10px, 12px, 16px, 20px, 24px (from `allBorderRadii` scan)


## 5b. Spacing Rhythm Names

**Measured section padding**: bands use ~60px internal vertical padding (up to 92px) — **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** | `32px` | Within a section, between content groups |
| **card** | `20px` | Card padding, list-item spacing |
| **compact** | `16px` | Form fields, tight clusters, badge padding |
| **micro** | `4px` | Icon-text gap, tag inner padding |

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

## 5c. Widget & Structure Library

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

**5/8 structural patterns detected.**

### Hero Pattern

- **Composition:** centered — Centered composition — heading + subheading + CTAs stacked vertically, content centered horizontally. Common for SaaS marketing pages.
- **Viewport coverage:** 291px tall (not full-viewport)
- **Heading:** "All your teams, all their workflows—connected in one workspace" — 40px center-aligned
- **Subheading:** "Build AI-powered workflows that unify data, maximize collaboration, and set your teams up for long-term success. No code required."
- **CTAs:** 2 (primary: "Get started for free")
- **Clone instruction:** Reproduce the **centered** 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:** fixed (stays visible during scroll)
- **Layout:** logo-left-links-left — Logo and links both on the left (CTAs typically right)
- **Height:** 121px
- **Logo:** ✓ present
- **Nav links:** 7 primary items
- **CTAs in nav:** 2
- **Clone instruction:** Build a fixed logo left links left navigation. Reserve 2 slots for primary CTAs.

### Card Grid Pattern

- **Card count:** 4 cards detected
- **Columns (desktop):** 1-up grid
- **Card dimensions:** 1071×689px (aspect 1.55:1)
- **Gap:** 48px between cards
- **Content:** ✓ image + CTA
- **Image position:** top
- **Clone instruction:** Build a 1-column grid (desktop) with cards at ~1.55:1 aspect ratio. Each card has an image at the top.

### CTA Banner Pattern

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

### Footer Pattern

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

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Page background, content blocks |
| Layered (Level 1) | <br>`rgba(15, 48, 106, 0.05) 0px 0px 20px 0px` | Cards, elevated surfaces |
| Inset (Level 2) | <br>`rgba(0, 0, 0, 0.32) 0px 0px 1px 0px`,<br>`rgba(0, 0, 0, 0.08) 0px 0px 2px 0px`,<br>`rgba(45, 127, 249, 0.28) 0px 1px 3px 0px`,<br>`rgba(0, 0, 0, 0.06) 0px 0px 0px 0.5px inset` | Buttons, pressed-state elements |
| Inset (Level 3) | <br>`rgba(0, 0, 0, 0.32) 0px 0px 1px 0px`,<br>`rgba(0, 0, 0, 0.08) 0px 0px 2px 0px`,<br>`rgba(0, 0, 0, 0.08) 0px 1px 3px 0px`,<br>`rgba(1, 20, 53, 0.12) 0px 0px 0px 1px inset` | Buttons, pressed-state elements |

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

## 7. Motion & Interaction

### Easing System

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

### Duration Scale

| CSS Variable | Value | Tier |
|--------------|-------|------|
| `--default-transition-duration` | `.15s` | Fast |

### Copy-Paste Transition Snippets

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

**All Props**
```css
transition: 0.2s linear;
```

### Keyframe Animation Catalog

| Animation Name | Type | Animated Props | Use Hint |
|----------------|------|----------------|----------|
| `BkButton-module-scss-module__dZ-VXq__...` | Custom | background-position-x | UI transition |
| `BkButton-module-scss-module__dZ-VXq__...` | Custom | background-position-x | UI transition |
| `BkLoadingAnimation-module-scss-module...` | Fade | opacity | Loading indicator |
| `index-module-scss-module__KcLkaG__fad...` | Fade | opacity | Element entrance |
| `MarketoSubmitButton-module-scss-modul...` | Fade | opacity | Attention / status |
| `baymax-module__82pTNW__progress` | Custom | width | UI transition |
| `baymax-module__82pTNW__spinScale` | Rotate / Spin | transform | Loading indicator |
| `baymax-module__82pTNW__swayHorizontal` | Slide | transform | UI transition |
| `baymax-module__82pTNW__spin` | Rotate / Spin | transform | Loading indicator |
| `baymax-module__82pTNW__spinReverse` | Rotate / Spin | transform | Loading indicator |
| `baymax-module__82pTNW__highlight` | Color Pulse | background-color, border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, box-shadow | UI transition |
| `baymax-module__82pTNW__highlightYellow` | Color Pulse | background-color | UI transition |
| `baymax-module__82pTNW__spacey` | Slide | transform | UI transition |
| `baymax-module__82pTNW__bounceIn` | Fade + Move | animation-timing-function, opacity, transform | Playful feedback |
| `baymax-module__82pTNW__opacityFadeIn` | Fade | opacity | Element entrance |
| `baymax-module__82pTNW__opacityFadeOut` | Fade | opacity | Element exit |
| `baymax-module__82pTNW__fadeUpIn` | Fade + Move | opacity, transform | UI transition |
| `baymax-module__82pTNW__opacityPulse` | Fade | opacity | Attention / status |
| `baymax-module__82pTNW__pulseBlue` | Custom | box-shadow | Attention / status |
| `baymax-module__82pTNW__pulseYellow` | Custom | box-shadow | Attention / status |

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

### Motion Fingerprint

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

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

## 8. Do's and Don'ts

### Do
- Use Charcoal (`#333333`) for text — not pure black, it's warmer and more readable
- Use Haas Groot Disp as the primary typeface — it defines the brand personality
- Use the extracted shadow patterns for elevation — they are tuned to match the brand palette
- Use full-pill radius (9999px) only for specific elements (avatars, pills, toggles)
- Use White (`#ffffff`) as the primary accent — it's the brand's signature interactive color
- Use 12px border-radius on buttons — the standard corner rounding for interactive elements
- Keep navigation fixed to the top — the design uses a persistent navigation pattern
- Respect the 4px–40px spacing range — the design uses a wide scale for visual breathing room
- Include exactly 2 CTAs in the hero (primary + secondary) — this design pattern is multi-action, not single-purpose
- Make the navigation fixed — it stays visible during scroll, signaling content depth
- Each card includes a top image — imagery is part of the card identity, not optional
- Repeat the primary CTA across 2 banner sections — conversion paths are layered, not single

### Don't
- 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 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


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

## 9. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | 400px | Single column, compact spacing |
| Mobile | 450px | Single column, compact spacing |
| Mobile Large | 642px | Expanded mobile layout |
| Mobile Large | 720px | Expanded mobile layout |
| Tablet | 768px | Multi-column grids begin |
| Tablet | 1024px | Multi-column grids begin |
| Large Desktop | 1440px | Maximum content width |

### Token Diff — Desktop vs Mobile

| Element | Property | Desktop | Mobile |
|---------|----------|---------|--------|
| heading | font-size | `40px` | `32px` |
| heading | line-height | `48px` | `40px` |
| nav | height | `120.984px` | `135.688px` |
| hero | height | `480.781px` | `561.859px` |
| card | width | `1440px` | `390px` |

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

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

### Collapsing Narrative

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

- **Nav CTAs reduced** on mobile (2 → 1) — the design prioritizes content over conversion buttons at small sizes.
- **Footer columns collapse:** 2 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.*

- **Glassmorphism** — 1 frosted/blur layer(s) (e.g. `blur(6px)`).
- **Clip-path shapes** — 8 non-rectangular cut(s).
- **Blend modes** — 1 mix-blend layer(s).
- **Scroll-driven reveals** — content animates in on scroll (CSS scroll-timeline). Build fade/translate reveal-on-scroll for below-fold bands.
- **CSS-variable animations** (2) — animated custom properties.

> **Motion fingerprint**: glassmorphism (1 layers), non-rectangular shapes (10), blend modes, CSS scroll-driven animations

## 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.airtable.com/images/airtable-seo.jpg
  *This is the image shown when the site is shared on social media — represents the brand visual essence.*

**Hero Image (above-fold dominant visual):**
- Aspect: 0.73:1 (portrait / vertical)
- Rendered size: 351×480px
- Alt text: "2"
- *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): 10 (19%)
- Portrait (<0.87): 4 (8%)
- Square (0.87–1.15): 2 (4%)
- Ultra-wide (>2.3): 36 (69%)

**Media Format Mix:**
- WebP: 5 (optimized photo/illustration hybrid)
- PNG: 5 (logos, transparent UI elements, mockups)
- GIF: 1 (animated content)

**Average rendered image size:** 246×140px
**Above-fold image count:** 39 / 52

**Decorative Patterns Detected:**
- 5 multi-stop linear gradients (mesh-like, 3+ color stops) — the brand leans on rich color transitions for visual depth
- **Glassmorphism** detected (`backdrop-filter: blur`) — layered transparent surfaces with blur, modern OS-like aesthetic

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

**Imagery Guidance for clones:**
- 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: White (`#ffffff`)
- Primary text: Charcoal (`#333333`)
- Accent: White (`#ffffff`)
- Border: Charcoal (`#333333`)
- Font: Haas Groot Disp
- Body: 20px weight 400

### Example Component Prompts
- "Create a hero section on White background (#ffffff). Headline at 40px Haas Groot Disp weight 400, line-height 1.2, color #333333."
- "Create the primary CTA button: `#ffffff` background, `rgba(7, 12, 20, 0.82)` text, 999px border-radius, 11px 21px padding, 600 weight, Haas Groot Disp font."
- "Design a card on `#f0f6ff` background. Border: none. Radius: 0px. Shadow: none. Padding: 0px."
- "Build navigation: fixed on `#ffffff`. Haas Groot Disp 20px weight 400 for links."

### Iteration Guide
1. **Canvas**: Set the light canvas to White (`#ffffff`) — every component is composited against this exact base.
2. **Typography**: All type in Haas Groot Disp, weight range 400–700. Never exceed 700 — heavier weights break the brand's tonal restraint.
3. **Accent**: White (`#ffffff`) is the sole interactive color. On hover → M Tricolor Blue (`#1b61c9`). Use CSS transitions, not opacity/brightness filters.
4. **Shape**: CTAs at `0px`, cards at `0px`. Apply border-radius from the extracted scale only — don't invent intermediate values.
5. **Spacing**: Use the `--ca-space-*` token scale (4px–40px). 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-primary-hover: #ffffff;
  --ca-surface-1: #f0f6ff;
  --ca-surface-2: #f8fafc;
  --ca-hairline: #333333;
  --ca-ink-subtle: #181d26;
  --ca-on-primary: #111111;
  --ca-primary-focus: #070c14;
}

/* Typography */
:root {
  --ca-font-primary: "Haas", system-ui, sans-serif;
  --ca-text-display: 40px;
  --ca-text-body: 14px;
  --ca-text-small: 20px;
  --ca-text-button: 20px;
}

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

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


## 13. Page Structure Skeleton

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

```yaml
page-skeleton:
  - section: hero
    tag: div
    height: 7278px
    width: full-bleed
    layout: block
    children: 1
  - section: hero
    tag: div
    height: 602px
    width: full-bleed
    layout: block
    children: 1
    vertical-padding: ~60px (generous)
    padding: "120.984px 0px 0px"
  - section: header
    tag: nav
    height: 121px
    width: full-bleed
    layout: grid: 2-col gap=0px
    children: 4
    bg: "rgb(255, 255, 255)"
  - section: navigation
    tag: nav
    height: 900px
    width: 726px
    layout: block
    children: 1
    bg: "rgb(255, 255, 255)"
    vertical-padding: ~60px (generous)
    padding: "120.984px 0px 0px"
  - section: navigation
    tag: nav
    height: 900px
    width: 714px
    layout: flex-row justify=normal
    children: 2
    vertical-padding: ~60px (generous)
    padding: "120.984px 0px 0px"
  - section: navigation
    tag: nav
    height: 900px
    width: 714px
    layout: flex-row justify=normal
    children: 2
    vertical-padding: ~60px (generous)
    padding: "120.984px 0px 0px"
  - section: navigation
    tag: nav
    height: 900px
    width: 726px
    layout: block
    children: 1
    bg: "rgb(255, 255, 255)"
    vertical-padding: ~60px (generous)
    padding: "120.984px 0px 0px"
  - section: navigation
    tag: nav
    height: 900px
    width: 726px
    layout: block
    children: 1
    bg: "rgb(255, 255, 255)"
    vertical-padding: ~60px (generous)
    padding: "120.984px 0px 0px"
  - section: navigation
    tag: nav
    height: 900px
    width: 714px
    layout: flex-row justify=normal
    children: 2
    vertical-padding: ~60px (generous)
    padding: "120.984px 0px 0px"
  - section: navigation
    tag: nav
    height: 900px
    width: 714px
    layout: flex-row justify=normal
    children: 2
    vertical-padding: ~60px (generous)
    padding: "120.984px 0px 0px"
  - section: navigation
    tag: nav
    height: 900px
    width: 714px
    layout: flex-row justify=normal
    children: 2
    vertical-padding: ~60px (generous)
    padding: "120.984px 0px 0px"
  - section: navigation
    tag: nav
    height: 900px
    width: 714px
    layout: flex-row justify=normal
    children: 2
    vertical-padding: ~60px (generous)
    padding: "120.984px 0px 0px"
  - section: feature-section
    tag: main
    classes: ["commonPage"]
    height: 6699px
    width: full-bleed
    layout: block
    children: 8
    vertical-padding: ~92px (generous)
  - section: feature-section
    tag: section
    height: 481px
    width: full-bleed
    layout: block
    children: 2
    bg: "rgb(255, 255, 255)"
  - section: feature-section
    tag: div
    height: 291px
    width: 1344px
    layout: grid: 26-col gap=normal 32px
    children: 1
  - section: navigation
    tag: div
    height: 779px
    width: 480px
    layout: flex-column justify=normal
    children: 2
    bg-treatment: linear-gradient
    vertical-padding: ~60px (generous)
    padding: "72px 48px 48px"
  - section: navigation
    tag: div
    height: 779px
    width: 480px
    layout: flex-column justify=normal
    children: 2
    bg-treatment: linear-gradient
    vertical-padding: ~60px (generous)
    padding: "72px 48px 48px"
  - section: navigation
    tag: div
    height: 779px
    width: 480px
    layout: flex-column justify=normal
    children: 2
    bg-treatment: linear-gradient
    vertical-padding: ~60px (generous)
    padding: "72px 48px 48px"
  - section: feature-section
    tag: div
    height: 291px
    width: 885px
    layout: flex-column justify=normal
    children: 3
    padding: "40px 0px 0px"
  - section: navigation
    tag: nav
    height: 482px
    width: 726px
    layout: flex-column justify=normal
    children: 2
  - section: navigation
    tag: nav
    height: 671px
    width: 480px
    layout: flex-column justify=normal
    children: 2
  - section: navigation
    tag: nav
    height: 483px
    width: 480px
    layout: flex-column justify=normal
    children: 2
  - section: navigation
    tag: nav
    height: 633px
    width: 726px
    layout: flex-column justify=normal
    children: 2
  - section: navigation
    tag: nav
    height: 422px
    width: 726px
    layout: flex-column justify=normal
    children: 2
  - section: navigation
    tag: nav
    height: 359px
    width: 480px
    layout: flex-column justify=normal
    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:
    - "Trusted by 500,000 leading teams"
    - "Sophisticated workflows in minutes, not months"
    - "Don’t just ask AI. Deploy it."
    - "Say hello to Omni"
    - "The power of AI with the industrial-grade platform your business demands"
    - "Start building with Airtable Teams at over 500,000 forward-thinking organizations use Airtable ever"
  sub-headings:
    - "Production apps at prototype speed"
  ctas:
    - "Platform"
    - "Explore all customer stories"
  navigation:
    - "Try it now"
    - "Airtable home or view your bases"
    - "Airtable home"
    - "Facebook"
    - "Linkedin"
    - "Twitter"
    - "Instagram"
    - "Youtube"
    - "Skip to main content"
    - "Skip to footer"
  footer-links:
    - "Airtable home"
    - "Platform"
    - "Facebook"
    - "Twitter"
    - "Youtube"
    - "AI App Building"
    - "See more"
```

**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: 36
    avg-ratio: 3.23
    common-aspect: "~16:6 banner"
    sample-alts:
      - "logo-openai-2026"
      - "logo-anthropic-2026"
      - "logo-harvey-2026"
  product:
    count: 2
    avg-ratio: 1.00
    common-aspect: "~1:1 square"
    sample-alts:
      - "media"
      - "bento-2"
  thumbnail:
    count: 1
    avg-ratio: 0.98
    common-aspect: "~1:1 square"
    sample-alts:
      - "media"
```

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


## 16. Component HTML Templates

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

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

### Generic Card
```html
<div class="card">
  <!-- content -->
</div>
```
_Source pattern detected: padding `0px` · radius `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** 4 · **cta** 4 · **auth** 1 · **product** 17 · **pricing** 2 · **docs** 2 · **blog** 1 · **project** 1 · **social** 5 · **footer** 14 · **other** 9

**Primary actions (conversion path):**
- Primary call-to-action — "Try it now" (the conversion path) → `https://www.airtable.com/lp/claude-airtable`
- Primary call-to-action — "Sign up for free" (the conversion path) → `https://airtable.com/signup`
- Account access — "Log in" (login/signup) → `https://airtable.com/login`
- Primary call-to-action — "Get started for free" (the conversion path) → `https://airtable.com/signup`
- Primary call-to-action — "Try Airtable for free" (the conversion path) → `https://airtable.com/signup`

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

*Lp* — medium confidence, 4 items:

| Title | Featured image | Link |
|---|---|---|
| Try it now | — | https://www.airtable.com/lp/claude-airtable |
| The 2026 AI guide for marketers Learn how to | `1nWbiHJ41BnbNKlTq4CLoq.webp` (ar 1.78) | https://www.airtable.com/lp/resources/ebooks/ultimate-ai-guide-for-marketers |
| In action: Airtable ProductCentral See how A | `kyQBhaUxdyXgOcz69G3hr.webp` (ar 1.78) | https://www.airtable.com/lp/resources/demos/airtable-productcentral-demo |
| Resources | — | https://www.airtable.com/lp/resources |

**Signals:** 17/60 links carry a featured image · device mockups detected: laptop ×4 · dominant link roles: footer-link (39), content-card (10), navigation (4).


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

| Category | Score | Max | Detail |
|----------|-------|-----|--------|
| Colors & Palette | 25 | 25 | 19 named colors |
| Typography | 20 | 20 | 8 roles defined |
| Components | 12 | 20 | 3 specs extracted |
| Motion & Interaction | 15 | 15 | Keyframes, easing vars |
| CSS Custom Properties | 10 | 10 | 200 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 (Haas, Haas Groot Disp, ATSeasonSans)** — detected but not downloaded. Substitute with your licensed copy or a close fallback (see Typography section for metrics).
- **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 |
|----------|----------------|-------------------|
| **Dark mode** | No dark-mode CSS variables or media queries detected | Light mode is canonical; do not generate dark-mode variants unless explicitly requested |
| **Form inputs** | No text input fields detected on this page | Use the documented border-radius + accent border on focus; 12-16px padding inside |

### Per-section confidence

| Section | Confidence | Reason |
|---------|------------|--------|
| §1 Visual Theme | High | Body bg extracted via getComputedStyle() |
| §2 Colors | High | 200 CSS vars (semantic naming requires ≥20 for high) |
| §3 Typography | High | 8 typography roles inferred |
| §4 Components | Medium | 3 component variants captured |
| §7 Motion | High | Keyframes + transitions |
| §8 Do's/Don'ts | High | 17 rules generated; design-decisions.json has evidence per rule |
| §9 Responsive | High | 7 breakpoints detected |
| §9b Photography | High | 52 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 (772KB total). When running `prism add`, fonts are saved to `extractions/airtable.com/fonts/` and embedded as base64 in the output HTML.

**@font-face declarations to use:**
```css
@font-face {
  font-family: 'Haas';
  /* src: url('/fonts/Haas.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Haas';
  /* src: url('/fonts/Haas.woff2') format('woff2'); */
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Haas';
  /* src: url('/fonts/Haas.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Haas';
  /* src: url('/fonts/Haas.woff2') format('woff2'); */
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Haas';
  /* src: url('/fonts/Haas.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Haas';
  /* src: url('/fonts/Haas.woff2') format('woff2'); */
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Haas Groot Disp';
  /* src: url('/fonts/Haas-Groot-Disp.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Haas Groot Disp';
  /* src: url('/fonts/Haas-Groot-Disp.woff2') format('woff2'); */
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Haas Groot Disp';
  /* src: url('/fonts/Haas-Groot-Disp.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Haas Groot Disp';
  /* src: url('/fonts/Haas-Groot-Disp.woff2') format('woff2'); */
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'ATSeasonSans';
  /* src: url('/fonts/ATSeasonSans.woff2') format('woff2-variations'); */
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'haasGrotThin';
  /* src: url('/fonts/haasGrotThin.woff2') format('opentype'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'haasGrotThin Fallback';
  /* src: url('/fonts/haasGrotThin-Fallback.woff2') format('woff'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'haasGrot';
  /* src: url('/fonts/haasGrot.woff2') format('opentype'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'haasGrot';
  /* src: url('/fonts/haasGrot.woff2') format('opentype'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'haasGrot';
  /* src: url('/fonts/haasGrot.woff2') format('opentype'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'haasGrot';
  /* src: url('/fonts/haasGrot.woff2') format('opentype'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'haasGrot';
  /* src: url('/fonts/haasGrot.woff2') format('opentype'); */
  font-weight: 700;
  font-style: oblique;
  font-display: swap;
}
@font-face {
  font-family: 'haasGrot';
  /* src: url('/fonts/haasGrot.woff2') format('opentype'); */
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'haasGrot Fallback';
  /* src: url('/fonts/haasGrot-Fallback.woff2') format('woff'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
```

### Keyframe Animations (Intercepted from CSS)

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

```
@keyframes BkInlineBanner-module-scss-module__PnG2rW__animatedBackground { ... }
@keyframes BkInlineBanner-module-scss-module__PnG2rW__counterAnimatedBackground { ... }
@keyframes BkAddToCalendarLink-module-scss-module__wgr3EW__ToOpacity { ... }
@keyframes ResourceHeroAssetCarouselCentered-module-scss-module__nqPniq__autoplaySpeed { ... }
@keyframes index-module-scss-module__LYoopG__opacityFadeIn { ... }
@keyframes index-module-scss-module__LYoopG__opacityFadeOut { ... }
@keyframes AurasStatic-module-scss-module__pGD15G__vertical { ... }
@keyframes AurasStatic-module-scss-module__pGD15G__horizontal { ... }
@keyframes AurasStatic-module-scss-module__pGD15G__rotate { ... }
@keyframes auraButton-module-scss-module__wbteMG__auraButtonRotation { ... }
@keyframes auraButton-module-scss-module__wbteMG__auraPulse { ... }
@keyframes LogosColumn-module-scss-module__QL6jNq__coming-in { ... }
@keyframes BkButton-module-scss-module__dZ-VXq__animatedBackground { ... }
@keyframes BkButton-module-scss-module__dZ-VXq__counterAnimatedBackground { ... }
@keyframes BkLoadingAnimation-module-scss-module__gtyXKW__loader { ... }
@keyframes index-module-scss-module__KcLkaG__fadeInOut { ... }
@keyframes MarketoSubmitButton-module-scss-module__xCPVEa__blink { ... }
@keyframes BkArticleTopics-module-scss-module__18G1va__fadeIn { ... }
@keyframes LoadingIcon-module-scss-module__CZAfta__blink { ... }
@keyframes DotAnimation-module-scss-module__FGLqoq__ripple { ... }
@keyframes DotAnimation-module-scss-module__FGLqoq__rippleDeflate { ... }
@keyframes DotAnimation-module-scss-module__FGLqoq__wipe { ... }
@keyframes DotAnimation-module-scss-module__FGLqoq__wipeReappearDisappear { ... }
@keyframes baymax-module__82pTNW__progress { ... }
@keyframes baymax-module__82pTNW__spinScale { ... }
@keyframes baymax-module__82pTNW__swayHorizontal { ... }
@keyframes baymax-module__82pTNW__spin { ... }
@keyframes baymax-module__82pTNW__spinReverse { ... }
@keyframes baymax-module__82pTNW__highlight { ... }
@keyframes baymax-module__82pTNW__highlightYellow { ... }
@keyframes baymax-module__82pTNW__spacey { ... }
@keyframes baymax-module__82pTNW__bounceIn { ... }
@keyframes baymax-module__82pTNW__opacityFadeIn { ... }
@keyframes baymax-module__82pTNW__opacityFadeOut { ... }
@keyframes baymax-module__82pTNW__fadeUpIn { ... }
@keyframes baymax-module__82pTNW__opacityPulse { ... }
@keyframes baymax-module__82pTNW__pulseBlue { ... }
@keyframes baymax-module__82pTNW__pulseYellow { ... }
@keyframes baymax-module__82pTNW__pulseWhite { ... }
@keyframes baymax-module__82pTNW__pulseDark { ... }
@keyframes baymax-module__82pTNW__shakeHorizontal { ... }
```

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

```css
@keyframes BkInlineBanner-module-scss-module__PnG2rW__animatedBackground{0%{background-position-x:-100px}
@keyframes BkInlineBanner-module-scss-module__PnG2rW__counterAnimatedBackground{0%{background-position-x:0}
@keyframes BkAddToCalendarLink-module-scss-module__wgr3EW__ToOpacity{0%{opacity:0;visibility:hidden}
@keyframes ResourceHeroAssetCarouselCentered-module-scss-module__nqPniq__autoplaySpeed{0%{transform:translate(-100%)}
@keyframes index-module-scss-module__LYoopG__opacityFadeIn{0%{transform:translateY(100%)}
@keyframes index-module-scss-module__LYoopG__opacityFadeOut{0%{transform:translateY(0)}
@keyframes AurasStatic-module-scss-module__pGD15G__vertical{0%{transform:translateY(-50px)}
@keyframes AurasStatic-module-scss-module__pGD15G__horizontal{0%{transform:translate(-75px)}
@keyframes AurasStatic-module-scss-module__pGD15G__rotate{0%{transform:rotate(0)scale(1)}50%{transform:rotate(180deg)scale(1.3)}
@keyframes auraButton-module-scss-module__wbteMG__auraButtonRotation{0%{--gradient-angle:0deg}
@keyframes auraButton-module-scss-module__wbteMG__auraPulse{0%{transform:scale(0)}10%{transform:scale(1)}50%{transform:scale(1)}70%{opacity:.9;transform:scale(1.1)}90%{transform:scale(1)}
@keyframes LogosColumn-module-scss-module__QL6jNq__coming-in{0%{opacity:0;transform:translateY(50%)}
@keyframes BkButton-module-scss-module__dZ-VXq__animatedBackground{0%{background-position-x:-100px}
@keyframes BkButton-module-scss-module__dZ-VXq__counterAnimatedBackground{0%{background-position-x:0}
@keyframes BkLoadingAnimation-module-scss-module__gtyXKW__loader{to{opacity:.33;background:var(--theme_upsell-text-weak)}}
@keyframes index-module-scss-module__KcLkaG__fadeInOut{0%{opacity:0}50%{opacity:1}
@keyframes MarketoSubmitButton-module-scss-module__xCPVEa__blink{0%{opacity:.2}20%{opacity:1}
@keyframes BkArticleTopics-module-scss-module__18G1va__fadeIn{0%{opacity:0}
@keyframes LoadingIcon-module-scss-module__CZAfta__blink{0%{opacity:.2}20%{opacity:1}
@keyframes DotAnimation-module-scss-module__FGLqoq__ripple{0%{opacity:.5;border-radius:2px;transform:scale(1)translate(0)translateZ(0)}15%{transform:scale(var(--max-scale)) translateX(1px) translateZ(0);opacity:.5;border-radius:50%}25%{transform:scale(var(--max-scale)) translateX(0) translateZ(0);opacity:0;border-radius:50%}
@keyframes DotAnimation-module-scss-module__FGLqoq__rippleDeflate{0%{opacity:.5;border-radius:2px;transform:scale(1)translate(0)translateZ(0)}15%{transform:scale(var(--max-scale)) translateX(1px) translateZ(0);opacity:.5;border-radius:4px}30%{opacity:.5;border-radius:2px;transform:scale(1)translate(0)translateZ(0)}
@keyframes DotAnimation-module-scss-module__FGLqoq__wipe{0%{opacity:.15;transform:scale(.7)translateZ(0)}50%{opacity:.075;transform:scale(.35)translateZ(0)}
@keyframes DotAnimation-module-scss-module__FGLqoq__wipeReappearDisappear{0%{opacity:.15;transform:scale(.7)translateZ(0)}13.3333%{opacity:.075;transform:scale(.35)translateZ(0)}26.6667%{opacity:0;transform:scale(0)translateZ(0)}46.6667%{opacity:0;transform:scale(0)translateZ(0)}53.3333%{opacity:.25;transform:scale(.15)translateZ(0)}60%{opacity:.5;transform:scale(.3)translateZ(0)}86.6667%{opacity:.5;transform:scale(.3)translateZ(0)}
@keyframes baymax-module__82pTNW__progress{0%{width:0%}
@keyframes baymax-module__82pTNW__spinScale{0%{transform:rotate(0)scale(1)}50%{transform:rotate(360deg)scale(.9)}
@keyframes baymax-module__82pTNW__swayHorizontal{0%{transform:translate(-3%)}60%{transform:translate(3%)}
@keyframes baymax-module__82pTNW__spin{0%{transform:rotate(0)}
@keyframes baymax-module__82pTNW__spinReverse{0%{transform:rotate(0)}
@keyframes baymax-module__82pTNW__highlight{0%{background-color:#d0f0fd;border-radius:20px;box-shadow:0 0 0 20px #d0f0fd}
@keyframes baymax-module__82pTNW__highlightYellow{0%{background-color:#ffeab6}
@keyframes baymax-module__82pTNW__spacey{0%{transform:translate(0)}
@keyframes baymax-module__82pTNW__bounceIn{0%,50%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:.9;transform:scale3d(.98,.98,.98)}70%{opacity:1;transform:scale3d(1.03,1.03,1.03)}
@keyframes baymax-module__82pTNW__opacityFadeIn{0%{opacity:0}
@keyframes baymax-module__82pTNW__opacityFadeOut{0%{opacity:1}
@keyframes baymax-module__82pTNW__fadeUpIn{0%{opacity:0;transform:translateY(-4px)}
@keyframes baymax-module__82pTNW__opacityPulse{0%{opacity:1}
@keyframes baymax-module__82pTNW__pulseBlue{0%{box-shadow:0 0 0 4px #2d7ff9}40%{box-shadow:0 0 0 8px #2d7ff9}
@keyframes baymax-module__82pTNW__pulseYellow{0%{box-shadow:0 0 0 4px #fcb400}40%{box-shadow:0 0 0 8px #fcb400}
@keyframes baymax-module__82pTNW__pulseWhite{0%{box-shadow:0 0 0 4px #ffffffb3}40%{box-shadow:0 0 0 8px #fffc}
@keyframes baymax-module__82pTNW__pulseDark{0%{box-shadow:0 0 0 4px #00000080}40%{box-shadow:0 0 0 8px #0009}
@keyframes baymax-module__82pTNW__shakeHorizontal{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(2px)}30%,50%,70%{transform:translate(-4px)}40%,60%{transform:translate(4px)}}
```
</details>

### Brand Gradient Palette

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

```css
/* Gradient 1 */
background: linear-gradient(90deg,#0000 0%,#fff 5%,#fff 95%,#0000 100%);

/* Gradient 2 */
background: linear-gradient(to right, #fff -50%, var(--theme_background-strong);

/* Gradient 3 */
background: linear-gradient(to right, #fff 0%, var(--theme_background-medium);

/* Gradient 4 */
background: linear-gradient(to right, #181d26 0%, var(--theme_background-strong);

/* Gradient 5 */
background: linear-gradient(91.6deg,#f5620c -3.95%,#fc4777 14.34%,#e848c0 28.2%,#9b67f0 52.43%,#458fff 68.27%,#0ab2fa 86.46%,#0dbdb4 101.9%);

```

### Hover State CSS (Intercepted)

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

```css
a:hover,a:focus{color:inherit}

a:not([href],[class]):hover,a:not([href],[class]),a:not([href],[class]):focus{color:inherit;text-decoration:none}

@media (hover:hover){.hover\:bg-\[\#f5f5f5\]:hover{background-color:#f5f5f5}

.hover\:bg-blue-700:hover{background-color:var(--color-blue-700)}
```

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

### Real Responsive Breakpoints
**22 breakpoints** read from the live `@media` rules (not guessed) — 14 most relevant:
`400px` · `450px` · `451px` · `600px` · `642px` · `720px` · `768px` · `799px` · `800px` · `832px` · `834px` · `904px` · `1024px` · `1080px` … (+8 more)

### Measured Design Scale
**Type scale by usage** (× = paint count): `20px`×1298 · `16px`×263 · `14px`×169 · `18px`×43 · `32px`×16 · `24px`×12 · `48px`×7 · `40px`×6

**Radius scale** (× = paint count): `12px`×21 · `32px`×12 · `50%`×6 · `10px`×5 · `16px`×5 · `24px`×5 · `2px`×4 · `999px`×3

**Weights** (× = paint count): `400`×1076 · `500`×728 · `600`×9 · `900`×1

**Layout gaps** (× = paint count): `12px`×149 · `16px`×26 · `24px`×25 · `normal 32px`×10 · `48px`×7 · `32px`×6 · `4px`×2 · `24px 32px`×1

**Elevation (real shadows)**:
```css
rgba(0, 0, 0, 0.32) 0px 0px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 2px 0px, rgba(45, 127, 249, 0.28) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 0.5px inset
rgba(15, 48, 106, 0.05) 15px 0px 15px -15px inset
rgba(15, 48, 106, 0.05) 0px 0px 20px 0px
rgba(0, 0, 0, 0.32) 0px 0px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 2px 0px, rgba(0, 0, 0, 0.08) 0px 1px 3px 0px, rgba(1, 20, 53, 0.12) 0px 0px 0px 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 { font-family:"Haas Groot Disp", "Haas", -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif !important }
body { font-family:var(--hb-font-family-ui); font-size:1.25rem; font-weight:var(--hb-font-weight-base,400); color:#333; background-color:#fff }
@media screen and (prefers-reduced-motion: no-preference) header { transition:all .15s ease-in }
header { font-family:var(--hb-font-family-ui,Haas,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif) }
@media screen and (prefers-reduced-motion: no-preference) nav { transition:all .15s ease-in }
nav { background-color:var(--mainNavBackground,#fff); color:var(--mainNavColor,#181d26); gap:0; box-shadow:0 0 20px #0f306a0d }
h1 { font-size:5rem }
h1 { font-family:Haas,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif }
@media screen and (prefers-reduced-motion: no-preference) h1 { transition:all .25s ease-in }
h1 { font-size:2rem }
@media screen and (min-width: 1024px) h1 { font-size:2.5rem }
h1 { font-weight:400 }
```

> 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://airtable.com | 2026-06-11T04:59:38.549Z*
*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.*