币安 Binance

version: alpha name: Binance-design-analysis description: A confident financial-platform interface anchored on a deep near-black canvas, where Binance's iconic yellow (#FCD535) carries every primary CTA, brand accent, and value-claim moment. Type runs Binance's custom BinanceNova / BinancePlex stack at modest weights — the system trusts size and yellow voltage over bold weight. Marketing and product surfaces default to the dark theme; transactional surfaces (buy crypto, deposit, exchange) flip to a light theme that shares the same yellow CTAs and gray-blue hairlines. Trading green (up) and red (down) accents thread through both modes for price-direction signals.

colors: primary: "#fcd535" primary-active: "#f0b90b" primary-disabled: "#3a3a1f" ink: "#181a20" body: "#eaecef" body-on-light: "#181a20" muted: "#707a8a" muted-strong: "#929aa5" hairline-on-light: "#eaecef" hairline-on-dark: "#2b3139" border-strong: "#cdd1d6" canvas-light: "#ffffff" canvas-dark: "#0b0e11" surface-card-dark: "#1e2329" surface-elevated-dark: "#2b3139" surface-soft-light: "#fafafa" surface-strong-light: "#f5f5f5" on-primary: "#181a20" on-dark: "#ffffff" trading-up: "#0ecb81" trading-down: "#f6465d" accent-turquoise: "#2dbdb6" info: "#3b82f6" info-ring: "#3b82f6"

typography: hero-display: fontFamily: "BinanceNova, -apple-system, BlinkMacSystemFont, sans-serif" fontSize: 64px fontWeight: 700 lineHeight: 1.1 letterSpacing: -1px display-lg: fontFamily: "BinanceNova, sans-serif" fontSize: 48px fontWeight: 700 lineHeight: 1.1 letterSpacing: -0.5px display-md: fontFamily: "BinanceNova, sans-serif" fontSize: 40px fontWeight: 600 lineHeight: 1.15 letterSpacing: -0.3px display-sm: fontFamily: "BinanceNova, sans-serif" fontSize: 32px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0 title-lg: fontFamily: "BinanceNova, sans-serif" fontSize: 24px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0 title-md: fontFamily: "BinanceNova, sans-serif" fontSize: 20px fontWeight: 600 lineHeight: 1.35 letterSpacing: 0 title-sm: fontFamily: "BinanceNova, sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0 number-display: fontFamily: "BinancePlex, BinanceNova, sans-serif" fontSize: 40px fontWeight: 700 lineHeight: 1.1 letterSpacing: -0.3px number-md: fontFamily: "BinancePlex, BinanceNova, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0 number-sm: fontFamily: "BinancePlex, BinanceNova, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0 body-md: fontFamily: "BinanceNova, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 body-sm: fontFamily: "BinanceNova, sans-serif" fontSize: 13px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 caption: fontFamily: "BinanceNova, sans-serif" fontSize: 12px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0 button: fontFamily: "BinanceNova, sans-serif" fontSize: 14px fontWeight: 600 lineHeight: 1 letterSpacing: 0 nav-link: fontFamily: "BinanceNova, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0

rounded: xs: 2px sm: 4px md: 6px lg: 8px xl: 12px pill: 9999px full: 9999px

spacing: xxs: 4px xs: 8px sm: 12px md: 16px lg: 24px xl: 32px xxl: 48px section: 80px

