browserbase___style_reference:
  info: "> editorial broadsheet meets data terminal — a single hot orange punctuating a near-monochrome field of oversized GT Planar headlines, soft pastel card surfaces, and tiny mono metadata."

  theme: "light"

  info: "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."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Ink Black | `#000000` | `--color-ink-black` | Primary text, filled action buttons, card borders, dividers — the structural spine of the entire interface |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Page canvas, card surfaces, button text on dark fills, icon fills on dark backgrounds |"
    info: "| Faint Slate | `#f8fafc` | `--color-faint-slate` | Subtle off-white for logo strip cards, secondary panel backgrounds, alternating section tint |"
    info: "| Lavender Mist | `#e2e9f3` | `--color-lavender-mist` | Feature card surfaces and section background tints — soft cool gray that groups content without weight |"
    info: "| Blue-Gray Mist | `#c5d3e8` | `--color-blue-gray-mist` | Hero background tint, code-card surfaces, soft borders — a textured atmospheric wash |"
    info: "| Cream Wash | `#fffde6` | `--color-cream-wash` | Warm pale tint for secondary card surfaces and badge backgrounds — adds warmth without chroma |"
    info: "| Sky Tint | `#c4edff` | `--color-sky-tint` | Code/terminal block backgrounds, inline highlight washes on body text, light badge fills |"
    info: "| Graphite | `#686562` | `--color-graphite` | Muted body text, secondary borders — the only step down from pure black for de-emphasized content |"
    info: "| Signal Orange | `#ff4500` | `--color-signal-orange` | Orange outline accent for tags, dividers, and focused UI edges. Do not promote it to the primary CTA color |"

  tokens___typography:

    plain___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_____font_plain:
      - "**Substitute:** Inter"
      - "**Weights:** 400, 500"
      - "**Sizes:** 16px, 24px"
      - "**Line height:** 1.30–1.50"
      - "**Letter spacing:** 0.0070em–0.0100em (~0.11–0.24px at 16px)"
      - "**Role:** 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."

    gtplanar___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_____font_gtplanar:
      - "**Substitute:** GT America"
      - "**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)"
      - "**OpenType features:** `\"ss05\" on`"
      - "**Role:** 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."

    gtstandardmono___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_____font_gtstandardmono:
      - "**Substitute:** JetBrains Mono"
      - "**Weights:** 400"
      - "**Sizes:** 14px"
      - "**Line height:** 1.00–1.20"
      - "**Letter spacing:** 0.0300em–0.0600em (0.42–0.84px at 14px)"
      - "**Role:** 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."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 14px | 1.2 | 0.6px | `--text-caption` |"
      info: "| body | 16px | 1.5 | 0.11px | `--text-body` |"
      info: "| subheading | 24px | 1.3 | -0.12px | `--text-subheading` |"
      info: "| heading | 34px | 1.15 | -0.68px | `--text-heading` |"
      info: "| heading-lg | 45px | 1.1 | -0.9px | `--text-heading-lg` |"
      info: "| display | 189px | 1 | -9.45px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "compact"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 224 | 224px | `--spacing-224` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 999px |"
      info: "| cards | 4px |"
      info: "| buttons | 50px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 64-96px"
      - "**Card padding:** 16-24px"
      - "**Element gap:** 8-16px"

  components:

    pill_action_button_primary:
      role: "Filled black CTA used for every primary action — 'Get API key', 'Get a demo', 'Get started'"

      info: "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:
      role: "Secondary action with icon — 'Copy prompt' with copy icon"

      info: "Background 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:
      role: "Inline typographic emphasis inside headlines — wraps a key phrase with an orange block"

      info: "Background #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:
      role: "Top-level site navigation"

      info: "Background #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:
      role: "4-column grid card for feature illustrations and descriptions"

      info: "Background #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:
      role: "Company logo cell in the social-proof strip"

      info: "Background #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:
      role: "Code snippet or search query demonstration block"

      info: "Background #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:
      role: "Illustration element inside feature cards — mimics a real browser tab"

      info: "White 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:
      role: "Centered heading group for content sections"

      two_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:
      role: "Product feature row — visual left, description right"

      left_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:
      role: "Section metadata, small uppercase tag above or below content"

      info: "Family 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:
      role: "Site footer"

      info: "Background #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."

  do_s_and_don_ts:

    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."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Paper White | `#ffffff` | Primary page canvas and content section backgrounds |"
    info: "| 1 | Faint Slate | `#f8fafc` | Logo strip band, alternating section tint, quiet panel backgrounds |"
    info: "| 2 | Lavender Mist | `#e2e9f3` | Feature card surface, grouped content blocks, code-card base |"
    info: "| 3 | Blue-Gray Mist | `#c5d3e8` | Hero atmospheric background, elevated card surfaces, soft borders |"
    info: "| 4 | Cream Wash | `#fffde6` | Warm accent surface, badge backgrounds, callout fills |"

  elevation:

    info: "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."

  imagery:

    info: "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."

  layout:

    info: "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."

  agent_prompt_guide:

    info: "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"

    info: "Example Component Prompts:"

    - "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)."

    - "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."

    - "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."

    - "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."

    - "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"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ink-black: #000000;
          --color-paper-white: #ffffff;
          --color-faint-slate: #f8fafc;
          --color-lavender-mist: #e2e9f3;
          --color-blue-gray-mist: #c5d3e8;
          --color-cream-wash: #fffde6;
          --color-sky-tint: #c4edff;
          --color-graphite: #686562;
          --color-signal-orange: #ff4500;
        
          /* Typography — Font Families */
          --font-plain: 'plain', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gtplanar: 'gtPlanar', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gtstandardmono: 'gtStandardMono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.2;
          --tracking-caption: 0.6px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: 0.11px;
          --text-subheading: 24px;
          --leading-subheading: 1.3;
          --tracking-subheading: -0.12px;
          --text-heading: 34px;
          --leading-heading: 1.15;
          --tracking-heading: -0.68px;
          --text-heading-lg: 45px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -0.9px;
          --text-display: 189px;
          --leading-display: 1;
          --tracking-display: -9.45px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-60: 60px;
          --spacing-96: 96px;
          --spacing-224: 224px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64-96px;
          --card-padding: 16-24px;
          --element-gap: 8-16px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-full: 50px;
          --radius-full-2: 999px;
        
          /* Named Radii */
          --radius-tags: 999px;
          --radius-cards: 4px;
          --radius-buttons: 50px;
        
          /* Surfaces */
          --surface-paper-white: #ffffff;
          --surface-faint-slate: #f8fafc;
          --surface-lavender-mist: #e2e9f3;
          --surface-blue-gray-mist: #c5d3e8;
          --surface-cream-wash: #fffde6;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ink-black: #000000;
          --color-paper-white: #ffffff;
          --color-faint-slate: #f8fafc;
          --color-lavender-mist: #e2e9f3;
          --color-blue-gray-mist: #c5d3e8;
          --color-cream-wash: #fffde6;
          --color-sky-tint: #c4edff;
          --color-graphite: #686562;
          --color-signal-orange: #ff4500;
        
          /* Typography */
          --font-plain: 'plain', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gtplanar: 'gtPlanar', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gtstandardmono: 'gtStandardMono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.2;
          --tracking-caption: 0.6px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: 0.11px;
          --text-subheading: 24px;
          --leading-subheading: 1.3;
          --tracking-subheading: -0.12px;
          --text-heading: 34px;
          --leading-heading: 1.15;
          --tracking-heading: -0.68px;
          --text-heading-lg: 45px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -0.9px;
          --text-display: 189px;
          --leading-display: 1;
          --tracking-display: -9.45px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-60: 60px;
          --spacing-96: 96px;
          --spacing-224: 224px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-full: 50px;
          --radius-full-2: 999px;
        }