---
name: "Browserbase"
description: "此网站是现代开发者工具品牌设计的优秀范例，在技术精确性与大胆、富有表现力的排版之间取得了平衡。"
version: alpha
specification_status: not-validated
license_status: unknown

colors:
  background: "#F1F0EC"
  primary: "#000000"
  tertiary: "#FF5500"
  neutral: "#686562"
  bg-soft: "#FFFACD"
  bg-quiet: "#C5D3E8"
  line: "rgba(0,0,0,1.0)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 187px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1.8px"
  heading:
    fontFamily: grotesque-sans
    fontSize: 36px
    lineHeight: 1.05
    fontWeight: 500
    letterSpacing: "-0.36px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "0.16px"
  caption:
    fontFamily: grotesque-sans
    fontSize: 12px
    lineHeight: 1.17
    fontWeight: 500
    letterSpacing: "0.84px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 99px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

Browserbase 为 AI 智能体提供了一个可靠且可编程的网络界面。

*为 AI 智能体提供的工业级发电站*

## Colors

采用温暖的中性背景与充满活力的橙色点缀，确保高可见度与技术精确性。

- **Background (`#F1F0EC`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Accent (`#FF5500`)** — uses `accent` token
- **Muted (`#686562`)** — uses `muted` token
- **Borders (`rgba(0,0,0,1.0)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** grotesque-sans
- **Mono:** monospace

- 大型展示标题使用紧凑的负字间距
- 小型标签的大写字母间距可适当放宽
- 字重 500 是 UI 和展示文本的标准

## Layout

居中内容，搭配宽边距与充足的垂直间距

*Rhythm:* 基于 4px 网格的统一间距系统

## Elevation & Depth

- Borders: 1px solid black

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 99px

## Components

- **button:** 纯黑色圆角按钮配白色文字，或描边圆角按钮配黑色文字
- **card:** 浅黄色或米白色背景，搭配简洁的内容模块
- **chip:** 带有大写文字和细微边框的小型圆角标记
- **input:** 带有清晰边框的标准文本输入框
- **hero:** 超大尺寸的展示型排版，搭配充满活力的橙色文字高亮

## Do's and Don'ts

**Don't:**
- 勿使用柔和的粉彩色系——截图显示应使用锐利的黑色与充满活力的橙色
- 勿过度使用圆角——截图显示应使用锐利的圆角按钮与方形边框
- 勿使用宽边距——截图显示应采用居中、紧凑的布局，搭配充足的垂直内边距
- 勿使用浅灰色文字——截图显示应使用高对比度的黑色与深灰色以确保可读性
- 勿使用装饰性衬线字体——截图显示应使用简洁、现代的 grotesque-sans 字体
- 勿使用微妙的渐变——截图显示应使用纯色块与实心高亮

---

## System Prompt (paste into AI agent)

```
Browserbase 的此设计系统是一个高对比度、面向开发者的界面。它使用了中性米白色与奶油色背景（#F1F0EC, #FFFACD），搭配深黑色文字（#000000）与充满活力的橙色点缀（#FF5500）。排版以现代的 grotesque-sans 字体用于展示和正文，等宽字体用于技术代码片段。关键约束包括避免使用柔和粉彩、过度圆角和装饰性衬线字体。布局居中且紧凑，采用 4px 网格与充足的垂直间距。确保所有交互元素使用自定义 cubic-bezier 缓动曲线实现平滑、迅捷的过渡效果。在所有文案中保持直接、技术性的语调。
```