components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 12px 24px height: 40px button-primary-active: backgroundColor: "{colors.primary-active}" textColor: "{colors.on-primary}" rounded: "{rounded.md}" button-primary-disabled: backgroundColor: "{colors.primary-disabled}" textColor: "{colors.muted}" rounded: "{rounded.md}" button-primary-pill: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 14px 32px button-secondary-on-dark: backgroundColor: "{colors.surface-card-dark}" textColor: "{colors.on-dark}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 12px 24px button-secondary-on-light: backgroundColor: "{colors.canvas-light}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 12px 24px button-tertiary-text: backgroundColor: transparent textColor: "{colors.body}" typography: "{typography.button}" button-trading-up: backgroundColor: "{colors.trading-up}" textColor: "{colors.on-dark}" typography: "{typography.button}" rounded: "{rounded.sm}" padding: 8px 20px button-trading-down: backgroundColor: "{colors.trading-down}" textColor: "{colors.on-dark}" typography: "{typography.button}" rounded: "{rounded.sm}" padding: 8px 20px button-subscribe: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.sm}" padding: 6px 16px height: 28px text-link: backgroundColor: transparent textColor: "{colors.primary}" typography: "{typography.body-md}" top-nav-dark: backgroundColor: "{colors.canvas-dark}" textColor: "{colors.on-dark}" typography: "{typography.nav-link}" height: 64px top-nav-light: backgroundColor: "{colors.canvas-light}" textColor: "{colors.ink}" typography: "{typography.nav-link}" height: 64px hero-band-dark: backgroundColor: "{colors.canvas-dark}" textColor: "{colors.on-dark}" typography: "{typography.hero-display}" padding: 80px stat-callout-card: backgroundColor: transparent textColor: "{colors.primary}" typography: "{typography.number-display}" trust-badge: backgroundColor: "{colors.surface-card-dark}" textColor: "{colors.on-dark}" typography: "{typography.title-sm}" rounded: "{rounded.lg}" padding: 16px 20px markets-table-card: backgroundColor: "{colors.surface-card-dark}" textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.xl}" padding: 24px markets-row: backgroundColor: transparent textColor: "{colors.on-dark}" typography: "{typography.number-md}" padding: 12px 0 price-up-cell: backgroundColor: transparent textColor: "{colors.trading-up}" typography: "{typography.number-md}" price-down-cell: backgroundColor: transparent textColor: "{colors.trading-down}" typography: "{typography.number-md}" search-input-on-dark: backgroundColor: "{colors.surface-card-dark}" textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 10px 16px height: 40px text-input-on-light: backgroundColor: "{colors.canvas-light}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 10px 16px height: 40px funds-safu-band: backgroundColor: "{colors.canvas-dark}" textColor: "{colors.primary}" typography: "{typography.display-lg}" padding: 80px feature-photo-card: backgroundColor: "{colors.surface-card-dark}" textColor: "{colors.on-dark}" rounded: "{rounded.xl}" qr-promo-card: backgroundColor: "{colors.surface-card-dark}" textColor: "{colors.on-dark}" typography: "{typography.title-md}" rounded: "{rounded.xl}" padding: 32px faq-row: backgroundColor: transparent textColor: "{colors.on-dark}" typography: "{typography.title-sm}" rounded: "{rounded.md}" padding: 20px 0 cta-band-dark: backgroundColor: "{colors.surface-card-dark}" textColor: "{colors.on-dark}" typography: "{typography.display-sm}" rounded: "{rounded.xl}" padding: 48px arena-hero-gradient: backgroundColor: "{colors.canvas-dark}" textColor: "{colors.primary}" typography: "{typography.display-lg}" padding: 80px cookie-consent-card: backgroundColor: "{colors.canvas-light}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.lg}" padding: 16px buy-crypto-amount-card: backgroundColor: "{colors.canvas-light}" textColor: "{colors.ink}" typography: "{typography.number-display}" rounded: "{rounded.lg}" padding: 24px steps-card: backgroundColor: "{colors.canvas-light}" textColor: "{colors.ink}" typography: "{typography.title-sm}" rounded: "{rounded.lg}" padding: 24px price-chart-card: backgroundColor: "{colors.canvas-light}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 24px conversion-cell: backgroundColor: transparent textColor: "{colors.body-on-light}" typography: "{typography.body-md}" trader-row: backgroundColor: transparent textColor: "{colors.on-dark}" typography: "{typography.body-md}" padding: 12px 0 footer-light: backgroundColor: "{colors.surface-soft-light}" textColor: "{colors.body-on-light}" typography: "{typography.body-md}" padding: 64px

概述

Binance 读起来像一个既权威又有活力的金融交易平台。基础氛围是深近黑画布（{colors.canvas-dark} — #0b0e11）承载白色文字与单一、无处不在的点缀色：Binance Yellow（{colors.primary} — #FCD535）。这种黄色承担了品牌绝大部分的视觉担纲——它承载每一个主要 CTA、每一个价值主张标题（"FUNDS ARE SAFU"）、每一个 "Sign Up" 胶囊、每一个推荐层级指示，以及字标本身。没有第二品牌色。系统完全依赖黄色电压完成品牌表达，并且能撑得住。

