Browserbase

---
version: alpha
name: Browserbase-design-analysis
description: A developer-infrastructure marketing surface built on white canvas with pure-black UI and a single high-voltage orange (#ff4500) brand accent. The system reads as engineered, slightly playful and confidently technical — pale-blue hero band, dithered pixel-art mountain artwork, square-cornered product cards holding real browser/agent UI fragments, GT Planar display type, mono uppercase eyebrow labels, and a full-bleed orange footer that slams the page shut. Voltage comes from the orange highlight-marker headline treatment and from pastel accent surfaces (cyan, mint, indigo) used sparingly inside product mockups.
colors:
  primary: "#000000"
  ink: "#000000"
  body: "#444444"
  muted: "#686562"
  canvas: "#ffffff"
  on-primary: "#ffffff"
  brand: "#ff4500"
  on-brand: "#ffffff"
  hero-surface: "#e2e9f3"
  surface-blue: "#c5d3e8"
  surface-blue-soft: "#d9e5f2"
  surface-blue-faint: "#e1e9f2"
  surface-cool: "#f0f4f8"
  surface-pale: "#f8fafc"
  surface-sand: "#f1f0ec"
  surface-sand-soft: "#f8f7f4"
  surface-cyan-pale: "#c4edff"
  surface-yellow: "#fffde6"
  slate-blue: "#7591c0"
  accent-cyan: "#00b0ff"
  accent-indigo: "#5956ff"
  accent-mint: "#a4f9c6"
  hairline: "#c5d3e8"
  deep-red: "#880000"
typography:
  display:
    fontFamily: "gtPlanar, Inter, sans-serif"
    fontSize: 45px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: -0.9px
  title:
    fontFamily: "plain, Inter, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.24px
  mono-label:
    fontFamily: "gtStandardMono, ui-monospace, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.84px
  body:
    fontFamily: "plain, Inter, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.16
    letterSpacing: 0.4px
  button:
    fontFamily: "plain, Inter, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0.16px
rounded:
  none: 0px
  xs: 4px
  pill: 99px
  full: 999px
spacing:
  xxs: 4px
  xtiny: 6px
  xs: 8px
  s: 10px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 48px
components:
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
  nav-link:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.button}"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: 10px 16px
  button-secondary:
    backgroundColor: "{colors.surface-cool}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: 10px 16px
  hero-band:
    backgroundColor: "{colors.hero-surface}"
    textColor: "{colors.ink}"
    typography: "{typography.display}"
    padding: 48px
  hero-headline-mark:
    backgroundColor: "{colors.brand}"
    textColor: "{colors.on-brand}"
    typography: "{typography.display}"
    padding: 6px 16px
  mono-eyebrow:
    backgroundColor: transparent
    textColor: "{colors.muted}"
    typography: "{typography.mono-label}"
  feature-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.title}"
    rounded: "{rounded.none}"
    padding: 24px
  product-mockup-card:
    backgroundColor: "{colors.surface-pale}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 16px
  logo-cell:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.muted}"
    rounded: "{rounded.none}"
    padding: 24px
  template-list-item:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.title}"
    rounded: "{rounded.full}"
    padding: 12px 16px
  template-card:
    backgroundColor: "{colors.surface-yellow}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 24px
  badge-pill:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.mono-label}"
    rounded: "{rounded.full}"
    padding: 4px 12px
  stat-cell:
    backgroundColor: "{colors.surface-blue-faint}"
    textColor: "{colors.ink}"
    typography: "{typography.mono-label}"
    rounded: "{rounded.none}"
    padding: 16px
  footer:
    backgroundColor: "{colors.brand}"
    textColor: "{colors.ink}"
    typography: "{typography.mono-label}"
    padding: 48px
---

## Overview

Browserbase's marketing surface is an engineered, developer-first interface built on a white canvas (`{colors.canvas}` — #ffffff) with pure-black UI (`{colors.primary}` — #000000) and a single high-voltage orange (`{colors.brand}` — #ff4500) doing all the brand work. The page opens on a pale-blue hero band (`{colors.hero-surface}` — #e2e9f3), runs through white product-card grids, and slams shut on a full-bleed orange footer. The voice is technical-but-playful: precise mono labels, a dithered pixel-art mountain illustration in the hero, and product UI fragments shown directly inside cards rather than marketing illustration.

