# Browserbase — Marketing Site Design Spec

> Source: browserbase.com (live DOM, computed styles), 2026-07-26 (desktop 1512px).
> Coverage: home page. Dashboard behind login (`needs-dashboard`). No page-level inputs captured (marketing has no forms above the fold); focus recorded from the theme's `.btn--nav-*:focus-visible` rules.
> Reality check: **hint ("technical dark, mono-forward") is wrong on the first count.** Browserbase is a **LIGHT** site — white nav, black `#000000` ink, warm off-white `#f1f0ec` and pale-blue `#e2e9f3`/`#c5d3e8` panels, `darkSchemeBlocks 0`. "Mono-forward" is only half true: the workhorse is the sans **plain** (1556×) with **GT Standard Mono** (184×) for labels/code and a **GT Planar** display; a Times serif appears rarely. The real signatures: (1) the hero display is set in white over **orange `#ff5e19` inline highlight blocks**; (2) a huge **named product palette** (director-blue `#00b0ff`, stagehand-green `#00c851`, magenta, lime, gold…) keyed to Browserbase's products, kept out of chrome; (3) the dithered **pixel-art mountain landscape is drawn on a 2D `<canvas>`** (1312×710); and (4) structure is a **hard 1px `#000000` border** with essentially zero shadows.

## 1. Visual Theme & Atmosphere

Playful-technical developer infrastructure — a bright, almost zine-like light surface where hard black hairlines, a neo-grotesque sans and a riot of named product colours give it a precise but expressive character. The hero drops a pixel-art dithered landscape onto a pale-blue field and highlights the headline in orange blocks, so the page reads as engineered and fun at once. Chrome stays black-on-white with warm off-white and pale-blue panels; saturated colour lives in the product palette and imagery, never in the base UI. Depth is refused — 1px black borders and one pale-blue inset rule do the structuring, not shadows. Feels: technical, bright, playful, exact.

## 2. Color Palette & Roles

### Text & neutrals
| Token | Hex | Role / usage |
|---|---|---|
| black | `#000000` | Primary text + hard 1px borders (1729 uses) |
| warm-grey | `#686562` | Secondary text |
| grey-900 | `#1a1a1a` | Deep text |
| grey-600 | `#5f5f5f` | Muted |
| grey-400 | `#a9a9a9` | Faint |
| grey-200 | `#e5e5e5` | Divider |
| grey-50 | `#f8f8f8` | Tint |
| white | `#ffffff` | Canvas, nav, cards |

### Surfaces
| Token | Hex | Role / usage |
|---|---|---|
| off-white | `#f1f0ec` | Warm section fill |
| paper | `#f8f7f4` | Alt section |
| pale-blue | `#e2e9f3` / `#e1e9f2` | Hero + secondary-button fill |
| sky | `#c4edff` | Light-cyan panel |
| primary-gray | `#c5d3e8` | Blue-grey block / inset rule |
| pale-yellow | `#fffde6` | Highlighted chip fill |

### Accents (chrome)
| Token | Hex | Role / usage |
|---|---|---|
| orange | `#ff5e19` | Hero highlight blocks (headline) |
| browserbase-red | `#ff4500` | Brand red / logo |
| selection-red | `#ff2f00` | Text selection |
| pale-red | `#ffeae3` | Soft red wash |
| blue | `#5956ff` | Token accent / links |

### Named product palette (kept out of chrome)
| Token | Hex | Role / usage |
|---|---|---|
| director-blue | `#00b0ff` | Director product |
| stagehand-green | `#00c851` | Stagehand product |
| yellow | `#fffacd` · gold `#cb9915` | Accent surfaces |
| pink | `#ffc0cb` · magenta `#ff00ff` | Accent surfaces |
| lime | `#c4d600` · navy | `#0000cd` |

Rule: chrome is black-on-white; the named product colours appear only on product surfaces, illustration and imagery — never as base UI.

## 3. Typography Rules

