# Browserbase · Design system migration spec

> Source: https://www.browserbase.com  ·  Curated by OpenDesign  ·  en

> This site is a great example of modern developer tools branding, balancing technical precision with bold, expressive typography.

## 1. Identity DNA

Browserbase's design system treats a web interface not as a marketing brochure, but as the control panel for an industrial-grade power plant for AI agents. Every color, type weight, and spacing decision is geared toward operational clarity and reliability for developers.

**One-liner:** Browserbase provides a reliable and programmable web interface for AI agents.
**Keywords:** Programmable · Reliable · Agents · API · Web
**Analogy:** An industrial-grade power plant for AI agents

## 2. Color

The palette is a study in controlled contrast, pairing earthy neutral grounds like cream and off-white with the uncompromising precision of deep black text. A vibrant orange serves as the sole, high-visibility accent, used surgically to mark interactive elements and critical highlights.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F1F0EC` | main background |
| `--bg-soft` | `#FFFACD` | card background |
| `--bg-quiet` | `#C5D3E8` | quiet area |
| `--ink` | `#000000` | body text |
| `--muted` | `#686562` | placeholder |
| `--accent` | `#FF5500` | single accent |
| `--line` | `rgba(0,0,0,1.0)` | divider |

**Color principle:** Earthy neutral backgrounds with vibrant orange accents for high visibility and technical precision.

The principle is starkness for function; there are no soft pastels or decorative gradients, only flat color blocks that communicate clearly.

## 3. Typography

Typography is built on a modern grotesque-sans, chosen for its clean, technical character. Its voice shifts from massive, tightly-spaced display headings to generously tracked uppercase labels, establishing a hierarchy that is both bold and systematically precise.

- **Display:** grotesque-sans
- **Body:** grotesque-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 187px | 1.0 | 500 | -1.8px | Massive hero display text |
| heading | 36px | 1.05 | 500 | -0.36px | Section headings and subheadings |
| body | 16px | 1.0 | 400 | 0.16px | Standard body text and UI elements |
| caption | 12px | 1.17 | 500 | 0.84px | Small labels and uppercase tags |

**Type rules:**
- Use tight negative letter spacing for large display headings
- Uppercase tracking is generous for small labels
- Weight 500 is the standard for UI and display text

## 4. Spacing

A strict 4px grid governs all rhythm, creating a consistent, predictable foundation for element placement.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px grid-based spacing system

## 5. Surfaces

Surfaces are defined by sharp, literal boundaries rather than atmospheric depth. A simple 1px solid black border provides all necessary delineation, rejecting soft shadows in favor of absolute clarity.

- **Radius:** sm 4px · md 8px · lg 12px · pill 99px
- **Borders:** 1px solid black

## 6. Layout

The layout skeleton is a centered column of content, flanked by wide margins. This structure, combined with generous vertical spacing, creates a dense but legible flow focused on a single, primary reading path.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered content with wide margins and generous vertical spacing

## 7. Motion & Interaction

Motion is applied with the precision of a hydraulic system, not for decoration but for immediate feedback. All transitions on interactive elements use a custom cubic-bezier easing to feel smooth yet snappy, communicating system responsiveness.

- **Durations:** micro 200ms · small 300ms · medium 800ms
- **Easing:** `cubic-bezier(0.3, 0, 0.15, 1)`
- **Patterns:**
  - Smooth background-color and color transitions on interactive elements
  - Opacity and visibility changes for modals or overlays

- **Hover:** Subtle color or background shifts with smooth transitions
- **Click:** Immediate visual response via background-color change
- **Transition:** All properties transition smoothly using custom cubic-bezier easing
- **Keyboard:** Standard focus visibility and tab navigation

## 8. Voice & Don'ts

The editorial voice is technical, direct, and highly capable, mirroring the product's purpose. Headlines are bold and punchy, with orange highlights drawing the eye to programmable verbs and nouns.

- **Tone:** Technical, direct, and highly capable
- **Headline style:** Bold and punchy with highlighted keywords in orange
- **CTA style:** Action-oriented and clear, often using arrows
- **Avoid:** Fluffy marketing jargon / Overly complex technical explanations / Passive voice / Ambiguous CTAs / Excessive use of exclamation marks

### Don'ts
- ❌ Don't use soft pastels — screenshot shows sharp black and vibrant orange instead
- ❌ Don't use rounded corners excessively — screenshot shows sharp pill-shaped buttons and square borders
- ❌ Don't use wide margins — screenshot shows a centered, dense layout with generous vertical padding
- ❌ Don't use light gray for text — screenshot shows high-contrast black and dark gray for readability
- ❌ Don't use decorative serifs — screenshot shows clean, modern grotesque-sans typography
- ❌ Don't use subtle gradients — screenshot shows flat color blocks and solid highlights

They deliberately avoid fluffy marketing jargon, passive voice, and ambiguous calls-to-action.

## System Prompt (paste into AI tool)

```
This design system for Browserbase is a high-contrast, developer-focused interface. It uses a palette of neutral off-whites and creams (#F1F0EC, #FFFACD) with deep black text (#000000) and a vibrant orange accent (#FF5500). Typography is centered around modern grotesque-sans for display and body, with monospace fonts for technical snippets. Critical constraints include avoiding soft pastels, excessive rounded corners, and decorative serifs. The layout is centered and dense, using a 4px grid and generous vertical spacing. Ensure all interactive elements have smooth, snappy transitions using a custom cubic-bezier easing curve. Maintain a direct, technical voice in all copy.
```