字体使用 Binance 专有的 BinanceNova（显示 + 正文）与 BinancePlex（数字 / 金融显示）栈。BinanceNova 承担显示标题、板块标题与正文。BinancePlex 出现在价格 ticker、大统计数字（交易量、用户数、奖池）——任何数字希望"表格化与可靠"的地方。两者均以克制字重运行——显示尺寸使用字重 600-700（比典型营销页更重，因为交易平台需要数字一眼可读），正文保持 400。

产品为多主题：营销表面（首页、smart-money、futures arena）默认为深色，而交易表面（buy crypto、deposit、withdraw）则切换到浅色主题。同样的黄色 CTA 与灰蓝色细线（{colors.hairline-on-light} — #eaecef）贯穿两种模式——仅画布、表面与文字色调翻转。交易绿（{colors.trading-up} — #0ecb81）与红（{colors.trading-down} — #f6465d）在两种模式下标记表格、图表与价格 ticker 中的价格方向。

关键特征：

• 单一点缀色：{colors.primary}（#FCD535）承担全部品牌电压——主要 CTA、首屏标题、品牌标识、徽标。在深色表面上克制使用以做强调，在交易对话框上无处不在。
• 定制字体栈：BinanceNova（显示 + 正文）与 BinancePlex（数字、价格、金融数据）。大统计数字始终用 BinancePlex 以保证表格一致性。
• 多主题：营销页默认为深色（{colors.canvas-dark}）；交易页切换浅色（{colors.canvas-light}）。黄色 CTA 与交易绿/红在两种模式间共享。
• 深色正文上的浅色页脚：首页使用 {colors.surface-soft-light}（#fafafa）作为页脚，即便上方正文为深色——这是一种有意的反转，视觉上收束页面。
• 交易语义：上涨绿 / 下跌红（{colors.trading-up} / {colors.trading-down}）用于价格变化，以文字颜色而非徽标背景应用。
• 卡片表面：深色表面上为 {colors.surface-card-dark}（#1e2329）；浅色上下文中为 {colors.canvas-light}。没有渐变表面、没有氛围背景——全为平面色块。
• 圆角小到中等：主要按钮 {rounded.md}（6px），输入框与内容卡片 {rounded.lg}（8px），抬升的卡片容器 {rounded.xl}（12px），醒目功能 CTA {rounded.pill}。
• 间距遵循 4 倍数刻度；主要编辑板块位于 {spacing.section}（80px）——比典型仅营销的站点略紧，因为产品页面需要更紧凑的布局。

配色

品牌与点缀

• Binance Yellow（{colors.primary} — #FCD535）：唯一的品牌色。用于主要 CTA 背景、字标、品牌主张标题（"FUNDS ARE SAFU"）、信任徽标（"No.1 Trading Volume"）、{component.stat-callout-card} 的大统计数字，以及内联链接。
• Binance Yellow Active（{colors.primary-active} — #f0b90b）：按下 / 悬停加深的变体。略更饱和的黄色。
• Binance Yellow Disabled（{colors.primary-disabled} — #3a3a1f）：用于深色画布上禁用 CTA 的去饱和深黄。
• Accent Turquoise（{colors.accent-turquoise} — #2dbdb6）：极少使用的小型次级点缀，仅出现在 Smart Money 的 "Check Now" CTA（深色表面）。视为单一产品点缀，而非系统色。

表面

系统有两种画布模式，对应不同产品上下文：

深色模式（营销默认）：

• Canvas Dark（{colors.canvas-dark} — #0b0e11）：主要页面底色。近黑带一点暖色调——从不是纯黑。
• Surface Card Dark（{colors.surface-card-dark} — #1e2329）：卡片、导航下拉、深色画布上的次要按钮、市场表格。
• Surface Elevated Dark（{colors.surface-elevated-dark} — #2b3139）：再亮一档，用于嵌套卡片、悬停导航项、图表背景面板。

浅色模式（交易）：