- Stack: **plain** (workhorse sans, 1556×) · **GT Planar** (display) · **GT Standard Mono** (labels/code, 184×) · Times (rare serif accent).
- Preview substitutes: **Inter** for plain & GT Planar, **IBM Plex Mono** for GT Standard Mono — recorded so the spec never implies the licensed faces.
- Body: 16–20px / weight 500 / `#000000`.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h2/hero) | 45 / 51.75 | 500 | -0.9px, GT Planar |
| Sub / h3 | 16 / 19.2 | 500 | +0.24px |
| Body (p) | 20 / 23.2 | 500 | +0.4px |
| Nav | 16 / 16 | 500 | +0.16px |
| Mono label | 16 | 400 | normal, GT Standard Mono |

Patterns: everything runs at weight 500 (no 700). Small text carries slight POSITIVE tracking (+0.16–0.4px); the display tightens to -0.9px. The hero display sits in white over orange highlight blocks.

## 4. Component Stylings

### Buttons
- **Primary pill**: bg `#000000`, text `#ffffff`, radius 99px, h 39px, plain 16/500 +0.16px, no border, no shadow. Hover: bg `#333132`.
- **Secondary pill**: bg `#e1e9f2` (pale blue), text `#000000`, radius 99px, h 39px.
- **Outlined chip**: transparent or `#fffde6`, text `#000000`, **1px solid `#000000`**, radius 0px (square), h 40px — template/tag chips.
- **Ghost / nav link**: transparent, text `#000000`, plain 16/500 +0.16px.

### Inputs
- Not present on the marketing home (forms behind login). When used, expect a 1px `#000000` border, square/4px radius consistent with the chip system.

### States
| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Primary pill | black fill / white | bg `#333132` | `.btn--nav-primary:focus-visible` ring (present) | — | reduced opacity |
| Secondary pill | pale-blue `#e1e9f2` | darkens | focus-visible ring | — | — |
| Outlined chip | 1px `#000000` | fill/border shift | — | — | — |

### Cards / panels
- Fill white / `#f1f0ec`, **1px `#000000` or `#c5d3e8` border**, radius 4px, no shadow. One inset rule seen: `rgb(197,211,232) 0 -1px 0 inset`.

## 5. Layout Principles

- Radius tokens `--bdrs-*`, breakpoint tokens `--breakpoint-*` (em-based).
- Nav: black "B" box logo + "Browserbase" wordmark left, centered links (Platform/Solutions/Resources/Pricing/Docs), right actions (Log in, Sign up, black "Get a demo" pill).
- Hero: pale-blue full-bleed panel, centered display over orange highlight blocks, dual pill CTAs, pixel-art canvas landscape below.
- Sections divided by hard 1px black rules; bordered cards in a grid.

## 6. Depth & Elevation

- Radius scale: **999px / 99px** (pill CTAs, dominant) · 4px (cards/chips) · 0px (square outlined chips).
- Borders: **1px `#000000`** (structural default, 30×) · 1px `#c5d3e8` · 2px `#d3deed` · 2px `#000000`.
- Elevation: **near-zero shadows** — depth is hard black borders + one pale-blue inset rule (`#c5d3e8 0 -1px 0 inset`). No drop shadows.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| color | 0.3s | ease-in-out | links, text (dominant, 38×) |
| background-color | 0.1s | cubic-bezier(0.3,0,0.15,1) | button hovers |
| transform | 0.2s | cubic-bezier(0.3,0,0.15,1) | hovers |
| background/border/**border-radius**/color | 0.2s | cubic-bezier(…) | buttons (radius animates) |
| border-radius | 0.3s | cubic-bezier(0.3,0,0.15,1) | shape morphs |

