---
title: "Browserbase design system"
variant: extended
source: https://www.browserbase.com/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/browserbase-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Browserbase · Design System

> A crisp technical canvas, punctuated by vivid orange and pixel worlds.

**Theme:** light · **Industry:** ai · **Source:** https://www.browserbase.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Browserbase pairs a restrained white-and-black interface with pale blue panels and vivid orange highlights. A long, modular SaaS homepage uses oversized editorial headings, product demos, and pixel-art landscapes to make browser infrastructure feel tangible.

## North star

Keep the interface editorial and precise, letting white space, crisp black type, pale blue structure, and selective orange carry the story.

## Overview

The visual system starts with a white canvas and near-black text, giving the navigation, headings, and product copy a clean, high-contrast foundation. Pale blue-gray panels and fine borders organize demos and content without making the page feel card-heavy; orange is reserved for emphatic highlights, including the hero headline treatment, selected inline words, and the full-width footer. Typography mixes GT Planar for large, compact display headings, plain sans-serif for navigation and body copy, and GT Standard Mono for uppercase utility labels and technical annotations. The page follows a long, carefully segmented vertical rhythm: a centered media-led hero, product explanations, feature grids, templates, workflow steps, proof points, and a contrasting footer. Pixel-art landscapes and browser-interface mockups provide color and texture, while broad white space and squared edges keep the surrounding interface precise and technical.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas and navigation, card areas, and footer text on orange. |
| Carbon Ink | `#000000` | `--color-carbon-ink` | neutral | Primary text, navigation, headings, dark pill CTAs, and high-contrast badges. |
| Glacier Blue | `#c5d3e8` | `--color-glacier-blue` | surface | Pale blue section surfaces and fine structural borders; also frames browser-demo imagery. |
| Warm Graphite | `#686562` | `--color-warm-graphite` | semantic | Muted supporting text and secondary descriptions. |
| Signal Orange | `#ff4500` | `--color-signal-orange` | accent | Hero headline highlight, selected inline emphasis, and the full-width footer band. |
| Cloud Mist | `#f8fafc` | `--color-cloud-mist` | surface | Subtle pale cards and secondary interface surfaces. |
| Haze Blue | `#d3deed` | `--color-haze-blue` | surface | Fine outlines around product cards and pale blue interface elements. |
| Lemon Parchment | `#fffde6` | `--color-lemon-parchment` | surface | Warm highlighted template panel and occasional soft card background. |
| Soft Petal | `#ffc0cb` | `--color-soft-petal` | accent | Small accent within card or illustration details, not a primary brand surface. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#c5d3e8` (Glacier Blue) · `--color-surface-2` → `#f8fafc` (Cloud Mist) · `--color-surface-3` → `#fffde6` (Lemon Parchment) · `--color-text` → `#000000` (Carbon Ink) · `--color-text-muted` → `#686562` (Warm Graphite) · `--color-border` → `#c5d3e8` (Glacier Blue) · `--color-accent` → `#ff4500` (Signal Orange) · `--color-accent-2` → `#ffc0cb` (Soft Petal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#c5d3e8` | 13.86:1 | AAA |
| `#000000` | `#f8fafc` | 20.07:1 | AAA |
| `#000000` | `#fffde6` | 20.44:1 | AAA |
| `#686562` | `#ffffff` | 5.79:1 | AA |
| `#686562` | `#c5d3e8` | 3.82:1 | AA-large |
| `#686562` | `#f8fafc` | 5.53:1 | AA |
| `#686562` | `#fffde6` | 5.64:1 | AA |
| `#ff4500` | `#ffffff` | 3.44:1 | AA-large |
| `#ff4500` | `#c5d3e8` | 2.27:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| plain | `--font-body` | webfont | 400, 500 | Navigation, body copy, buttons, and compact feature headings. | Inter |
| gtStandardMono | `--font-mono` | webfont | 500, 400 | Uppercase eyebrows, utility links, and technical labels. | Space Mono |
| gtPlanar | `--font-display` | webfont | 500, 400 | Display headlines and primary section headings. | Space Grotesk |

- **plain:** Use a clean sans-serif at regular to medium weights; headings and nav stay crisp, without decorative styling.
- **gtStandardMono:** Monospaced labels use uppercase and visibly expanded tracking for a technical, metadata-like feel.
- **gtPlanar:** Medium-weight display face; larger headings are compact, with subtly tightened tracking.