• Canvas Light（{colors.canvas-light} — #ffffff）：交易页（buy crypto、deposit 表单、账户对话框）的页面底色。
• Surface Soft Light（{colors.surface-soft-light} — #fafafa）：页脚表面与禁用状态。
• Surface Strong Light（{colors.surface-strong-light} — #f5f5f5）：静默语境下的表单输入背景。

细线与边框

• Hairline on Light（{colors.hairline-on-light} — #eaecef）：浅色表面上的 1px 边框色调。Dembrandt 频次分析确认其为最高频令牌（出现 1022 次）——Binance 大量使用细线。
• Hairline on Dark（{colors.hairline-on-dark} — #2b3139）：深色表面上的 1px 边框色调。与 {colors.surface-elevated-dark} 同色——边框感觉像表面台阶，而非墨线。
• Border Strong（{colors.border-strong} — #cdd1d6）：用于禁用次要按钮的更重边框色调。

文本

• Ink（{colors.ink} — #181a20）：浅色表面上最强的文字。交易页上的显示标题。
• Body on Dark（{colors.body} — #eaecef）：深色画布上的默认正文——刻意非纯白，略冷。
• Body on Light（{colors.body-on-light} — #181a20）：与 ink 相同——浅色模式正文复用 ink 令牌。
• Muted（{colors.muted} — #707a8a）：页脚链接、面包屑、说明、表格列标题。在浅色与深色画布上都可用。
• Muted Strong（{colors.muted-strong} — #929aa5）：用于强调标签的二阶静音色。
• On Primary（{colors.on-primary} — #181a20）：黄色主要 CTA 上的黑字。
• On Dark（{colors.on-dark} — #ffffff）：深色画布上高对比标题的纯白。

交易语义

• Trading Up（{colors.trading-up} — #0ecb81）：上涨绿色，作为表格、图表与内联 ticker 箭头的文字颜色。从不作为按钮背景。
• Trading Down（{colors.trading-down} — #f6465d）：下跌红色。用途规则与 trading-up 相同。

信息 / 聚焦

• Info（{colors.info} — #3b82f6）：内联信息徽标与聚焦环底色。dembrandt 暴露的 Tailwind --tw-ring-color 令牌——用于输入聚焦。

字体排版

字体族

系统使用 BinanceNova 作为显示与正文，BinancePlex 作为数字 / 金融数据。两者均为 Binance 授权的定制字体。回退栈为 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif。

这一划分是功能性的，而非装饰性：

• BinanceNova → 编辑型字体（标题、段落、按钮标签、导航）
• BinancePlex → 表格数字字体（价格、量、百分比、统计计数、奖池）

混合使用并非可选——价格 ticker 上的 BinanceNova 会丧失交易平台特征；段落里的 BinancePlex 会显得等宽冷峻。

层级

设计原则

显示尺寸使用字重 700——比大多数营销系统更重。这对交易平台有意义：数字需要一眼可读，标题需要与图表可视化与密集数据表竞争。系统不会像 Airtable 或 Stripe 那样把显示字重软化到 400。

{typography.number-display} 及较小的数字变体始终使用 BinancePlex，即便周围正文使用 BinanceNova。价格、量与统计计数在任何语境下都使用 BinancePlex 渲染——它是系统中"值得信赖的数字"声音。

字体替代说明

如果 BinanceNova 与 BinancePlex 不可用，Inter 是 BinanceNova 最接近的开源替代，JetBrains Mono 或 IBM Plex Sans 是 BinancePlex 最接近的替代（取决于表格等宽保真度与人文比例哪个更重要）。将显示标题的行高下调约 3% 以匹配 BinanceNova 较紧的字面高度。

布局

间距系统

• 基础单位： 4px。
• 令牌： {spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 12px · {spacing.md} 16px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.xxl} 48px · {spacing.section} 80px。
• 板块内边距（垂直）： {spacing.section}（80px）——比轻盈营销站点（96px）略紧，因为 Binance 页面将营销板块与密集产品表面（市场表、FAQ 折叠菜单）混合。
• 卡片内边距： {spacing.lg}（24px）用于内容卡片与市场表格；{spacing.xl}（32px）用于 QR 推广卡片与 CTA 条幅；{spacing.md}（16px）用于信任徽标与表格行。
• 栏间距： 3 列栅格卡片之间 {spacing.lg}（24px）；页脚栏与密集 FAQ 列表内 {spacing.md}（16px）。

