Binance

---
version: alpha
name: "Binance"
description: "Binance 的 DESIGN.md 中文参考模板，保留原始 design token 与专业术语，覆盖 color system、typography、layout、components、motion 与 interaction states。"
language: zh-CN
sourceLanguage: en
---

## 概览
Binance 读起来像一个既要 authoritative 又要 energetic 的 financial trading platform。基础氛围是 **deep near-black canvas**（`{colors.canvas-dark}` — #0b0e11），承载 white type 与单一且无处不在的 accent：**Binance Yellow**（`{colors.primary}` — #FCD535）。这个 yellow 几乎承担所有品牌重活：每个 primary CTA、每个 value-claim headline（“FUNDS ARE SAFU”）、每个 “Sign Up” pill、每个 featured tier indicator，以及 wordmark 本身。没有 secondary brand color。系统相信 yellow 的 voltage 能完成品牌表达，而且它确实承担了这个角色。

Type 使用 Binance custom **BinanceNova**（display + body）与 **BinancePlex**（numerical / financial display）stack。BinanceNova 承载 display headline、section title 与 body copy。BinancePlex 出现在 price ticker、large stat number（transaction volume、user count、prize pool）等任何需要让数字显得 “tabular and reliable” 的地方。二者都使用适度 weight：display size 使用 weight 600–700（比典型 marketing 更粗，因为 trading platform 需要数字一眼可读），body 保持 400。

Product 是 **multi-theme**：marketing surface（homepage、smart-money、futures arena）默认 dark，而 transactional surface（buy crypto、deposit、withdraw）切换到 light theme。同一套 yellow CTA 与 gray-blue hairline（`{colors.hairline-on-light}` — #eaecef）贯穿两者；只有 canvas、surface 与 text tone 翻转。Trading **green**（`{colors.trading-up}` — #0ecb81）与 **red**（`{colors.trading-down}` — #f6465d）在两种 mode 下的 table、chart 与 price ticker 中表示 price direction。

**Key Characteristics:**
- Single accent color：`{colors.primary}`（#FCD535）承担全部 brand voltage，包括 primary CTA、hero headline、brand mark、badge。Dark 上谨慎用于 emphasis，在 transactional dialog 中更普遍。
- Custom type stack：`BinanceNova`（display + body）与 `BinancePlex`（number、price、financial data）。Big stat number 始终用 BinancePlex 渲染，以保持 tabular consistency。
- Multi-theme：marketing page 默认 dark（`{colors.canvas-dark}`）；transactional page 切换 light（`{colors.canvas-light}`）。Yellow CTA 与 trading green / red 在两者间共享。
- Dark body 上的 light footer：homepage 即使上方 body 是 dark，也使用 `{colors.surface-soft-light}`（#fafafa）作为 footer，这是 deliberate inversion，用来 visually close 页面。
- Trading semantics：price change 使用 green up / red down（`{colors.trading-up}` / `{colors.trading-down}`），作为 text color，而不是 badge background。
- Card surface：dark 上 elevated card 使用 `{colors.surface-card-dark}`（#1e2329）；light 上 card 使用 `{colors.canvas-light}`。没有 gradient surface，没有 atmospheric backdrop，全程 flat color block。
- Border radius 为 small to medium：primary button 使用 `{rounded.md}`（6px），input 与 content card 使用 `{rounded.lg}`（8px），elevated card container 使用 `{rounded.xl}`（12px），prominent feature CTA 使用 `{rounded.pill}`。
- Spacing 遵循 4-multiple scale；major editorial band 使用 `{spacing.section}`（80px），比典型 marketing-only site 略紧，因为 product page 需要更 dense 的 layout。

## Colors

