Browserbase — Browser Infrastructure Landing Page

---
version: alpha
name: Browserbase — Browser Infrastructure Landing Page
colors:
  primary: '#FF4500'
  canvas: '#FFFFFF'
  ink: '#000000'
  surface: '#E1E9F2'
typography:
  heading:
    fontFamily: gtPlanar, "gtPlanar Fallback", system-ui, Arial, sans-serif
    fontSize: 45px
    fontWeight: 500
    lineHeight: 51.75px
  body:
    fontFamily: plain, "plain Fallback", system-ui, Arial, sans-serif
    fontSize: 20px
    fontWeight: 500
    lineHeight: 23.2px
---

## Overview
An expressive browser-infrastructure landing page combining orange-red highlighted text, dithered mountain art, pastel product previews and an architectural grid. Inspected at 1440px desktop and 390px mobile widths on September 30, 2026.

## Colors
Palette tokens describe the observed visual roles. Use a precise white grid, black pill actions, orange-red highlights and expressive dithered landscape artwork. Pale blue product demos contrast with dense black interface text. Transparent and gradient text layers must be considered with their painted background, not interpreted as solid-color text.

## Typography
The sampled heading uses gtPlanar, "gtPlanar Fallback", system-ui, Arial, sans-serif at 45px, weight 500, with 51.75px leading. Supporting sample: plain, "plain Fallback", system-ui, Arial, sans-serif, 20px / 23.2px. These are computed styles at capture width, not fixed requirements for every breakpoint. Use licensed font assets or deliberate substitutes.

## Layout
Give the artwork room beneath the centered hero. Follow with alternating product copy and visual demonstrations, template selection, onboarding cards and closing CTA. Mobile stacks columns. Exact responsive breakpoints were not measured.

## Elevation & Depth
Preserve separation through the reference’s surface contrast, border rules and whitespace. Avoid adding heavy shadows to a flat interface. Shadow strength is visual guidance, not a measured token.

## Shapes
Keep the visible distinction between content panels, fields and actions. Match the photographed corner treatment rather than applying one global radius; measured element radii are retained in the evidence.

## Components
Product demos, animations and template controls are captured in their resting state only.

## Do's and Don'ts
Do adapt hierarchy, spacing and responsive ordering with your own brand and truthful copy. Do not reuse customer endorsements or performance numbers as your own. Do not infer hover, keyboard, validation, dark-mode or accessibility compliance from static images.