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

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.jsondesign-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-darkbackground: #222126; color: #ffffff这样的组件级作用域完成的深色段落内的次要文本统一使用rgba(255, 255, 255, 0.7)降透明度——深色段落应在组件层处理共享组件保持浅色画布tokens.css 头部注释。三、色彩系统唯一的黄与数据驱动的红绿3.1 主色DESIGN.md §2名称色值用途Binance Yellow#F0B90B主 CTA 背景、品牌强调、激活态、链接色——系统中最重要的颜色Binance Gold#FFD000药丸按钮描边、次级 CTA 填充、金色渐变高光Light Gold#F8D12F渐变端点、悬停邻近态3.2 次级与强调色名称色值用途Active Yellow#D0980B激活/按下态被点击的金Focus Blue#1EAEDB无障碍焦点态所有交互元素 hover/focus 出现3.3 表面与背景名称色值用途Pure White#FFFFFF主页面画布、卡片表面、浅色段落背景Snow#F5F5F5细微表面区分、输入框背景、表格交替行Binance Dark#222126深色段落背景、页脚画布、带轻微紫色调的近黑Dark Card#2B2F36深色段落内的卡片表面Ink#1E2026黄色背景上的按钮文字、浅色表面最深的文字色3.4 中性色与文字四级文字阶梯名称色值用途Primary Text (Ink)#1E2026主正文、浅色背景标题Secondary Text#32313A导航链接、浅色表面描述文字Slate#848E9C三级文字、元数据、时间戳、页脚链接——万能灰Steel#686A6C禁用附近文字、低调标签Muted#777E90次级导航链接、较不醒目的页脚文字Hover Dark#1A1A1A通用链接悬停色3.5 语义色多空信号即品牌名称色值用途Crypto Green#0ECB81价格上涨、成功态、涨指示Crypto Red#F6465D价格下跌、错误态、跌指示这套红绿不是通用语义色而是定义了整个加密交易视觉语言的多空价格信号。在 tokens.css 中它们被直接绑定到共享语义槽位--success/--danger因此 ticker、徽章、状态药丸无需逐组件覆盖即可保持品牌一致。3.6 渐变系统Golden Glow从#F0B90B中心到#F8D12F边缘的径向渐变用于产品模型截图后方Dark Fade#222126到透明的线性渐变用于深色段落过渡Hero ShimmerHero 区强调上的微妙金色动画渐变。在 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表面上都锐利可辨。四、字体与层级为数据密度而生的 BinancePlex4.1 字体家族DESIGN.md §3主字体 BinancePlexBinance 设计的专有字体回退栈Arial, sans-serif曾替换 DIN Next 以解决多语言间距问题可用字重 400/500/600/700系统字体栈system-uiSegoe 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 完整层级表角色字号字重行高字距备注Display Hero60px7001.08—Hero 标题最大冲击力Display Secondary34px7001.00—深色背景上的章节标题Heading 128px5001.00—主要章节标题Heading 224px7001.00—功能标题、卡片标题Heading 324px6001.00—子章节标题Heading 420px6001.25—卡片标题、功能标签Body Large20px5001.50—Hero 副标题、导语Body16px5001.50—标准正文Body SemiBold16px6001.30—强调正文、导航链接Body Bold16px7001.50—强强调文本Button16px6001.250.16px主按钮文字Button Small14.4px6001.600.72px次级按钮更宽字距Caption14px5001.43—元数据、标签、价格Caption SemiBold14px6001.50—强调说明Small12px6001.00—标签、徽章、小字Tiny11px5001.00—微标签、图表注释设计原理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-xs14.4px Button Small 按组件内联--leading-tight: 1.0而非 schema 默认 1.2、--tracking-display: 0——权威感靠字重和字号不靠负字距。五、组件样式规范DESIGN.md §45.1 按钮三态体系Primary黄色填充方形背景 Binance Yellow#F0B90B文字 Ink#1E202616px/600无边框圆角 6px内边距6px 32pxHover 切到 Focus Blue#1EAEDB白字Active 压暗到 Active Yellow#D0980BFocusFocus 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 -3pxHover 切 Focus Blue 白字。Secondary白色描边药丸白底、Binance Yellow 文字、1px solid #F0B90B边框、50px 圆角、10px 水平内边距、同款阴影Hover 切 Focus Blue 底白字。Disabled背景#E6E8EA文字#848E9Ccursornot-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文字 Ink1px 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 LogoSVG黄色 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-numscomponents.html。六、布局系统8px 基底的信任型留白6.1 间距令牌基础单位8pxToken值用途space-14px紧凑行内间距、图标内边距space-28px基础单位、按钮图标间距space-312px卡片内边距、输入内边距space-416px标准内边距、章节间距space-520px卡片间距、中等内边距space-624px章节内边距space-732px章节分隔、大内边距space-848px主要章节内边距space-964pxHero 区内边距space-1080px大章节间距令牌层将 64px/80px 层级提升为段落节奏变量--section-y-desktop: 80px、--section-y-tablet: 48px、--section-y-phone: 32pxtokens.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 / 16DESIGN.md 未定义独立平板 gutter故按移动端取值避免窄屏过度撑开容器。6.4 圆角刻度值语境1px细微边缘柔化2px关闭按钮、微交互元素6px主按钮非药丸、小卡片8px表单输入、数据卡、图片容器10px导航药丸、标签容器12px内容卡、功能容器24px视频容器、Hero 图、大卡片50px药丸按钮CTA、搜索输入、全圆元素令牌层只绑定 8/12/24/9999 四个层级--radius-sm/md/lg/pill1/2/6/10px 按组件内联处理。七、深度与阴影5% 透明度即专业层级处理用途Flat无阴影行内元素默认Subtlergba(32, 32, 37, 0.05) 0px 3px 5px内容卡、静息态Mediumrgba(8, 8, 8, 0.05) 0px 3px 5px 5px悬停卡、抬升容器Pill Shadowrgb(153,153,153) 0px 2px 10px -3px药丸 CTA、浮动动作Heavyrgba(0,0,0) 0px 32px 37px模态遮罩、下拉菜单设计哲学金融语境下重阴影显得轻浮无阴影又显得扁平不可信——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之间硬切无渐变过渡价格行情条扁平无边框作为数据条而非装饰元素。八、Dos and Donts生成时的红线清单Do只用 Binance Yellow#F0B90B做主 CTA 与品牌强调——它是唯一的色彩点浅色/深色段落严格交替制造节奏所有交互元素使用 BinancePlex 500 字重所有主 CTA 药丸按钮统一 50px 圆角内容卡保持 12px 圆角精致但不过分圆润醒目展示实时数据价格、百分比、统计——数字建立信任所有二级/元数据文字统一 Slate#848E9C阴影保持在 5% 透明度以下——若有若无。Dont不引入额外品牌色——只有黄是强调色其余色彩全部数据驱动绿涨红跌内容卡圆角不超过 12px只有 CTA 和视频容器可以更高不加厚重阴影或悬停抬升效果——这是克制的金融平台标题不用 BinancePlex 500 以下字重不在黄底上放黄字始终保证高对比配对不在同一行混用药丸50px与方形6px按钮不柔化深色段落——#222126应该权威而不是灰不用装饰性插画——图片只能是产品截图或数据可视化动画不超 200ms ease 的微妙过渡卡片语义态不用彩色背景——保持卡片白/深用文字色传达语义。九、响应式行为DESIGN.md §89.1 断点表名称宽度关键变化Mobile425px单列、堆叠 Hero、汉堡导航、16px 内边距Small Mobile425–599px更宽移动布局、价格条换行Tablet Small600–768px功能网格开始 2 列Tablet769–896pxHero 并排布局开始Desktop Small897–1024px完整导航展开、功能 3 列Desktop1024–1280px完整布局、最大内容宽度Large Desktop1280–1440px增大边距、容器居中XL Desktop1440px1200px 最大容器 扩展边距9.2 触摸目标最小 44×44pxWCAG AAA药丸 CTA 最小 48px 高导航链接 44px 触摸区移动端行情项为全宽可点行下载按钮大触摸区50px。9.3 折叠策略导航897px 以下全链接 → 汉堡菜单Logo 与 Get Started CTA 保留Hero768px 以下并排 → 堆叠文字上、图下功能网格3 列 → 768px 2 列 → 600px 1 列价格条600px 以下换行或滚动段落内边距64 → 48 → 32 → 16px 随视口收窄设备模型等比缩放、保持居中页脚多列 → 移动端堆叠手风琴。9.4 图片行为设备模型 CSS 缩放受 max-width 约束Hero 图在 24px 圆角容器内等比缩放App 截图固定宽高比响应式二维码固定 120px 方形移动端隐藏换成应用商店直链。十、Agent 提示词速查直接可用的生成模板10.1 快速色值引用主 CTABinance Yellow#F0B90B次级 CTABinance Gold#FFD000浅色背景Pure White#FFFFFF深色背景Binance Dark#222126标题文字Ink#1E2026正文Slate#848E9C边框Border Light#E6E8EA正向Crypto Green#0ECB81负向Crypto Red#F6465D。10.2 示例组件提示词可直接喂给 AgentHeroCreate 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 迭代指南一次只聚焦一个组件引用本文档中的具体色名与十六进制值记住 Binance Yellow#F0B90B是唯一强调色其余全是灰/深/白用明暗段落交替制造视觉节奏数字与数据要醒目——这是金融平台CTA 用药丸50px 圆角表单操作用常规按钮6px 圆角阴影保持几乎不可见5% 透明度——信任来自清晰而非深度任何需要权威感的文本用 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: bundledsource/目录仅作为审计证据存在不应宣称其为上游原始来源见 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考