### Brand & Accent
- **Binance Yellow** (`{colors.primary}` — #FCD535): 唯一 brand color。用于 primary CTA background、wordmark、brand-claim headline（“FUNDS ARE SAFU”）、trust badge（“No.1 Trading Volume”）、`{component.stat-callout-card}` 中的 large stat number，以及 inline link。
- **Binance Yellow Active** (`{colors.primary-active}` — #f0b90b): Press / hover-darker variant，略更 saturated 的 yellow。
- **Binance Yellow Disabled** (`{colors.primary-disabled}` — #3a3a1f): Desaturated dark-yellow，用于 dark canvas 上的 disabled CTA。
- **Accent Turquoise** (`{colors.accent-turquoise}` — #2dbdb6): 小型 secondary accent，极少用于 Smart Money 在 dark surface 上的 “Check Now” CTA。把它视为 single-product accent，而不是 system color。

### Surface

系统有两个 canvas mode，对应不同 product context：

**Dark mode (marketing default):**
- **Canvas Dark** (`{colors.canvas-dark}` — #0b0e11): Primary page floor。Near-black，带 slight warm tint，绝不是 pure black。
- **Surface Card Dark** (`{colors.surface-card-dark}` — #1e2329): Dark canvas 上的 card、navigation dropdown、secondary button、markets table。
- **Surface Elevated Dark** (`{colors.surface-elevated-dark}` — #2b3139): 更亮一级，用于 nested card、hovered nav item 与 chart background panel。

**Light mode (transactional):**
- **Canvas Light** (`{colors.canvas-light}` — #ffffff): Transactional page（buy crypto、deposit form、account dialog）的 page floor。
- **Surface Soft Light** (`{colors.surface-soft-light}` — #fafafa): Footer surface 与 disabled state。
- **Surface Strong Light** (`{colors.surface-strong-light}` — #f5f5f5): Muted context 中的 form input background。

### Hairlines & Borders
- **Hairline on Light** (`{colors.hairline-on-light}` — #eaecef): Light surface 上的 1px border tone。Dembrandt frequency analysis 确认它是最高频 token（1022 次）；Binance 大量使用 hairline。
- **Hairline on Dark** (`{colors.hairline-on-dark}` — #2b3139): Dark surface 上的 1px border tone。与 `{colors.surface-elevated-dark}` 同 hex；border 感觉像 surface step，而不是 ink line。
- **Border Strong** (`{colors.border-strong}` — #cdd1d6): 更重的 border tone，用于 disabled secondary button。

### Text
- **Ink** (`{colors.ink}` — #181a20): Light surface 上最强 text。Transactional page 上的 display headline。
- **Body on Dark** (`{colors.body}` — #eaecef): Dark canvas 上的 default running-text，有意不是 pure white，略 cooler。
- **Body on Light** (`{colors.body-on-light}` — #181a20): 与 ink 相同；light-mode body text 复用 ink token。
- **Muted** (`{colors.muted}` — #707a8a): Footer link、breadcrumb、caption、table column header。Light 与 dark canvas 都可用。
- **Muted Strong** (`{colors.muted-strong}` — #929aa5): Emphasized label 的 second-tier muted。
- **On Primary** (`{colors.on-primary}` — #181a20): Yellow primary CTA 上的 black text。
- **On Dark** (`{colors.on-dark}` — #ffffff): Dark canvas 上 high-contrast headline 使用 pure white。

### Trading Semantics
- **Trading Up** (`{colors.trading-up}` — #0ecb81): Price-up green，在 table、chart 与 inline ticker arrow 中作为 text color 使用。绝不作为 button background。
- **Trading Down** (`{colors.trading-down}` — #f6465d): Price-down red。Usage rule 与 trading-up 相同。

### Info / Focus
- **Info** (`{colors.info}` — #3b82f6): Inline info badge 与 focus-ring base。Dembrandt 提取出的 Tailwind `--tw-ring-color` token，用于 input focus。

## Typography

### Font Family
系统使用 **BinanceNova** 承载 display 与 body，使用 **BinancePlex** 承载 numerical / financial data。二者都是 licensed Binance custom typefaces。Fallback stack 为 `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`。

这种分工是 functional，而不是 decorative：
- BinanceNova → editorial type（headline、paragraph、button label、nav）
- BinancePlex → tabular numerical type（price、volume、percentage、stat counter、prize pool）

不能随意混用：price ticker 上使用 BinanceNova 会丢失 trading-platform character；paragraph 上使用 BinancePlex 会显得 monospace-cold。

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | 用途 |
|---|---|---|---|---|---|
| `{typography.hero-display}` | 64px | 700 | 1.1 | -1px | Homepage h1（“316,258,026 USERS TRUST US”） |
| `{typography.display-lg}` | 48px | 700 | 1.1 | -0.5px | Brand-claim headline（“FUNDS ARE SAFU”）、prize-pool hero（“Futures Masters Arena”） |
| `{typography.display-md}` | 40px | 600 | 1.15 | -0.3px | Long-scroll page 上的 section head |
| `{typography.display-sm}` | 32px | 600 | 1.2 | 0 | CTA band headline（“Secure, Low-Fee Trading on Binance”） |
| `{typography.title-lg}` | 24px | 600 | 1.3 | 0 | Sub-section title |
| `{typography.title-md}` | 20px | 600 | 1.35 | 0 | QR-promo card、feature card title |
| `{typography.title-sm}` | 16px | 600 | 1.4 | 0 | Trust badge、FAQ row、step label |
| `{typography.number-display}` | 40px | 700 | 1.1 | -0.3px | Big stat number（15,000 BTC、$429,423,449），使用 BinancePlex |
| `{typography.number-md}` | 16px | 500 | 1.4 | 0 | Markets table price、table cell，使用 BinancePlex |
| `{typography.number-sm}` | 14px | 500 | 1.4 | 0 | Inline price、% changes，使用 BinancePlex |
| `{typography.body-md}` | 14px | 400 | 1.5 | 0 | Default running-text，使用 BinanceNova |
| `{typography.body-sm}` | 13px | 400 | 1.5 | 0 | Cookie consent text、footer body |
| `{typography.caption}` | 12px | 500 | 1.4 | 0 | Small meta label |
| `{typography.button}` | 14px | 600 | 1 | 0 | Standard CTA button label |
| `{typography.nav-link}` | 14px | 500 | 1.4 | 0 | Top nav menu item |

### Principles
Display size 使用 weight 700，比多数 marketing system 更重。这对 trading platform 是合理的：数字需要一眼读清，headline 需要与 chart visualization 和 dense data table 竞争。系统不会像 Airtable 或 Stripe 那样把 display weight soften 到 400。

`{typography.number-display}` 与更小的 number variant 始终使用 **BinancePlex**，即使周围 body type 使用 BinanceNova。Price、volume 与 stat counter 无论 context 如何都用 BinancePlex 渲染；这是系统的 “trustworthy number” voice。

### Font Substitutes
如果 BinanceNova 与 BinancePlex 不可用，**Inter** 是 BinanceNova 最接近的 open-source substitute；**JetBrains Mono** 或 **IBM Plex Sans** 是 BinancePlex 最接近的替代（取决于 tabular monospace fidelity 是否比 humanist proportion 更重要）。Display headline 的 line-height 可下调约 3%，以匹配 BinanceNova 更紧的 cap height。

## Layout

### Spacing System
- **Base unit:** 4px。
- **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 80px。
- **Section padding (vertical):** `{spacing.section}`（80px），比 airy marketing site（96px）略紧，因为 Binance page 会混合 marketing band 与 dense product surface（markets table、FAQ accordion）。
- **Card internal padding:** Content card 与 markets table 使用 `{spacing.lg}`（24px）；QR-promo card 与 CTA band 使用 `{spacing.xl}`（32px）；trust badge 与 table row 使用 `{spacing.md}`（16px）。
- **Gutters:** 3-up grid 中 card 间距使用 `{spacing.lg}`（24px）；footer column gutter 与 dense FAQ list 内使用 `{spacing.md}`（16px）。

### Grid & Container
- **Max content width:** Marketing page 上约 1280px 居中；product surface（markets、smart-money table）上约 1440px，因为 horizontal density 重要。
- **Editorial body:** 单一 12-column grid；product page 常使用 8/4 split（main panel + side rail）。
- **Markets table:** 5-column header（Pair / Last Price / 24h Change / 24h Volume / Action），第一列承载 coin icon + symbol pair。
- **Footer:** Desktop 上 6-column link list，tablet wrap 为 2-up，mobile 为 1-up。

### Whitespace Philosophy
Binance 比典型 marketing site 更 dense；long-scroll page 将 hero band、markets table、FAQ accordion 与 feature grid 混合在一起，之间没有太多 breathing room。系统相信 contrast（yellow vs. dark canvas、green vs. red price cell）能完成 visual separation，而不是 whitespace。Whitespace 出现时始终统一：每个 major band 之间使用 `{spacing.section}`。

## Elevation & Depth

| Level | Treatment | 用途 |
|---|---|---|
| Flat | 无 shadow，无 border | Body section、top nav、hero band、footer |
| Soft hairline | 1px `{colors.hairline-on-dark}` 或 `{colors.hairline-on-light}` | Input、table divider、FAQ row separator、secondary button |
| Card surface | Dark canvas 上 `{colors.surface-card-dark}` background，light context 上 `{colors.canvas-light}`，无 shadow | 所有 elevated card（markets-table-card、QR-promo-card、feature-photo-card、trust-badges） |
| Subtle drop shadow | 只有 card 位于 imagery 上方时才可见的 faint shadow | Transactional page 上的 buy-crypto-amount-card 谨慎使用 |
| Focus ring | 50% alpha 的 `0 0 0 2px {colors.info-ring}` | Input + button keyboard focus state |

Elevation philosophy 是 **flat surfaces with color-block separation**。Binance 不使用 heavy drop shadow 或 glassmorphism；depth 来自 `{colors.canvas-dark}` 与 `{colors.surface-card-dark}` 之间的 contrast（12-step lightness jump，读作清晰 elevation boundary）。

### Decorative Depth
- Futures Arena hero 上的 **Yellow → dark vertical gradient backdrop**：`{colors.primary}` 向下 fade 到 `{colors.canvas-dark}`。这是 product-launch / event hero surface 的 single-page treatment，不是 system-wide signature。
- Large stat block 两侧的 **Coin-stack illustrations**（3D rendered crypto coin、trophy icon）。这些是 illustration，不是 token；应作为 content，而不是 design system surface。

## Shapes

### Border Radius Scale

| Token | Value | 用途 |
|---|---|---|
| `{rounded.xs}` | 2px | 几乎不用，保留给 very small badge |
| `{rounded.sm}` | 4px | Small inline button（subscribe、trading-up / trading-down inline） |
| `{rounded.md}` | 6px | Standard CTA button、primary button、primary input field |
| `{rounded.lg}` | 8px | Search input、content card、trust badge、sub-card |
| `{rounded.xl}` | 12px | Elevated card container（markets-table-card、QR-promo-card、CTA band） |
| `{rounded.pill}` | 9999px | Prominent feature CTA（dark 上的 “Sign Up” pill、futures-arena “Join Now”） |
| `{rounded.full}` | 9999px / 50% | Coin icon、avatar |

Binance 的 radius hierarchy 比典型 marketing system 更紧；大多数 surface 位于 6–12px。Pill radius 是 deliberate exception，用来表示 “this is a top-of-page action”。

### Photography & Iconography
- Coin icon 渲染为 24×24 或 32×32 rounded glyph（通常 circular outline 为 50% radius，内部为 coin brand color）。
- 3D rendered coin stack 与 trophy illustration 是 full-color illustration，带 slight floor shadow，不是 flat icon。
- Photographic content（people-using-the-app section）裁切到 `{rounded.xl}`（12px）corner，mobile 上 full-bleed。

## Components

### Top Navigation

**`top-nav-dark`** — Dark canvas 上的 marketing top nav。64px tall，`{colors.canvas-dark}` background。左侧承载 yellow Binance wordmark，中间为 primary horizontal menu（Buy Crypto、Markets、Trade、Futures、Earn、Square、Smart Money、Campaigns），右侧 cluster 包含 language selector、light/dark toggle、“Log In” text link 与 “Sign Up” `{component.button-primary}`。Wordmark 的 “BINANCE” type 使用 `{colors.primary}`。

**`top-nav-light`** — Light canvas 上的 transactional top nav（buy crypto、deposit pages）。Layout 相同，但使用 `{colors.canvas-light}` background 与 `{colors.ink}` menu item。

### Buttons

**`button-primary`** — Signature primary CTA。Background `{colors.primary}`、text `{colors.on-primary}`（black on yellow，是系统 iconic combination）、type `{typography.button}`、padding 12px × 24px、height 40px、rounded `{rounded.md}`（6px）。Press state：`button-primary-active` 加深为 `{colors.primary-active}`（#f0b90b）。Disabled state：`button-primary-disabled` 去饱和为 `{colors.primary-disabled}`。

**`button-primary-pill`** — Primary CTA 的较大 pill variant，用于 top-of-page sign-up moment 与 product-launch hero（Futures Arena “Join Now”）。同样是 yellow + black combination，padding 14px × 32px、rounded `{rounded.pill}`（9999px）。谨慎使用；pill 是 “this is THE action” signal。

**`button-secondary-on-dark`** — 用于 `{colors.canvas-dark}` 上 less-emphasized action。Background `{colors.surface-card-dark}`、text `{colors.on-dark}`、rounded `{rounded.md}`。

**`button-secondary-on-light`** — Light-canvas equivalent。Background `{colors.canvas-light}`，带 `{colors.hairline-on-light}` 1px border，text `{colors.ink}`。

**`button-tertiary-text`** — 无 background 的 inline text button。用于 top nav 中的 “Log In” 与 inline “Read More” link。

**`button-trading-up`** — 用于 price-up signal（Buy / Long action）的 solid green button。Background `{colors.trading-up}`、text `{colors.on-dark}`、rounded `{rounded.sm}`（4px）、padding 8px × 20px。因为出现在 dense trading interface 中，它比 `{component.button-primary}` 更小、更紧。

**`button-trading-down`** — Sell / Short action 的对称 red variant。Shape 相同，background `{colors.trading-down}`。

**`button-subscribe`** — Smart Money traders table 中用于 subscribe top trader 的 compact yellow CTA。比 primary CTA 更矮（28px）且 padding 更紧，适合 dense table row。仍然是 yellow + black combination。

**`text-link`** — `{colors.primary}` 中的 inline body link（dark 上 yellow，light 上也 yellow）。默认无 underline。Type 继承 `{typography.body-md}`。

### Cards & Containers

**`hero-band-dark`** — Full-width dark band，承载 homepage h1 + sub-headline + dual CTA pair。Background `{colors.canvas-dark}`、padding `{spacing.section}`（80px）。H1（“316,258,026 USERS TRUST US”）使用 `{typography.hero-display}` 64px / 700，是系统最大 type role。

**`stat-callout-card`** — Inline yellow stat number（15,000 BTC、7,488,223、$429,423,449）。Transparent background、text `{colors.primary}`、type `{typography.number-display}`，使用 BinancePlex。作为 flat layout block 使用，不是带 surface 的 card；yellow text 本身承载 visual weight。

**`trust-badge`** — Small dark card，承载 “No.1 Customer Service” / “No.1 Trading Volume” claim。Background `{colors.surface-card-dark}`、rounded `{rounded.lg}`（8px）、padding 16px × 20px。Yellow numeric 或 word badge（“No.1”）位于 short label 旁。

**`markets-table-card`** — Homepage 右侧 markets table。Background `{colors.surface-card-dark}`、rounded `{rounded.xl}`（12px）、padding `{spacing.lg}`（24px）。包含 tab row（Popular / New listing / Top gainers），随后是 5-column coin pair row，带 last price、24h change %、action button。每行使用 `{component.markets-row}`。

**`markets-row`** — Markets table 内的单行。Transparent background，12px vertical padding，row 之间有 hairline divider。左侧 coin icon（32×32）+ symbol；last price 使用 `{typography.number-md}`（BinancePlex）；24h change cell 按 direction 着色（`{component.price-up-cell}` 或 `{component.price-down-cell}`）；右侧对齐 chevron icon 表示 “view detail”。

**`price-up-cell`** / **`price-down-cell`** — Price change 的 colored text cell。Transparent background，text 为 `{colors.trading-up}` 或 `{colors.trading-down}`，type 为 BinancePlex 的 `{typography.number-md}`。始终搭配 small triangle arrow 表示 direction。

**`feature-photo-card`** — “Trade on the go” section 的 photo strip，由 3 张 lifestyle photo 组成，展示人们使用 Binance app。Background `{colors.surface-card-dark}`、rounded `{rounded.xl}`。Photo edge-to-edge 裁切，image 周围无 internal padding。

**`qr-promo-card`** — 带 QR code 的 “Trade on the go. Anywhere, anytime.” card。Background `{colors.surface-card-dark}`、rounded `{rounded.xl}`、padding `{spacing.xl}`（32px）。包含 `{typography.title-md}` 的 h2、body paragraph、app store badges（iOS / Android）与居中的 QR code。

**`funds-safu-band`** — Yellow-headlined “FUNDS ARE SAFU” band。Background 保持 `{colors.canvas-dark}`，但 headline 使用 `{colors.primary}` 与 `{typography.display-lg}`。Headline 下方三个 large `{component.stat-callout-card}` number 锚定 band：total BTC reserves、users helped、funds recovered。

**`faq-row`** — 单个 FAQ accordion row。Transparent background，20px vertical padding，row 之间有 hairline divider。Closed state：question 使用 `{typography.title-sm}`，右侧 chevron icon。Open state：question + `{typography.body-md}` answer body。

**`cta-band-dark`** — “Secure, Low-Fee Trading on Binance” pre-footer CTA band。Background `{colors.surface-card-dark}`（比 canvas elevated 一步）、rounded `{rounded.xl}`、padding `{spacing.xxl}`（48px）。包含 `{typography.display-sm}` h2 与右对齐 `{component.button-primary}`。

### Light-Mode Transactional Components

**`buy-crypto-amount-card`** — Buy BTC page 上的 right-rail card。Background `{colors.canvas-light}`、rounded `{rounded.lg}`（8px）、padding `{spacing.lg}`（24px）。承载 `{typography.number-display}`（BinancePlex）的 editable amount input、currency selector，以及用于 “Continue” / “Confirm Order” 的 yellow `{component.button-primary}`。

**`steps-card`** — “How to Buy Crypto” 3-up card（Enter Amount → Confirm Order → Receive Crypto）。Background `{colors.canvas-light}`、rounded `{rounded.lg}`、padding `{spacing.lg}`。每个 card 有 small numbered icon、`{typography.title-sm}` step name 与 body description。

**`price-chart-card`** — 承载 BTC price chart 的 “Bitcoin Markets” card。Background `{colors.canvas-light}`、rounded `{rounded.lg}`。Top row 包含 pair selector（$79,065.04，+0.45%）；main area 是使用 `{colors.trading-up}` 与 `{colors.trading-down}` 的 candlestick / line chart；bottom row 承载 timeframe selector（24H / 1W / 1M / 3M / 1Y / ALL）。

**`conversion-cell`** — BTC ↔ USD conversion table 中的单行。Transparent background、text `{colors.body-on-light}`、type `{typography.body-md}`。左侧 pair label（BTC、USDT 等），右侧 USD equivalent。

### Inputs & Forms

**`search-input-on-dark`** — Homepage hero 上的 “Search currencies” input。Background `{colors.surface-card-dark}`、text `{colors.on-dark}`、rounded `{rounded.lg}`（8px）、padding 10px × 16px、height 40px。右侧带 yellow `{component.button-primary-pill}`（“Sign Up”）。

**`text-input-on-light`** — Transactional page 上的 standard input。Background `{colors.canvas-light}`、1px `{colors.hairline-on-light}` border、rounded `{rounded.md}`（6px）、padding 10px × 16px、height 40px。Focus state 继承 focus-ring shadow。

**`cookie-consent-card`** — Homepage 上可见的 cookie banner card。Background `{colors.canvas-light}`、rounded `{rounded.lg}`、padding `{spacing.md}`（16px）。Body text 使用 `{typography.body-sm}`（13px / 400），并带三个 stacked button options（Accept Cookies & Continue / Reject Additional Cookies / Manage Cookies）。

### Smart Money Sub-System

**`trader-row`** — `/smart-money` top-traders table 中的单行。Transparent background，12px vertical padding，row 之间有 hairline divider。左侧 avatar + trader name + private/public badge；中间 ROI %、AUM、mint date columns；右侧 yellow `{component.button-subscribe}`。

### Signature Components

**`arena-hero-gradient`** — Futures Arena product-launch hero。从顶部 `{colors.primary}` 到底部 `{colors.canvas-dark}` 的 vertical gradient，居中显示 `{typography.display-lg}` prize-pool headline（4,000,000 USDT）。Headline 下方放置 `{component.button-primary-pill}`（“Join Now”）。只用于 product-launch event surface，不要泛化到其他 hero。

### Footer

**`footer-light`** — 结束每个页面（包括 dark-canvas page）的 light-gray footer。Background `{colors.surface-soft-light}`（#fafafa）、text `{colors.body-on-light}`。Desktop 上为 6-column link list，覆盖 Community / About Us / Products / Business / Service / Learn columns。Vertical padding 64px。Dark page 上 deliberate light footer 是 Binance 最 distinct 的 layout choices 之一；它用 “marketing reset” surface visually close 页面。

## Do's and Don'ts

### Do
- 将 `{colors.primary}`（Binance Yellow）保留给 primary action、brand-claim headline 与 wordmark。绝不要用于 secondary 或 decorative purpose；yellow 的稀缺性正是它强大的原因。
- 在 dark 与 light mode 中都将 `{component.button-primary}`（yellow with black text）作为 universal primary CTA。同一个 button 在 `{colors.canvas-dark}` 与 `{colors.canvas-light}` 上应完全一致。
- `{component.button-trading-up}`（green）与 `{component.button-trading-down}`（red）只用于明确的 Buy / Sell 或 Long / Short action。绝不要用于通用 “confirm” 或 “cancel”，因为它们承载 semantic price-direction meaning。
- 每个数字都使用 BinancePlex。Price、volume、percentage、stat counter 全部是 BinancePlex。把 BinanceNova 混入 number ticker 会破坏 trading-platform character。
- 根据 surface intent 选择 canvas mode：marketing / product showcase / trading dashboard 用 dark；transactional dialog（buy / deposit / withdraw / form submission）用 light。
- 每个 editorial band 使用 `{spacing.section}`（80px）锚定。Binance 比 airy marketing site 更 dense，80px 是正确 rhythm。

### Don't
- 不要引入第二个 brand color。系统只有一个 accent（`{colors.primary}`），任何扩展都会稀释 brand identity。Smart Money 上的 turquoise 是 single-product experiment，不是 system token。
- 不要把 yellow 用于 body text 或 large surface fill。它只用于 focal-point CTA 与 headline。
- 不要把 `{colors.trading-up}` / `{colors.trading-down}` 用作 card background fill。它们是 price-direction signal，应表现为 text color 或 small badge fill，绝不是 card surface。
- 不要 soften display weight。`{typography.hero-display}` 与 `{typography.display-lg}` 有意使用 weight 700；改到 400 会像 design-portfolio，而不是 trading platform。
- 不要给 canvas 添加 atmospheric gradient（mesh、aurora、glow effects）。Binance 相信 color-block contrast；添加 atmospheric depth 会弄脏 trading-platform feel。
- 不要反转 `{component.button-primary}` 的 text color。Black on yellow 是系统 signature；yellow 上 white text 会失去 contrast 与 brand recognition。

## Responsive Behavior

### Breakpoints

| Name | Width | 关键变化 |
|---|---|---|
| Mobile | < 768px | Top nav 折叠为 hamburger；hero h1 从 64px 降到约 36px；markets table 转为 horizontally-scrollable card list；demo grid 降为 1-up；footer 6 columns wrap 为 2 |
| Tablet | 768–1024px | Top nav 保持 horizontal 但更紧，secondary menu item 收进 “More” dropdown；markets table 2-up；pricing / feature grid 2-up |
| Desktop | 1024–1440px | Full top-nav，包含所有 primary menu item；5-column markets table；trading dashboard 使用 8/4 split（chart + side rail） |
| Wide | > 1440px | 与 desktop 相同，但 outer breathing room 更多；max content width 根据 surface 限制在 1280–1440px |

### Touch Targets
- Primary CTA 至少渲染为 40 × 40px（`{component.button-primary}` height + padding），并通过 surrounding spacing 满足 WCAG AAA 的 44 × 44。
- Subscribe / inline action button 为 28 × 28，比理想值更 dense，但符合 trading platform 行业惯例。
- Markets table 中 coin icon 为 32 × 32px，整行可点击，effective target 为 44px+。

### Collapsing Strategy
- Top nav 在 < 768px 折叠为 hamburger；menu 以 full-screen sheet 打开，同样的 yellow accent CTA 锚定在 sheet 底部。
- Mobile 上 markets table reflow 为每个 coin pair 一个 horizontally-scrollable single card。
- Hero stat number（“316M USERS”）按比例缩小而不是 wrap；Binance 最大 claim 必须始终读作 single block。
- Mobile 上 trading dashboard 从 chart + side-rail 切换为 chart-only，并提供单独 “Trade” tab。
- Light footer 在每个 breakpoint 都保持 full-bleed，不折叠为单独 dark variant。

### Image Behavior
- Coin icon 无论 breakpoint 如何都保持 fixed 24 / 32px size。
- “Trade on the go” section 中的 lifestyle photo 响应式裁切：desktop 更宽，mobile 更高（vertical）。
- 3D coin-stack illustration 是 fixed-aspect-ratio asset，统一缩放，不裁切。

## Iteration Guide

1. 一次只聚焦一个 component。直接引用其 YAML key（`{component.button-primary}`、`{component.markets-row}`）。
2. 添加新 component 时，先决定它属于 dark mode（marketing / product）还是 light mode（transactional）。同一 component 在两者中出现时，只翻转 surface tone。
3. 现有 component 的 variant（`-active`、`-disabled`）作为 `components:` 中的独立 entry，绝不作为 nested state object。
4. Prose 中提到 color、radius、typography role 或 spacing value 时，都使用 `{token.refs}`。
5. 不要记录 hover。系统只记录 Default 与 Active / Pressed states。
6. Number 始终使用 BinancePlex；copy 始终使用 BinanceNova。混用是 system violation。
7. Trading green / red 是 semantic price token，绝不要重用于 generic “success” 或 “error” state。

## Known Gaps

- Dembrandt frequency analyzer 捕获 `#eaecef`（light hairline，count 1022）为最高频 token。定义品牌的 `{colors.primary}`（#FCD535）出现频率低得多，因为它作为 accent 被稀缺使用；其 system role 需要从 screenshot 确认。
- BinanceNova 与 BinancePlex 的 weight-axis value 未 formalized 为 variable-font token；这里只记录 screenshot 中观察到的 static weight。
- Animation 与 transition timing（chart redraw、price-change flash）不在 scope 内。
- `{component.text-input-on-light}` default 之外的 form validation state 未提取；error / success input variant 需要 sign-up 或 order-confirmation flow 才能确认。
- Trading dashboard surface（Spot / Futures / Margin）不在分析 URL set 中；其 order book、candlestick chart configuration 与 position-management card 未在本文记录。
- Light/dark theme toggle behavior（transactional page 是否可按 user preference 强制 dark）属于 product behavior，不是从 marketing surface 提取。