栅格与容器

• 最大内容宽度： 营销页约 1280px 居中；产品表面（市场、smart-money 表格）约 1440px，因为水平密度重要。
• 编辑型正文： 单 12 栏栅格；产品页面常用 8/4 分栏（主面板 + 侧栏）。
• 市场表格： 5 列表头（Pair / Last Price / 24h Change / 24h Volume / Action），首列承载币种图标 + 交易对。
• 页脚： 桌面端 6 列链接列表，平板折为 2 列，移动端折为 1 列。

留白哲学

Binance 比典型营销站点更密集——长滚动页面将首屏板块、市场表格、FAQ 折叠与功能栅格混合在一起，板块之间少有呼吸空间。系统依靠对比（黄 vs 深色画布、绿 vs 红价格单元）做视觉分隔，而非留白。出现留白时，始终统一——主要板块之间均为 {spacing.section}。

层次与深度

层次哲学是平面表面 + 色块分隔。Binance 不使用厚重的投影或玻璃拟态——深度来自 {colors.canvas-dark} 与 {colors.surface-card-dark} 之间的对比（12 级亮度跳跃，读起来是清晰的层次边界）。

装饰性深度

• 黄色 → 深色垂直渐变背景 出现在 Futures Arena 首屏上：{colors.primary} 自上而下渐隐至 {colors.canvas-dark}。这是单页处理，用于产品发布 / 活动首屏表面，非全系统签名。
• 币堆插图 出现在大统计块的两侧（3D 渲染的加密币、奖杯图标）。这些是插图，非令牌——视为内容而非设计系统表面。

形态

圆角分级

Binance 的半径层级比典型营销系统更紧——多数表面位于 6–12px。胶囊半径是刻意的例外，用于标记"这是顶部页动作"。

摄影与图标

• 币种图标渲染为 24×24 或 32×32 圆角图形（通常为 50% 半径的圆形描边 + 内部币种品牌色）。
• 3D 渲染的币堆与奖杯插图是全彩插图，带轻微的地面阴影——非扁平图标。
• 摄影内容（"people-using-the-app"板块）裁切至 {rounded.xl}（12px）圆角，移动端全幅。

组件

顶部导航

top-nav-dark — 深色画布上的营销顶部导航。64px 高，{colors.canvas-dark} 背景。承载左侧黄色 Binance 字标、主要水平菜单（Buy Crypto、Markets、Trade、Futures、Earn、Square、Smart Money、Campaigns），右侧簇包含语言选择器、明/暗切换、"Log In" 文字链接、"Sign Up" {component.button-primary}。字标使用 {colors.primary} 渲染 "BINANCE"。

top-nav-light — 浅色画布（buy crypto、deposit 页）上的交易顶部导航。布局相同，但背景为 {colors.canvas-light}，菜单项为 {colors.ink}。

按钮

button-primary — 标志性的主要 CTA。背景 {colors.primary}，文字 {colors.on-primary}（黄色上的黑字——系统的标志性组合），字体 {typography.button}，内边距 12px × 24px，高度 40px，圆角 {rounded.md}（6px）。按下态：button-primary-active 加深为 {colors.primary-active}（#f0b90b）。禁用态：button-primary-disabled 去饱和为 {colors.primary-disabled}。

button-primary-pill — 主要 CTA 的更大胶囊变体，用于页面顶部注册时刻与产品发布首屏（Futures Arena "Join Now"）。同样的黄 + 黑组合，内边距 14px × 32px，圆角 {rounded.pill}（9999px）。克制使用——胶囊是"这是 THE 动作"的信号。

button-secondary-on-dark — 在 {colors.canvas-dark} 上用于次强调动作。背景 {colors.surface-card-dark}，文字 {colors.on-dark}，圆角 {rounded.md}。

button-secondary-on-light — 浅色画布上的对应版本。背景 {colors.canvas-light} 带 {colors.hairline-on-light} 1px 边框，文字 {colors.ink}。

button-tertiary-text — 无背景的内联文字按钮。用于顶部导航的 "Log In" 与内联 "Read More" 链接。

