企业官网建设流程全解析

Binance.US 设计系统深度解析：在 OpenDesign 中用金黄单点强调构建加密交易平台级界面

【免费下载链接】open-design🎨 Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. 🖥️ Local-first desktop app. 🖼️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images & video — real files, HTML/PDF/PPTX/MP4 export. 🤖 Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode & 20+ CLIs via BYOK.项目地址: https://gitcode.com/gh_mirrors/opend/open-design

本文以 design-systems/binance/DESIGN.md 为核心骨架，结合该包内已编译的 tokens.css、components.html 组件夹具与 manifest.json 清单，完整还原 Binance.US 风格设计系统的视觉语法、令牌映射与 Agent 生成规则，并给出可直接复制运行的 CSS 令牌与组件实现。读完本文，你将能独立用这套"暗/明双色交替 + 金黄单点强调"的语言生成高可信度的金融科技（Fintech & Crypto）落地页与交易面板。

一、设计系统包的结构与消费方式

在设计系统目录中，每个子目录都是一个可移植的设计系统包。选择某个设计系统（Design System surface）或通过受支持的建站流程，就会把它的设计上下文注入 Agent 提示词。仓库内置目录当前共包含151 个包，每个包的最小机器可读结构统一为：

design-systems/<slug>/ ├── manifest.json # 稳定发现元数据、来源与文件路径声明 ├── DESIGN.md # 面向 Agent 的规范设计散文（本文主体） └── tokens.css # 编译后的语义令牌样式表

Binance.US 包还额外携带了富文件集（见 manifest.json）：

design-systems/binance/ ├── DESIGN.md # 规范设计散文（9 个 H2 章节） ├── USAGE.md # Agent 与审阅者的包使用指南 ├── tokens.css # 编译后的语义令牌（:root 块） ├── components.html # 独立组件夹具（hero/features/trust/form） ├── components.manifest.json # 组件/令牌派生索引 ├── design-tokens.json # 派生 Design Tokens JSON ├── tailwind-v4.css # 派生 Tailwind v4 @theme 映射 ├── preview/ # colors / spacing / typography 预览页 ├── system/ # index.html / kit.html / kit.dark.html / tokens.default.json └── source/ # evidence.md / token-contract.report.json / tokens.source.json

使用方式（USAGE.md 规定的读取顺序）：先读 USAGE.md 理解包契约 → 读 DESIGN.md 获取视觉意图与反模式 → 把 tokens.css 的:root块原样粘贴进产物的第一个<style>标签 → 用 components.manifest.json 做紧凑组件盘点 → 必要时打开preview/做视觉核对。

需要特别注意的是：包内所有令牌必须通过var(--name)引用，除:root块外不得出现裸十六进制色值（见 USAGE.md 的 Avoid 列表）；同时不得脱离tokens.css独立重定义 Tailwind 或 design-token 值。

二、视觉主题：交易大厅的"打磨后的紧迫感"

Binance.US 的核心氛围是"数字化交易大厅"——资金在流动、决策以秒为单位。设计是双色调构图：纯白交易表面与接近纯黑的深色面板（#222126）交替出现，形成与加密市场多空二元性呼应的视觉节奏；Binance Yellow（#F0B90B）如钢桌上的一块金锭，穿透单色基底，把每一道目光引向下一个动作。

三个关键特征（DESIGN.md §1）：

• 明暗双色交替：白色表面传递信任，深色面板传递深度；
• Binance Yellow（#F0B90B）是唯一的强调色，驱动所有主要动作；
• BinancePlex 自定义字体在每一个文本层级上提供专属品牌感，配以 50px 半径的药丸形 CTA 按钮、浮于金色渐变上的设备模型展示，以及醒目展示的实时加密价格行情条。

从 components.html 的实现看，明暗交替是通过.section-dark（background: #222126; color: #ffffff）这样的组件级作用域完成的，深色段落内的次要文本统一使用rgba(255, 255, 255, 0.7)降透明度——"深色段落应在组件层处理，共享组件保持浅色画布"（tokens.css 头部注释）。

