Contents

1. Brand
2. Colors
3. Typography
4. Spacing
5. Radius
6. Buttons
7. Badges
8. Chips
9. Forms
10. Cards
11. Tables
12. Code
13. Nav

## 01Brand Lockup

六边形 + 内部实心菱形 — 代表"订阅被聚合成一个 key"。单色在小尺寸下使用,大尺寸下保留内描边增加分量。

PURO.

## 02Colors

所有颜色都以 CSS variables 定义在 `puro.css`。青色 (cyan) 是唯一的品牌色,其他颜色仅承担语义职责(success / warn / danger)。

Surfaces
bg-0
#0a0e1a
page
bg-1
#0f172a
raised
bg-2
#111827
card alt
bg-code
#020617
code
border
#1e293b
hairline
border-2
#334155
strong
Text
text-0
#f8fafc
primary
text-1
#cbd5e1
body
text-2
#94a3b8
muted
text-3
#64748b
hint
Accents
cyan
#22d3ee
primary / cta
purple
#a855f7
secondary glow
amber
#fbbf24
warn / featured
green
#34d399
success / 200
red
#f87171
error / 5xx
orange
#fb923c
flag / highlight
Provider Brand Dots
claude
#d97757
Anthropic
gpt
#10a37f
OpenAI
gemini
#4285f4
Google
codex
#f0a030
Codex

## 03Typography

主字体 Inter · 等宽 JetBrains Mono。等宽仅用于代码、数据、时间戳、状态徽标,以强化开发者语境。

display · 56/64 · 800
你的 AI 订阅
h1 · 40/48 · 700
统一接入 API
h2 · 28/36 · 700
付一次,用一池
h3 · 18/26 · 600
多账号自动调度
body · 14/22 · 400
OAuth 绑定账号,零改动切换 base_url,沿用你习惯的 SDK。
caption · 12/18 · 400
某个 ChatGPT Plus 触发限流会自动 failover。
mono · 13 · 500
curl https://ai.puro.im/v1/chat/completions
kicker · mono · 12 · caps
// section kicker

## 04Spacing Scale

4px 基线的 8 / 12 / 16 / 20 / 24 / 32 / 48 / 64 scale。页面垂直节奏用 32/48/64/96,卡片内部用 16/20/24。

4px
gap-xs · pill 间隔
8px
gap-sm · icon 内外距
12px
gap · 卡片网格
16px
stack-sm · 主要网格
20px
form field
24px
card padding
32px
content padding
48px
section break
64px
section head gap
96px
landing section

## 05Radius & Shadow

6px
--r-sm
8px
--r-md (button, input)
12px
--r-lg (card)
16px
--r-xl (hero card)
Elevation
--shadow-lg
卡片悬浮 · 代码面板
--shadow-xl
仪表盘大图 · 对话框

## 06Buttons

唯一的主色按钮 Primary(青色),其余都是 Ghost/Subtle。没有多种 primary —— 让每个页面最重要的那个 CTA 足够显眼。

Variants
Sizes
Loading

## 07Badges

NEW BETA LIMITED ACTIVE EXPIRED DRAFT

## 08Chips & Status

chip 用于在代码块周围承载"路由/参数/标签"信息,status-chip 是一个绝对定位的单像素点,用于显示账号/节点在线状态。

claude-pool-03 gpt-plus-7 gemini-2 codex-pool-01 200 · 213ms
OpenAI SDK Anthropic SDK /v1/chat/completions

## 09Form Fields

邮箱
默认 · 空态
API Key 名称
✓ 可用
密码
密码至少 8 位,包含数字和字母
平台
接受服务协议 订阅更新邮件

## 10Cards

// default
标准卡片
用于所有常规内容容器,12px 圆角 + 1px border。
// hover
可交互卡片
hover 时向上位移 2px,border 加深。
// raised
Raised 卡片
不透明背景,用于浮层/仪表盘主体。

## 11Tables

主要用于请求日志、API Key 列表、计费记录。数字列一律等宽 tabular-nums。

TIME | ACCOUNT | MODEL | TOKENS | COST | STATUS
--- | --- | --- | --- | --- | ---
13:42:18 | claude-3 | sonnet-4-5 | 2,847 | $0.042 | 200
13:42:11 | gpt-plus-7 | gpt-5-codex | 1,204 | $0.018 | 200
13:42:03 | gemini-2 | gemini-2.5-pro | 4,102 | $0.000 | 429

## 12Code Frame

zsh · puro ≈ 210ms

    1# OpenAI SDK · 零改动2from openai import OpenAI3 4client = OpenAI(5  base_url="https://ai.puro.im/v1",6  api_key="sk-puro-••••",7)

## 13Navigation

顶部导航 `.nav` 用于 marketing 页面,`.app-shell` 带侧边栏用于登录后的应用页面。

Top Nav (Marketing)
Side Nav (App)
PURO
Workspace
◆Dashboard
⌘API Keys3
⊡订阅账号7
▤调用日志
Ⅹ账单
Settings
☰账户
❖团队
app content →