button-trading-up — 用于上涨信号（Buy / Long 动作）的纯绿按钮。背景 {colors.trading-up}，文字 {colors.on-dark}，圆角 {rounded.sm}（4px），内边距 8px × 20px。比 {component.button-primary} 更小更紧，因为它出现在密集的交易界面中。

button-trading-down — 用于 Sell / Short 动作的对称红色变体。同形态，背景 {colors.trading-down}。

button-subscribe — Smart Money 交易者表格中订阅顶级交易者的紧凑黄色 CTA。比主要 CTA 更小（28px 高）和更紧的内边距——适配密集的表格行。同样的黄 + 黑组合。

text-link — {colors.primary}（深色上黄色，浅色上也黄色）的内联正文链接。默认无下划线。字体继承 {typography.body-md}。

卡片与容器

hero-band-dark — 全幅深色板块，承载首页 h1 + 副标题 + 双 CTA 组合。背景 {colors.canvas-dark}，内边距 {spacing.section}（80px）。h1（"316,258,026 USERS TRUST US"）使用 {typography.hero-display} 64px / 700——系统中最大的字体角色。

stat-callout-card — 内联黄色统计数字（15,000 BTC、7,488,223、$429,423,449）。透明背景，文字 {colors.primary}，字体 {typography.number-display}（BinancePlex）。用作平面布局块，非带表面的卡片——黄色文字本身承担视觉重量。

trust-badge — 承载 "No.1 Customer Service" / "No.1 Trading Volume" 主张的小型深色卡片。背景 {colors.surface-card-dark}，圆角 {rounded.lg}（8px），内边距 16px × 20px。黄色数字或文字徽标（"No.1"）位于短标签旁。

markets-table-card — 首页右侧的市场表格。背景 {colors.surface-card-dark}，圆角 {rounded.xl}（12px），内边距 {spacing.lg}（24px）。承载一行 tab（Popular / New listing / Top gainers），随后 5 列的币种行，含最新价格、24h 变化 %、动作按钮。每行使用 {component.markets-row}。

markets-row — 市场表格中的单行。透明背景，12px 垂直内边距，行间细线分隔。币种图标（32×32） + 交易对位于左侧；最新价格 {typography.number-md}（BinancePlex）；24h 变化单元按方向着色（{component.price-up-cell} 或 {component.price-down-cell}）；右对齐 chevron 图标表示"view detail"。

price-up-cell / price-down-cell — 价格变化的彩色文字单元。透明背景，文字 {colors.trading-up} 或 {colors.trading-down}，字体 {typography.number-md}（BinancePlex）。总是与表示方向的小三角箭头配对。

feature-photo-card — "Trade on the go"板块的照片条——3 张展示 Binance app 用户的生活方式照片。背景 {colors.surface-card-dark}，圆角 {rounded.xl}。照片边到边裁切，图像周围无内边距。

qr-promo-card — 配 QR 码的 "Trade on the go. Anywhere, anytime." 卡片。背景 {colors.surface-card-dark}，圆角 {rounded.xl}，内边距 {spacing.xl}（32px）。包含 {typography.title-md} 的 h2、一段正文、app store 徽标（iOS / Android），以及居中的 QR 码。

funds-safu-band — 黄色标题的 "FUNDS ARE SAFU" 板块。背景保持 {colors.canvas-dark}，但标题使用 {colors.primary} {typography.display-lg}。标题下方，三个大型 {component.stat-callout-card} 数字锚定该板块：BTC 总储备、获助用户数、回收资金。

faq-row — 单条 FAQ 折叠行。透明背景，垂直 20px 内边距，行间细线分隔。关闭态：{typography.title-sm} 的问题 + 右侧 chevron 图标。打开态：问题 + {typography.body-md} 的答案正文。

cta-band-dark — 接近页脚的 "Secure, Low-Fee Trading on Binance" CTA 板块。背景 {colors.surface-card-dark}（比画布高一档），圆角 {rounded.xl}，内边距 {spacing.xxl}（48px）。承载 {typography.display-sm} 的 h2 与右对齐的 {component.button-primary}。

浅色模式交易组件