### Type scale — Golden Ratio (ratio ≈ 1.597, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 104px | 500 | 1.1 | 0 | — | gtPlanar | Oversized hero and campaign display headlines. |
| h1 | 45px | 500 | 1.15 | -0.02em | — | gtPlanar | Primary page headline and major section titles. |
| h2 | 36px | 500 | 1.05 | -0.01em | — | gtPlanar | Feature and product section headings. |
| h3 | 20px | 500 | 1.2 | 0.02em | — | plain | Card, template, and feature-item headings. |
| body | 16px | 400 | 1.2 | 0.01em | — | plain | Supporting descriptions and explanatory product copy. |
| caption | 14px | 500 | 1.2 | 0.06em | uppercase | gtStandardMono | Uppercase technical labels and compact metadata. |
| button | 16px | 400 | 1.5 | 0 | — | plain | Primary and secondary CTA text. |
| nav | 16px | 500 | 1 | 0.01em | — | plain | Header navigation links. |
| eyebrow | 14px | 500 | 1.2 | 0.06em | uppercase | gtStandardMono | Small uppercase section labels above content. |
| code | 14px | 500 | 1.2 | 0.06em | uppercase | gtStandardMono | Monospaced technical annotations and code-like labels. |

OpenType features in use: `"ss05"`.

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 3, 4, 5, 6, 7, 8, 10, 12, 14, 16, 18, 20, 24, 64, 80 px.
- Section rhythm 80px · element gap 8px · card padding 5px · max content width 1280px.

The page is a long, centered sequence of full-width bands, with content held to a measured maximum width of 1280px. A mostly single-column editorial flow alternates with two-column product splits, multi-column feature and statistics grids, and a centered CTA. Hairline borders mark section boundaries and columns. Sections feel spacious, with a comfortable density and a measured section gap of 80px; local content groups stay closer together. Align most headings and copy to the left, reserving centered alignment for selected hero, template, and conversion moments.

## Shape & elevation

- Radius: button `9999px` · badge `9999px` · pill `9999px`
- Shadow `inset` (nav): `rgb(197, 211, 232) 0px -1px 0px 0px inset`
- Motion: standard transition `0.3s ease-in-out` on interactive elements.

Keep surfaces predominantly flat. Use fine pale blue-gray hairlines to divide sections and outline selected product cards; avoid drop shadows. Layer imagery, highlighted text blocks, and interface mockups directly on the canvas or on restrained tinted panels. Rounded pills are for buttons and badges, while most cards and section edges remain square.

## Imagery

Use media as a defining brand feature: pixel-art mountain landscapes, browser and workflow mockups, and illustrated product scenes. Keep artwork large and often edge-spanning within its section, with browser-interface visuals contained in pale blue frames. The pixel landscapes are vivid and deliberately textured; treat their colors as illustration content rather than expanding the core UI palette.

## Components

### Primary CTA

Black pill button with white, medium-weight plain sans text; use for prominent actions such as Get a demo.

### Secondary CTA

Pale blue-gray pill with black text, paired with a black primary action; keep the contrast understated.

### Technical link

Black uppercase monospaced label, used as a compact text link such as TRY FOR FREE.

### Product demo panel

Wide browser or workflow preview framed by pale blue-gray surfaces and thin borders, paired with explanatory copy.

### Template selector

Stacked square-cornered rows with thin black outlines, balanced by a pale yellow detail panel.

### Metric tile

Short uppercase mono label and prominent metric inside a softly tinted, square-cornered block.

### Footer band

Full-width Signal Orange field with white brand mark and grouped black navigation links.

### Measured component styles

- **Primary button** (“Get a demo”): background #000000 · text #ffffff · radius 99px · padding 14px 18px · 500 16px plain
- **Secondary button** (“Applies to jobs on my behalf”): transparent background · text #000000 · border 1px solid #000000 · radius 0px · padding 7.2px 47px 7.2px 12px · 400 16px plain
- **Link** (“TRY FOR FREE”): transparent background · text #000000 · radius 0px · padding 0px · 500 14px gtStandardMono · uppercase
- **Card** (“Search API Web search, built for agents.”): transparent background · text #000000 · border 2px solid #d3deed · radius 0px · padding 20px 0px 0px 0px · 400 16px plain
- **Badge** (“BRIDGE”): background #c4edff · text #000000 · radius 0px · padding 0px 3.5px · 500 14px gtStandardMono
- **Navigation item** (“Browsers”): transparent background · text #000000 · radius 0px · padding 3.2px 6px · 500 16px plain

## Do

- Keep the main canvas white and the text near-black.
- Use orange sparingly for high-value emphasis and the footer band.
- Structure product content with pale blue-gray surfaces and hairlines.
- Pair large display headings with straightforward sans-serif body copy.
- Use monospaced uppercase labels for utility and technical details.
- Let pixel-art and product demos provide most of the visual texture.

