Signal Orange
#ff4500Orange outline accent for tags, dividers, and focused UI edges. Do not promote it to the primary CTA color
Browserbase
browserbase.comWebsite preview
The design language
Browserbase reads as a data-forward developer tool dressed in editorial broadsheet clothing: a near-monochrome canvas anchored by a single hot orange used purely for typographic emphasis, never for buttons. The interface stays quiet with black, white, and off-white surfaces, while cards and feature blocks introduce soft pastel tints — lavender-gray, sky blue, cream — to group content without resorting to shadows. Display headlines in GT Planar at large sizes sit alongside compact GT Standard Mono labels, creating the rhythm of a technical magazine: large confident statements punctuated by precise metadata. Filled black pill buttons carry the weight of every primary action; the orange is reserved for highlight boxes inside headlines and the footer band, making the brand color a punctuation mark rather than a navigational cue.
Color palette
brand
neutral
Ink Black
#000000Primary text, filled action buttons, card borders, dividers — the structural spine of the entire interface
Paper White
#ffffffPage canvas, card surfaces, button text on dark fills, icon fills on dark backgrounds
Faint Slate
#f8fafcSubtle off-white for logo strip cards, secondary panel backgrounds, alternating section tint
Lavender Mist
#e2e9f3Feature card surfaces and section background tints — soft cool gray that groups content without weight
Blue-Gray Mist
#c5d3e8Hero background tint, code-card surfaces, soft borders — a textured atmospheric wash
Cream Wash
#fffde6Warm pale tint for secondary card surfaces and badge backgrounds — adds warmth without chroma
Sky Tint
#c4edffCode/terminal block backgrounds, inline highlight washes on body text, light badge fills
Graphite
#686562Muted body text, secondary borders — the only step down from pure black for de-emphasized content
Typography
Type scale
Major Second (1.125) · 16px basedisplay
189px · 500 · 1 · -9.45px trackingThe quick brown fox jumps
heading-lg
45px · 500 · 1.1 · -0.9px trackingThe quick brown fox jumps
heading
34px · 400 · 1.15 · -0.68px trackingThe quick brown fox jumps
subheading
24px · 500 · 1.3 · -0.12px trackingThe quick brown fox jumps
body
16px · 400 · 1.5 · 0.11px trackingThe quick brown fox jumps
caption
14px · 400 · 1.2 · 0.6px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
plain
- Weights
- 400, 500
- Sizes
- 16px, 24px
- Line height
- 1.30–1.50
- Letter spacing
- 0.0070em–0.0100em (~0.11–0.24px at 16px)
- Fallback
- Inter
Body text and UI labels at 16px (lh 1.50) and subheadings at 24px (lh 1.30). Neutral grotesque with near-zero letter-spacing — invisible by design, letting the display face carry hierarchy. Substitute: Inter or Geist.
Additional typeface
gtPlanar
- Weights
- 400, 500
- Sizes
- 34px, 45px, 189px
- Line height
- 1.00–1.15
- Letter spacing
- -0.0500em at 189px (-9.45px), -0.0200em at 34–45px (-0.68 to -0.9px)
- Fallback
- GT America
- Features
- "ss05" on
Display and heading face. Carries every editorial headline. Aggressive negative tracking (-0.02em to -0.05em) tightens the geometric forms; the "ss05" alternate glyph set is the signature — it reshapes letterforms into the brand's distinct voice. The 189px hero size is a statement, not a heading. Substitute: GT America or Söhne Breit for the geometric density.
Additional typeface
gtStandardMono
- Weights
- 400
- Sizes
- 14px
- Line height
- 1.00–1.20
- Letter spacing
- 0.0300em–0.0600em (0.42–0.84px at 14px)
- Fallback
- JetBrains Mono
Metadata labels, section eyebrows, uppercase tags, code-adjacent annotations. Positive tracking (0.03–0.06em) widens the mono into a label utility, not running code. Substitute: JetBrains Mono or IBM Plex Mono.
Spacing & shape
Spacing
- Density
- compact
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 64-96px
- Card padding
- 16-24px
- Element gap
- 8-16px
Border radius
tags
999pxcards
4pxbuttons
50pxSpacing scale
3px4px5px6px7px8px10px11px12px16px21px24px25px30px32px38px40px47px48px56px60px75px94px96px224pxGuidelines
Do
- Use #000000 fill with 50px border-radius for every primary action button — the black pill is the only action surface.
- Wrap a key phrase in any headline with a #ff4500 orange highlight box at the same font size and weight as surrounding text.
- Apply 'ss05' font-feature-settings to all gtPlanar text — the alternate glyph set is the brand's typographic identity.
- Use #e2e9f3 lavender-mist for feature card surfaces and #f8fafc faint-slate for logo strip cards to create grouping without dividers.
- Set gtPlanar display headlines with letter-spacing -0.02em to -0.05em (tighter as size increases) — negative tracking is what makes the headlines feel editorial.
- Use gtStandardMono 14px with 0.06em letter-spacing in uppercase for section metadata, eyebrows, and stat labels.
- Keep the interface 95%+ monochrome — the single orange is a highlight tool, not a surface color.
Don’t
- Never use #ff4500 as a button background, border, or hover state — it is a typographic accent only.
- Never use box-shadow for card elevation — communicate depth through surface color contrast and 1px borders instead.
- Never use a geometric or display font for body text — plain (or Inter substitute) is the only UI face below 24px.
- Never use fully rounded 999px radius on buttons — the 50px pill is a specific mid-weight, not a full capsule.
- Never use chromatic text colors for body copy — text is #000000 or #686562 only.
- Never place multiple orange highlight boxes in the same headline — one phrase per line gets the emphasis.
- Never use #0000ee or browser default link blue — underlined #000000 is the link style.
Components
Pill Action Button (Primary)
Filled black CTA used for every primary action — 'Get API key', 'Get a demo', 'Get started'Background #000000, text #ffffff, family plain at 16px weight 500, padding 8px 21px (vertical/horizontal), border-radius 50px. No border. Compact height (~36px). The heavy black fill is the only saturated action surface in the system.
Ghost Button
Secondary action with icon — 'Copy prompt' with copy iconBackground transparent, border 1px #000000, text #000000, family plain 16px weight 500, padding 8px 21px, border-radius 50px. Icon sits to the right of label with 6px gap. Behaves as the quiet companion to the primary pill.
Orange Highlight Box
Inline typographic emphasis inside headlines — wraps a key phrase with an orange blockBackground #ff4500, text #000000, family gtPlanar at heading size with normal weight. Sits inline within a headline, with the same baseline and size as surrounding text. Padding ~2px 6px, no border-radius or very slight (~2px). The highlight is the signature: it makes the orange a punctuation mark, not a control.
Navigation Bar
Top-level site navigationBackground #ffffff with 1px #e2e9f3 bottom border, height ~56px, padding 3px horizontal. Left: logo (orange B icon + plain wordmark). Center: nav links in plain 16px #000000 with 16px column gap. Right: 'Log in' (text link), 'Sign up' (text link), 'Get a demo' (pill button). Links spaced 21px apart.
Feature Card
4-column grid card for feature illustrations and descriptionsBackground #e2e9f3, border-radius 4px, padding 16-24px. Contains a browser-window mockup illustration (white card with 3-dot chrome, ~3px radius, light gray border), a headline in gtPlanar 16-24px weight 500, body text in plain 16px #686562, and a 'Get started' pill button at the bottom. Cards sit directly on the white canvas — the lavender fill creates the grouping.
Logo Card
Company logo cell in the social-proof stripBackground #f8fafc, border-radius 4px, padding 24px vertical / 24-32px horizontal. Contains a single grayscale company logo centered. Arranged in a horizontal row with 6-8px column gaps. Subtle background tint lets the logos read as a group without dividers.
Code/Terminal Card
Code snippet or search query demonstration blockBackground #c5d3e8 or #c4edff, border-radius 4px, padding 16-24px. Contains a mono label at the top in gtStandardMono 14px (e.g. 'Searching for "roundtrip flight from SFO to NYC"') and one or more light input fields below (white fill, ~3px radius, 1px lavender border). Functions as a product demonstration surface.
Browser Window Mockup
Illustration element inside feature cards — mimics a real browser tabWhite surface with 1px #e2e9f3 border, border-radius ~3px. Top bar shows three small circular dots (window controls) in #c5d3e8. Content area contains a simplified UI element (sign-in form, broken-flow alert, search list) rendered in the same monochrome + single-orange language as the rest of the system. Always sits inside a feature card.
Section Header
Centered heading group for content sectionsTwo-line structure: large headline in gtPlanar 34-45px weight 500, #000000, letter-spacing -0.68 to -0.9px, with an orange highlight box on the key phrase. Subtitle below in plain 16px weight 400, #686562, line-height 1.50. Centered on the canvas with 16-24px gap between headline and subtitle.
Two-Column API Block
Product feature row — visual left, description rightLeft column: code/terminal card (see above) taking ~55% width. Right column: headline in plain or gtPlanar 18-24px, body in plain 16px #686562, and an underlined text link in #000000. Columns separated by 24-32px gap. Aligned top, not centered.
Mono Eyebrow Label
Section metadata, small uppercase tag above or below contentFamily gtStandardMono 14px weight 400, letter-spacing 0.06em, uppercase, color #000000 or #686562. Used for '10,000+ COMPANIES BUILDING BEYOND THE API'-style stat strips. Centered or left-aligned, sits 16-24px from the nearest content block.
Footer Band
Site footerBackground #ff4500 (Signal Orange), text #000000. Full-bleed. The orange band is the only large chromatic surface in the system — it bookends the page and makes the footer unmistakable. Content stacks centered with plain text links and metadata.
Surfaces & elevation
Level 0
Paper White
#ffffffPrimary page canvas and content section backgrounds
Level 1
Faint Slate
#f8fafcLogo strip band, alternating section tint, quiet panel backgrounds
Level 2
Lavender Mist
#e2e9f3Feature card surface, grouped content blocks, code-card base
Level 3
Blue-Gray Mist
#c5d3e8Hero atmospheric background, elevated card surfaces, soft borders
Level 4
Cream Wash
#fffde6Warm accent surface, badge backgrounds, callout fills
Elevation is communicated through surface color shifts and hairline 1px borders, never through drop shadows. Cards sit on the canvas via contrast between lavender/cream fills and the white background; a 1px black or lavender border seals the edge. Box-shadow appears only once in the system — a single soft blue-gray halo (#c5d3e8) behind the hero illustration area. This flatness is a signature: the design trusts color and spacing to create depth, not simulated lighting.
Layout & imagery
Layout
Full-bleed hero with atmospheric blue-gray background and centered headline + CTA stack. Content sections center within a ~1200px max-width. Logo strip spans full width as a quiet band between hero and content. Feature sections alternate between centered text-only headers and two-column (visual + text) product rows. Feature card grid is 4 columns at desktop, with cards on lavender surfaces. Vertical rhythm is generous: 64-96px between major sections, 8-16px between elements. The page reads top-to-bottom as: dramatic hero → quiet social proof → editorial feature sections → product showcases → orange footer. Navigation is a single sticky top bar with a pill CTA. The layout trusts whitespace and surface color to create grouping, never visible grid lines or dividers.
Imagery
Imagery is minimal and deliberately pixelated/digital. The hero centerpiece is a data-mountain visualization rendered in coarse pixel art: green, yellow, orange, and black pixels forming jagged mountain ridges against a light blue dot-textured sky. Product illustrations are flat browser-window mockups with simplified UI inside, never photorealistic. No photography anywhere. Iconography is mono-weight geometric, drawn in 1-2px strokes. The overall visual language is digital-native: pixels, halftone dots, terminal cursors, and code blocks replace traditional photography and illustration. Imagery occupies large hero real estate but is zero-density everywhere else.
Design notes
Agent Guide
Quick Color Reference: - text: #000000 - background: #ffffff - border: #000000 / #e2e9f3 - accent: #ff4500 (Signal Orange — headlines and footer only) - primary action: #000000 (filled action) - muted text: #686562 Example Component Prompts: 1. Hero section: Full-bleed #c5d3e8 background with dot texture. Centered headline in gtPlanar 45px weight 500, #000000, letter-spacing -0.9px, with a #ff4500 highlight box around the key phrase (same size, padding 2px 6px). Subtitle in plain 16px weight 400, #686562, line-height 1.50. Primary CTA: black pill button (#000000 bg, #ffffff text, plain 16px weight 500, padding 8px 21px, 50px radius). Secondary CTA: ghost button (transparent bg, 1px #000000 border, same pill geometry). 2. Feature card: Background #e2e9f3, border-radius 4px, padding 24px. Browser window mockup inside (white surface, 1px #e2e9f3 border, 3px radius, 3 circular #c5d3e8 window-control dots in top bar). Headline in gtPlanar 24px weight 500, #000000, letter-spacing -0.12px. Body in plain 16px, #686562. 'Get started' black pill button at the bottom. 3. Section header: Centered. Eyebrow in gtStandardMono 14px, 0.06em tracking, uppercase, #000000. Headline in gtPlanar 34px weight 500, #000000, letter-spacing -0.68px, with a #ff4500 highlight box on the emphasis phrase. Subtitle in plain 16px, #686562, 16-24px below. 4. Logo strip card: Background #f8fafc, border-radius 4px, padding 24px. Contains a single grayscale company logo, centered. Arranged in a horizontal row with 8px column gaps on a white section background. 5. Code card: Background #c5d3e8, border-radius 4px, padding 16-24px. Mono label at top in gtStandardMono 14px with 0.06em tracking. One or more white input fields below (white bg, 1px #e2e9f3 border, 3px radius, padding 8-12px).
Similar brands
Resend
Same editorial-display-meets-developer-tool aesthetic: oversized geometric headlines, near-monochrome canvas, single bold accent color reserved for typographic highlights, and compact pill CTAs
Vercel
Shared monochrome dominance with black filled pill buttons, tight spacing density, and the discipline of letting one accent color (orange here, black-on-white there) carry all the brand energy
Linear
Matching compact density, hairline borders instead of shadows for card separation, and a near-achromatic palette with surgical use of color only for state and emphasis
Stripe
Same approach to soft pastel-tinted card surfaces (lavender, sky blue, cream) sitting on a white canvas to group content without dividers or elevation
Raycast
Developer-tool sensibility with mono metadata labels, compact pill buttons, and the confidence to keep the entire interface near-monochrome with color as punctuation
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