buy-crypto-amount-card — Buy BTC 页右栏卡片。背景 {colors.canvas-light}，圆角 {rounded.lg}（8px），内边距 {spacing.lg}（24px）。承载 {typography.number-display}（BinancePlex）的可编辑金额输入、币种选择器，以及用于 "Continue" / "Confirm Order" 的黄色 {component.button-primary}。

steps-card — "How to Buy Crypto" 三联卡片（Enter Amount → Confirm Order → Receive Crypto）。背景 {colors.canvas-light}，圆角 {rounded.lg}，内边距 {spacing.lg}。每张卡片有一个小编号图标、{typography.title-sm} 的步骤名，以及正文描述。

price-chart-card — 承载 BTC 价格图表的 "Bitcoin Markets" 卡片。背景 {colors.canvas-light}，圆角 {rounded.lg}。顶行承载交易对选择器（$79,065.04，+0.45%）；主区域是 {colors.trading-up} 与 {colors.trading-down} 颜色的 K 线 / 折线图；底行承载时间周期选择器（24H / 1W / 1M / 3M / 1Y / ALL）。

conversion-cell — BTC ↔ USD 转换表的单行。透明背景，文字 {colors.body-on-light}，字体 {typography.body-md}。交易对标签在左（BTC、USDT 等）；右侧为 USD 等值。

输入与表单

search-input-on-dark — 首页首屏的 "Search currencies" 输入框。背景 {colors.surface-card-dark}，文字 {colors.on-dark}，圆角 {rounded.lg}（8px），内边距 10px × 16px，高度 40px。右侧承载黄色 {component.button-primary-pill}（"Sign Up"）。

text-input-on-light — 交易页上的标准输入框。背景 {colors.canvas-light}，1px {colors.hairline-on-light} 边框，圆角 {rounded.md}（6px），内边距 10px × 16px，高度 40px。聚焦态继承聚焦环阴影。

cookie-consent-card — 首页可见的 cookie 横幅卡片。背景 {colors.canvas-light}，圆角 {rounded.lg}，内边距 {spacing.md}（16px）。正文 {typography.body-sm}（13px / 400），三个堆叠的按钮选项（Accept Cookies & Continue / Reject Additional Cookies / Manage Cookies）。

Smart Money 子系统

trader-row — /smart-money 顶级交易者表格的单行。透明背景，垂直 12px 内边距，行间细线分隔。头像 + 交易者名 + 公开/私密徽标在左；ROI %、AUM、起投日期列；右侧黄色 {component.button-subscribe}。

签名组件

arena-hero-gradient — Futures Arena 产品发布首屏。{colors.primary} 至 {colors.canvas-dark} 的垂直渐变，奖池标题（4,000,000 USDT）以 {typography.display-lg} 居中。标题下方为 {component.button-primary-pill}（"Join Now"）。仅用于产品发布活动表面——不要泛化到其他首屏。

页脚

footer-light — 关闭每个页面（包括深色画布页面）的浅灰页脚。背景 {colors.surface-soft-light}（#fafafa），文字 {colors.body-on-light}。桌面端 6 列链接列表，覆盖 Community / About Us / Products / Business / Service / Learn 列。垂直内边距 64px。深色页面上有意的浅色页脚是 Binance 最具辨识度的布局选择之一——它用"营销重置"表面视觉上收束页面。

推荐与避免

推荐

• 将 {colors.primary}（Binance Yellow）保留给主要动作、品牌主张标题与字标。绝不将其用于次要或装饰目的——黄色的稀缺才是其力量所在。
• 将 {component.button-primary}（黄色 + 黑字）作为深色与浅色模式下的通用主要 CTA。同一个按钮在 {colors.canvas-dark} 与 {colors.canvas-light} 上完全一致地出现。
• 仅在明确的 Buy/Sell 或 Long/Short 动作上使用 {component.button-trading-up}（绿）与 {component.button-trading-down}（红）。绝不用作通用"确认"或"取消"，因为它们携带语义化的价格方向含义。
• 每个数字都使用 BinancePlex。价格、量、百分比、统计计数——全部 BinancePlex。将 BinanceNova 混入数字 ticker 会破坏交易平台特征。
• 按表面意图选择画布模式：营销 / 产品展示 / 交易面板用深色；交易对话框（buy / deposit / withdraw / 表单提交）用浅色。
• 使用 {spacing.section}（80px）锚定每个编辑板块。Binance 比轻盈营销站点更密集——80px 是正确的节奏。

