Playful-technical developer infrastructure on a LIGHT surface, not the dark mono site the category suggests — white nav, black #000000 ink, and warm off-white #f1f0ec plus pale-blue #e2e9f3/#c5d3e8 panels, with no dark theme at all. The chrome is strictly black-on-white and structure comes from HARD 1px #000000 borders rather than shadows, of which there are essentially none (just a single #c5d3e8 inset rule). Type is the sans "plain" held 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. Four signatures carry the brand: the hero headline is white over ORANGE #ff5e19 inline highlight blocks; a large NAMED product palette (director-blue #00b0ff, stagehand-green #00c851, magenta #ff00ff, lime #c4d600, gold #cb9915, blue #5956ff) is keyed to individual products and kept out of chrome; the dithered pixel-art mountain landscape is drawn on a 2D canvas rather than in CSS (zero gradients, zero raster layers); and buttons are full pills (99 to 999px) — black primary hovering to #333132, pale-blue secondary — alongside square 0px chips with a 1px black border. Motion is a snappy cubic-bezier(0.3,0,0.15,1) on colour and transform, with even border-radius animating.
Browse Browserbase in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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-visiblerules. Reality check: hint ("technical dark, mono-forward") is wrong on the first count. Browserbase is a LIGHT site — white nav, black#000000ink, warm off-white#f1f0ecand pale-blue#e2e9f3/#c5d3e8panels,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#ff5e19inline 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#000000border with essentially zero shadows.
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.
| 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 |
| 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 |
| 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 |
| 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.
#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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.