---
name: Browserbase
description: "This site is a great example of modern developer tools branding, balancing technical precision with bold, expressive typography."
version: alpha

colors:
  background: "#F1F0EC"
  primary: "#000000"
  tertiary: "#FF5500"
  neutral: "#686562"
  bg-soft: "#FFFACD"
  bg-quiet: "#C5D3E8"
  line: "rgba(0,0,0,1.0)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 187px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1.8px"
  heading:
    fontFamily: grotesque-sans
    fontSize: 36px
    lineHeight: 1.05
    fontWeight: 500
    letterSpacing: "-0.36px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "0.16px"
  caption:
    fontFamily: grotesque-sans
    fontSize: 12px
    lineHeight: 1.17
    fontWeight: 500
    letterSpacing: "0.84px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 99px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

Browserbase provides a reliable and programmable web interface for AI agents.

*An industrial-grade power plant for AI agents*

## Colors

Earthy neutral backgrounds with vibrant orange accents for high visibility and technical precision.

- **Background (`#F1F0EC`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Accent (`#FF5500`)** — uses `accent` token
- **Muted (`#686562`)** — uses `muted` token
- **Borders (`rgba(0,0,0,1.0)`)** — uses `line` token

## Typography

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

- 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

## Layout

Centered content with wide margins and generous vertical spacing

*Rhythm:* Consistent 4px grid-based spacing system

## Elevation & Depth

- Borders: 1px solid black

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 99px

## Components

- **button:** Solid black pill with white text or outlined pill with black text
- **card:** Light yellow or cream background with simple content blocks
- **chip:** Small rounded tags with uppercase text and subtle borders
- **input:** Standard text inputs with clear borders
- **hero:** Massive display typography with vibrant orange text highlights

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

```
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.
```