Browserbase Design System

Overview

Browserbase presents a bold, developer-first aesthetic that balances technical precision with playful warmth. The design centers on a high-contrast pairing of a cool blue-gray canvas (#e2e9f3) against an aggressive orange-red brand color (#ff4500), creating immediate visual hierarchy. Typography relies on a three-tier system: GT Planar — a geometric sans-serif with tight letter-spacing — commands attention at heading sizes; Plain delivers clean, generous line-height for body copy at an unusually large 24px base size; GT Standard Mono provides monospaced labeling that signals technical credibility. The overall mood is confident, modern, and approachably irreverent — a developer tool that doesn't take itself too seriously while remaining ruthlessly functional.

Color Palette

Core Colors

| Token | Hex | Usage | |---|---|---| | --color-primary | #ff4500 | Brand accent, CTA backgrounds, headline highlight blocks | | --color-bg | #e2e9f3 | Page background (cool blue-gray) | | --color-surface | #000000 | Dark UI surfaces, primary button text | | --color-text-primary | #000000 | Body copy, headings, nav items | | --color-text-secondary | #ffffff | Text on dark surfaces | | --color-text-muted | #686562 | Secondary descriptive text | | --color-accent-blue | #c4edff | Light blue decorative accents | | --color-accent-green | #00c851 | Success states, status indicators | | --color-surface-warm | #f8f7f4 | Warm white card/section backgrounds | | --color-surface-yellow | #fffde6 | Subtle yellow highlights | | --color-shadow-inset | #c5d3e8 | Inset shadow for depth |

Semantic

• Page background: #e2e9f3 — a distinctive cool blue-gray that sets the entire page apart from typical white SaaS pages
• Primary CTA: bg #ff4500, text #ffffff, fully rounded pill shape
• Secondary CTA / Nav buttons: transparent background, #000000 text, no border, hover state shifts opacity or adds subtle underline
• Ghost / Tertiary button: bg #f8f7f4, text #000000, pill radius
• Hover states: background-color transitions at 100ms with cubic-bezier easing; primary buttons darken slightly; nav links gain opacity shift
• Headline highlight: inline block with #ff4500 background behind key phrases

Typography

Font Families

--font-display: Plain, "system-ui", Arial, sans-serif;
--font-heading: "GT Planar", "system-ui", Arial, sans-serif;
--font-body:    Plain, "system-ui", Arial, sans-serif;
--font-mono:    "GT Standard Mono", ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;

The type system operates on deliberate contrast. GT Planar serves exclusively as the display/heading face — its geometric construction, medium weight (500), and aggressive negative letter-spacing (-0.9px at H2, -0.48px at H3) give headlines a compact, engineered feel that reads like infrastructure. Plain handles everything else: body copy, navigation, UI labels. It's a clean humanist sans with neutral proportions and comfortable reading metrics. The unusually large body size (24px) pushes Browserbase toward a magazine-like editorial density rather than typical SaaS compactness. GT Standard Mono enters for technical labels, stats badges, and micro-copy where monospace conveys precision — always tracked positively (0.84px at label sizes) for airy legibility.

Type Scale

| Role | Family | Size | Weight | Line-height | Color | |---|---|---|---|---|---| | Display / H1 | Plain | 16px | 400 | 24px | #000000 | | H2 / Hero heading | GT Planar | 45px | 500 | 51.75px | #000000 | | H3 / Section heading | GT Planar | 24px | 500 | 24px | #000000 | | H4 / Label / Stat badge | GT Standard Mono | 14px | 400 | 16.8px | #000000 | | Body | Plain | 24px | 400 | 27.84px | #000000 | | Mono / Code | GT Standard Mono | 13px | 400 | ~18px | #000000 |

Typography Notes

• H2 headings feature negative letter-spacing (-0.9px) creating a tightly-set, impactful display
• H4/label role uses GT Standard Mono with positive letter-spacing (0.84px) — wide-tracked monospace for badge-like appearance
• Headline text in the hero uses an inline highlight technique: specific phrases sit inside a solid #ff4500 background rectangle with no padding, creating a marker-highlight visual
• Body copy at 24px is significantly larger than industry standard (typically 16–18px), signaling confidence and readability priority
• Navigation items use 16px Plain at weight 500 — slightly bolder than body for scanability
• No all-caps treatments observed; case is sentence/title case throughout
• Font loading uses font-display: swap across all custom faces with woff2 sources served locally

Spacing Scale

3px   — micro adjustments, icon internal spacing
4px   — xs gaps, tight padding
5px   — minor offsets
6px   — common micro-gap (high frequency in data)
8px   — base unit, icon-button padding, small gaps
10px  — nav item vertical padding
11px  — specific offset value
12px  — standard small gap
16px  — md unit, component padding, gutters
24px  — lg unit, section-internal spacing, card padding
48px+ — xl values (60px, 75px observed for major section rhythm)

Container widths:

• Max content width: ~1312px (sections), 1425px (main/header)
• Full-bleed sections: 100vw with background color extension
• Side padding: 48px desktop (from header container)
• Section vertical padding: 60px–75px between major sections

Border Radius Vocabulary

--radius-sm:   50px     — standard buttons (very rounded but not full pill)
--radius-md:   999px    — full pill buttons, avatar containers, tag shapes
--radius-none: 0px      — navigation links, menu items, structural elements

The radius system is binary: elements are either fully rounded (pills) or completely sharp. There are no intermediate 4px/8px radii. This creates a consistent language where interactive elements feel soft and touchable while layout structures remain rectilinear.

Shadow Vocabulary

--shadow-inset: rgb(197, 211, 232) 0px -1px 0px 0px inset;

Shadow usage is minimal and intentionally restrained. The single observed shadow is an inset top-border simulation using box-shadow, creating subtle depth separation without traditional drop shadows. The philosophy favors flat design with color-based depth rather than layered elevation.

Component Recipes

Primary CTA Button

background-color: #ff4500;
color: #ffffff;
border: none;
border-radius: 999px;
padding: 12px 28px;
font-family: Plain, "system-ui", Arial, sans-serif;
font-size: 16px;
font-weight: 500;
transition: background-color 0.1s cubic-bezier(0.3, 0, 0.15, 1);
cursor: pointer;

On hover: background darkens slightly via opacity or shade shift.

Secondary / Ghost Button

background-color: transparent;
color: #000000;
border: none;
border-radius: 0px;
padding: 10px 20.8px;
font-family: Plain, "system-ui", Arial, sans-serif;
font-size: 16px;
font-weight: 500;
transition: color 0.1s cubic-bezier(0.3, 0, 0.15, 1);

Tertiary / Warm Ghost Button

background-color: #f8f7f4;
color: #000000;
border: none;
border-radius: 999px;
padding: 12px 24px;
font-family: Plain, "system-ui", Arial, sans-serif;
font-size: 16px;
font-weight: 400;
transition: background-color 0.1s cubic-bezier(0.3, 0, 0.15, 1);

Input

/* Not explicitly observed in above-fold; inferred from patterns */
background-color: #ffffff;
color: #000000;
border: 1px solid #c5d3e8;
border-radius: 999px;
padding: 12px 16px;
font-family: Plain, "system-ui", Arial, sans-serif;
font-size: 16px;
font-weight: 400;

Card

- Background: #f8f7f4 (warm white) or pure white depending on context
- Border: none or very subtle
- Border-radius: 0px (sharp corners for content cards)
- Padding: 24px internal
- Shadow: none (flat design)
- Typography: GT Planar for titles, Plain for descriptions

Navigation Header

- Position: fixed or static top
- Height: auto (~64px)
- Background: #ffffff
- Layout: flex row, space-between or start-center-end
  [Logo (Browserbase + B icon)] [Platform] [Solutions] [Resources] [Pricing] [Docs] ... [Log in] [Sign up] [Get a demo]
- Logo: Orange square "B" icon + "Browserbase" wordmark in black Plain 16px
- Nav links: Plain 16px weight 500, black, 10px vertical padding 20.8px horizontal
- "Get a demo" button: black bg, white text, 999px radius
- Mobile: hamburger menu triggers overlay/drawer
- Bottom border: possibly 1px #c5d3e8 inset shadow for separation

Hero Section

- Background: #e2e9f3 (page bg) with possible subtle texture/pattern
- Min-height: ~70-80vh
- Layout: centered column, max-width constrained
- Content stacking:
  [Headline (H2, GT Planar 45px) with inline #ff4500 highlight on "Give your agents access to the whole web."]
  [Subheadline (Body 24px Plain)]
  [CTA row: "Get API key" (black pill) + "Copy prompt" (white ghost pill with icon)]
  [Illustration area: pixel-art mountain range illustration below text, full-width at bottom of hero section]
- Illustration style: retro pixel art, multi-colored mountains (black, orange, yellow, green dots), positioned absolute bottom
- Spacing: generous vertical rhythm between headline → subtext → CTAs → illustration

Logo Cloud / Social Proof Bar

- Background: #ffffff or transparent on page bg
- Content: "10,000+ COMPANIES BUILDING BEYOND THE API"
- Font: GT Standard Mono 13-14px, uppercase/tracked, centered
- Layout: horizontal centered strip, likely with logo grid below

Motion & Animation

Transition Tokens

--transition-fast:   background-color 0.1s cubic-bezier(0.3, 0, 0.15, 1);
--transition-base:   color 0.1s cubic-bezier(0.3, 0, 0.15, 1);
--transition-smooth: color 0.3s ease-in-out, opacity 0.3s ease-in-out;
--transition-opacity: opacity 0.19s ease-in 0.35s;
--transition-fade:   opacity 0.3s ease-in-out;
--transition-transform: transform 0.2s cubic-bezier(0.3, 0, 0.15, 1);
--transition-radius: border-radius 0.3s cubic-bezier(0.3, 0, 0.15, 1);

Keyframe Animations

• fade-in — entrance fade for scroll-revealed elements
• fade-out — exit fade
• slide-in — slide-up or slide-from-side entrance
• slide-out — exit slide animation
• animate-up-fallback — upward motion fallback for reduced-motion contexts

Interaction Patterns

• Scroll-triggered reveals: sections animate in via fk-scroll-reveal component (likely IntersectionObserver-based)
• Navigation dropdowns: opacity transitions on sub-menus with slight delay (0.35s)
• Hover states: color/opacity shifts only — no scale transforms on buttons
• Focus states: likely outline or ring following accessible patterns
• Reduced motion: animate-up-fallback suggests graceful degradation for prefers-reduced-motion

Layout System

Grid

• Mobile (<768px): Single column, stacked sections, full-width padding
• Tablet (768px+): Emerging two-column grids for feature areas
• Desktop (1024px+): Multi-column layouts up to ~1312px content width, 1425px total header width

Header Architecture

[Logo: 🟧B Browserbase]  [Platform] [Solutions] [Resources] [Pricing] [Docs]          [Log in] [Sign up] [🖤 Get a demo]
←——————————————————— 1425px max-width, 48px side-padding, white bg ——————————————————————————→

Hero Section

┌──────────────────────────────────────────────────────┐
│                   #e2e9f3 bg                         │
│                                                      │
│        ┌──────────────────────────┐                  │
│        │  Give your agents access │ ← GT Planar 45px │
│        │  to the whole web.       │ ← orange highlight│
│        └──────────────────────────┘                  │
│                                                      │
│  Browserbase makes the web as reliable... ← Body 24px│
│                                                      │
│    [🔑 Get API key]  [📋 Copy prompt]                │
│                                                      │
│  ▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀  ← pixel art mountains     │
│  ████░░████░░████░░████       (bottom-aligned)       │
└──────────────────────────────────────────────────────┘

Logo Cloud Section

┌──────────────────────────────────────────────────────┐
│                    white/transparent bg              │
│                                                      │
│   10,000+ COMPANIES BUILDING BEYOND THE API          │
│            ↑ GT Standard Mono, tracked, centered     │
│                                                      │
│   [logo] [logo] [logo] [logo] [logo] [logo] ...      │
└──────────────────────────────────────────────────────┘

Imagery Style

• Hero illustration: Retro pixel-art mountain range — deliberately low-resolution dot-matrix aesthetic with vibrant palette (black, orange-red #ff4500, yellow-green, lime green) against the blue-gray sky background. Positioned at bottom of hero, spans full width, creates a playful "landscape" anchor.
• Illustration technique: Raster pixel art suggesting hand-crafted digital nostalgia — evokes early computing, demoscene aesthetics, and developer culture
• Color treatment: Illustration uses brand colors (orange) plus naturalistic greens/yellows for terrain; no gradients, pure flat pixels
• Role: Imagery supports rather than dominates — it grounds the abstract "web access" concept in a physical landscape metaphor while adding personality
• No photography: Pure illustration/vector approach throughout
• Future sections: Likely continues pixel-art or flat vector illustrations maintaining the same retro-digital vocabulary

Icon System

• Library: Material Symbols Outlined (Google Fonts integration detected)
• Specific icons observed: hamburger menu (3-line), arrow-forward/back, copy/content_copy, add, check, close/menu, dashboard_customize, grid_view, verified_user, info, manage_search, keyboard_arrow_down, expand_less/more, eye_tracking, article, block, checklist, task_alt, do_not_disturb_on, hub, group, language, remove, airline_stops, apps, arrow_selector_tool, conversion_path
• Treatment: Icons appear in outlined stroke style, sized approximately 20px (opsz,wght=20,300 from URL), colored to match context (black on light, white on dark). Used sparingly — primarily in buttons ("Copy prompt") and navigation.
• Custom SVG: Additional custom SVG symbols defined inline for brand-specific icons (browser/document shapes)

Recommended Frontend Stack

- Framework:      Next.js 14+ (App Router) or Astro for static-heavy landing
- Styling:        Vanilla CSS with CSS custom properties (design tokens) + optional PostCSS
- Fonts:          Self-hosted woff2 files (GT Planar, Plain, GT Standard Mono) with system fallbacks
                 For reproduction: Use "DM Sans" as Plain substitute, 
                                  "Space Grotesk" or "Manrope" as GT Planar substitute,
                                  "JetBrains Mono" as GT Standard Mono substitute
- Animation:      Vanilla CSS transitions + IntersectionObserver for scroll reveals
- Icons:          Material Symbols Outlined (Google Fonts) + custom SVG for brand marks
- Component lib:  None (custom components matching atomic patterns observed)
- Build:          Vite or Next.js built-in

Design Principles

1. High-contrast confidence — The #ff4500 on #e2e9f3 pairing refuses to blend in. Every primary action demands attention through saturation, not size.
2. Typography as infrastructure — GT Planar's geometric rigidity and negative tracking signal engineering precision; Plain's oversized body copy prioritizes reading comfort over information density.
3. Flat depth — No drop shadows, no gradients on surfaces, no elevation layers. Depth comes from color juxtaposition and the rare inset shadow.
4. Playful technicality — Pixel-art illustrations and monospaced labels balance the seriousness of "infrastructure for AI agents" with creative warmth. This is a tool built by people who enjoy building.
5. Radical rounding on interaction, sharpness on structure — Buttons are pills (999px radius); cards and containers are rectangles (0px radius). Interactive elements feel soft; content frames feel precise.
6. Generous whitespace as luxury — 24px body text, 60–75px section gaps, 48px container padding. The layout breathes because the content is given room to command attention.
7. Developer-default aesthetics — Monospace labels, API-key CTAs, terminal-adjacent color choices. The design speaks fluently to its audience without resorting to generic SaaS gloss.