避免

• 不要引入第二品牌色。系统恰好有一个点缀色（{colors.primary}），任何扩张都会稀释品牌识别。Smart Money 上的青绿色是单一产品实验，非系统令牌。
• 不要将黄色用于正文或大表面填充。它仅用于焦点 CTA 与标题。
• 不要将 {colors.trading-up} / {colors.trading-down} 用作卡片的背景填充。它们是价格方向信号，以文字颜色或小型徽标填充表达——绝不作为卡片表面。
• 不要软化显示字重。{typography.hero-display} 与 {typography.display-lg} 刻意使用字重 700——改为 400 读起来像设计作品集，而非交易平台。
• 不要给画布添加氛围渐变（网格、极光、辉光效果）。Binance 依靠色块对比——添加氛围深度会让交易平台感觉模糊。
• 不要反转 {component.button-primary} 的文字色。黑字 + 黄色是系统的标志——黄色上的白字会损失对比度与品牌识别。

响应式行为

断点

触控目标

• 主要 CTA 至少 40 × 40px（{component.button-primary} 高度 + 内边距）——满足 WCAG AAA 的 44 × 44 加上周围间距。
• Subscribe / 内联动作按钮为 28 × 28——比理想更密集，但符合行业交易平台规范。
• 市场表格中的币种图标为 32 × 32px，整行可点击形成 44px+ 有效目标。

折叠策略

• 顶部导航在 < 768px 折叠为汉堡；菜单以全屏面板打开，面板底部锚定同样的黄色点缀 CTA。
• 市场表格在移动端重排为可水平滚动的单卡片每交易对。
• 首屏统计数字（"316M USERS"）按比例缩小而非换行——Binance 最大的主张必须始终作为一个整体块阅读。
• 交易面板从图表 + 侧栏切换为移动端的仅图表 + 单独的 "Trade" tab。
• 浅色页脚在所有断点上保持全幅——不折叠为独立的深色变体。

图片行为

• 币种图标在所有断点上保持固定 24/32px 尺寸。
• "Trade on the go"板块中的生活方式照片响应式裁切——桌面端更宽，移动端更高（纵向）。
• 3D 币堆插图为固定长宽比资产，统一缩放而不裁切。

迭代指南

1. 一次专注于一个组件。直接引用其 YAML 键（{component.button-primary}、{component.markets-row}）。
2. 添加新组件时，先决定它位于深色模式（营销 / 产品）还是浅色模式（交易）。同一组件在两种模式中均出现，仅表面色调翻转。
3. 已存在组件的变体（-active、-disabled）作为独立条目存于 components: 中——绝不使用嵌套状态对象。
4. 在所有提及颜色、圆角、字体角色或间距值的正文中使用 {token.refs}。
5. 绝不记录悬停。系统仅记录默认与激活/按下态。
6. 数字始终使用 BinancePlex；文案始终使用 BinanceNova。混合使用即为系统违规。
7. 交易绿 / 红是语义化的价格令牌——绝不重新用作"成功"或"错误"通用状态。

已知缺口

• dembrandt 频次分析器将 #eaecef（浅色细线，出现 1022 次）捕获为最高频令牌。品牌定义的 {colors.primary}（#FCD535）出现频次低得多，因为它作为点缀色使用克制——其系统角色必须从截图确认。
• BinanceNova 与 BinancePlex 的字重轴值未正式化为可变字体令牌——仅记录了截图中观察到的静态字重。
• 动画与过渡时长（图表重绘、价格变化闪烁）不在范围内。
• {component.text-input-on-light} 默认之外的表单校验状态未提取——错误 / 成功输入变体需要注册或订单确认流程才能确认。
• 交易面板表面（Spot / Futures / Margin）不在分析的 URL 集合中；其订单簿、K 线图配置与持仓管理卡片未在此记录。
• 明/暗主题切换行为（交易页是否可由用户偏好强制为深色）是产品行为，不是从营销表面提取的。