House easing: **cubic-bezier(0.3,0,0.15,1)** (a snappy ease). Keyframes: `fade-in`/`fade-out`, `slide-in`/`slide-out`, `animate-up-fallback`, `sticky-column-border`. A word-split reveal easing is present (`--trs-split-words-tfunc: cubic-bezier(.79,.14,.15,.86)`). No animation library detected. Ships **3 `prefers-reduced-motion` blocks**.

## 8. Backgrounds, Effects & WebGL

- **0 CSS gradients, 0 grain, 0 raster background layers.**
- **One 2D `<canvas>` (1312×710)** renders the signature dithered pixel-art mountain landscape.
- 5 background videos elsewhere on the page. No backdrop-filter blur. Atmosphere is flat colour panels + the canvas art.

## 9. Do's and Don'ts

### Do
- Keep chrome black-on-white with warm off-white `#f1f0ec` and pale-blue `#e2e9f3` panels.
- Structure with hard 1px `#000000` borders, not shadows.
- Set type at weight 500 in plain (sans), with GT Standard Mono for labels/code.
- Highlight the hero display in white over orange `#ff5e19` blocks.
- Use full pills (99–999px) for CTAs and square 1px-black chips for tags/templates.
- Reserve the named product colours (director-blue, stagehand-green, magenta, lime…) for product surfaces and illustration.
- Give small text slight positive tracking (+0.16–0.4px).

### Don't
- Don't make the base UI dark — it is a light site.
- Don't use weight 700 — everything is 500.
- Don't add drop shadows; depth is borders + one inset rule.
- Don't let product colours leak into chrome, links, or buttons.
- Don't add CSS gradients — colour is flat blocks + the canvas art.

## 10. Responsive Behavior

- Breakpoints (from stylesheets): em-based `30.06 / 37.5 / 60 / 70 / 80 / 88em` plus px `350 / 960 / 961 / 1408px` — a mixed em+px ladder with named `--breakpoint-*` tokens.
- Nav collapses to a hamburger; grids collapse; the canvas landscape scales.
- No dark theme (`darkSchemeBlocks` 0). **6 container queries**, **3 reduced-motion blocks**.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#ffffff` · Text `#000000` · Muted `#686562` · Border `#000000` (1px, hard) · Panels `#f1f0ec`/`#e2e9f3` · Accent `#ff5e19`
- Font: `plain` sans (body 16–20px/500) + GT Standard Mono labels · Radius: 99px pills / 4px cards / 0px chips · Control height: 39–40px
- Focus: `.btn--*:focus-visible` ring (present) · Primary hover: `#333132`

<browserbase_design_language>
Use the Browserbase design language: playful-technical developer infrastructure on a LIGHT surface. White `#ffffff` canvas, black `#000000` ink, warm off-white `#f1f0ec` and pale-blue `#e2e9f3`/`#c5d3e8` panels — chrome is strictly black-on-white and structure comes from HARD 1px `#000000` borders, not shadows (near-zero elevation, one `#c5d3e8` inset rule). Type is the sans "plain" at weight 500 everywhere (no 700), a GT Planar display tightened to -0.9px, and GT Standard Mono for labels and code; small text carries slight POSITIVE tracking (+0.16–0.4px). The hero headline is white over ORANGE `#ff5e19` inline highlight blocks. Buttons are full pills (99–999px): black `#000000`/white primary (hover `#333132`) and pale-blue `#e1e9f2` secondary, alongside SQUARE 0px chips with a 1px black border. A large NAMED product palette (director-blue `#00b0ff`, stagehand-green `#00c851`, magenta `#ff00ff`, lime `#c4d600`, gold `#cb9915`, blue `#5956ff`) stays on product surfaces and illustration, never in chrome. The signature background is a dithered pixel-art landscape drawn on a 2D canvas — no CSS gradients or grain anywhere. Motion is snappy cubic-bezier(0.3,0,0.15,1) on colour/transform with even border-radius animating. Feels: technical, bright, playful, exact. Avoid: a dark base UI, weight 700, drop shadows, product colours in chrome, and CSS gradients.
</browserbase_design_language>