## Don't

- Do not introduce gradients or unmeasured brand colors.
- Do not round cards or section frames; reserve pills for actions and badges.
- Do not add decorative drop shadows to otherwise flat content.
- Do not use orange as a general background across regular sections.
- Do not let illustration colors redefine the UI palette.
- Do not crowd sections with dense copy or tightly packed modules.

## Agent prompt

Build a new Browserbase-style page as an editorial, technical SaaS experience. Use Gallery White (#ffffff) for the main canvas and Carbon Ink (#000000) for primary text, navigation, headings, and dark CTA pills. Apply Glacier Blue (#c5d3e8) and Haze Blue (#d3deed) as restrained panel and border colors; reserve Signal Orange (#ff4500) for focused emphasis and an occasional high-contrast band. Use GT Planar or a close substitute such as Space Grotesk for display headings, plain sans-serif such as Inter for body and navigation, and GT Standard Mono or Space Mono for uppercase technical labels. Organize content in spacious, bordered sections, alternating editorial text with browser previews, pixel-art illustrations, feature grids, and metrics. Keep cards mostly square and flat; make buttons pill-shaped. Avoid gradients, heavy shadows, and invented colors.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero copy over a wide, pale-blue landscape scene. | primary and secondary CTAs, brand promise first | orange headline highlight, pixel-art landscape, pill buttons |
| 2 | logo-cloud | Single heading above a six-column strip of customer logos. | social proof, linked customer stories | thin section borders, logo row |
| 3 | feature-grid | Left-aligned section intro followed by stacked product capability rows. | feature discovery, show capability before detail | product interface previews, subtle tinted panels |
| 4 | feature-split | Two-column product explanation and demo video. | feature explanation, free-trial link | left-aligned copy, wide demo panel, mono CTA link |
| 5 | feature-split | Two-column product explanation and browser demo. | feature explanation, free-trial link | wide browser preview, thin panel framing |
| 6 | feature-split | Six-column composition with text on the left and illustration on the right. | explain product metaphor, scan concise capability list | highlighted heading, pixel-style computer art, mono inline labels |
| 7 | feature-grid | Intro heading above a multi-column grid of browser automation use cases. | browse use cases, individual get-started links | browser mockups, compact card copy, repeated link pattern |
| 8 | feature-grid | Centered section title above a split selector and highlighted template detail. | select a template, review details before trying | outlined selector rows, pale yellow panel, dark try button |
| 9 | how-it-works | Three-column instructional cards with heading and short intro above. | sequential onboarding, explain each step | numbered workflow imagery, three-column layout, short captions |
| 10 | cta | Centered heading, concise reassurance, and paired actions. | try for free, talk to sales | centered CTA block, paired pill buttons |
| 11 | stats | Two-column, image-led impact statement with a large metric across the lower edge. | communicate impact, anchor with one key metric | pixel-art mountain, highlighted heading, oversized statistic |
| 12 | stats | Section heading followed by four adjacent metric tiles. | social proof, scan company and usage metrics | softly tinted tiles, compact uppercase labels |
| 13 | footer | Full-width orange footer with brand mark and grouped link columns. | browse by category, access company and legal links | orange footer band, white logo, multi-column link groups |

## Source CSS custom properties (selected)

```css
--color-white: #fff;
--color-blue: #5956ff;
--color-orange: #ff5e19;
--color-black: #000;
--color-grey-25: #fcfcfc;
--color-grey-50: #f8f8f8;
--color-grey-100: #f2f2f2;
--color-grey-200: #e5e5e5;
--color-grey-300: #d4d4d4;
--color-grey-400: #a9a9a9;
--color-grey-500: #7d7d7d;
--color-grey-600: #5f5f5f;
--color-grey-700: #444;
--color-grey-800: #2c2c2c;
--color-grey-900: #1a1a1a;
--color-grey-950: #0f0f0f;
--color-blue-50: #f6f6ff;
--color-blue-100: #e0e0ff;
--color-blue-200: #c1c1ff;
--color-blue-300: #a3a2ff;
--color-blue-400: #7d7cff;
--color-blue-500: #5956ff;
--color-blue-600: #382bea;
--color-blue-700: #2623c1;
--color-blue-800: #181499;
--color-blue-900: #050085;
--space-0-5: .125rem;
--space-1: .25rem;
--space-1-5: .375rem;
--space-2: .5rem;
--space-3: .75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-9: 2.25rem;
--space-10: 2.5rem;
--space-12: 3rem;
--space-14: 3.5rem;
--space-16: 4rem;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/browserbase-com