Binance

Overview

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:**

• Single accent color: `{colors.primary}` (#FCD535) does all brand voltage — primary CTAs, hero headlines, brand mark, badges. Used scarcely on dark for emphasis, ubiquitously on transactional dialogs.
• Custom type stack: `BinanceNova` (display + body) and `BinancePlex` (numbers, prices, financial data). Big stat numbers always render in BinancePlex for tabular consistency.
• Multi-theme: marketing pages default dark (`{colors.canvas-dark}`); transactional pages flip light (`{colors.canvas-light}`). Yellow CTAs and trading green/red are shared across both.
• Light footer on dark body: the homepage uses `{colors.surface-soft-light}` (#fafafa) for the footer even when the body above it is dark — a deliberate inversion that visually closes the page.
• Trading semantics: green up / red down (`{colors.trading-up}` / `{colors.trading-down}`) for price changes, applied as text color rather than badge background.
• Card surfaces: `{colors.surface-card-dark}` (#1e2329) for elevated cards on dark; `{colors.canvas-light}` for cards on light. No gradient surfaces, no atmospheric backdrops — flat color blocks throughout.
• Border radius is small to medium: `{rounded.md}` (6px) for primary buttons, `{rounded.lg}` (8px) for inputs and content cards, `{rounded.xl}` (12px) for elevated card containers, `{rounded.pill}` for prominent feature CTAs.
• Spacing follows a 4-multiple scale; major editorial bands sit at `{spacing.section}` (80px) — slightly tighter than typical marketing-only sites because product pages need denser layouts.

Colors

Brand & Accent

• **Binance Yellow** (`{colors.primary}` — #FCD535): The single brand color. Used for primary CTA backgrounds, the wordmark, brand-claim headlines ("FUNDS ARE SAFU"), trust badges ("No.1 Trading Volume"), large stat numbers in `{component.stat-callout-card}`, and inline links.
• **Binance Yellow Active** (`{colors.primary-active}` — #f0b90b): The press / hover-darker variant. Slightly more saturated yellow.
• **Binance Yellow Disabled** (`{colors.primary-disabled}` — #3a3a1f): A desaturated dark-yellow used on disabled CTAs over dark canvas.
• **Accent Turquoise** (`{colors.accent-turquoise}` — #2dbdb6): A small secondary accent used very sparingly on Smart Money's "Check Now" CTA over dark surfaces. Treat as a single-product accent, not a system color.

Surface

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

**Dark mode (marketing default):**

• **Canvas Dark** (`{colors.canvas-dark}` — #0b0e11): The primary page floor. Near-black with a slight warm tint — never pure black.
• **Surface Card Dark** (`{colors.surface-card-dark}` — #1e2329): Cards, navigation dropdowns, secondary buttons over dark canvas, markets table.
• **Surface Elevated Dark** (`{colors.surface-elevated-dark}` — #2b3139): One step lighter, used for nested cards, hovered nav items, and chart background panels.

**Light mode (transactional):**

• **Canvas Light** (`{colors.canvas-light}` — #ffffff): The page floor on transactional pages (buy crypto, deposit forms, account dialogs).
• **Surface Soft Light** (`{colors.surface-soft-light}` — #fafafa): Footer surface and disabled states.
• **Surface Strong Light** (`{colors.surface-strong-light}` — #f5f5f5): Form input backgrounds in muted contexts.

Hairlines & Borders

• **Hairline on Light** (`{colors.hairline-on-light}` — #eaecef): The 1px border tone on light surfaces. Dembrandt's frequency analysis confirms this as the highest-count token (1022 occurrences) — Binance uses hairlines liberally.
• **Hairline on Dark** (`{colors.hairline-on-dark}` — #2b3139): The 1px border tone on dark surfaces. Same hex as `{colors.surface-elevated-dark}` — borders feel like surface steps, not ink lines.
• **Border Strong** (`{colors.border-strong}` — #cdd1d6): A heavier border tone used on disabled secondary buttons.

Text

• **Ink** (`{colors.ink}` — #181a20): The strongest text on light surfaces. Display headlines on transactional pages.
• **Body on Dark** (`{colors.body}` — #eaecef): Default running-text on dark canvas — deliberately not pure white, slightly cooler.
• **Body on Light** (`{colors.body-on-light}` — #181a20): Same as ink — light-mode body text reuses the ink token.
• **Muted** (`{colors.muted}` — #707a8a): Footer links, breadcrumbs, captions, table column headers. Works on both light and dark canvas.
• **Muted Strong** (`{colors.muted-strong}` — #929aa5): A second-tier muted for emphasized labels.
• **On Primary** (`{colors.on-primary}` — #181a20): Black text on yellow primary CTAs.
• **On Dark** (`{colors.on-dark}` — #ffffff): Pure white for high-contrast headlines on dark canvas.

Trading Semantics

• **Trading Up** (`{colors.trading-up}` — #0ecb81): Price-up green, used as text color in tables, charts, and inline ticker arrows. Never as a button background.
• **Trading Down** (`{colors.trading-down}` — #f6465d): Price-down red. Same usage rules as trading-up.

Info / Focus

• **Info** (`{colors.info}` — #3b82f6): Inline info badges and the focus-ring base. The Tailwind `--tw-ring-color` token surfaced by dembrandt — used on input focus.

Typography

Font Family

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:

• BinanceNova → editorial type (headlines, paragraphs, button labels, nav)
• BinancePlex → tabular numerical type (prices, volumes, percentages, stat counters, prize pools)

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

Hierarchy

| 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 |

Principles

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.

Note on Font Substitutes

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.

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) — slightly tighter than airy marketing sites (96px) because Binance pages mix marketing bands with dense product surfaces (markets tables, FAQ accordions).
• **Card internal padding:** `{spacing.lg}` (24px) for content cards and markets tables; `{spacing.xl}` (32px) for QR-promo cards and CTA bands; `{spacing.md}` (16px) for trust badges and table rows.
• **Gutters:** `{spacing.lg}` (24px) between cards in 3-up grids; `{spacing.md}` (16px) inside footer column gutters and dense FAQ lists.

Grid & Container

• **Max content width:** ~1280px centered on marketing pages; ~1440px on product surfaces (markets, smart-money tables) where horizontal density matters.
• **Editorial body:** Single 12-column grid; product pages often use 8/4 split (main panel + side rail).
• **Markets table:** 5-column header (Pair / Last Price / 24h Change / 24h Volume / Action), with the first column carrying coin icon + symbol pair.
• **Footer:** 6-column link list at desktop, wrapping to 2-up at tablet and 1-up on mobile.

Whitespace Philosophy

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.

Elevation & Depth

| 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).

Decorative Depth

• **Yellow → dark vertical gradient backdrop** on the Futures Arena hero: `{colors.primary}` fading down to `{colors.canvas-dark}`. This is a single-page treatment used for product-launch / event hero surfaces, not a system-wide signature.
• **Coin-stack illustrations** flanking large stat blocks (3D rendered crypto coins, trophy icons). These are illustrations, not tokens — treat as content rather than design system surface.

Shapes

Border Radius Scale

| 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."

Photography & Iconography

• Coin icons render as 24×24 or 32×32 rounded glyphs (often 50% radius on circular outline + the coin's brand color inside).
• 3D rendered coin stacks and trophy illustrations are full-color illustrations with a slight floor shadow — not flat icons.
• Photographic content (people-using-the-app section) crops to `{rounded.xl}` (12px) corners, full-bleed on mobile.

Components

Top Navigation

**`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.

Buttons

**`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}`.

Cards & Containers

**`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.

Light-Mode Transactional Components

**`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.

Inputs & Forms

**`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).

Smart Money Sub-System

**`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.

Signature Components

**`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

**`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.

Do's and Don'ts

Do

• Reserve `{colors.primary}` (Binance Yellow) for primary actions, brand-claim headlines, and the wordmark. Never use it for secondary or decorative purposes — yellow's scarcity is what makes it powerful.
• Keep `{component.button-primary}` (yellow with black text) as the universal primary CTA across both dark and light modes. The same button appears identically on `{colors.canvas-dark}` and `{colors.canvas-light}`.
• Use `{component.button-trading-up}` (green) and `{component.button-trading-down}` (red) only for explicit Buy/Sell or Long/Short actions. Never use them for general "confirm" or "cancel" because they carry semantic price-direction meaning.
• Use BinancePlex for every number. Prices, volumes, percentages, stat counters — all BinancePlex. Mixing BinanceNova into a number ticker breaks the trading-platform character.
• Choose canvas mode by surface intent: dark for marketing / product showcase / trading dashboards; light for transactional dialogs (buy / deposit / withdraw / form submission).
• Anchor every editorial band with `{spacing.section}` (80px). Binance is denser than airy marketing sites — 80px is the right rhythm.

Don't

• Don't introduce a second brand color. The system has exactly one accent (`{colors.primary}`) and any expansion dilutes the brand identity. The turquoise on Smart Money is a single-product experiment, not a system token.
• Don't use yellow for body text or large surface fills. It is for focal-point CTAs and headlines only.
• Don't use `{colors.trading-up}` / `{colors.trading-down}` as background fills on cards. They are price-direction signals, expressed as text color or small badge fill — never as a card surface.
• Don't soften display weight. `{typography.hero-display}` and `{typography.display-lg}` are intentionally weight 700 — going to 400 reads as design-portfolio, not trading platform.
• Don't add atmospheric gradients to the canvas (mesh, aurora, glow effects). Binance trusts color-block contrast — adding atmospheric depth muddies the trading-platform feel.
• Don't invert `{component.button-primary}`'s text color. Black on yellow is the system's signature — white text on yellow loses contrast and brand recognition.

Responsive Behavior

Breakpoints

| 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 |

Touch Targets

• Primary CTAs render at minimum 40 × 40px (`{component.button-primary}` height + padding) — meets WCAG AAA's 44 × 44 with surrounding spacing.
• Subscribe / inline action buttons are 28 × 28 — denser than ideal but matches industry trading platform norms.
• Coin icons in markets tables are 32 × 32px, with the entire row tappable for 44px+ effective target.

Collapsing Strategy

• Top nav collapses to hamburger at < 768px; the menu opens as a full-screen sheet with the same yellow accent CTAs anchored to the bottom of the sheet.
• Markets table reflows to a horizontally-scrollable single card per coin pair on mobile.
• The hero stat numbers ("316M USERS") shrink proportionally rather than wrapping — Binance's biggest claim must always read as a single block.
• Trading dashboards switch from chart + side-rail to chart-only with a separate "Trade" tab on mobile.
• The light footer stays full-bleed at every breakpoint — it does not collapse to a separate dark variant.

Image Behavior

• Coin icons stay at fixed 24/32px sizes regardless of breakpoint.
• Lifestyle photos in the "Trade on the go" section crop responsively — wider at desktop, taller (vertical) at mobile.
• 3D coin-stack illustrations are fixed-aspect-ratio assets that scale uniformly without cropping.

Iteration Guide

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.

Known Gaps

• The dembrandt frequency analyzer captured `#eaecef` (light hairline, count 1022) as the highest-frequency token. The brand-defining `{colors.primary}` (#FCD535) appears far less frequently because it's used scarcely as accent — its system role had to be confirmed from screenshots.
• BinanceNova and BinancePlex weight-axis values are not formalized as variable-font tokens — only the static weights observed in screenshots are documented.
• Animation and transition timings (chart redraws, price-change flashes) are not in scope.
• Form validation states beyond `{component.text-input-on-light}` defaults are not extracted — error / success input variants would need a sign-up or order-confirmation flow to confirm.
• The trading dashboard surfaces (Spot / Futures / Margin) were not in the analyzed URL set; their order book, candlestick chart configuration, and position-management cards are not documented here.
• The light/dark theme toggle behavior (whether transactional pages can be forced dark by user preference) is product behavior, not extracted from the marketing surfaces.

개요

바이낸스는 권위와 활력을 모두 느끼고 싶어하는 금융 거래 플랫폼처럼 읽혀집니다. 기본 분위기는 **검은색에 가까운 짙은 캔버스**(`{colors.canvas-dark}` — #0b0e11)로 흰색 활자와 어디에나 있는 단일 액센트인 **Binance Yellow**(`{colors.primary}` — #FCD535)를 담고 있습니다. 그 노란색은 브랜드의 거의 모든 무거운 작업을 수행합니다. 모든 기본 CTA, 모든 가치 주장 헤드라인("FUNDS ARE SAFU"), 모든 "가입" 알약, 모든 주요 계층 표시 및 워드마크 자체를 담고 있습니다. 보조 브랜드 색상이 없습니다. 시스템은 노란색 전압을 신뢰하여 브랜드 작업을 수행하고 이를 수행합니다.

Type은 Binance의 사용자 정의 **BinanceNova**(디스플레이 + 본문) 및 **BinancePlex**(숫자/금융 디스플레이) 스택을 실행합니다. BinanceNova는 표시 헤드라인, 섹션 제목 및 본문 문구를 전달합니다. BinancePlex는 가격 표시기, 큰 통계 수치(거래량, 사용자 수, 상금 풀) 등 숫자가 "표 형식 및 신뢰성"을 느끼기를 원하는 모든 곳에 표시됩니다. 둘 다 적당한 가중치로 실행됩니다. 디스플레이 크기는 가중치 600-700(거래 플랫폼에서 한 눈에 읽을 수 있는 숫자가 필요하기 때문에 일반적인 마케팅보다 굵게)을 사용하고 본문은 400을 유지합니다.

이 제품은 **다중 테마**입니다. 마케팅 표면(홈페이지, 스마트 머니, 선물 경기장)은 기본적으로 어두운 테마로, 거래 표면(암호화폐 구매, 입금, 출금)은 밝은 테마로 전환됩니다. 동일한 노란색 CTA와 회색-파란색 가는선(`{colors.hairline-on-light}` — #eaecef)이 둘 다 통과합니다. 캔버스, 표면 및 텍스트 톤만 반전됩니다. **녹색**(`{colors.trading-up}` — #0ecb81) 및 **빨간색**(`{colors.trading-down}` — #f6465d) 거래는 두 모드 모두에 걸쳐 테이블, 차트 및 가격 표시기에서 가격 방향을 나타냅니다.

**주요 특징:**

• 단일 강조 색상: `{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)에 위치합니다. 제품 페이지에는 더 조밀한 레이아웃이 필요하기 때문에 일반적인 마케팅 전용 사이트보다 약간 더 좁습니다.

색상

브랜드 및 액센트

• **바이낸스 옐로우** (`{colors.primary}` — #FCD535): 단일 브랜드 색상입니다. 기본 CTA 배경, 워드마크, 브랜드 주장 헤드라인("FUNDS ARE SAFU"), 신뢰 배지("No.1 Trading Volume"), `{comComponent.stat-callout-card}`의 큰 통계 번호 및 인라인 링크에 사용됩니다.
• **바이낸스 옐로우 액티브** (`{colors.primary-active}` — #f0b90b): 누르기/호버-더 어두운 변형입니다. 약간 더 포화된 노란색입니다.
• **바이낸스 노란색 비활성화됨** (`{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): 한 단계 더 가벼워진 카드, 마우스 오버 탐색 항목 및 차트 배경 패널에 사용됩니다.

**라이트 모드(트랜잭션):**

• **캔버스 라이트**(`{colors.canvas-light}` — #ffffff): 거래 페이지(암호화폐 구매, 입금 양식, 계정 대화 상자)의 페이지 바닥입니다.
• **표면 소프트 라이트**(`{colors.surface-soft-light}` — #fafafa): 바닥글 표면 및 비활성화된 상태.
• **표면의 강한 빛** (

概要

Binance は、権威とエネルギーの両方を感じたい金融取引プラットフォームのように見えます。基本的な雰囲気は、**黒に近いキャンバス** (`{colors.canvas-dark}` — #0b0e11) に白の活字と単一のユビキタスなアクセント: **バイナンス イエロー** (`{colors.primary}` — #FCD535) を加えたものです。その黄色は、ブランドの重労働のほぼすべてを行っています。すべての主要なCTA、すべての価値主張の見出し（「FUNDS ARE SAFU」）、すべての「サインアップ」錠剤、すべての注目の階層指標、そしてワードマークそのものが含まれています。ブランドのセカンドカラーはありません。システムは、黄色の電圧を信頼してブランドの機能を実行し、それを実行します。

Type は、Binance のカスタム **BinanceNova** (ディスプレイ + 本体) および **BinancePlex** (数値/財務表示) スタックを実行します。 BinanceNova には、見出し、セクション タイトル、本文コピーが表示されます。 BinancePlex は、価格ティッカー、大きな統計数値 (取引量、ユーザー数、賞金総額) など、数値が「表形式で信頼できる」と思われたいあらゆる場所に表示されます。どちらも控えめな重みで実行されます。ディスプレイ サイズは 600 ～ 700 の重みを使用します (取引プラットフォームでは一目でわかる数字が必要なため、通常のマーケティングよりも大胆です)、本体は 400 のままです。

この製品は **マルチテーマ** です。マーケティング面 (ホームページ、スマートマネー、先物アリーナ) はデフォルトでダーク色に設定され、トランザクション面 (仮想通貨の購入、入金、出金) は明るいテーマに切り替わります。同じ黄色の CTA と灰青色のヘアライン (`{colors.hairline-on-light}` — #eaecef) が両方を通過し、キャンバス、表面、テキストのトーンのみが反転します。 **緑** (`{colors.trading-up}` — #0ecb81) と **赤** (`{colors.trading-down}` — #f6465d) の取引は、両方のモードの表、チャート、価格ティッカーで価格の方向性を示します。

**主な特徴:**

• 単一のアクセント カラー: `{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}` (80 ピクセル) に配置されます。これは、製品ページにはより密度の高いレイアウトが必要なため、一般的なマーケティング専用サイトよりもわずかに狭いです。

色

ブランドとアクセント

• **Binance Yellow** (`{colors.primary}` — #FCD535): 単一のブランドカラー。主要な CTA 背景、ワードマーク、ブランド主張の見出し (「FUNDS ARE SAFU」)、信頼バッジ (「取引高 No.1」)、「{component.stat-callout-card}」の大きな統計数値、およびインライン リンクに使用されます。
• **Binance Yellow Active** (`{colors.primary-active}` — #f0b90b): プレス/ホバーダークのバリアント。もう少し彩度の高い黄色。
• **Binance Yellow Disabled** (`{colors.primary-disabled}` — #3a3a1f): 暗いキャンバス上の無効な CTA で使用される彩度の低い濃い黄色。
• **アクセント ターコイズ** (`{colors.accent-turquoise}` — #2dbdb6): 暗い表面上の Smart Money の「今すぐチェック」CTA で非常に控えめに使用される小さな二次アクセント。システムカラーではなく、単品のアクセントとして扱ってください。

表面

システムには、製品コンテキストにマップする 2 つのキャンバス モードがあります。

**ダーク モード (マーケティングのデフォルト):**

• **Canvas Dark** (`{colors.canvas-dark}` — #0b0e11): プライマリ ページ フロア。わずかに温かみのある色合いの黒に近い色ですが、決して純粋な黒ではありません。
• **Surface Card Dark** (`{colors.surface-card-dark}` — #1e2329): カード、ナビゲーション ドロップダウン、ダーク キャンバス上の 2 番目のボタン、マーケット テーブル。
• **Surface Elevated Dark** (`{colors.surface-elevated-dark}` — #2b3139): 1 段階軽くなり、ネストされたカード、ホバーされたナビゲーション項目、およびグラフの背景パネルに使用されます。

**ライト モード (トランザクション):**

• **キャンバス ライト** (`{colors.canvas-light}` — #ffffff): トランザクション ページのページ フロア (仮想通貨の購入、入金フォーム、アカウント ダイアログ)。
• **Surface Soft Light** (`{colors.surface-soft-light}` — #fafafa): フッター サーフェスと無効な状態。
• **表面の強い光** (