PLAYGROUND
【1.0】eyebrow 为页面大标题块顶部的高亮短标签（如 PLAYGROUND / FEATURES），【2.0】title 为主标题，【3.0】description 为副标题说明。这个画廊将所有的 UI 元素和排版进行严格的标号，请直接通过标号来指示修改。
SECTION A
文字排版系统
【A.0】PAGE LAYOUT — 标题层级体系
【A.0.1】# — 页面大标题块（Section eyebrow + title + description）
Description — 补充说明，最多一到两句，左侧品牌绿竖线标注。
【A.0.2】## — 区块分隔标题（Section 内部分组时使用）
【A.0.3】### — 卡片/组件标题（Section 内各子模块标题）
【A.x】COMPONENT HEAD — 组件标题
【A.1】TYPOGRAPHY — 字体层级基准
以下是用于排版的结构参照（纯说明文字不设编号）。
Light 模式文字 (白底黑字)
【A.1.1.L】# HUGE TITLE
全站最大的字号，全大写且行高紧凑。 对应 markdown #
【A.1.2.L】## SUBTITLE
包裹大组件组合的顶层标题。 对应 markdown ##
【A.1.3.L】### ITEM TITLE
卡片内部或正文上方的小标题，字号相对收敛。 对应 markdown ###
【A.1.4.L】p BODY TEXT — 正文内容
主要阐述文本，使用 Bold，灰色调辅助说明为 text-zinc-700。 对应 markdown p
用于标签，白底模式下黑底白字。 对应 markdown small
Dark 模式文字 (黑底白字)
【A.1.1.D】# HUGE TITLE
全站最大的字号，全大写且行高紧凑。 对应 markdown #
【A.1.2.D】## SUBTITLE
包裹大组件组合的顶层标题。 对应 markdown ##
【A.1.3.D】### ITEM TITLE
卡片内容小标题，黑底模式下的标准色标默认使用纯白。 对应 markdown ###
【A.1.4.D】p BODY TEXT — 正文内容
主要阐述文本，使用 Bold，深底色下的辅助说明为 text-zinc-400。 对应 markdown p
用于标签，黑底模式下白底黑字。 对应 markdown small
SECTION B
原子级控件
【B.1】BRUTALISTBADGE — 独立粗野徽章
活跃在排版缝隙间的点缀元素，可带色彩跳变与抬升动效。
【B.2】BUTTON — 核心交互按钮
最重要的动作转化组件，拥有全套物理悬停抬升与受压沉降反馈。
SECTION C
容器级组件
【C.1】GLASSCARD — 毛玻璃卡片
透射底层网格背景，用于平铺展示并列特性。支持四种交互状态。
【C.1.1】基础白卡片
默认底色，无抬升动画，无点击交互。
【C.1.2】静态点击卡
无位置抬升，依靠自身变浓反馈，点击压塌阴影。
【C.1.3】抬升点击卡
悬停左上浮起（拉长阴影），带核心跳转属性，点击下沉。
【C.1.4】装饰抬升卡
仅有悬停时左上方浮起效果用于装饰，无点击反馈（无压塌）。
【C.2】SOLIDBLOCK — 实体承压块
极度厚重稳定（8px 黑影），常用于大容器底板。纯色漆面，无透明度。背景色必须从品牌 9 色中选取。
【C.2.1】深黑色底座
标准纯黑底座材质，内部可再承载其它轻量级组件，通过强对比形成厚重感边界。
【C.2.2】品牌色实色底座
6 绝不仅限于深黑。背景色必须从品牌的 9 种标准色词内选取：green / blue / purple / teal / orange / yellow / pink / red / indigo。只要不透底，它就具备极强的板块冲击力。
【C.3】HIGHLIGHTBANNER — 横幅总结块
单行通栏解释块，带有醒目的独立标记徽章。常吸附于主容器正下方。
SECTION D
拼接与叠放规范
所有组件均如同物理积木。本区规定了它们之间的间距（Gap/Margin）、包裹关系和层叠秩序。
【D.1】GlassCard (C.1) 的拼合
【D.1.A】有间并列
并排间距使用 gap-8。玻璃卡绝不能互相黏连，必须给右侧和下方 6px 实体阴影留出呼吸空间。
【D.1.B】无间并列（边框融合）
使用 -ml-1 吞掉相邻边框，外层父包裹统一阴影。多卡强制拼为一块连续矩阵面。
【D.1.C】角标挂载（Badge 咬破 GlassCard）
小徽章(B.1)作为外附装饰时，必须用负边距absolute -top-5 -right-5出界覆盖，撕裂直角边框的严肃感。
【D.2】SolidBlock (C.2) 的拼合
【D.2.A】有间并列
【D.2.B】无间并列（仪表盘融合）
剥离内部各块阴影，在外层父容器统一施加巨型阴影，内部边框重叠，形成不可分割的热键分区面板。
【D.2.C】包裹 GlassCard（C.2 包裹 C.1）
SolidBlock 作为底板时，给内部预留宽阔的 p-8~p-12 边距，内部子元素之间使用聚合的 gap-6。
SOLIDBLOCK CONTAINER BASE
被强包裹的卡块
被强包裹的卡块
【D.2.D】异色嵌套（C.2 包裹 C.2）
6 包裹 6 时，内外层必须使用不同的品牌色词。防止同色喁郣导致层层之间边界消失。
OUTER LAYER — INDIGO 外壳渲染层
INNER CORE — GREEN 内机核心
Core A
内部块用强对比的品牌绿，实际功能内核。
INNER CORE — ORANGE 内机状态
Core B
第二个功能区块可用另一品牌色强化语义区分。
【D.3】跨组件吸附关系
【D.3.A】Banner 吸附于主块正下方（C.3 依附 C.2）
HighlightBanner 常作为延伸说明，放弃大间距，以 mt-2 紧贴上方主黑块落下的 8px 阴影缝隙，形成"便利贴"式的从属感。
SECTION E
品牌配色规范
全站配色由两套系统构成：一套是高饱和度的 9 色品牌调色板（用于组件背景、语义标注），另一套是极简的 中性基底色（用于页面底层和文字）。
【E.1】品牌 9 色调色板
Green
#A3E635
PROTOCOL ★
Blue
#3B82F6
CLIENT
Teal
#14B8A6
CALLER
Orange
#F97316
RESPONDER
Purple
#8B5CF6
PLATFORM
Yellow
#FACC15
SELFHOST
Indigo
#6366F1
ACCENT
Pink
#EC4899
HOTLINE
Red
#EF4444
DESTRUCTIVE
【E.2】中性基底色
Ink
#111111
边框 / 阴影 / 深底
White
#FFFFFF
光底 / 白卡
Paper
#F7F2E8
页面底层背景
Paper Soft
#FCFAF3
次级浅底区域
【E.3】配色使用规则
规则 01
品牌绿是协议锚点色
Green（#A3E635）是全产品线最高层级的颜色。用于 Protocol 层，也是阴影高亮与 CTA 主按钮的标准色。不允许被其他产品层随意挪用。
规则 02
品牌色只允许实色使用
用于 SolidBlock (C.2) 时，9 个品牌色一律不带透明度。用于 GlassCard (C.1) 时，允许附加 /75 玻璃层（如 bg-[#8B5CF6]/75），使底层背景网格隐约可见。
规则 03
语义色词优先
选色时，先问语义——当前内容属于哪个产品层（Protocol/Client/Caller/Responder/Platform/Selfhost）？然后按语义分配对应色词。装饰性场景再从剩余色词中取用。
规则 04
Ink 黑是绝对支撑色
所有组件的边框、实体阴影、排版强调，统一使用 Ink（#111111/black）。禁止用其他深色代替。这是视觉统一的核心约束。
【E.4】产品层 × 色词映射
遇到需要选色的场景时，先对照此表确认内容所属的产品层，再取对应色词。只有当内容不属于任何产品层时，才从"装饰辅助色"中自由选取。
协议层说明、调用合约、规范文档、Hotline 核心标识
Client 端整体标识、SDK 入口、客户端文档
调用方（买家）视角、搜索/发现、Caller 专属界面
服务提供方（卖家）视角、发布/管理、Responder 专属界面
官方托管平台、Marketplace、服务发现层、路由层
私有部署、企业内网扩展、私域数据隔离场景
Hotline 能力标识、Marketplace 卡片、能力模板文档
装饰辅助色（仅当内容不属于任何产品层时使用）
Red 虽也可作装饰用，但优先级最低——一旦场景有破坏性操作（删除/错误/警告），Red 必须留给该语义。
SECTION G
业务组件
【G.1】StatusBadge — 状态徽章
用于标识不同业务状态带有标准语义颜色。
【G.2】PriceTag — 价格标签
不同字号层级的价格显示组件。
【G.3】StatsCard — 统计卡片
用于控制台数据总览。
Total Revenue
↑20.1%•from last month
API Calls
↓4.5%•from last week
【G.4】ServiceCard — 服务卡片
用于在服务市场展示各类 API 与组件服务。
DeepL Pro Translation API
High-accuracy real-time text translation enterprise API supporting 30+ languages with glossary configurations.
【G.5】CodeBlock — 代码块
用于 API 文档等展示代码，自带复制。
import { CallAnything } from "call-anything"; const client = new CallAnything({ apiKey: "your-api-key" }); const response = await client.chat.completions.create({ model: "gpt-4-turbo", messages: [{ role: "user", content: "Hello!" }]});【G.6】BackgroundPattern — 背景图案
作为底图层使用提供视觉深度。
Text floats above the pattern
SECTION H
CONSOLE MODE 原型
【H.1】Delegated-Execution Console · Prototype
在 brand 体系内的「干活方言」
Console mode 是品牌设计语言的功能子方言：保留 Space Grotesk 字体、品牌语义色、轻量粗野动效；但换上 密度优先的 4px 圆角、paper 米色基底、canonical 状态色 token。
本原型不代替业务逻辑。每个 region 的「为什么存在 / 服务什么操作 / 数据来源」都写在 docs/console-content-spec.md，落地任何一页前必须先读。
工作台
4 进程健康灯 · 4 步上手清单
打开原型
热线目录
唯一发起调用入口 · TryCallDrawer
打开原型
调用记录
人话通话日志 · 摘要 / 背景 / 结果
打开原型
审批中心
5 filter tab · 审批疲劳 banner
打开原型
名单管理
Responder / Hotline 白 + 黑名单
打开原型
上手 & 帮助
sticky TOC · 8 篇内置文章
打开原型
src/styles/delexec-console-tokens.csssrc/styles/console-mode.csssrc/design-system/shells/console-shell.tsxF.0
Geometric Blueprint Base
【F.1】 Primary Brand Icon
满印几何图腾：外框 → 四角对角线 → 内方块 → 内切圆 → X交叉 → CALL / ANYTHING 文字。品牌绿底 + 黑线。
CALL ANYTHING
一呼百应
CALL ANYTHING
一呼百应
192 × 192
96 × 96
48 × 48
32 × 32
【F.2】 Product Layer Icons
通用平面图标，每个产品层用各自品牌色底 + 黑色线条图形展现功能定位。Protocol 使用插头图形（与首页 ARCHITECTURE / PROTOCOL 柱一致）。