DESIGN SYSTEM
A2A Protocol
Design Language
一套为开发者工具打造的深色终端主题设计系统，涵盖色彩、排版、组件、间距与设计原则。所有变量已绑定为可复用的 CSS 设计变量。
20
Color Tokens
4
Font Sizes
4
Button Variants
7
Spacing Scale
01 — COLOR PALETTE
配色方案
A2A Protocol Analyzer 采用深色终端主题配色，以金色 #e6b450 为主色、蓝色为交互色，搭配语义化的状态指示色系。整体风格暗黑、高对比，代码编辑器气质。
每种颜色都已绑定为 CSS 变量，点击色块可复制 hex 值。
主色 / Primary Colors 6 colors
点击复制
Accent Gold
#e6b450
RGB 230, 180, 80
主色 · 标题/标签/高亮
--accent-gold
点击复制
Accent Blue
#599dda
RGB 89, 157, 218
交互色 · 链接/按钮/焦点
--accent-blue
点击复制
Accent Green
#7fd962
RGB 127, 217, 98
成功 · OK状态/在线指示
--accent-green
点击复制
Accent Red
#f26d78
RGB 242, 109, 120
错误 · 异常/断开/清除
--accent-red
点击复制
Accent Purple
#c792ea
RGB 199, 146, 234
发现阶段 · Discovery
--accent-purple
点击复制
Accent Orange
#ff9e64
RGB 255, 158, 100
LLM阶段 · AI推理请求
--accent-orange
灰度 / Neutral Colors 8 colors
#0a0e14
--bg-primary
#0d1017
--bg-surface
#0f1319
--bg-elevated
#1a1f29
--bg-panel
#2a2e35
--border-light
#5c6068
--text-muted
#8a8d93
--text-secondary
#b3b1ad
--text-primary
02 — TYPOGRAPHY
排版规范
选用 Source Code Pro 作为英文字体（等宽，替代原 Cascadia Code）， Noto Sans SC 作为中文字体（无衬线）， 保持代码编辑器般的等宽排版气质。
SOURCE CODE PRO — MONOSPACE
A2A Protocol
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*() +=-[]{}|;:'",./<>?
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*() +=-[]{}|;:'",./<>?
NOTO SANS SC — SANS-SERIF
A2A 协议分析器
A2A Protocol Analyzer 是一款用于实时监控和分析 Agent-to-Agent
通信协议的工具。支持 DeepSeek、OpenAI、Qwen 等多种 LLM 提供商。
通信协议的工具。支持 DeepSeek、OpenAI、Qwen 等多种 LLM 提供商。
字号比例 / Type Scale 5 levels
层级
字号
字重
用途
Display
56–72px
Black 900 / Bold 700
首屏标题 · Logo 展示
H1
32px
Bold 700
页面大标题
H2
20px
SemiBold 600
区块标题 · 副标题
Body
13–16px
Regular 400
正文 · 描述文本
Caption
10–12px
Regular 400
辅助信息 · Meta 标签
03 — COMPONENTS
组件规范
界面中的核心组件样式。鼠标悬停查看交互态效果。
按钮 / Buttons 4 variants
卡片 / Cards 2 examples
📦
01
Packet List
实时展示捕获的 A2A 协议包列表，支持点击查看详情
🔀
02
Sequence View
以序列图方式展示 Agent 之间的通信时序和消息流
状态指示点 / Status Dots 3 states
Mock
模拟模式 · #f78c6c
Live
在线模式 · #7fd962
Error
未配置 · #f26d78
Agent 标签 / Agent Tags 3 examples
deepseek-chat
gpt-4o
qwen-max
标签徽章 / Badges 4 variants
A2A
AGENT
OK
DISCOVER
分段选择器 / Segmented Control 3 segments
Mock
Proxy
Direct
开关 / Toggle Switch on + off
Off
On (绿色轨道)
Disabled
消息通知 / Toast 4 types
状态提示 / Inline Alert 4 variants
LLM 配置成功，已连接至 DeepSeek API
当前使用 Mock 模式，数据为模拟生成
API Key 即将过期，请及时更新
连接失败：无法解析主机名 api.deepseek.com
悬浮提示 / Tooltip hover 触发
Hover me
Golden Token
tooltip 金色边框 · 6px 圆角 · box-shadow
单选 & 多选 / Radio & Checkbox
Radio
Checkbox
文件上传 / File Upload dropzone
Drop files here or click to upload
支持 JSON / CSV / TXT, 最大 10MB
头像 / Avatar 3 sizes + status
JD
SK
LM
AN
A2
面包屑 / Breadcrumb
日期时间 / Date & Time Picker
|
右键菜单 / Context Menu
轮播 / Carousel scroll-snap
01
Send Task
Agent 接收任务
02
Processing
LLM 处理中
03
Complete
任务完成
04
Review
审查结果
搜索栏 / Search Bar
数字徽标 / Badge Counter
Inbox 3
Tasks 12
Agents 5
Done 99+
数据卡片 / Stat Card 3 metrics
Total Packets
1,247
↑ 12.3%
Success Rate
98.5%
↑ 0.8%
Avg Latency
245ms
↑ 12ms
标签芯片 / Tag Chip 可移除
deepseek-chat ✕
gpt-4o ✕
agent:planner ✕
status:200 ✕
顶部导航 / Top Nav Bar 金色底边线
下拉选择 / Dropdown 自定义 select
进度条 / Progress Bar determinate
75%
Done
Error
分页 / Pagination 5 pages
‹
1
2
3
…
9
10
›
输入框 / Form Inputs 3 states
聚焦时边框切换为金色 #e6b450
密码输入框，失焦状态
红色边框表示验证失败
40% 透明度
聚焦时金色边框，最小高度 60px
模态框 / Modal Dialog 520px · 8px radius
包列表项 / Packet List Item active + hover
#1
DISCOV REQ
10:23:45
Dashboard → Planner: 发现请求
#2
10:23:46
Planner → Coder: 发送编码任务
#3
LLM REQ
10:23:47
Coder → LLM: 调用大模型
可折叠区域 / Collapsible + KV 数据行
A2A Protocol Step
▼
Method:tasks/send
Task ID:a1b2c3d4-e5f6
From:Planner
To:Coder
HTTP Request
▶
加载与空状态 / Loading & Empty
Processing request...
Connect to SSE...
Click a packet to inspect
暂无数据，等待消息...
滑入结果面板 / Slide-up Panel 200px · 0.2s transition
📋 TASK RESULT
×
Result: 任务完成，共处理 5 个 Agent
status: completed · 1250ms
panel 从底部滑入 · height 0 → 200px · transition 0.2s
04 — SPACING & RADIUS
间距与圆角
定义一致的间距体系和圆角规范，保持界面节奏感。所有数值已绑定为 CSS 变量。
间距 / Spacing Scale 7 levels
4px
--spacing-2xs
8px
--spacing-xs
16px
--spacing-sm
24px
--spacing-md
32px
--spacing-lg
48px
--spacing-xl
64px
--spacing-2xl
圆角 / Corner Radius 3 levels
3px
标签 / 小元素
--radius-sm
--radius-sm
4px
输入框 / 按钮
--radius-md
--radius-md
8px
模态框 / 面板
--radius-lg
--radius-lg
05 — DESIGN PRINCIPLES
设计原则
支撑 A2A Protocol Analyzer 视觉语言的核心设计理念。
01
终端美学
深色背景 + 等宽字体 + 高对比度，还原终端模拟器的视觉体验。让开发者在使用时感到熟悉和舒适。
02
语义化色彩
每种颜色都有明确的语义含义：金色为主色，蓝色表示交互，绿色表示成功，红色表示错误，紫色和橙色标记不同协议阶段。
03
信息密度优先
界面紧凑、信息密集，优先展示协议数据本身。利用颜色和排版来区分信息层级，而非依赖多余的空间或装饰。
04
双主题系统
深色主题用于日常开发监控，白色主题适用于文档展示和打印场景。两种主题共享同一套变量体系，切换无需修改代码。
05
一致的可访问性
所有组件使用统一的设计变量，确保色彩对比度、交互反馈、焦点指示器的一致体验。语义化色彩帮助色觉障碍用户理解信息。
06 — UI PATTERNS
界面模式
来自 A2A Protocol Analyzer 的实际 UI 模式：流程指示器、标签切换、按钮禁用态、JSON 语法高亮等。
流程步骤 / Flow Indicator 3 states
1Send Task
→
2Processing
→
✓Complete
标签切换 / Tab Navigation 3 tabs
Overview
Sequence
Messages
按钮状态 / Button States 3 states
JSON 语法高亮 / JSON Syntax
{ "jsonrpc": "2.0", "id": 1 }
"method": "tasks/send",
"params": { "id": "123", "query": "hello" }
}
key · string · number · bool · null
07 — LAYOUTS
页面布局模板
基于 A2A 设计系统的标准页面布局模板，演示组件如何组合成完整页面。
双栏布局 / Dual Panel Header + Sidebar + Content
空页面布局 / Empty Page 居中占位 + 操作提示
No packets captured
Start a task or connect to an Agent
08 — DESIGN TOKENS
设计变量
所有可复用的 CSS 变量，可直接在设计稿或代码中使用。支持深色(Default) / 浅色(Light) 双主题，通过 .light-theme class 切换。
Colors 20 tokens
Variable Name
Dark
Light
Usage
--bg-primary
主背景色
--bg-surface
次级背景色
--bg-elevated
悬浮/提升背景
--bg-panel
面板/表格背景
--bg-hover
hover 高亮背景
--border-default
默认边框
--border-light
浅边框
--border-hover
hover 边框
--accent-gold
主色 · 标题/标签/高亮
--accent-gold-dim
15%
12%
金色半透明背景
--accent-blue
交互色 · 链接/按钮/焦点
--accent-green
成功 · OK状态/在线指示
--accent-red
错误 · 异常/断开/清除
--accent-purple
发现阶段 · Discovery
--accent-orange
LLM阶段 · AI推理/Mock
--text-primary
主文本色
--text-secondary
次要文本色
--text-muted
弱化/禁用文本
--text-dim
极弱文本/占位符
Typography 2 font families
Variable Name
Value
Usage
--font-mono
Source Code Pro, Cascadia Code, Consolas, Monaco, monospace
英文字体 · 代码/等宽
--font-cjk
Noto Sans SC, Source Han Sans SC, Microsoft YaHei, sans-serif
中文字体 · 无衬线
09 — SPECIFICATIONS
使用规范
间距/颜色语义/组件索引/响应式断点 — 快速查阅指南。
间距使用指南 / Spacing Guide
名称
值
典型场景
section gap
80px
页面大区间隔 · section 之间
section inner
40px
section 内子元素间距
padding-lg
32px
大面板 padding · 弹窗
padding-md
24px
卡片 body padding
padding-sm
20px
代码块 · 组件内部
gap-md
16px
按钮组 · 表单布局 · card gap
gap-sm
8-12px
列表项 · 标签间距 · agent row
gap-xs
4-6px
内联元素 · 图标+文字
圆角使用指南 / Radius Guide
值
使用位置
组件
3px (sm)
标签/徽章/小元素
Badge · Agent Tag · Dot · status
4px (md)
输入框/按钮/卡片
Input · Select · Btn · Card · Table cell
6px (lg)
布局容器/面板
Layout shell · Tooltip · Dropzone
8px (xl)
模态框/弹出层
Modal · Context Menu · Carousel
颜色语义 / Color Semantics
变量
Dark / Light
语义
--accent-gold
#e6b450 / #c9a030
主色 · 标题/标签/高亮/激活态
--accent-blue
#599dda / #3578b9
交互色 · 链接/按钮/焦点/可点击
--accent-green
#7fd962 / #5cb85c
成功 · OK/在线/完成/绿色轨道
--accent-red
#f26d78 / #e0505e
错误 · 异常/断开/清除/危险
--accent-purple
#c792ea / #b07cd6
发现阶段 · Discovery 协议
--accent-orange
#ff9e64 / #e88a4f
LLM 阶段 · AI 推理/Mock 模式
组件索引 / Component Index 47 项
章节
组件
状态
01 Colors
Primary·Grayscale
✅
02 Typo
Eng·CJK·TypeScale
✅
03a Buttons
Primary·Outline·Ghost·Danger
✅
03b Display
Cards·Badges·StatusDot·AgentTag·TagChip·BadgeCounter
✅
03c Input
Form·Radio·Checkbox·Select·Search·DatePicker·FileUpload
✅
03d Nav
NavBar·SegCtrl·Tabs·Breadcrumb·Pagination
✅
03e Feedback
Toast·Alert·Loading·Skeleton·Progress·EmptyState·Tooltip
✅
03f Complex
Modal·PacketList·Collapsible·KV·SlidePanel·ContextMenu·Carousel·Toggle·Avatar·StatCard
✅
04 Spacing
Spacing·Radius
✅
05 Prin
5 Design Principles
✅
06 UI
Flow·Tabs·BtnStates·JSON
✅
07 Layout
DualPanel·EmptyPage
✅
响应式断点 / Breakpoints
断点
适配
变化行为
≥1280px
桌面宽屏
全宽 1440px 布局，6 列色板
1024px
小桌面
色板 3 列 · typo 单列 · principles 单列
768px
平板/折叠
侧边栏折叠 → hamburger · section 间距缩小
600px
大屏手机
色板 2 列 · 按钮全宽 · 卡片单列
480px
小屏手机
色板 2 列 · 灰度 2 列 · padding 16px
A2A PROTOCOL ANALYZER
© 2026 A2A Protocol Analyzer. All Rights Reserved. | Style Guide v1.0