Type voice splits three ways: **GT Planar** (the display face — used for h2 and hero headlines at weight 500 with negative tracking), **Plain** (the workhorse for titles, body and buttons), and **GT Standard Mono** (uppercase, wide-tracked eyebrow labels — the "developer" signal). All three are custom Grilli Type faces; open-source substitutes are documented in Typography.

Brand voltage comes from one move: the **orange highlight-marker headline** (`{component.hero-headline-mark}`) — white display text set on a solid orange box, mimicking a highlighter swipe across the headline. The same orange returns only at the footer; everything between stays near-monochrome with sparing pastel accents (cyan `{colors.accent-cyan}`, mint `{colors.accent-mint}`, indigo `{colors.accent-indigo}`) appearing inside product mockups and the trusted-by stat cells.

**Key Characteristics:**
- White canvas with pure-black CTAs (`{colors.primary}` — #000000) rendered as full pills (`{rounded.full}` — 999px). The hero "Get API key" and per-card "Get started" buttons are the recurring black-pill pattern.
- A single brand orange (`{colors.brand}` — #ff4500) used for the highlight-marker headline and the full-bleed footer — nowhere else as a fill.
- GT Planar display headlines at weight 500 with -0.9px tracking — confident, slightly condensed, never bold.
- GT Standard Mono uppercase eyebrows (`{typography.mono-label}`, +0.84px tracking) labeling sections and primitives — the system's "we're an API company" tell.
- Square-cornered cards (`{rounded.none}` — measured 0px) holding real product/agent UI fragments — sign-in screens, CAPTCHA prompts, booking widgets, data tables shown at small scale.
- Pale, low-chroma surface palette (blues `{colors.surface-blue}`, `{colors.surface-cool}`; sands `{colors.surface-sand}`; one yellow `{colors.surface-yellow}`) used to tint mockup backgrounds and the "There's a template for that" card.
- Nearly flat elevation — a single measured inset hairline shadow in `{colors.hairline}` (#c5d3e8); depth comes from color blocking, not shadow.
- Spacing rhythm on a 2px base, clustering at 8 / 16 / 24px for component and grid gaps.

## Colors

### Brand & Accent
- **Brand** (`{colors.brand}` — #ff4500): The signature orange. Used as the highlight-marker headline fill (`{component.hero-headline-mark}`) and the full-bleed footer background — the two loudest moments on the page. Never used on body CTAs.
- **Accent Cyan** (`{colors.accent-cyan}` — #00b0ff) / **Accent Indigo** (`{colors.accent-indigo}` — #5956ff) / **Accent Mint** (`{colors.accent-mint}` — #a4f9c6): Pastel/bright accents appearing inside product UI mockups (progress bars, status chips, scrollbar marks) and trusted-by stat cells. Sparing chromatic flourishes against the monochrome base.
- **Slate Blue** (`{colors.slate-blue}` — #7591c0): A mid-tone blue used for secondary marks and inline highlights inside the "Use the whole web like it's an API" code-style copy.
- **Deep Red** (`{colors.deep-red}` — #880000): A rare deep-red accent observed in product mockup states (e.g., error/alert chrome).

### Surface
- **Canvas** (`{colors.canvas}` — #ffffff): The default page floor and card surface.
- **Hero Surface** (`{colors.hero-surface}` — #e2e9f3): The pale-blue hero band behind the pixel-art mountain.
- **Surface Blue / Soft / Faint** (`{colors.surface-blue}` — #c5d3e8, `{colors.surface-blue-soft}` — #d9e5f2, `{colors.surface-blue-faint}` — #e1e9f2): Stepped cool tints for mockup backgrounds and stat cells.
- **Surface Cool** (`{colors.surface-cool}` — #f0f4f8) / **Surface Pale** (`{colors.surface-pale}` — #f8fafc): Very-soft neutral-blue fills for secondary buttons and product-mockup card backgrounds.
- **Surface Sand / Soft** (`{colors.surface-sand}` — #f1f0ec, `{colors.surface-sand-soft}` — #f8f7f4): Warm-neutral tints used as alternate section/mockup grounds.
- **Surface Cyan Pale** (`{colors.surface-cyan-pale}` — #c4edff) / **Surface Yellow** (`{colors.surface-yellow}` — #fffde6): Tinted card grounds — the yellow backs the "There's a template for that" card (`{component.template-card}`); the pale cyan tints stat cells.

### Text
- **Ink** (`{colors.ink}` — #000000): All headlines and primary text — pure black, the dominant text color (787 measured occurrences).
- **Body** (`{colors.body}` — #444444): Darker secondary running-text.
- **Muted** (`{colors.muted}` — #686562): Tertiary text — eyebrow labels, logo-row captions, fine print.
- **On Primary** (`{colors.on-primary}` — #ffffff): Text on black pill buttons.
- **On Brand** (`{colors.on-brand}` — #ffffff): The white headline text inside the orange highlight-marker.

### Hairline
- **Hairline** (`{colors.hairline}` — #c5d3e8): The 1px divider/inset tone — also the source of the only measured box-shadow (`rgb(197,211,232) 0 -1px 0 0 inset`).

## Typography

### Font Family
The system runs three custom Grilli Type faces: **GT Planar** for display, **Plain** for titles/body/buttons, and **GT Standard Mono** for uppercase eyebrow labels. The display face stays at weight 500 with tight negative tracking; the workhorse Plain sits at weight 500 with slightly positive tracking; mono labels are wide-tracked (+0.84px) and uppercase. The functional split:
- GT Planar (display, 500, -0.9px) — h2 + hero headlines
- Plain (titles, body, buttons, 500) — card titles, paragraphs, button labels
- GT Standard Mono (400, uppercase, +0.84px) — section eyebrows, primitive tags, footer column heads

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display}` | 45px | 500 | 1.15 | -0.9px | h2 section heads + hero headline ("Give your agents access to the whole web.") — GT Planar |
| `{typography.body}` | 20px | 500 | 1.16 | 0.4px | Sub-heads, lead paragraphs ("Browserbase makes the web as reliable…") — Plain |
| `{typography.title}` | 16px | 500 | 1.2 | 0.24px | h3 card titles, list-row labels — Plain |
| `{typography.button}` | 16px | 500 | 1.0 | 0.16px | Button labels, nav links — Plain |
| `{typography.mono-label}` | 14px | 400 | 1.2 | 0.84px | Uppercase eyebrows, primitive tags, footer column heads — GT Standard Mono |

### Principles
GT Planar is the brand headline voice — every display moment uses it at weight 500 with negative tracking. Never push it to bold; the mid-weight is the point. Mono labels (`{typography.mono-label}`) carry the developer-product signal and should stay uppercase and wide-tracked. Body and titles share the Plain face; the boundary between them is size and role, not family.

### Note on Font Substitutes
GT Planar, Plain, and GT Standard Mono are commercial Grilli Type typefaces and are not shippable as open web fonts. Substitutes that preserve the signature:
- **GT Planar → Inter** (weight 500, ~-0.02em tracking) or **Space Grotesk** for a slightly more geometric display feel.
- **Plain → Inter** (weight 500) — a near-neutral grotesque match.
- **GT Standard Mono → Space Mono** or **JetBrains Mono** at weight 400, uppercased with wide letter-spacing.

## Layout

### Spacing System
- **Base unit:** 2px (values cluster on even multiples, with 6 and 10 as frequent mid-steps).
- **Tokens:** `{spacing.xxs}` 4px · `{spacing.xtiny}` 6px · `{spacing.xs}` 8px · `{spacing.s}` 10px · `{spacing.sm}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px.
- **Dominant gaps:** `{spacing.md}` (16px, 99 occurrences) and `{spacing.xs}` (8px, 97 occurrences) are the most common — tight, grid-driven internal spacing.
- **Card internal padding:** `{spacing.lg}` (24px) for feature cards; `{spacing.md}` (16px) inside product-mockup cards.
- **Larger section padding** clusters at `{spacing.xl}` (32px) and `{spacing.xxl}` (48px).

### Grid & Container
- **Feature grids:** 4-up at desktop ("Anything you can do in a browser, your agent can too.") with square cards, reducing columns at smaller widths.
- **Logo row:** 6-up bordered logo cells under the hero ("10,000+ companies building beyond the API").
- **Capability list:** left-aligned two-column split (label/description left, product mockup right) in the "See what agents can do" band.
- **Footer:** multi-column mono-headed link list (Primitives / Industries / Developers / Company) on the orange ground, with the oversized white "B" logotype.

### Whitespace Philosophy
Spacing is tight and grid-driven — this is a product/infra page, not an editorial one. Cards pack densely in 4-up rows with 16px gaps; mockups sit close to their labels. The breathing room comes from full-width band changes (pale-blue hero → white grids → orange footer) rather than large internal margins.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow, no border, square corners (`{rounded.none}`) | Cards, mockups, most sections |
| Inset hairline | `rgb(197,211,232) 0 -1px 0 0 inset` (`{colors.hairline}`) | A single measured underline/inset divider |
| Color block | Full-bleed band color change | Hero (`{colors.hero-surface}`), footer (`{colors.brand}`) |

The elevation philosophy is **flat-and-blocked**. Depth comes from full-width color bands and from square-cornered cards sitting on white — not from shadows. The only measured shadow is a 1px inset hairline; cards explicitly carry `shadow: none`.

### Decorative Depth
- The hero's dithered pixel-art mountain (orange/yellow/black on pale blue) is the page's signature decorative artifact — it provides texture and visual energy without any shadow system.
- Product UI fragments inside cards carry their own native chrome (browser bars, form fields, tables); these are content, not system elevation tokens.

## Shapes

### Border Radius Scale

| Token | Value | Use |
|---|---|---|
| `{rounded.none}` | 0px | Cards, product mockups, logo cells, stat cells — the dominant card shape is square |
| `{rounded.xs}` | 4px | Small inline chips / minor rounding |
| `{rounded.pill}` | 99px | Pill elements (interchangeable with full at this scale) |
| `{rounded.full}` | 999px | Buttons, list-row pills, primitive tags — the dominant interactive shape |

The shape language is a deliberate contrast: **square cards, pill buttons**. Content containers stay sharp-cornered (0px), while every actionable element (buttons, template list rows, badge tags) is a full pill.

### Photography / Illustration Geometry
The hero artwork is a dithered pixel-art landscape with hard edges (no rounding). Product mockup screenshots retain their native browser chrome inside square-cornered cards.

## Components

### Top Navigation

**`top-nav`** — White nav bar across the top of every page. Background `{colors.canvas}`, text `{colors.ink}`. Carries the Browserbase "B" mark + wordmark at left, a center menu (Platform, Solutions, Resources, Pricing, Docs) in `{typography.button}`, and a right cluster of "Log in" / "Sign up" `{component.nav-link}` items plus a black-pill "Get a demo" `{component.button-primary}`.

**`nav-link`** — Inline text nav item, transparent background, `{colors.ink}` text, `{typography.button}`.

### Buttons

**`button-primary`** — The signature black pill CTA. Background `{colors.primary}` (#000000), text `{colors.on-primary}`, type `{typography.button}` (Plain 16px / 500), rounded `{rounded.full}` (999px). Used for "Get a demo", "Get API key", and the per-card "Get started" buttons.

**`button-secondary`** — Light companion pill. Background `{colors.surface-cool}`, text `{colors.ink}`, same type and pill radius. Used for "Setup for agents" and "Talk to sales".

### Hero

**`hero-band`** — Pale-blue hero section. Background `{colors.hero-surface}` (#e2e9f3) overlaid with the dithered pixel-art mountain. Holds the highlight-marker headline, a `{typography.body}` sub-line, and the `{component.button-primary}` + `{component.button-secondary}` pair.

**`hero-headline-mark`** — The signature highlight-marker headline. White display text (`{colors.on-brand}`) set on a solid orange box (`{colors.brand}`), type `{typography.display}`. Reads as a highlighter swipe across the hero headline — the system's single loudest brand move.

**`mono-eyebrow`** — Uppercase wide-tracked section label. Transparent background, `{colors.muted}` text, `{typography.mono-label}`. Used as eyebrows ("UNIQUE BROWSER SESSIONS", "PRIMITIVES", "OPEN SOURCE").

### Cards & Containers

**`feature-card`** — Square-cornered white card used in the 4-up "Anything you can do in a browser…" grid. Background `{colors.canvas}`, rounded `{rounded.none}` (0px), padding `{spacing.lg}` (24px). Carries a `{typography.title}` heading, a product UI mockup, a short description, and a `{component.button-primary}` "Get started" at the bottom.

**`product-mockup-card`** — Tinted container showing real product/agent UI fragments (sign-in screens, CAPTCHA prompts, booking widgets, data tables). Background `{colors.surface-pale}` (or other pale surface tints), rounded `{rounded.none}`, padding `{spacing.md}` (16px). The product UI inside carries its own chrome.

**`logo-cell`** — Bordered cell in the "10,000+ companies" logo row. Background `{colors.canvas}`, `{colors.muted}` logo treatment, square corners, padding `{spacing.lg}`.

**`template-list-item`** — Pill-shaped selectable row in the "There's a template for that" panel. Background `{colors.canvas}`, text `{colors.ink}`, `{typography.title}`, rounded `{rounded.full}`, padding 12px × 16px, with a trailing arrow glyph.

**`template-card`** — The accent card paired with the template list. Background `{colors.surface-yellow}` (#fffde6), text `{colors.ink}`, `{typography.body}`, square corners, padding `{spacing.lg}`. Holds the "Try template" pill and primitive tags.

**`stat-cell`** — Colored cell in the "Trusted by" row (weekly SDK downloads, developers, websites visited, years browsing). Background a tinted surface (e.g. `{colors.surface-blue-faint}`, with sibling cells in pale cyan/mint/yellow variants), big black numerals, `{typography.mono-label}` caption, square corners.

### Tags / Badges

**`badge-pill`** — Small outlined pill for primitives ("Browser CLI", "Stagehand SDK", "Search API", "Fetch API"). Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.mono-label}`, rounded `{rounded.full}`, padding 4px × 12px.

### Footer

**`footer`** — Full-bleed orange footer that closes the page. Background `{colors.brand}` (#ff4500), text `{colors.ink}` (black), column heads in `{typography.mono-label}` (Primitives / Industries / Developers / Company). An oversized white "B" logotype anchors the lower-left. The orange footer is the page's second and final loud brand moment — it bookends the orange highlight-marker in the hero.

## Do's and Don'ts

### Do
- Reserve `{colors.brand}` (#ff4500) for exactly two moments: the highlight-marker headline and the footer. Its scarcity is what gives it voltage.
- Keep primary CTAs pure black (`{colors.primary}`) as full pills (`{rounded.full}`). The black-pill is the recurring action shape.
- Use square corners (`{rounded.none}`) for all content cards and mockups. Square cards + pill buttons is the system's shape contrast.
- Set section eyebrows in `{typography.mono-label}` — uppercase, wide-tracked. The mono labels are the developer-product signal.
- Embed real product/agent UI fragments inside `{component.product-mockup-card}` rather than illustrating the product.
- Keep display headlines GT Planar at weight 500 with negative tracking; pair with Plain body.
- Use pale surface tints (blues, sands) for mockup grounds; let bright pastels (cyan, mint, indigo) appear only inside the mockups and stat cells.

### Don't
- Don't introduce a third loud color — the palette is black + white + orange with low-chroma pastel support only.
- Don't paint orange onto body buttons or cards; it belongs to the headline marker and footer.
- Don't round content cards — they are measured at 0px radius. Rounding them breaks the square-card / pill-button contrast.
- Don't bold GT Planar past weight 500; the mid-weight is the brand.
- Don't lowercase or tighten the mono eyebrow labels — uppercase + 0.84px tracking is the voice.
- Don't add drop shadows; the system is flat, with at most the single inset hairline (`{colors.hairline}`).
- Don't document hover state — primary stays black; no other state is defined.

## Responsive Behavior

| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 768px | Nav collapses to a hamburger; hero headline marker wraps to 2 lines; feature grid stacks 1-up; logo row wraps; footer columns stack |
| Tablet | 768–1024px | Horizontal nav tightens; feature grid 2-up; capability band keeps label/mockup split |
| Desktop | 1024–1440px | Full nav; 4-up feature grid; 6-up logo row; two-column capability split |
| Wide | > 1440px | Same as desktop with more outer margin; centered max content width |

### Touch Targets
- `{component.button-primary}` and `{component.button-secondary}` are pill buttons with ~10px × 16px padding; effective tap height comfortably clears minimum targets.
- `{component.template-list-item}` rows use 12px × 16px padding — full-width pill rows meet 44px+.
- Exact button heights were not measured (component capture returned 0px padding); pill sizing is documented from screenshot ground-truth. See Known Gaps.

### Collapsing Strategy
- Top nav collapses to a hamburger sheet at mobile.
- The 4-up feature grid reduces columns (4 → 2 → 1) rather than shrinking cards below legibility.
- The capability band's label/mockup two-column split stacks to single column on mobile.
- Footer columns reflow from multi-column to stacked; the oversized "B" logotype scales down.

### Image Behavior
- The hero pixel-art mountain crops/scales with the band; its hard-edged dither stays sharp.
- Product UI mockups retain native aspect ratios inside resizing square cards.

## Iteration Guide

1. Work on ONE component at a time, referencing its YAML key (`{component.feature-card}`, `{component.hero-headline-mark}`).
2. Variants (`-active`, `-disabled`, `-focused`) live as separate `components:` entries once measured.
3. Use `{token.refs}` everywhere — never inline hex in components.
4. Document default + active/pressed only; never hover.
5. Display stays GT Planar 500 / negative tracking; eyebrows stay GT Standard Mono uppercase; body stays Plain. The trinity does not blur.
6. Orange is scarce by design — adding a third orange surface dilutes the brand.
7. Square cards, pill buttons — preserve the shape contrast in any new component.

## Known Gaps

- The component crawler returned `button-primary` with `radius: 0px, padding: 0px` and `card` with `radius: 0px` — these capture an outer wrapper, not the visible pill buttons. Button radius is documented as `{rounded.full}` (999px, a measured radius token) and padding from screenshot ground-truth; exact button heights/padding are unconfirmed.
- No `primary-active` / pressed color was measured; press states for buttons are not documented.
- The three primary typefaces (GT Planar, Plain, GT Standard Mono) are commercial Grilli Type fonts; `fonts_licensed` was empty in the analysis, but they are not open-web fonts — open-source substitutes are documented in Typography.
- No small/caption text role (e.g. footer link size) was measured below 14px; footer body links are approximated from `{typography.mono-label}` / `{typography.title}` and may differ.
- The trusted-by stat cells appear in additional tints (a pink/rose cell is visible in the screenshot) that were not captured in the measured color set; `{component.stat-cell}` is documented against the measured pale-blue/cyan/yellow surfaces only.
- Only one box-shadow (an inset hairline) was measured; any subtle elevation on mockup chrome is product UI, not a system token.
- Animation, transition timings, and scroll-driven number counters (the "00,000,000" session counters) are out of scope.
- The pixel-art hero illustration's exact color stops are not tokenized beyond the orange/yellow/black/mint values present in the measured palette.

<!-- Documented by duply · real-world design systems as ready-to-use DESIGN.md for AI coding agents · https://duply.ai/browserbase/design-md -->