Binance Design System

---

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 reads like a financial trading platform that wants to feel both authoritative and energetic. The base atmosphere is **deep near-black canvas** (`{colors.canvas-dark}` — #0b0e11) holding white type and a single, ubiquitous accent: **Binance Yellow** (`{colors.primary}` — #FCD535). That yellow does almost all of the brand's heavy lifting — it carries every primary CTA, every value-claim headline ("FUNDS ARE SAFU"), every "Sign Up" pill, every featured tier indicator, and the wordmark itself. There is no secondary brand color. The system trusts the yellow voltage to do the brand work, and it carries it.

Type runs Binance's custom **BinanceNova** (display + body) and **BinancePlex** (numerical / financial display) stack. BinanceNova carries display headlines, section titles, and body copy. BinancePlex appears on price tickers, large stat numbers (transaction volumes, user counts, prize pools) — anywhere a number wants to feel "tabular and reliable." Both run at modest weights — display sizes use weight 600-700 (bolder than typical marketing because trading platforms need numbers to read at a glance), body stays at 400.

The product is **multi-theme**: marketing surfaces (homepage, smart-money, futures arena) default to dark, while transactional surfaces (buy crypto, deposit, withdraw) flip to a light theme. The same yellow CTAs and gray-blue hairlines (`{colors.hairline-on-light}` — #eaecef) thread through both — only canvas, surface, and text tones flip. Trading **green** (`{colors.trading-up}` — #0ecb81) and **red** (`{colors.trading-down}` — #f6465d) signal price direction in tables, charts, and price tickers across both modes.

**Key Characteristics:**

The system has two canvas modes that map to product context:

**Dark mode (marketing default):**

**Light mode (transactional):**

The system runs **BinanceNova** for display and body, and **BinancePlex** for numerical / financial data. Both are licensed Binance custom typefaces. The fallback stack walks `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`.

The split is functional, not decorative:

Mixing them is not optional — BinanceNova on a price ticker would lose the trading-platform character; BinancePlex on a paragraph would feel monospace-cold.

| Token | Size | Weight | Line Height | Letter Spacing | Use |

|---|---|---|---|---|---|

| `{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 headlines ("FUNDS ARE SAFU"), prize-pool hero ("Futures Masters Arena") |

| `{typography.display-md}` | 40px | 600 | 1.15 | -0.3px | Section heads on long-scroll pages |

| `{typography.display-sm}` | 32px | 600 | 1.2 | 0 | CTA band headlines ("Secure, Low-Fee Trading on Binance") |

| `{typography.title-lg}` | 24px | 600 | 1.3 | 0 | Sub-section titles |

| `{typography.title-md}` | 20px | 600 | 1.35 | 0 | QR-promo cards, feature card titles |

| `{typography.title-sm}` | 16px | 600 | 1.4 | 0 | Trust badges, FAQ rows, step labels |

| `{typography.number-display}` | 40px | 700 | 1.1 | -0.3px | Big stat numbers (15,000 BTC, $429,423,449) — BinancePlex |

| `{typography.number-md}` | 16px | 500 | 1.4 | 0 | Markets table prices, table cells — BinancePlex |

| `{typography.number-sm}` | 14px | 500 | 1.4 | 0 | Inline prices, % 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 labels |

| `{typography.button}` | 14px | 600 | 1 | 0 | Standard CTA button labels |

| `{typography.nav-link}` | 14px | 500 | 1.4 | 0 | Top nav menu items |

Display sizes use weight 700 — heavier than most marketing systems. This makes sense for a trading platform: numbers need to read at a glance, headlines need to compete with chart visualizations and dense data tables. The system will not soften display weight to 400 the way Airtable or Stripe does.

`{typography.number-display}` and the smaller number variants always use **BinancePlex**, even when surrounding body type uses BinanceNova. Prices, volumes, and stat counters render in BinancePlex regardless of context — it is the system's "trustworthy number" voice.

If BinanceNova and BinancePlex are unavailable, **Inter** is the closest open-source substitute for BinanceNova and **JetBrains Mono** or **IBM Plex Sans** is the closest substitute for BinancePlex (depending on whether tabular monospace fidelity matters more than humanist proportions). Adjust display headlines down by ~3% in line-height to match BinanceNova's tighter cap height.

Binance is denser than typical marketing sites — long-scroll pages mix hero bands with markets tables, FAQ accordions, and feature grids without much breathing room between them. The system trusts contrast (yellow vs. dark canvas, green vs. red price cells) to do the visual separation work, not whitespace. Where whitespace appears, it's always uniform — `{spacing.section}` between every major band.

| Level | Treatment | Use |

|---|---|---|

| Flat | No shadow, no border | Body sections, top nav, hero bands, footer |

| Soft hairline | 1px `{colors.hairline-on-dark}` or `{colors.hairline-on-light}` | Inputs, table dividers, FAQ row separators, secondary buttons |

| Card surface | `{colors.surface-card-dark}` background on dark canvas, `{colors.canvas-light}` on light context — no shadow | All elevated cards (markets-table-card, QR-promo-card, feature-photo-card, trust-badges) |

| Subtle drop shadow | Faint shadow visible only when a card sits over imagery | Used sparingly on the buy-crypto-amount-card on transactional pages |

| Focus ring | `0 0 0 2px {colors.info-ring}` at 50% alpha | Input + button keyboard focus state |

The elevation philosophy is **flat surfaces with color-block separation**. Binance does not use heavy drop shadows or glassmorphism — depth comes from the contrast between `{colors.canvas-dark}` and `{colors.surface-card-dark}` (a 12-step lightness jump that reads as a clear elevation boundary).

| Token | Value | Use |

|---|---|---|

| `{rounded.xs}` | 2px | Almost no use — reserved for very small badges |

| `{rounded.sm}` | 4px | Small inline buttons (subscribe, trading-up / trading-down inline) |

| `{rounded.md}` | 6px | Standard CTA buttons, primary buttons, primary input fields |

| `{rounded.lg}` | 8px | Search input, content cards, trust badges, sub-cards |

| `{rounded.xl}` | 12px | Elevated card containers (markets-table-card, QR-promo-card, CTA bands) |

| `{rounded.pill}` | 9999px | Prominent feature CTAs ("Sign Up" pill on dark, futures-arena "Join Now") |

| `{rounded.full}` | 9999px / 50% | Coin icons, avatars |

Binance's radius hierarchy is tighter than typical marketing systems — most surfaces sit at 6-12px. The pill radius is a deliberate exception used to signal "this is a top-of-page action."

**`top-nav-dark`** — The marketing top nav on dark canvas. 64px tall, `{colors.canvas-dark}` background. Carries the yellow Binance wordmark at left, primary horizontal menu (Buy Crypto, Markets, Trade, Futures, Earn, Square, Smart Money, Campaigns), right-side cluster with language selector, light/dark toggle, "Log In" text link, "Sign Up" `{component.button-primary}`. The wordmark uses `{colors.primary}` for "BINANCE" type.

**`top-nav-light`** — The transactional top nav on light canvas (buy crypto, deposit pages). Same layout but `{colors.canvas-light}` background and `{colors.ink}` menu items.

**`button-primary`** — The signature primary CTA. Background `{colors.primary}`, text `{colors.on-primary}` (black on yellow — the system's iconic combination), type `{typography.button}`, padding 12px × 24px, height 40px, rounded `{rounded.md}` (6px). Press state: `button-primary-active` darkens to `{colors.primary-active}` (#f0b90b). Disabled state: `button-primary-disabled` desaturates to `{colors.primary-disabled}`.

**`button-primary-pill`** — A larger pill variant of the primary CTA used for top-of-page sign-up moments and product-launch heroes (Futures Arena "Join Now"). Same yellow + black combination, padding 14px × 32px, rounded `{rounded.pill}` (9999px). Use sparingly — the pill is a "this is THE action" signal.

**`button-secondary-on-dark`** — Used over `{colors.canvas-dark}` for less-emphasized actions. Background `{colors.surface-card-dark}`, text `{colors.on-dark}`, rounded `{rounded.md}`.

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

**`button-tertiary-text`** — Inline text button with no background. Used for "Log In" in the top nav and inline "Read More" links.

**`button-trading-up`** — A solid green button used on price-up signals (Buy / Long actions). Background `{colors.trading-up}`, text `{colors.on-dark}`, rounded `{rounded.sm}` (4px), padding 8px × 20px. Smaller and tighter than `{component.button-primary}` because it appears in dense trading interfaces.

**`button-trading-down`** — Symmetric red variant for Sell / Short actions. Same shape, background `{colors.trading-down}`.

**`button-subscribe`** — Compact yellow CTA used in the Smart Money traders table to subscribe to a top trader. Smaller height (28px) and tighter padding than the primary CTA — fits inside dense table rows. Same yellow + black combination.

**`text-link`** — Inline body links in `{colors.primary}` (yellow on dark, also yellow on light). No underline by default. Type inherits `{typography.body-md}`.

**`hero-band-dark`** — Full-width dark band carrying the homepage h1 + sub-headline + dual CTA pair. Background `{colors.canvas-dark}`, padding `{spacing.section}` (80px). The h1 ("316,258,026 USERS TRUST US") uses `{typography.hero-display}` at 64px / 700 — the system's largest type role.

**`stat-callout-card`** — Inline yellow stat numbers (15,000 BTC, 7,488,223, $429,423,449). Transparent background, text `{colors.primary}`, type `{typography.number-display}` in BinancePlex. Used as a flat layout block, not a card with surface — the yellow text alone carries the visual weight.

**`trust-badge`** — Small dark cards holding "No.1 Customer Service" / "No.1 Trading Volume" claims. Background `{colors.surface-card-dark}`, rounded `{rounded.lg}` (8px), padding 16px × 20px. Yellow numeric or word badge ("No.1") sits next to a short label.

**`markets-table-card`** — The right-side markets table on the homepage. Background `{colors.surface-card-dark}`, rounded `{rounded.xl}` (12px), padding `{spacing.lg}` (24px). Carries a tab row (Popular / New listing / Top gainers), then a 5-column row of coin pairs with last price, 24h change %, action button. Each row uses `{component.markets-row}`.

**`markets-row`** — A single row inside the markets table. Transparent background, 12px vertical padding, hairline divider between rows. Coin icon (32×32) + symbol on left; last price in `{typography.number-md}` (BinancePlex); 24h change cell colored by direction (`{component.price-up-cell}` or `{component.price-down-cell}`); right-aligned chevron icon for "view detail."

**`price-up-cell`** / **`price-down-cell`** — Colored text cells for price changes. Transparent background, text `{colors.trading-up}` or `{colors.trading-down}`, type `{typography.number-md}` in BinancePlex. Always paired with a small triangle arrow indicating direction.

**`feature-photo-card`** — The "Trade on the go" section's photo strip — 3 lifestyle photos showing people using the Binance app. Background `{colors.surface-card-dark}`, rounded `{rounded.xl}`. Photos crop edge-to-edge, no internal padding around the image.

**`qr-promo-card`** — The "Trade on the go. Anywhere, anytime." card with QR code. Background `{colors.surface-card-dark}`, rounded `{rounded.xl}`, padding `{spacing.xl}` (32px). Contains an h2 in `{typography.title-md}`, a body paragraph, app store badges (iOS / Android), and a centered QR code.

**`funds-safu-band`** — The yellow-headlined "FUNDS ARE SAFU" band. Background stays `{colors.canvas-dark}`, but the headline uses `{colors.primary}` at `{typography.display-lg}`. Below the headline, three large `{component.stat-callout-card}` numbers anchor the band: total BTC reserves, users helped, funds recovered.

**`faq-row`** — A single FAQ accordion row. Transparent background, padding 20px vertical, hairline divider between rows. Closed state: question in `{typography.title-sm}` + chevron icon at right. Open state: question + answer body in `{typography.body-md}`.

**`cta-band-dark`** — The "Secure, Low-Fee Trading on Binance" pre-footer CTA band. Background `{colors.surface-card-dark}` (one step elevated from canvas), rounded `{rounded.xl}`, padding `{spacing.xxl}` (48px). Carries an h2 in `{typography.display-sm}` and a `{component.button-primary}` aligned right.

**`buy-crypto-amount-card`** — The right-rail card on the Buy BTC page. Background `{colors.canvas-light}`, rounded `{rounded.lg}` (8px), padding `{spacing.lg}` (24px). Carries an editable amount input in `{typography.number-display}` (BinancePlex), a currency selector, and a yellow `{component.button-primary}` for "Continue" / "Confirm Order."

**`steps-card`** — The "How to Buy Crypto" 3-up cards (Enter Amount → Confirm Order → Receive Crypto). Background `{colors.canvas-light}`, rounded `{rounded.lg}`, padding `{spacing.lg}`. Each card has a small numbered icon, a `{typography.title-sm}` step name, and a body description.

**`price-chart-card`** — The "Bitcoin Markets" card carrying the BTC price chart. Background `{colors.canvas-light}`, rounded `{rounded.lg}`. Top row carries pair selector ($79,065.04, +0.45%); main area is a candlestick / line chart in `{colors.trading-up}` and `{colors.trading-down}`; bottom row carries timeframe selector (24H / 1W / 1M / 3M / 1Y / ALL).

**`conversion-cell`** — A single row in the BTC ↔ USD conversion table. Transparent background, text `{colors.body-on-light}`, type `{typography.body-md}`. Pair label on left (BTC, USDT, etc.); USD equivalent on right.

**`search-input-on-dark`** — The "Search currencies" input on the homepage hero. Background `{colors.surface-card-dark}`, text `{colors.on-dark}`, rounded `{rounded.lg}` (8px), padding 10px × 16px, height 40px. Carries a yellow `{component.button-primary-pill}` on the right side ("Sign Up").

**`text-input-on-light`** — Standard input on transactional pages. Background `{colors.canvas-light}`, 1px `{colors.hairline-on-light}` border, rounded `{rounded.md}` (6px), padding 10px × 16px, height 40px. Focus state inherits the focus-ring shadow.

**`cookie-consent-card`** — The cookie banner card visible on the homepage. Background `{colors.canvas-light}`, rounded `{rounded.lg}`, padding `{spacing.md}` (16px). Body text in `{typography.body-sm}` (13px / 400) with three stacked button options (Accept Cookies & Continue / Reject Additional Cookies / Manage Cookies).

**`trader-row`** — A single row in the top-traders table on /smart-money. Transparent background, padding 12px vertical, hairline divider between rows. Avatar + trader name + private/public badge on left; ROI %, AUM, mint date columns; yellow `{component.button-subscribe}` on right.

**`arena-hero-gradient`** — The Futures Arena product-launch hero. A vertical gradient from `{colors.primary}` at top to `{colors.canvas-dark}` at bottom, with the prize-pool headline (4,000,000 USDT) in `{typography.display-lg}` centered. A `{component.button-primary-pill}` ("Join Now") sits below the headline. Used only on product-launch event surfaces — do not generalize to other heroes.

**`footer-light`** — The light-gray footer that closes every page (including dark-canvas pages). Background `{colors.surface-soft-light}` (#fafafa), text `{colors.body-on-light}`. 6-column link list at desktop covering Community / About Us / Products / Business / Service / Learn columns. Vertical padding 64px. The deliberate light footer on a dark page is one of Binance's most distinctive layout choices — it visually closes the page with a "marketing reset" surface.

| Name | Width | Key Changes |

|---|---|---|

| Mobile | < 768px | Top nav collapses to hamburger; hero h1 drops from 64px to ~36px; markets table converts to a horizontally-scrollable card list; demo grids drop to 1-up; footer 6 columns wrap to 2 |

| Tablet | 768–1024px | Top nav stays horizontal but tightens, secondary menu items hide behind a "More" dropdown; markets table 2-up; pricing/feature grids 2-up |

| Desktop | 1024–1440px | Full top-nav with all primary menu items; 5-column markets table; trading dashboards in 8/4 split (chart + side rail) |

| Wide | > 1440px | Same as desktop with more outer breathing room; max content width caps at 1280-1440px depending on surface |

1. Focus on ONE component at a time. Reference its YAML key directly (`{component.button-primary}`, `{component.markets-row}`).

2. When adding a new component, decide first whether it lives in dark mode (marketing / product) or light mode (transactional). The same component appears in both with surface tone flipped.

3. Variants of an existing component (`-active`, `-disabled`) live as separate entries in `components:` — never as nested state objects.

4. Use `{token.refs}` everywhere prose mentions a color, a radius, a typography role, or a spacing value.

5. Never document hover. The system documents Default and Active/Pressed states only.

6. Numbers always use BinancePlex; copy always uses BinanceNova. Mixing them is a system violation.

7. Trading green / red are semantic price tokens — never repurpose them for "success" or "error" generic states.