三、色彩系统：唯一的黄，与数据驱动的红绿

3.1 主色（DESIGN.md §2）

3.2 次级与强调色

3.3 表面与背景

3.4 中性色与文字（四级文字阶梯）

3.5 语义色：多空信号即品牌

这套红绿不是通用语义色，而是定义了整个加密交易视觉语言的多空价格信号。在 tokens.css 中它们被直接绑定到共享语义槽位（--success/--danger），因此 ticker、徽章、状态药丸无需逐组件覆盖即可保持品牌一致。

3.6 渐变系统

• Golden Glow：从#F0B90B中心到#F8D12F边缘的径向渐变，用于产品模型截图后方；
• Dark Fade：#222126到透明的线性渐变，用于深色段落过渡；
• Hero Shimmer：Hero 区强调上的微妙金色动画渐变。

在 components.html 中，.hero-art实际实现为radial-gradient(circle at 50% 45%, #f0b90b 0%, #fcd535 38%, #f8d12f 72%, rgba(248, 209, 47, 0) 100%)，内部再放一个9 / 16比例、#222126背景、6px#1a1a1a边框的手机设备模型——这正是 DESIGN.md §1 描述的"浮于金色渐变上的设备模型"。

3.7 令牌层级的品牌决策

tokens.css 的头部注释记录了 13 条"为贴合 Binance 声音而弯曲共享 schema 约定"的决策，其中最容易踩坑的是：

• --accent: #f0b90b——唯一品牌色，DESIGN.md §7 明令"不要引入额外品牌色"；
• --accent-on: #1e2026——Ink 而非白色，因为"黄底白字会糊，黄底近黑字才是高对比"；
• --accent-hover: #1eaedb——悬停态是色相切换（金黄→Focus Blue，文字变白），不是压暗黄；"这是全文件最反直觉的令牌，重绑定成压暗黄会抹掉 Binance 的标志性悬停"；
• --accent-active: #d0980b——按下态保持暖色，不随悬停变冷；
• --radius-pill: 9999px——schema 的"永远全圆"约定，与 DESIGN.md 字面的 50px 在任意按钮高度下渲染一致；
• --focus-ring: 0 0 0 2px #1eaedb——实心 2px Focus Blue 环而非 schema 默认的强调色透明光晕，确保键盘焦点在白色或#222126表面上都锐利可辨。

四、字体与层级：为数据密度而生的 BinancePlex

4.1 字体家族（DESIGN.md §3）

• 主字体 BinancePlex（Binance 设计的专有字体），回退栈Arial, sans-serif；曾替换 DIN Next 以解决多语言间距问题；可用字重 400/500/600/700；
• 系统字体栈（system-ui，Segoe UI → Roboto → Helvetica → Arial）用于 Cookie 横幅与第三方 UI。

令牌层映射为--font-display与--font-body共用同一栈BinancePlex, Arial, sans-serif，--font-mono则用ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace。

4.2 完整层级表

设计原理：BinancePlex 默认内置表格数字（tabular numerals），这对价格列和投资组合值的完美垂直对齐至关重要；字重整体偏重（500–700）传递权威感；标题紧凑行高（1.00–1.25）营造交易面板式的堆叠压缩感，正文 1.50 保证可读性。

令牌映射（tokens.css）：类型刻度 11/14/16/20/24/28/34/60 直接对应该表，其中 12px Small 折叠进 11px（--text-xs），14.4px Button Small 按组件内联；--leading-tight: 1.0（而非 schema 默认 1.2）、--tracking-display: 0——"权威感靠字重和字号，不靠负字距"。

五、组件样式规范（DESIGN.md §4）

5.1 按钮三态体系

Primary（黄色填充，方形）

• 背景 Binance Yellow#F0B90B，文字 Ink#1E2026（16px/600），无边框，圆角 6px，内边距6px 32px；
• Hover 切到 Focus Blue#1EAEDB白字；Active 压暗到 Active Yellow#D0980B；
• Focus：Focus Blue 背景 + 1px 黑边框 + 2px 黑描边 + opacity 0.9；过渡background 200ms ease。

Primary Pill（金色药丸，签名形状）

• 背景 Binance Gold#FFD000，白字，1px solid #FFD000边框，圆角 50px，水平内边距 10px；
• 阴影rgb(153,153,153) 0px 2px 10px -3px；Hover 切 Focus Blue 白字。

Secondary（白色描边药丸）

• 白底、Binance Yellow 文字、1px solid #F0B90B边框、50px 圆角、10px 水平内边距、同款阴影；Hover 切 Focus Blue 底白字。

Disabled：背景#E6E8EA，文字#848E9C，cursornot-allowed。

组件实现（components.html）额外提供了Ghost 按钮（深色段落专用：透明底、白字、rgba(255,255,255,0.3)描边，hover 时背景rgba(255,255,255,0.08)、描边变白）——这是 DESIGN.md 未列、但夹具中已落地的深色段落配套方案。所有按钮共享 200ms 过渡（--motion-base+--ease-standard），:focus-visible统一套--focus-ring。

5.2 卡片与容器

• 背景：浅色段落纯白，深色段落 Dark Card#2B2F36；
• 边框1px solid #E6E8EA；圆角：内容卡 12px、数据卡 8px；
• 阴影rgba(32, 32, 37, 0.05) 0px 3px 5px 0px——"几乎不可见，建立信任"；
• Hover 阴影加深为rgba(8, 8, 8, 0.05) 0px 3px 5px 5px；过渡box-shadow 200ms ease。

卡片图标为48px 圆形，color-mix(in oklab, var(--accent), white 78%)的浅黄底 +--accent-active图标色（components.html）。

5.3 输入与表单

• 背景白或 Snow#F5F5F5，文字 Ink，1px solid #E6E8EA边框，圆角 8px，内边距0px 12px（为交易场景压缩）；
• Focus：边框切黑#000000+ 1px 描边；Placeholder 用 Slate#848E9C；过渡border-color 200ms ease。

夹具实现把 focus 态升级为border-color: #000000+--focus-ring+ 背景回白（components.html）。

5.4 导航

白底 sticky，高约 64px；左侧 Binance Logo（SVG，黄色 mark + 深色字标）；中/右侧 14px/600 BinancePlex 导航链接，色#32313A；右侧金色药丸 CTA "Get Started"；链接 hover 压暗至#1A1A1A；移动端汉堡菜单 + 全高遮罩；顶部可选促销横幅。

5.5 图片处理

• 产品模型：金色渐变背景上的设备框，带微妙阴影浮起；
• Hero 图：24px 圆角容器内全宽包含；视频区 24px 圆角带播放器控件；
• App 截图：深色交易 UI 置于手机/平板边框内；Crypto 图标 48px 圆形品牌色。

5.6 信任指示器

实时加密价格行情条（BTC/BNB/SOL，绿/红涨跌）、深色背景的 "Trusted by millions" 统计区、安全徽章与合规说明、页脚 App 下载二维码。夹具中的 ticker 用grid-template-columns: repeat(4, 1fr)+ 1px 缝隙 +--border底色实现"数据条而非装饰"的效果，单元格数字启用font-variant-numeric: tabular-nums（components.html）。

六、布局系统：8px 基底的信任型留白

6.1 间距令牌

基础单位8px：

令牌层将 64px/80px 层级提升为段落节奏变量：--section-y-desktop: 80px、--section-y-tablet: 48px、--section-y-phone: 32px（tokens.css），夹具按1023px / 639px断点切换（components.html）。

6.2 网格与容器

• 最大容器宽 1200px（居中）；Hero 区在 1024px 以上为"文字 + 图片"并排单列（夹具实现为1.4fr 1fr双列，1023px 以下折叠为单列）；
• 功能网格：桌面 3 列、移动端 1 列（夹具断点：1023px 以下 2 列、639px 以下 1 列）；
• 产品展示 2 列（文字 + 设备模型）；水平内边距桌面 32px、移动 16px；卡片间距 24px。

6.3 留白哲学

Binance.US 把留白当作信任信号：浅色段落"呼吸"——标题四周宽边距、卡片间充足间距；深色段落"压缩"——特性塞进更紧的网格以传达能力与深度。整体节奏在"欢迎进入"（浅、宽）与"深度功能"（深、密）之间交替。令牌侧把桌面/平板/手机 gutter 定为32 / 16 / 16（DESIGN.md 未定义独立平板 gutter，故按移动端取值，避免窄屏过度撑开容器）。

6.4 圆角刻度

令牌层只绑定 8/12/24/9999 四个层级（--radius-sm/md/lg/pill），1/2/6/10px 按组件内联处理。

七、深度与阴影：5% 透明度即专业

设计哲学：金融语境下重阴影显得轻浮，无阴影又显得扁平不可信——5% 透明度正是专业感的甜区。令牌层以--elev-flat: none、--elev-ring: 0 0 0 1px var(--border)、--elev-raised: 0 3px 5px 0 rgba(32, 32, 37, 0.05)三层实现；悬停加深与药丸阴影属组件级内联。

装饰性深度：设备模型后的金色径向辉光；白与#222126之间硬切（无渐变过渡）；价格行情条扁平无边框，作为数据条而非装饰元素。

八、Do's and Don'ts：生成时的红线清单

Do

• 只用 Binance Yellow#F0B90B做主 CTA 与品牌强调——它是唯一的色彩点；
• 浅色/深色段落严格交替制造节奏；
• 所有交互元素使用 BinancePlex 500+ 字重；
• 所有主 CTA 药丸按钮统一 50px 圆角；
• 内容卡保持 12px 圆角（精致但不过分圆润）；
• 醒目展示实时数据（价格、百分比、统计）——数字建立信任；
• 所有二级/元数据文字统一 Slate#848E9C；
• 阴影保持在 5% 透明度以下——若有若无。

Don't

• 不引入额外品牌色——只有黄是强调色，其余色彩全部数据驱动（绿涨红跌）；
• 内容卡圆角不超过 12px，只有 CTA 和视频容器可以更高；
• 不加厚重阴影或悬停抬升效果——这是克制的金融平台；
• 标题不用 BinancePlex 500 以下字重；
• 不在黄底上放黄字，始终保证高对比配对；
• 不在同一行混用药丸（50px）与方形（6px）按钮；
• 不柔化深色段落——#222126应该权威，而不是灰；
• 不用装饰性插画——图片只能是产品截图或数据可视化；
• 动画不超 200ms ease 的微妙过渡；
• 卡片语义态不用彩色背景——保持卡片白/深，用文字色传达语义。

九、响应式行为（DESIGN.md §8）

9.1 断点表

9.2 触摸目标

• 最小 44×44px（WCAG AAA）；药丸 CTA 最小 48px 高；导航链接 44px 触摸区；移动端行情项为全宽可点行；下载按钮大触摸区（50px+）。

9.3 折叠策略

• 导航：897px 以下全链接 → 汉堡菜单，Logo 与 "Get Started" CTA 保留；
• Hero：768px 以下并排 → 堆叠（文字上、图下）；
• 功能网格：3 列 → 768px 2 列 → 600px 1 列；
• 价格条：600px 以下换行或滚动；
• 段落内边距：64 → 48 → 32 → 16px 随视口收窄；
• 设备模型：等比缩放、保持居中；页脚：多列 → 移动端堆叠手风琴。

9.4 图片行为

设备模型 CSS 缩放受 max-width 约束；Hero 图在 24px 圆角容器内等比缩放；App 截图固定宽高比响应式；二维码固定 120px 方形，移动端隐藏（换成应用商店直链）。

十、Agent 提示词速查：直接可用的生成模板

10.1 快速色值引用

• 主 CTA：Binance Yellow#F0B90B；次级 CTA：Binance Gold#FFD000；
• 浅色背景：Pure White#FFFFFF；深色背景：Binance Dark#222126；
• 标题文字：Ink#1E2026；正文：Slate#848E9C；边框：Border Light#E6E8EA；
• 正向：Crypto Green#0ECB81；负向：Crypto Red#F6465D。

10.2 示例组件提示词（可直接喂给 Agent）

• Hero："Create a hero section with white background, a 60px/700 bold headline in Ink (#1E2026), a 20px/500 subtitle in Slate (#848E9C), and a Binance Yellow (#F0B90B) pill button (50px radius) with dark text (#1E2026)";
• 价格条："Design a crypto price ticker strip showing BTC, BNB, SOL prices in 14px/600 Ink (#1E2026) with green (#0ECB81) or red (#F6465D) percentage changes, on a white background with #E6E8EA bottom border";
• 功能卡网格："Build a feature card grid (3-column, 24px gap) with 12px radius white cards, subtle shadow (rgba(32,32,37,0.05) 0px 3px 5px), each containing a yellow (#F0B90B) icon, 20px/600 heading, and 14px/500 #848E9C description";
• 深色段落："Create a dark section (#222126) with a 34px/700 white headline centered, and a 3-column feature grid using dark cards (#2B2F36) with 12px radius and yellow (#F0B90B) accent icons";
• 导航栏："Design a sticky navigation bar with white background, Binance logo left, 14px/600 #32313A nav links center, and a yellow (#F0B90B) pill button (50px radius, 6px padding 32px) labeled 'Get Started' right"。

10.3 迭代指南

1. 一次只聚焦一个组件；
2. 引用本文档中的具体色名与十六进制值；
3. 记住 Binance Yellow#F0B90B是唯一强调色，其余全是灰/深/白；
4. 用明暗段落交替制造视觉节奏；
5. 数字与数据要醒目——这是金融平台；
6. CTA 用药丸（50px 圆角），表单操作用常规按钮（6px 圆角）；
7. 阴影保持几乎不可见（5% 透明度）——信任来自清晰而非深度；
8. 任何需要权威感的文本用 BinancePlex 600+ 字重。

十一、从令牌到产物的完整落地路径

最后串起整套流程：Agent 或开发者在拿到这个包后，把 tokens.css 的:root块逐字粘贴进产物的首个<style>，之后所有组件一律通过var(--name)消费令牌；如需在 Tailwind v4 项目中使用，可引入派生的 tailwind-v4.css（它通过@theme把语义令牌映射为--color-accent、--font-display、--radius-pill、--shadow-raised等工具类变量，且以 tokens.css 为唯一事实源，不得独立重定义值）；需要精确组件样式时，对照 components.html 的夹具与 components.manifest.json 的组件分组（buttons / inputs / cards / badges / links / keyboard / icons / typography / layout）复用既有配方，而不是凭空发明新控件。

关于来源声明需要如实说明：本包是基于 OpenDesign 精选 bundled fixture 的规范化产物（manifest.json 的source.type: "bundled"），source/目录仅作为审计证据存在，不应宣称其为上游原始来源（见 USAGE.md）。品牌引用包是美学灵感，而非所引用品牌的官方资产（见 design-systems/README.md 的声明）。

【免费下载链接】open-design🎨 Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. 🖥️ Local-first desktop app. 🖼️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images & video — real files, HTML/PDF/PPTX/MP4 export. 🤖 Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode & 20+ CLIs via BYOK.项目地址: https://gitcode.com/gh_mirrors/opend/open-design