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。等宽仅用于代码、数据、时间戳、状态徽标,以强化开发者语境。
你的 AI 订阅
统一接入 API
付一次,用一池
多账号自动调度
OAuth 绑定账号,零改动切换 base_url,沿用你习惯的 SDK。
某个 ChatGPT Plus 触发限流会自动 failover。
curl https://ai.puro.im/v1/chat/completions
// section kicker
04Spacing Scale
4px 基线的 8 / 12 / 16 / 20 / 24 / 32 / 48 / 64 scale。页面垂直节奏用 32/48/64/96,卡片内部用 16/20/24。
4pxgap-xs · pill 间隔
8pxgap-sm · icon 内外距
12pxgap · 卡片网格
16pxstack-sm · 主要网格
20pxform field
24pxcard padding
32pxcontent padding
48pxsection break
64pxsection head gap
96pxlanding 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
默认 · 空态
✓ 可用
密码至少 8 位,包含数字和字母
10Cards
// default
标准卡片
用于所有常规内容容器,12px 圆角 + 1px border。
// hover
可交互卡片
hover 时向上位移 2px,border 加深。
// raised
Raised 卡片
不透明背景,用于浮层/仪表盘主体。
11Tables
主要用于请求日志、API Key 列表、计费记录。数字列一律等宽 tabular-nums。
12Code Frame
zsh · puro ≈ 210ms
1# OpenAI SDK · 零改动2from openai import OpenAI34client = OpenAI(5 base_url="https://ai.puro.im/v1",6 api_key="sk-puro-••••",7)