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.

개요

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

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

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

**주요 특성:**

• 단일 강조 색상: ``(#FCD535)은 기본 CTA, 주요 헤드라인, 브랜드 마크, 배지 등 모든 브랜드 전압을 나타냅니다. 강조를 위해 어두운 곳에서는 거의 사용되지 않으며 거래 대화 상자 어디에서나 사용됩니다.
• 사용자 정의 유형 스택: `BinanceNova`(표시 + 본문) 및 `BinancePlex`(숫자, 가격, 금융 데이터). 큰 통계 수치는 표 형식의 일관성을 위해 항상 BinancePlex에서 렌더링됩니다.
• 다중 테마: 마케팅 페이지 기본 어두움(``); 트랜잭션 페이지 플립 라이트(``). 노란색 CTA와 녹색/빨간색 거래는 둘 다에서 공유됩니다.
• 어두운 본문의 밝은 바닥글: 홈페이지는 상단의 본문이 어두운 경우에도 바닥글에 ``(#fafafa)을 사용합니다. 이는 페이지를 시각적으로 닫는 의도적인 반전입니다.
• 거래 의미: 가격 변경에 대한 녹색 위/빨간색 아래(`` / ``), 배지 배경이 아닌 텍스트 색상으로 적용됩니다.
• 카드 표면: 어두운 카드의 경우 ``(#1e2329); _``(밝은 카드의 경우) 그라데이션 표면이나 대기 배경이 없습니다. 전체적으로 평면 색상 블록입니다.
• 경계 반경은 작거나 중간입니다. 기본 버튼의 경우 ``(6px), 입력 및 콘텐츠 카드의 경우 ``(8px), 상승된 카드 컨테이너의 경우 ``(12px), 주요 기능 CTA의 경우 ``
• 간격은 4배수 척도를 따릅니다. 주요 편집 밴드는 ``(80px)에 위치합니다. 제품 페이지에는 더 조밀한 레이아웃이 필요하기 때문에 일반적인 마케팅 전용 사이트보다 약간 더 촘촘합니다.

색상

브랜드 및 액센트

• **바이낸스 옐로우** (`` — #FCD535): 단일 브랜드 색상입니다. 주요 CTA 배경, 워드마크, 브랜드 주장 헤드라인("FUNDS ARE SAFU"), 신뢰 배지("No.1 Trading Volume"), ``의 큰 통계 번호 및 인라인 링크에 사용됩니다.
• **바이낸스 옐로우 액티브** (`` — #f0b90b): 누르기/호버-더 어두운 변형입니다. 약간 더 채도가 높은 노란색입니다.
• **바이낸스 노란색 비활성화됨**(`` — #3a3a1f): 어두운 캔버스 위의 비활성화된 CTA에 사용되는 채도가 낮은 진한 노란색입니다.
• **액센트 청록색** (`` — #2dbdb6): 어두운 화면 위의 Smart Money의 "Check Now" CTA에 아주 드물게 사용되는 작은 보조 액센트입니다. 시스템 색상이 아닌 단일 제품 강조로 취급됩니다.

표면

시스템에는 제품 컨텍스트에 매핑되는 두 가지 캔버스 모드가 있습니다.

**어두운 모드(마케팅 기본값):**

• **캔버스 다크**(`` — #0b0e11): 기본 페이지 바닥입니다. 약간 따뜻한 색조가 가미된 니어 블랙 — 결코 순수한 검정색은 아닙니다.
• **어두운 표면 카드**(`` — #1e2329): 카드, 탐색 드롭다운, 어두운 캔버스 위의 보조 버튼, 시장 테이블.
• **Surface Elevated Dark** (`` — #2b3139): 한 단계 더 가벼워진 카드, 마우스 오버 탐색 항목 및 차트 배경 패널에 사용됩니다.

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

• **캔버스 라이트** (`` — #ffffff): 거래 페이지의 페이지 바닥(암호화폐 구매, 입금 양식, 계정 대화 상자).
• **표면 소프트 라이트**(`` — #fafafa): 바닥글 표면 및 비활성화된 상태.
• **표면 강한 빛** (`` — #f5f5f5): 음소거된 컨텍스트에서 입력 배경을 형성합니다.

Hairlines & Borders

• **밝은 헤어라인** (`` — #eaecef): 밝은 표면의 1px 테두리 톤입니다. Dembrandt의 빈도 분석은 이것이 가장 높은 개수의 토큰(1022개 발생)임을 확인합니다 — Binance는 헤어라인을 자유롭게 사용합니다.
• **어두운 부분의 헤어라인** (`` — #2b3139): 어두운 표면의 1px 테두리 톤입니다. ``와 동일한 16진수 — 테두리는 잉크 선이 아닌 표면 계단처럼 느껴집니다.
• **테두리 강함**(`` — #cdd1d6): 비활성화된 보조 버튼에 사용되는 더 무거운 테두리 톤입니다.

텍스트

• **잉크** (`` — #181a20): 밝은 표면에 가장 강한 텍스트입니다. 거래 페이지에 헤드라인을 표시합니다.
• **Body on Dark** (`` — #eaecef): 어두운 캔버스의 기본 실행 텍스트 — 의도적으로 순수한 흰색이 아니고 약간 더 시원합니다.
• **Body on Light** (`` — #181a20): 잉크와 동일 — 라이트 모드 본문 텍스트는 잉크 토큰을 재사용합니다.
• **음소거됨**(`` — #707a8a): 바닥글 링크, 탐색경로, 캡션, 표 열 헤더. 밝은 캔버스와 어두운 캔버스 모두에서 작동합니다.
• **음소거 강함**(`` — #929aa5): 강조된 라벨을 위해 음소거된 두 번째 계층입니다.
• **기본**(`` — #181a20): 노란색 기본 CTA에 검정색 텍스트.
• **어두운 곳** (`` — #ffffff): 어두운 캔버스에 고대비 헤드라인을 위한 순백색.

거래 의미

• **트레이딩 업** (`` — #0ecb81): 가격 인상 녹색, 테이블, 차트 및 인라인 티커 화살표에서 텍스트 색상으로 사용됩니다. 절대로 버튼 배경으로 사용하지 마세요.
• **다운 트레이딩**(`` — #f6465d): 가격 인하 빨간색. 거래와 동일한 사용 규칙입니다.

정보/초점

• **정보** (`` — #3b82f6): 인라인 정보 배지 및 초점 링 베이스. dembrandt가 표시한 Tailwind `--tw-ring-color` 토큰 — 입력 포커스에 사용됩니다.

타이포그래피

글꼴군

시스템은 디스플레이 및 본문용으로 **BinanceNova**를 실행하고 숫자/금융 데이터용으로 **BinancePlex**를 실행합니다. 둘 다 라이센스가 부여된 Binance 사용자 정의 서체입니다. 대체 스택이 `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`.

이동합니다.

분할은 장식용이 아니라 기능용입니다.

• BinanceNova → 편집 유형(제목, 단락, 버튼 라벨, 탐색)
• BinancePlex → 표 형식의 숫자 유형(가격, 거래량, 백분율, 통계 카운터, 상금 풀)

혼합은 선택 사항이 아닙니다. 가격 표시기의 BinanceNova는 거래 플랫폼 특성을 잃게 됩니다. 단락의 BinancePlex는 고정폭 차갑게 느껴질 것입니다.

계층

| 토큰 | 사이즈 | 무게 | 라인 높이 | 문자 간격 | |

사용

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

| _`` | 64px | 700 | 1.1 | -1픽셀 | 홈페이지 h1 ("316,258,026명의 사용자가 우리를 신뢰합니다") |

| _`` | 48px | 700 | 1.1 | -0.5px | 브랜드 주장 헤드라인("FUNDS ARE SAFU"), 상금 풀 영웅("Futures Masters Arena") |

| _`` | 40px | 600 | 1.15 | -0.3px | 긴 스크롤 페이지의 섹션 제목 |

| _`` | 32px | 600 | 1.2 | 0 | CTA 밴드 헤드라인("바이낸스에서의 안전하고 저렴한 수수료 거래") |

| _`` | 24px | 600 | 1.3 | 0 | 하위 섹션 제목 |

| _`` | 20픽셀 | 600 | 1.35 | 0 | QR 프로모션 카드, 기능 카드 제목 |

| _`` | 16px | 600 | 1.4 | 0 | 신뢰 배지, FAQ 행, 단계 라벨 |

| _`` | 40px | 700 | 1.1 | -0.3px | 대규모 통계 수치(15,000 BTC, $429,423,449) — BinancePlex |

| _`` | 16px | 500 | 1.4 | 0 | 시장 테이블 가격, 테이블 셀 — BinancePlex |

| _`` | 14px | 500 | 1.4 | 0 | 인라인 가격, % 변동 — BinancePlex |

| _`` | 14px | 400 | 1.5 | 0 | 기본 실행 텍스트 — BinanceNova |

| _`` | 13px | 400 | 1.5 | 0 | 쿠키 동의 텍스트, 바닥글 본문 |

| _`` | 12px | 500 | 1.4 | 0 | 작은 메타 라벨 |

| _`` | 14px | 600 | 1 | 0 | 표준 CTA 버튼 라벨 |

| _`` | 14px | 500 | 1.4 | 0 | 상단 탐색 메뉴 항목 |

원칙

디스플레이 크기는 무게 700을 사용합니다. 이는 대부분의 마케팅 시스템보다 무겁습니다. 이는 거래 플랫폼에 적합합니다. 숫자는 한 눈에 읽어야 하고, 헤드라인은 차트 시각화 및 밀집된 데이터 테이블과 경쟁해야 합니다. 시스템은 Airtable이나 Stripe처럼 디스플레이 무게를 400으로 완화하지 않습니다.

`` 및 더 작은 숫자의 변형은 주변 신체 유형이 BinanceNova를 사용하는 경우에도 항상 **BinancePlex**를 사용합니다. 가격, 거래량 및 통계 카운터는 상황에 관계없이 BinancePlex에서 렌더링됩니다. 이는 시스템의 "신뢰할 수 있는 숫자" 음성입니다.

글꼴 대체에 대한 참고사항

BinanceNova 및 BinancePlex를 사용할 수 없는 경우 **Inter**는 BinanceNova에 대한 가장 가까운 오픈 소스 대체품이고 **JetBrains Mono** 또는 **IBM Plex Sans**는 BinancePlex에 대한 가장 가까운 대체품입니다(표 형식의 고정폭 충실도가 휴머니스트 비율보다 더 중요한지 여부에 따라 다름). BinanceNova의 더 좁은 캡 높이와 일치하도록 디스플레이 헤드라인을 줄 높이에서 ~3%까지 조정하세요.

레이아웃

간격 시스템

• **기본 단위:** 4px.
• **토큰:** `` 4px · `` 8px · `` 12px · `` 16px · `` 24px · `` 32px · `` 48px · `` 80px.
• **섹션 패딩(세로):** ``(80px) — 바이낸스 페이지는 마케팅 밴드와 밀집된 제품 표면(시장 테이블, FAQ 아코디언)을 혼합하기 때문에 홍보용 마케팅 사이트(96px)보다 약간 더 좁습니다.
• **카드 내부 패딩:** 콘텐츠 카드 및 시장 테이블의 경우 ``(24px); ``(32px) - QR 프로모션 카드 및 CTA 밴드용 ``(16px) - 신뢰 배지 및 테이블 행용.
• **여백:** 3-up 그리드의 카드 사이에 ``(24px); ``(16px) 바닥글 열 여백 및 밀집된 FAQ 목록 내부.

그리드 및 컨테이너

• **최대 콘텐츠 너비:** 마케팅 페이지 중심으로 ~1280px; 수평 밀도가 중요한 제품 표면(시장, 스마트 머니 테이블)에서는 최대 1440픽셀입니다.
• **편집 본문:** 단일 12열 그리드; 제품 페이지는 종종 8/4 분할(메인 패널 + 측면 레일)을 사용합니다.
• **시장 테이블:** 5열 헤더(쌍 / 종가 / 24시간 변동 / 24시간 거래량 / 액션), 첫 번째 열에는 동전 아이콘 + 기호 쌍이 표시됩니다.
• **바닥글:** 데스크탑의 6열 링크 목록, 태블릿에서는 2업, 모바일에서는 1업으로 줄 바꿈됩니다.

공백 철학

바이낸스는 일반적인 마케팅 사이트보다 밀도가 높습니다. 긴 스크롤 페이지에는 영웅 밴드와 시장 테이블, FAQ 아코디언 및 기능 그리드가 숨쉴 틈 없이 혼합되어 있습니다. 시스템은 공백이 아닌 대비(노란색 대 어두운 캔버스, 녹색 대 빨간색 가격 셀)를 신뢰하여 시각적 분리 작업을 수행합니다. 공백이 나타나는 곳은 항상 균일합니다. — 모든 주요 밴드 사이에서 ``.

고도 및 깊이

| 레벨 | 치료 | |

사용

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

| 플랫 | 그림자 없음, 테두리 없음 | 본문 섹션, 상단 탐색 메뉴, 히어로 밴드, 바닥글 |

| 부드러운 헤어라인 | 1px `` 또는 `` | 입력, 표 구분선, FAQ 행 구분선, 보조 버튼 |

| 카드 표면 | _`` 어두운 캔버스의 배경, 밝은 컨텍스트의 `` — 그림자 없음 | 모든 상위 카드(마켓 테이블 카드, QR 프로모션 카드, 추천 사진 카드, 신뢰 배지) |

| 미묘한 그림자 | 카드가 이미지 위에 있을 때만 보이는 희미한 그림자 | 거래 페이지의 암호화폐 구매 금액 카드에 드물게 사용됨 |

| 포커스 링 | _`0 0 0 2px ` 50% 알파 | 입력 + 버튼 키보드 포커스 상태 |

입면 철학은 **색상 블록 분리가 있는 평평한 표면**입니다. 바이낸스는 무거운 그림자 또는 유리 변형을 사용하지 않습니다. 깊이는 ``과 ``(명확한 고도 경계로 읽는 12단계 밝기 점프) 사이의 대비에서 비롯됩니다.

장식적 깊이

• **퓨처스 아레나 영웅의 노란색 → 어두운 수직 그라데이션 배경**: `` ``로 페이드다운됩니다. 이는 시스템 전체 서명이 아닌 제품 출시/이벤트 영웅 표면에 사용되는 단일 페이지 처리입니다.
• **코인 스택 일러스트레이션** 옆에 있는 대형 통계 블록(3D 렌더링 암호화 코인, 트로피 아이콘). 이는 토큰이 아닌 일러스트레이션입니다. 디자인 시스템 표면이 아닌 콘텐츠로 취급됩니다.

도형

경계 반경 배율

| 토큰 | 가치 | |

사용

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

| _`` | 2픽셀 | 거의 사용되지 않음 - 매우 작은 배지용으로 예약됨 |

| _`` | 4픽셀 | 작은 인라인 버튼(구독, 트레이딩업 / 트레이딩다운 인라인) |

| _`` | 6픽셀 | 표준 CTA 버튼, 기본 버튼, 기본 입력 필드 |

| _`` | 8픽셀 | 검색 입력, 콘텐츠 카드, 신뢰 배지, 하위 카드 |

| _`` | 12px | 높은 카드 컨테이너(시장 테이블 카드, QR 프로모션 카드, CTA 밴드) |

| _`` | 9999px | 주요 기능 CTA(어두운 미래 분야의 "가입" 알약, "지금 가입") |

| _`` | 9999px / 50% | 코인 아이콘, 아바타 |

Binance의 반경 계층 구조는 일반적인 마케팅 시스템보다 더 엄격합니다. 대부분의 표면은 6-12px에 있습니다. 알약 반경은 "페이지 상단 작업입니다."라는 신호를 보내는 데 사용되는 의도적인 예외입니다.

사진 및 아이콘

• 동전 아이콘은 24×24 또는 32×32 둥근 문자 모양으로 렌더링됩니다(종종 원형 외곽선의 반경 50% + 내부의 동전 브랜드 색상).
• 3D 렌더링된 동전 더미 및 트로피 그림은 평면 아이콘이 아닌 약간의 바닥 그림자가 있는 풀 컬러 그림입니다.
• 사진 콘텐츠(앱을 사용하는 사람 섹션)는 ``(12px) 모서리로 잘리고 모바일에서는 풀블리드됩니다.

구성요소

상단 탐색

**`top-nav-dark`** — 어두운 캔버스의 마케팅 상단 탐색입니다. 높이 64px, `` 배경. 왼쪽에는 노란색 바이낸스 워드마크가 있고 기본 수평 메뉴(암호화폐 구매, 시장, 거래, 선물, 적립, 스퀘어, 스마트 머니, 캠페인), 오른쪽 클러스터에는 언어 선택기, 밝은/어두운 토글, "로그인" 텍스트 링크, "가입" ``이 있습니다. 워드마크는 "BINANCE" 유형에 ``을 사용합니다.

**`top-nav-light`** — 라이트 캔버스의 거래 상단 탐색(암호화폐 구매, 입금 페이지). 동일한 레이아웃이지만 `` 배경 및 `` 메뉴 항목.

버튼

**`button-primary`** — 서명 기본 CTA입니다. 배경 ``, 텍스트 ``(노란색 바탕에 검정색 - 시스템의 상징적 조합), 유형 ``, 패딩 12px × 24px, 높이 40px, 반올림 ``(6px). 누르기 상태: `button-primary-active`가 ``(#f0b90b)로 어두워집니다. 비활성화된 상태: `button-primary-disabled`가 ``로 불포화됩니다.

_**`button-primary-pill`** — 페이지 상단 가입 순간 및 제품 출시 영웅(Futures Arena "지금 가입")에 사용되는 기본 CTA의 더 큰 알약 변형입니다. 동일한 노란색 + 검정색 조합, 패딩 14px × 32px, 둥근 ``(9999px). 드물게 사용하세요. 알약은 "이것이 바로 행동입니다"라는 신호입니다.

**`button-secondary-on-dark`** — 덜 강조된 작업을 위해 ``보다 사용됩니다. 배경 ``, 텍스트 ``, 반올림 ``.

**`button-secondary-on-light`** — 라이트 캔버스에 해당합니다. `` 1px 테두리가 있는 배경 ``, 텍스트 ``.

**`button-tertiary-text`** — 배경이 없는 인라인 텍스트 버튼입니다. 상단 탐색 창의 "로그인" 및 인라인 "자세히 보기" 링크에 사용됩니다.

_**`button-trading-up`** — 가격 상승 신호(매수/매수 조치)에 사용되는 녹색 실선 버튼입니다. 배경 ``, 텍스트 ``, 반올림 ``(4px), 패딩 8px × 20px. 밀도가 높은 거래 인터페이스에 나타나기 때문에 ``보다 작고 단단합니다.

**`button-trading-down`** — 판매/단축 액션을 위한 대칭형 빨간색 변형입니다. 같은 모양, 배경 ``.

**`button-subscribe`** — 상위 거래자를 구독하기 위해 Smart Money 거래자 테이블에 사용되는 컴팩트 노란색 CTA입니다. 기본 CTA보다 높이가 더 작고(28px) 패딩이 더 빡빡하여 조밀한 테이블 행 내부에 맞습니다. 같은 노란색 + 검정색 조합입니다.

_**`text-link`** — ``의 인라인 본문 링크(어두운 부분은 노란색, 밝은 부분은 노란색). 기본적으로 밑줄이 없습니다. 유형은 ``.

을 상속합니다.

카드 및 용기

_**`hero-band-dark`** — 홈페이지 h1 + 하위 헤드라인 + 이중 CTA 쌍을 전달하는 전폭 다크 밴드. 배경 ``, 패딩 ``(80px). h1("316,258,026 USERS TRUST US")은 64px/700에서 ``을 사용합니다. 이는 시스템의 가장 큰 유형 역할입니다.

_**`stat-callout-card`** — 인라인 노란색 통계 번호(15,000 BTC, 7,488,223, $429,423,449). 투명한 배경, 텍스트 ``, BinancePlex에서 ``을 입력하세요. 표면이 있는 카드가 아닌 평면 레이아웃 블록으로 사용됩니다. 노란색 텍스트만으로도 시각적인 무게를 지닙니다.

**`trust-badge`** — "1위 고객 서비스"/"1위 거래량" 표시가 포함된 작고 어두운 카드입니다. 배경 ``, 반올림 ``(8px), 패딩 16px × 20px. 노란색 숫자 또는 단어 배지("No.1")는 짧은 레이블 옆에 있습니다.

**`markets-table-card`** — 홈페이지 오른쪽 시장 테이블. 배경 ``, 반올림 ``(12px), 패딩 ``(24px). 탭 행(인기/신규 목록/최고 상승자)과 최종 가격, 24시간 변동률(%), 작업 버튼이 포함된 5열 코인 쌍 행이 있습니다. 각 행은 ``.

을 사용합니다.

**`markets-row`** — 시장 테이블 내부의 단일 행입니다. 투명한 배경, 12px 수직 패딩, 행 사이의 가는 선 구분선. 동전 아이콘(32×32) + 왼쪽 기호; ``(BinancePlex)의 최종 가격; 방향에 따라 색상이 지정된 24시간 셀 변경(`` 또는 ``) '세부정보 보기'에 대한 오른쪽 정렬 갈매기형 아이콘.

**`price-up-cell`** / **`price-down-cell`** — 가격 변경에 대한 색상 텍스트 셀입니다. 투명한 배경, 텍스트 `` 또는 ``, BinancePlex에 ``을 입력하세요. 항상 방향을 나타내는 작은 삼각형 화살표와 쌍을 이룹니다.

_**`feature-photo-card`** — "이동 중 거래" 섹션의 사진 스트립 — 바이낸스 앱을 사용하는 사람들을 보여주는 라이프스타일 사진 3장. 배경 ``, 반올림 ``. 사진은 가장자리에서 가장자리까지 잘립니다. 이미지 주변에는 내부 패딩이 없습니다.

_**`qr-promo-card`** — "이동 중에도 거래하세요. 언제 어디서나 거래하세요." QR코드가 있는 카드. 배경 ``, 둥근 ``, 패딩 ``(32px). ``의 h2, 본문 단락, 앱 스토어 배지(iOS/Android) 및 중앙 QR 코드를 포함합니다.

**`funds-safu-band`** — 노란색 제목의 "FUNDS ARE SAFU" 밴드입니다. 배경은 ``으로 유지되지만 헤드라인은 ``에서 ``을 사용합니다. 헤드라인 아래에는 3개의 큰 `` 숫자가 밴드를 고정합니다: 총 BTC 보유량, 사용자 지원, 자금 회수.

**`faq-row`** — 단일 FAQ 아코디언 행. 투명한 배경, 세로 패딩 20px, 행 사이의 가는 선 구분선. 닫힌 상태: ``의 질문 + 오른쪽의 갈매기 모양 아이콘. 열린 상태: ``.

의 질문 + 답변 본문

**`cta-band-dark`** — "바이낸스에서의 안전하고 저렴한 수수료 거래" 프리풋터 CTA 밴드. 배경 ``(캔버스에서 한 단계 높음), 둥근 ``, 패딩 ``(48px). ``에 h2를 전달하고 ``을 오른쪽으로 정렬합니다.

라이트 모드 트랜잭션 구성 요소

_**`buy-crypto-amount-card`** — BTC 구매 페이지의 오른쪽 레일 카드입니다. 배경 ``, 둥근 ``(8px), 패딩 ``(24px). 통화 선택기인 ``(BinancePlex)에 입력된 편집 가능한 금액과 "계속"/"주문 확인"을 위한 노란색 ``을 전달합니다.

_**`steps-card`** — "암호화폐 구매 방법" 3업 카드(금액 입력 → 주문 확인 → 암호화폐 받기). 배경 ``, 둥근 ``, 패딩 ``. 각 카드에는 작은 숫자 아이콘, `` 단계 이름, 본문 설명이 있습니다.

**`price-chart-card`** — BTC 가격 차트가 포함된 "Bitcoin Markets" 카드입니다. 배경 ``, 반올림 ``. 맨 윗줄에는 페어 선택기($79,065.04, +0.45%)가 있습니다. 주요 영역은 `` 및 ``의 촛대/선형 차트입니다. 맨 아래 행에는 기간 선택기(24H / 1W / 1M / 3M / 1Y / ALL)가 있습니다.

_**`conversion-cell`** — BTC ← USD 변환 테이블의 단일 행입니다. 투명한 배경, 텍스트 ``, ``을 입력하세요. 왼쪽의 페어 라벨(BTC, USDT 등) 오른쪽은 USD 상당입니다.

입력 및 양식

_**`search-input-on-dark`** — 홈페이지 히어로에 입력된 '통화 검색'입니다. 배경 ``, 텍스트 ``, 반올림 ``(8px), 패딩 10px × 16px, 높이 40px. 오른쪽("가입")에 노란색 ``이 표시됩니다.

**`text-input-on-light`** — 트랜잭션 페이지의 표준 입력입니다. 배경 ``, 1px `` 테두리, 둥근 ``(6px), 패딩 10px × 16px, 높이 40px. 초점 상태는 초점 링 그림자를 상속합니다.

**`cookie-consent-card`** — 홈페이지에 표시되는 쿠키 배너 카드입니다. 배경 ``, 둥근 ``, 패딩 ``(16px). 3개의 스택 버튼 옵션(쿠키 허용 및 계속/추가 쿠키 거부/쿠키 관리)이 있는 ``(13px/400)의 본문 텍스트입니다.

스마트머니 하위 시스템

**`trader-row`** — /smart-money의 상위 거래자 테이블에 있는 단일 행. 투명한 배경, 세로 패딩 12px, 행 사이의 가는 선 구분선. 아바타 + 거래자 이름 + 왼쪽의 비공개/공개 배지; ROI %, AUM, 발행일 열; 오른쪽에 노란색 ``.

서명 구성요소

**`arena-hero-gradient`** — Futures Arena 제품 출시 영웅. ``의 상금 풀 헤드라인(4,000,000 USDT)이 중앙에 있는 상단의 ``에서 하단의 ``까지 수직 그라데이션입니다. _``("지금 가입")이 헤드라인 아래에 있습니다. 제품 출시 이벤트 표면에만 사용됩니다. 다른 영웅으로 일반화하지 마세요.

바닥글

**`footer-light`** — 모든 페이지(어두운 캔버스 페이지 포함)를 닫는 밝은 회색 바닥글입니다. 배경 ``(#fafafa), 텍스트 ``. 커뮤니티 / 회사 소개 / 제품 / 비즈니스 / 서비스 / 학습 열을 포함하는 데스크탑의 6열 링크 목록입니다. 수직 패딩 64px. 어두운 페이지의 의도적인 밝은 바닥글은 바이낸스의 가장 독특한 레이아웃 선택 중 하나입니다. 이는 "마케팅 재설정" 표면으로 페이지를 시각적으로 닫습니다.

해야 할 일과 하지 말아야 할 일

하라

• 기본 작업, 브랜드 주장 헤드라인 및 워드마크를 위해 ``(Binance Yellow)를 예약하세요. 부차적이거나 장식적인 목적으로 사용하지 마십시오. 노란색의 희소성이 노란색을 강력하게 만듭니다.
• __CODEBCK_923___(검은색 텍스트가 있는 노란색)을 어두운 모드와 밝은 모드 모두에서 범용 기본 CTA로 유지하세요. 동일한 버튼이 `` 및 ``에서 동일하게 나타납니다.
• 명시적인 매수/매도 또는 롱/숏 액션에만 ``(녹색) 및 ``(빨간색)을 사용하세요. 의미론적 가격 방향 의미를 담고 있으므로 일반적인 "확인" 또는 "취소"에는 사용하지 마세요.
• 모든 번호에 BinancePlex를 사용하세요. 가격, 거래량, 백분율, 통계 카운터 — 모두 BinancePlex. BinanceNova를 숫자 티커에 혼합하면 거래 플랫폼 특성이 손상됩니다.
• 표면 의도에 따라 캔버스 모드를 선택하십시오. 마케팅/제품 쇼케이스/거래 대시보드에는 어둡습니다. 거래 대화 상자(구매/입금/출금/양식 제출)를 위한 조명입니다.
• 모든 편집 밴드를 __CODEBCK_928___(80px)로 고정하세요. 바이낸스는 홍보적인 마케팅 사이트보다 밀도가 높습니다. 80px가 올바른 리듬입니다.

하지 마세요

• 두 번째 브랜드 색상을 소개하지 마세요. 시스템에는 정확히 하나의 액센트(``)가 있으며 확장이 있으면 브랜드 아이덴티티가 희석됩니다. 스마트머니의 청록색은 시스템 토큰이 아닌 단일 제품 실험입니다.
• 본문 텍스트나 큰 표면 채우기에는 노란색을 사용하지 마세요. 초점 CTA 및 헤드라인에만 사용됩니다.
• 카드의 배경 채우기로 `` / ``을 사용하지 마세요. 이는 가격 방향 신호로, 텍스트 색상이나 작은 배지 채우기로 표시되며 결코 카드 표면으로 표시되지 않습니다.
• 디스플레이 무게를 부드럽게 하지 마세요. `` 및 ``은 의도적으로 가중치 700입니다. 거래 플랫폼이 아닌 디자인 포트폴리오로 400 읽기로 이동합니다.
• 캔버스에 대기 그라데이션(메시, 오로라, 글로우 효과)을 추가하지 마세요. 바이낸스는 색상 블록 대비를 신뢰합니다. 대기의 깊이를 추가하면 거래 플랫폼의 느낌이 흐릿해집니다.
• ``의 텍스트 색상을 반전하지 마세요. 노란색 바탕에 검정색이 시스템의 시그니처입니다. 노란색 바탕에 흰색 텍스트가 있으면 대비와 브랜드 인지도가 떨어집니다.

반응적 행동

중단점

| 이름 | 폭 | 주요 변경 사항 |

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

| 모바일 | _< 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 |

| 태블릿 | 768~1024px | 상단 탐색 메뉴는 수평으로 유지되지만 더 좁아지고, 보조 메뉴 항목은 "더 보기" 드롭다운 뒤에 숨겨집니다. 시장 테이블 2업; 가격/기능 그리드 2업 |

| 데스크탑 | 1024~1440px | 모든 기본 메뉴 항목이 포함된 전체 상단 탐색 기능 5열 시장 테이블; 8/4 분할 거래 대시보드(차트 + 사이드 레일) |

| 와이드 | > 1440px | 외부 호흡 공간이 더 많은 데스크탑과 동일합니다. 표면에 따라 최대 콘텐츠 너비는 1280-1440px |

터치 대상

• 기본 CTA는 최소 40 × 40px(`` 높이 + 패딩)로 렌더링됩니다. 주변 간격으로 WCAG AAA의 44 × 44를 충족합니다.
• 구독/인라인 작업 버튼은 28 × 28입니다. 이상적인 것보다 밀도가 높지만 업계 거래 플랫폼 표준과 일치합니다.
• 시장 테이블의 코인 아이콘은 32 × 32px이며, 전체 행은 44px 이상의 유효 대상에 대해 탭할 수 있습니다.

축소 전략

• 상단 탐색 메뉴가 < 768px; the menu opens as a full-screen sheet with the same yellow accent CTAs anchored to the bottom of the sheet.
에서 햄버거로 접힙니다.
• 시장 테이블은 모바일에서 동전 쌍당 가로로 스크롤 가능한 단일 카드로 리플로우됩니다.
• 영웅 통계 수치("3억 1600만 사용자")는 줄바꿈이 아닌 비례적으로 축소됩니다. 바이낸스의 가장 큰 주장은 항상 단일 블록으로 읽어야 합니다.
• 트레이딩 대시보드는 모바일의 별도 "거래" 탭을 통해 차트 + 사이드 레일에서 차트 전용으로 전환됩니다.
• 밝은 바닥글은 모든 중단점에서 풀 블리드를 유지하며 별도의 어두운 변형으로 축소되지 않습니다.

이미지 동작

• 코인 아이콘은 중단점에 관계없이 고정된 24/32픽셀 크기로 유지됩니다.
• "이동 중 거래" 섹션의 라이프스타일 사진은 반응적으로 잘립니다. 데스크탑에서는 더 넓고, 모바일에서는 더 높습니다(세로).
• 3D 동전 더미 일러스트레이션은 자르지 않고 균일하게 크기가 조정되는 고정 종횡비 자산입니다.

반복 가이드

1. 한 번에 하나의 구성 요소에만 집중하세요. YAML 키를 직접 참조합니다(``, ``).

2. 새 구성 요소를 추가할 때 먼저 어두운 모드(마케팅/제품) 또는 밝은 모드(트랜잭션)에 있는지 결정하세요. 동일한 구성 요소가 표면 톤이 반전되어 두 가지 모두에 나타납니다.

3. 기존 구성요소의 변형(`-active`, `-disabled`)은 `components:`의 별도 항목으로 존재하며 결코 중첩된 상태 객체로 존재하지 않습니다.

4. 산문에서 색상, 반경, 타이포그래피 역할 또는 간격 값을 언급하는 모든 곳에 ``을(를) 사용하세요.

5. 문서에 마우스를 올리지 마세요. 시스템 문서에는 기본 및 활성/누름 상태만 기록됩니다.

6. 숫자는 항상 BinancePlex를 사용합니다. 사본은 항상 BinanceNova를 사용합니다. 이들을 혼합하는 것은 시스템 위반입니다.

7. 녹색/빨간색 거래는 의미론적 가격 토큰입니다. "성공" 또는 "오류" 일반 상태로 용도를 변경하지 마세요.

알려진 격차

• Debrandt 주파수 분석기는 ``(가는 가는 가는 선, 개수 1022)을 가장 높은 주파수 토큰으로 캡처했습니다. 브랜드를 정의하는 ``(#FCD535)은 악센트로 거의 사용되지 않기 때문에 훨씬 덜 자주 나타납니다. 해당 시스템 역할은 스크린샷에서 확인되어야 했습니다.
• BinanceNova 및 BinancePlex 가중치 축 값은 가변 글꼴 토큰으로 공식화되지 않습니다. 스크린샷에서 관찰된 정적 가중치만 문서화되어 있습니다.
• 애니메이션 및 전환 시기(차트 다시 그리기, 가격 변경 플래시)는 범위에 포함되지 않습니다.
• 기본값을 초과하는 양식 유효성 검사 상태는 추출되지 않습니다. 오류/성공 입력 변형은 확인을 위해 가입 또는 주문 확인 흐름이 필요합니다.
• 거래 대시보드 화면(현물/선물/마진)이 분석된 URL 세트에 포함되지 않았습니다. 주문서, 캔들스틱 차트 구성 및 포지션 관리 카드는 여기에 문서화되어 있지 않습니다.
• 밝은/어두운 테마 전환 동작(사용자 기본 설정에 따라 거래 페이지를 어둡게 할 수 있는지 여부)은 제품 동작이며 마케팅 표면에서 추출된 것이 아닙니다.

概要

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

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

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

_**主な特徴:**

• 単一のアクセント カラー: `` (#FCD535) は、主要 CTA、ヒーロー見出し、ブランド マーク、バッジなど、すべてのブランド ボルテージを実現します。強調のためにダークではほとんど使用されず、トランザクション ダイアログで遍在的に使用されます。
• カスタム タイプ スタック: `BinanceNova` (表示 + 本文) および `BinancePlex` (数値、価格、財務データ)。表の一貫性を保つために、大きな統計数値は常に BinancePlex でレンダリングされます。
• マルチテーマ: マーケティング ページのデフォルトはダーク (``);トランザクション ページがライトを反転します (``)。黄色の CTA と取引の緑/赤は両方で共有されます。
• 暗い本文に明るいフッター: ホームページでは、その上の本文が暗い場合でもフッターに__CODEBCK_709___ (#fafafa) が使用されます。これは、ページを視覚的に閉じるための意図的な反転です。
• 取引セマンティクス: 価格変更の場合は緑が上/赤が下 (`` / ``)、バッジの背景ではなくテキストの色として適用されます。
• カードの表面: `` (#1e2329) ダークでのエレベート カードの場合。 `` ライト上のカード用。グラデーション サーフェスや雰囲気のある背景はなく、全体にフラットなカラー ブロックが使用されています。
• 境界線の半径は小から中です: 主ボタンの場合は `` (6 ピクセル)、入力とコンテンツ カードの場合は `` (8 ピクセル)、エレベート カード コンテナーの場合は `` (12 ピクセル)、目立つ機能 CTA の場合は `` です。
• _間隔は 4 倍のスケールに従います。主要な編集バンドは `` (80 ピクセル) に配置されます。製品ページにはより高密度のレイアウトが必要なため、一般的なマーケティング専用サイトよりもわずかに狭いです。

色

ブランドとアクセント

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

サーフェス

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

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

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

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

• **キャンバス ライト** (`` — #ffffff): トランザクション ページのページ フロア (仮想通貨の購入、入金フォーム、アカウント ダイアログ)。
• **サーフェス ソフト ライト** (`` — #fafafa): フッター サーフェスと無効な状態。
• **表面の強い光** (`` — #f5f5f5): ミュートされたコンテキストでのフォーム入力の背景。

ヘアラインと境界線

• _**ライト上のヘアライン** (`` — #eaecef): ライト サーフェス上の 1 ピクセルの境界トーン。 Dembrandt の頻度分析では、これが最も多くのトークン (1022 回発生) であることが確認されています — Binance はヘアラインを多用しています。
• **ダークのヘアライン** (`` — #2b3139): 暗い表面上の 1 ピクセルの境界線のトーン。 `` と同じ 16 進数 — 境界線はインク ラインではなく、表面の段差のように感じられます。
• **強い境界線** (`` — #cdd1d6): 無効になっている二次ボタンに使用される濃い境界線のトーン。

テキスト

• **インク** (`` — #181a20): 明るい表面上で最も強力なテキスト。トランザクション ページに見出しを表示します。
• **暗い色の本文** (`` — #eaecef): 暗いキャンバス上のデフォルトの実行テキスト — 意図的に真っ白ではなく、少し冷たくなっています。
• **ライト上の本文** (`` — #181a20): インクと同じ — ライトモードの本文テキストはインク トークンを再利用します。
• **ミュート** (`` — #707a8a): フッター リンク、パンくずリスト、キャプション、表の列ヘッダー。 明るいキャンバスと暗いキャンバスの両方で動作します。
• **ミュート ストロング** (`` — #929aa5): 強調されたラベルの 2 番目のレベルのミュート。
• **プライマリ上** (`` — #181a20): 黄色のプライマリ CTA に黒いテキスト。
• **オンダーク** (`` — #ffffff): 暗いキャンバス上の高コントラストの見出し用の純白。

取引セマンティクス

• **下取り** (`` — #0ecb81): 価格上昇の緑色。表、グラフ、およびインライン ティッカー矢印のテキストの色として使用されます。決してボタンの背景として使用しないでください。
• **下値取引** (`` — #f6465d): 赤の価格下落。トレードアップと同じ使用ルール。

情報 / フォーカス

• **情報** (`` — #3b82f6): インライン情報バッジとフォーカス リング ベース。 dembrandt によって表面化された Tailwind `--tw-ring-color` トークン — 入力フォーカスで使用されます。

タイポグラフィ

フォント ファミリー

システムは表示と本文に **BinanceNova** を実行し、数値/財務データには **BinancePlex** を実行します。どちらもライセンスを取得したBinanceカスタム書体です。 フォールバック スタックは `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`.

を歩きます

この分割は機能的なものであり、装飾的なものではありません:

• BinanceNova → 編集タイプ (見出し、段落、ボタン ラベル、ナビゲーション)
• BinancePlex → 表形式の数値タイプ (価格、出来高、パーセンテージ、統計カウンター、賞金プール)

_これらを混合することはオプションではありません。価格ティッカー上の BinanceNova は取引プラットフォームの性格を失うことになります。段落上の BinancePlex は等幅のように冷たく感じられます。

階層

|トークン |サイズ |重量 |行の高さ |文字間隔 | |

を使用します

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

| `` | 64ピクセル | 700 | 1.1 | -1ピクセル |ホームページ h1 (「316,258,026 人のユーザーが私たちを信頼しています」) |

| `` | 48ピクセル | 700 | 1.1 | -0.5ピクセル |ブランド主張の見出し (「FUNDS ARE SAFU」)、賞金総額のヒーロー (「Futures Masters Arena」) |

| `` | 40ピクセル | 600 | 1.15 | -0.3ピクセル |ロングスクロール ページのセクション ヘッド |

| `` | 32ピクセル | 600 | 1.2 | 0 | CTA バンドの見出し (「Binance での安全な低手数料取引」) |

| `` | 24ピクセル | 600 | 1.3 | 0 |サブセクションのタイトル |

| `` | 20ピクセル | 600 | 1.35 | 0 | QR プロモーション カード、フィーチャー カード タイトル |

| `` | 16ピクセル | 600 | 1.4 | 0 |信頼バッジ、FAQ 行、ステップ ラベル |

| `` | 40ピクセル | 700 | 1.1 | -0.3ピクセル |大きな統計数字 (15,000 BTC、$429,423,449) — BinancePlex |

| `` | 16ピクセル | 500 | 1.4 | 0 |マーケットテーブル価格、テーブルセル — BinancePlex |

| `` | 14ピクセル | 500 | 1.4 | 0 |インライン価格、変化率 — BinancePlex |

| `` | 14ピクセル | 400 | 1.5 | 0 |デフォルトのランニングテキスト — BinanceNova |

| `` | 13ピクセル | 400 | 1.5 | 0 | Cookie 同意テキスト、フッター本文 |

| `` | 12ピクセル | 500 | 1.4 | 0 |小さなメタ ラベル |

| `` | 14ピクセル | 600 | 1 | 0 |標準 CTA ボタン ラベル |

| `` | 14ピクセル | 500 | 1.4 | 0 |トップのナビゲーション メニュー項目 |

原則

表示サイズでは重量 700 が使用されます。これは、ほとんどのマーケティング システムよりも重いです。これは取引プラットフォームにとって当然のことです。数字は一目でわかる必要があり、ヘッドラインはチャートの視覚化や高密度のデータテーブルと競合する必要があります。システムは、Airtable や Stripe のように表示ウェイトを 400 に緩和しません。

`` およびそれより小さい数値のバリアントは、周囲のボディタイプが BinanceNova を使用している場合でも、常に **BinancePlex** を使用します。価格、出来高、統計カウンターは、コンテキストに関係なく BinancePlex でレンダリングされます。これは、システムの「信頼できる番号」の声です。

フォントの代替に関する注意

BinanceNova と BinancePlex が利用できない場合は、**Inter** が BinanceNova に最も近いオープンソース代替品であり、**JetBrains Mono** または **IBM Plex Sans** が BinancePlex に最も近い代替品です (表形式の等空間忠実度が人文主義的なプロポーションよりも重要かどうかによって異なります)。 BinanceNova のより厳しいキャップの高さに合わせて、表示見出しの行の高さを最大 3% 低く調整します。

レイアウト

間隔システム

• **基本単位:** 4px.
• _**トークン:** `` 4px · `` 8px · `` 12px · `` 16px · `` 24px · `` 32px · `` 48px · `` 80px.
• **セクション パディング (垂直):** `` (80 ピクセル) — Binance ページではマーケティング バンドと密集した製品表面 (マーケット テーブル、FAQ アコーディオン) が混在しているため、広々としたマーケティング サイト (96 ピクセル) よりわずかにタイトです。
• **カード内部パディング:** コンテンツ カードおよびマーケット テーブルの場合は `` (24 ピクセル)。 `` (32px) QR プロモーション カードおよび CTA バンド用。 `` (16px) トラストバッジとテーブル行用。
• **余白:** `` (24 ピクセル) 3 アップ グリッドのカード間。 `` (16 ピクセル) フッター列の余白と密集した FAQ リスト内。

グリッドとコンテナ

• _**コンテンツの最大幅:** マーケティング ページを中心に ~1280 ピクセル。水平方向の密度が重要となる製品表面 (市場、スマートマネー テーブル) では最大 1440 ピクセル。
• **編集本文:** 単一の 12 列グリッド。製品ページでは、8/4 分割 (メイン パネル + サイド レール) がよく使用されます。
• **市場テーブル:** 5 列ヘッダー (ペア / 最終価格 / 24 時間変動 / 24 時間出来高 / アクション)、最初の列にはコイン アイコン + シンボルのペアが表示されます。
• **フッター:** デスクトップでは 6 列のリンク リスト、タブレットでは 2 列、モバイルでは 1 列に折り返されます。

ホワイトスペースの哲学

Binance は、一般的なマーケティング サイトよりも密度が高く、長いスクロール ページには、ヒーロー バンドとマーケット テーブル、FAQ アコーディオン、特集グリッドが混在しており、その間にあまり隙間がありません。システムは、空白ではなく、コントラスト (黄色と暗いキャンバス、緑と赤の価格セル) を信頼して視覚的な分離作業を実行します。空白が表示される箇所は常に均一です — `` すべての主要バンド間で。

標高と深さ

|レベル |治療 | |

を使用します

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

|フラット |影も境界線もありません |本文セクション、トップナビゲーション、ヒーローバンド、フッター |

|柔らかいヘアライン | 1px `` または `` |入力、表の区切り記号、FAQ の行区切り記号、二次ボタン |

|カード表面 | `` 背景が暗いキャンバス、__CODEBCK_780___ が明るい背景 - 影なし |すべての昇格カード (マーケット テーブル カード、QR プロモ カード、フィーチャー フォト カード、トラスト バッジ) |

|微妙なドロップシャドウ |カードが画像の上にある場合にのみ表示されるかすかな影 |取引ページの暗号金額購入カードで控えめに使用 |

|フォーカスリング | `0 0 0 2px ` 50% アルファ |入力 + ボタンのキーボード フォーカス状態 |

立面図の哲学は、**カラーブロック分離を備えた平面**です。 Binance は、重いドロップ シャドウやグラスモーフィズムを使用しません。奥行きは、__CODEBCK_782___ と `` (明確な標高境界として読み取られる 12 段階の明るさのジャンプ) の間のコントラストから生まれます。

装飾の深さ

• **フューチャーズ アリーナのヒーローの黄色→暗い垂直グラデーション背景**: `` が `` にフェードダウンします。 これは、製品発売/イベントのヒーロー サーフェスに使用される単一ページの処理であり、システム全体の署名ではありません。
• **コイン スタックのイラスト** 大きな統計ブロック (3D レンダリングされた暗号コイン、トロフィー アイコン) の側面にあります。これらはトークンではなくイラストです。デザイン システムの表面ではなくコンテンツとして扱います。

図形

境界線の半径スケール

|トークン |値 | |

を使用します

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

| `` | 2ピクセル |ほとんど役に立たない - 非常に小さなバッジ用に予約 |

| `` | 4ピクセル |小さなインライン ボタン (購読、インラインでのトレードアップ / トレードダウン) |

| `` | 6ピクセル |標準 CTA ボタン、主ボタン、主入力フィールド |

| `` | 8ピクセル |検索入力、コンテンツ カード、信頼バッジ、サブカード |

| `` | 12ピクセル |高度なカード コンテナ (マーケット テーブル カード、QR プロモーション カード、CTA バンド) |

| `` | 9999ピクセル |著名な機能 CTA (暗い先物アリーナでの「サインアップ」錠剤「今すぐ参加」) |

| `` | 9999ピクセル / 50% |コインアイコン、アバター |

Binance の半径階層は、一般的なマーケティング システムよりも厳しく、ほとんどのサーフェスは 6 ～ 12 ピクセルに収まります。ピル半径は、「これはページの先頭のアクションである」ことを示すために使用される意図的な例外です。

写真と図像

• コイン アイコンは、24×24 または 32×32 の丸いグリフとしてレンダリングされます (多くの場合、円形の輪郭の半径 50% + 内側のコインのブランド カラー)。
• 3D レンダリングされたコイン スタックとトロフィーのイラストは、フラット アイコンではなく、床にわずかな影が付いたフルカラーのイラストです。
• 写真コンテンツ (アプリを使用している人々のセクション) は `` (12 ピクセル) の隅まで切り取られ、モバイルでは全面が表示されます。

コンポーネント

トップナビゲーション_

**`top-nav-dark`** — 暗いキャンバス上のマーケティング トップ ナビゲーション。高さ 64 ピクセル、__CODEBCK_795___ 背景。左側に黄色の Binance ワードマーク、プライマリ水平メニュー (仮想通貨の購入、市場、取引、先物、獲得、スクエア、スマート マネー、キャンペーン)、言語セレクターを備えた右側のクラスター、明暗切り替え、「ログイン」テキスト リンク、「サインアップ」__CODEBCK_796___ が表示されます。ワードマークは、「BINANCE」タイプに `` を使用します。

**`top-nav-light`** — ライト キャンバス上のトランザクションのトップ ナビゲーション (暗号通貨の購入、入金ページ)。同じレイアウトですが、__CODEBCK_799___ 背景と `` メニュー項目。

ボタン

**`button-primary`** — 署名のプライマリ CTA。背景 ``、テキスト `` (黄色に黒 - システムの象徴的な組み合わせ)、タイプ ``、パディング 12 ピクセル × 24 ピクセル、高さ 40 ピクセル、丸みを帯びた `` (6 ピクセル)。プレス状態: `button-primary-active` が `` (#f0b90b) に変わります。無効な状態: `button-primary-disabled` は彩度を下げて `` にします。

_**`button-primary-pill`** — ページのトップのサインアップの瞬間や製品発表のヒーロー (Futures Arena「今すぐ参加」) に使用されるプライマリ CTA のより大きな錠剤のバリエーション。同じ黄色と黒の組み合わせ、パディング 14px × 32px、丸みを帯びた `` (9999px)。使用は慎重に行ってください。錠剤は「これが行動です」という合図です。

**`button-secondary-on-dark`** — あまり強調されないアクションのために `` よりも使用されます。 背景__CODEBCK_814___、テキスト__CODEBCK_815___、角丸__CODEBCK_816___.

**`button-secondary-on-light`** — ライトキャンバスと同等。背景__CODEBCK_818___、__CODEBCK_819___ 1ピクセルの境界線、テキスト__CODEBCK_820___.

**`button-tertiary-text`** — 背景のないインライン テキスト ボタン。上部ナビゲーションの「ログイン」およびインラインの「続きを読む」リンクに使用されます。

**`button-trading-up`** — 価格上昇シグナル (買い/ロングアクション) で使用される緑色の点灯ボタン。背景__CODEBCK_823___、テキスト__CODEBCK_824___、角丸__CODEBCK_825___ (4px)、パディング8px × 20px。 `` は高密度の取引インターフェイスに表示されるため、

よりも小さく、タイトです。

_**`button-trading-down`** — 売り/売りアクションの対称的な赤色のバリアント。同じ形状、背景 ``.

**`button-subscribe`** — トップ トレーダーに登録するために Smart Money トレーダー テーブルで使用されるコンパクトな黄色の CTA。プライマリ CTA よりも高さが低く (28 ピクセル)、パディングがタイトです。テーブルの密な行の中に収まります。同じ黄色と黒の組み合わせ。

**`text-link`** — `` のインライン本文リンク (暗い場合は黄色、明るい場合も黄色)。デフォルトでは下線はありません。型は__CODEBCK_832___.

を継承します。

カードとコンテナ

_**`hero-band-dark`** — ホームページの h1 + サブヘッドライン + デュアル CTA ペアを運ぶ全幅のダーク バンド。背景__CODEBCK_834___、パディング__CODEBCK_835___ (80ピクセル)。 h1 (「316,258,026 ユーザーが信頼しています」) は、64 ピクセル / 700 で `` を使用します。これは、システム最大のタイプ ロールです。

**`stat-callout-card`** — インラインの黄色の統計数値 (15,000 BTC、7,488,223、$429,423,449)。 BinancePlex で透明な背景、テキスト ``、__CODEBCK_839___ と入力します。表面のあるカードではなく、フラットなレイアウト ブロックとして使用されます。黄色のテキストだけが視覚的な重みを持ちます。

**`trust-badge`** — 「No.1 カスタマー サービス」/「No.1 取引量」を主張する小さなダーク カード。背景__CODEBCK_841___、角丸__CODEBCK_842___ (8px)、パディング16px × 20px。黄色の数字または単語のバッジ (「No.1」) が短いラベルの隣にあります。

_**`markets-table-card`** — ホームページの右側の市場テーブル。背景__CODEBCK_844___、角丸__CODEBCK_845___ (12ピクセル)、パディング__CODEBCK_846___ (24ピクセル)。タブ行 (人気/新規上場/上位上昇者) があり、その後、最終価格、24 時間変化率、アクション ボタンを含むコイン ペアの 5 列の行が表示されます。各行は__CODEBCK_847___.

を使用します

_**`markets-row`** — マーケット テーブル内の 1 行。透明な背景、12 ピクセルの垂直パディング、行間のヘアライン区切り。コインアイコン (32×32) + 左側のシンボル。 `` (BinancePlex) の最終価格; 24 時間方向ごとにセルの色を変更します (`` または ``)。 「詳細を表示」の右揃え山形アイコン。

_**`price-up-cell`** / **`price-down-cell`** — 価格変更の色付きテキストセル。透明な背景、テキスト `` または ``、BinancePlex に `` と入力します。方向を示す小さな三角形の矢印と常に組み合わせてください。

**`feature-photo-card`** — 「外出先で取引」セクションの写真ストリップ — Binance アプリを使用している人々を示す 3 枚のライフスタイル写真。背景__CODEBCK_858___、角丸__CODEBCK_859___。写真は端から端までトリミングされ、画像の周囲に内部パディングはありません。

**`qr-promo-card`** — 「外出先でいつでもどこでも取引。」 QRコード付きカード。背景__CODEBCK_861___、角丸__CODEBCK_862___、パディング__CODEBCK_863___ (32ピクセル)。 `` の h2、本文の段落、アプリ ストアのバッジ (iOS / Android)、および中央揃えの QR コードが含まれます。

_**`funds-safu-band`** — 黄色の見出しの「FUNDS ARE SAFU」バンド。背景は__CODEBCK_866___のままですが、見出しは__CODEBCK_868___で__CODEBCK_867___を使用します。見出しの下には、3 つの大きな `` という数字がバンドを表しています: 合計 BTC 準備金、ユーザーが支援した資金、回収された資金。

_**`faq-row`** — 単一の FAQ アコーディオン行。透明な背景、垂直方向に 20 ピクセルのパディング、行間のヘアライン区切り。クローズ済みの状態: `` の質問 + 右側の山型アイコン。オープン状態: ``.

の質問 + 回答本文

**`cta-band-dark`** — 「Binance での安全な低手数料取引」プレフッター CTA バンド。背景 `` (キャンバスから 1 段上にある)、丸い ``、パディング `` (48 ピクセル)。 `` に h2 を運び、__CODEBCK_878___ を右揃えで運びます。

ライトモード トランザクション コンポーネント

**`buy-crypto-amount-card`** — BTC の購入ページの右側のレール カード。背景__CODEBCK_880___、角丸__CODEBCK_881___ (8ピクセル)、パディング__CODEBCK_882___ (24ピクセル)。 `` (BinancePlex) で編集可能な金額入力、通貨セレクター、および「続行」/「注文の確認」用の黄色の `` が表示されます。

**`steps-card`** — 「仮想通貨の購入方法」の 3 枚構成カード (金額を入力 → 注文を確認 → 仮想通貨を受け取る)。背景__CODEBCK_886___、丸め__CODEBCK_887___、パディング__CODEBCK_888___。各カードには、小さな番号のアイコン、__CODEBCK_889___ ステップ名、本文の説明が付いています。

**`price-chart-card`** — BTC 価格チャートを含む「Bitcoin Markets」カード。背景__CODEBCK_891___、角丸__CODEBCK_892___。一番上の行はペアセレクター ($79,065.04、+0.45%);メインエリアは__CODEBCK_893___および__CODEBCK_894___のローソク足/折れ線グラフです。一番下の行にはタイムフレームセレクター (24H / 1W / 1M / 3M / 1Y / ALL) が表示されます。

**`conversion-cell`** — BTC ↔ USD 変換テーブルの 1 行。透明な背景、テキスト ``、入力 ``。左側にペアラベル (BTC、USDT など)。右側は米ドル相当。

入力とフォーム

**`search-input-on-dark`** — ホームページのヒーローに入力された「通貨の検索」。背景 ``、テキスト ``、角丸 `` (8px)、パディング 10px × 16px、高さ 40px。右側に黄色の__CODEBCK_902___ (「サインアップ」) が表示されます。

**`text-input-on-light`** — トランザクション ページの標準入力。背景 ``、1 ピクセル `` 境界線、丸みを帯びた `` (6 ピクセル)、パディング 10 ピクセル × 16 ピクセル、高さ 40 ピクセル。フォーカス状態はフォーカス リングのシャドウを継承します。

**`cookie-consent-card`** — ホームページに表示される Cookie バナー カード。背景__CODEBCK_908___、角丸__CODEBCK_909___、パディング__CODEBCK_910___ (16ピクセル)。本文テキストは `` (13px / 400) で、3 つの積み重ねられたボタン オプション (Cookie を受け入れて続行 / 追加の Cookie を拒否 / Cookie の管理) を備えています。

スマート マネー サブシステム

_**`trader-row`** — /smart-money のトップ トレーダー テーブルの 1 行。透明な背景、垂直方向に 12 ピクセルのパディング、行間のヘアライン区切り。左側にアバター + トレーダー名 + プライベート/パブリック バッジ。 ROI %、AUM、発行日の列。黄色 `` 右側。

署名コンポーネント

**`arena-hero-gradient`** — Futures Arena の製品発表のヒーロー。 `` の賞金総額ヘッドライン (4,000,000 USDT) を中心とした、上部の `` から下部の `` までの垂直グラデーション。 `` (「今すぐ参加」) が見出しの下にあります。製品発売イベントの表面でのみ使用されます。他のヒーローに一般化しないでください。

フッター

_**`footer-light`** — すべてのページ (暗いキャンバス ページを含む) を閉じる明るい灰色のフッター。背景__CODEBCK_920___ (#fafafa)、テキスト__CODEBCK_921___。デスクトップ上の 6 列のリンク リスト。コミュニティ / 会社概要 / 製品 / ビジネス / サービス / 学習の各列が含まれます。垂直パディング64ピクセル。暗いページに意図的に明るいフッターを配置することは、Binance の最も特徴的なレイアウト選択の 1 つです。視覚的に「マーケティング リセット」の表面でページを閉じます。

推奨事項と禁止事項

実行

• __CODEBCK_922___ (Binance Yellow) は、主要なアクション、ブランド主張の見出し、ワードマーク用に予約してください。二次的または装飾的な目的には決して使用しないでください。黄色の希少性がそれを強力にします。
• __CODEBCK_923___ (黄色と黒のテキスト) を、ダーク モードとライト モードの両方で共通のプライマリ CTA として保持します。同じボタンが `` と `` で同じように表示されます。
• __CODEBCK_926___ (緑) および `` (赤) は、明示的な買い/売りまたはロング/ショート アクションにのみ使用してください。これらは価格方向の意味を持っているため、一般的な「確認」または「キャンセル」には決して使用しないでください。
• _すべての番号に BinancePlex を使用します。価格、出来高、パーセンテージ、統計カウンター - すべて BinancePlex。 BinanceNova をナンバーティッカーに混ぜると、取引プラットフォームの性格が壊れます。
• 表面の目的に応じてキャンバス モードを選択します: マーケティング / 製品ショーケース / 取引ダッシュボードの場合はダーク。トランザクションダイアログ (購入/入金/出金/フォーム送信) 用のライトです。
• __CODEBCK_928___ (80 ピクセル) を使用してすべての編集バンドを固定します。 Binance は、広々としたマーケティング サイトよりも密度が高く、80 ピクセルが適切なリズムです。

しないでください

• _2番目のブランドカラーを導入しないでください。このシステムには 1 つのアクセント (``) があり、拡張するとブランド アイデンティティが薄れます。 Smart Money のターコイズは、システム トークンではなく、単一製品の実験です。
• 本文テキストや大きな表面の塗りつぶしには黄色を使用しないでください。これは、焦点となる CTA と見出しのみを対象としています。
• _`` / `` をカードの背景の塗りつぶしとして使用しないでください。これらは価格方向のシグナルであり、テキストの色または小さなバッジの塗りつぶしとして表現されます。決してカードの表面として表現されるものではありません。
• 表示の重みを軽くしないでください。 `` と `` は意図的にウェイト 700 です。取引プラットフォームではなく、デザイン ポートフォリオとして 400 読み取りになります。
• キャンバスに大気のグラデーション (メッシュ、オーロラ、グロー効果) を追加しないでください。 Binance はカラーブロックのコントラストを信頼しています。雰囲気に深みを加えると、取引プラットフォームの雰囲気が濁ります。
• `` のテキストの色を反転しないでください。 黄色地に黒はシステムの特徴です。黄色地に白い文字はコントラストとブランド認識を失います。

応答動作

ブレークポイント_

|名前 |幅 |主な変更点 |

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

|モバイル | < 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 |

|タブレット | 768–1024ピクセル |上部のナビゲーションは水平のままですが、狭くなり、二次メニュー項目は「その他」ドロップダウンの後ろに隠れます。マーケットテーブル2アップ。価格/機能グリッド 2-up |

|デスクトップ | 1024–1440ピクセル |すべての主要メニュー項目を備えた完全なトップナビゲーション。 5 列の市場テーブル。 8/4 分割の取引ダッシュボード (チャート + サイド レール) |

|ワイド | > 1440ピクセル |デスクトップと同じですが、より外側に呼吸するスペースがあります。コンテンツの最大幅は、サーフェスに応じて 1280 ～ 1440 ピクセルに制限されます |

タッチターゲット

• プライマリ CTA は、最小 40 × 40 ピクセル (`` 高さ + パディング) でレンダリングされます。周囲のスペースと合わせて WCAG AAA の 44 × 44 を満たします。
• 購読/インライン アクション ボタンは 28 × 28 で、理想よりも密度が高いですが、業界の取引プラットフォームの標準に一致しています。
• マーケット テーブルのコイン アイコンは 32 × 32 ピクセルで、44 ピクセル以上の有効ターゲットに対して行全体をタップできます。

戦略の崩壊

• < 768px; the menu opens as a full-screen sheet with the same yellow accent CTAs anchored to the bottom of the sheet.
で上部のナビゲーションが折りたたまれてハンバーガーになります
• マーケット テーブルは、モバイル上でコイン ペアごとに水平スクロール可能な 1 枚のカードにリフローされます。
• ヒーローの統計数値 (「3 億 1,600 万人のユーザー」) は、折り返されるのではなく比例して縮小します — Binance の最大の主張は、常に 1 つのブロックとして読み取られる必要があります。
• モバイルでは別の「取引」タブを使用すると、取引ダッシュボードがチャート+サイドレールからチャートのみに切り替わります。
• ライト フッターはすべてのブレークポイントでフルブリードのままであり、別のダーク バリアントに折りたたまれません。

画像の動作

• コインアイコンは、ブレークポイントに関係なく、24/32ピクセルの固定サイズのままです。
• 「外出先で取引」セクションのライフスタイル写真は、デスクトップでは幅が広く、モバイルでは高さ (垂直) が高く切り取られます。
• 3D コイン スタックのイラストは、切り取られることなく均一に拡大縮小される固定アスペクト比のアセットです。

反復ガイド

1.一度に 1 つのコンポーネントに焦点を当てます。 YAML キーを直接参照します (``、__CODEBCK_937___)。

2.新しいコンポーネントを追加するときは、最初に、それがダーク モード (マーケティング/製品) で動作するかライト モード (トランザクション) で動作するかを決定します。どちらにも同じコンポーネントが表面のトーンを反転して表示されます。

3.既存のコンポーネントのバリアント (`-active`、__CODEBCK_939___) は、__CODEBCK_940___ の個別のエントリとして存在します。ネストされた状態オブジェクトとしては存在しません。

4.散文で色、半径、タイポグラフィの役割、または間隔の値が言及されている場合は、どこでも `` を使用してください。

5.決してホバーを文書化しないでください。システムは、デフォルト状態とアクティブ/押された状態のみを文書化します。

6. Numbers は常に BinancePlex を使用します。コピーは常に BinanceNova を使用します。これらを混在させるとシステム違反となります。

7. 取引の緑/赤は意味的な価格トークンです。「成功」または「エラー」の一般的な状態に再利用しないでください。

既知のギャップ

• デムブラント周波数アナライザーは、__CODEBCK_942___ (明るいヘアライン、カウント 1022) を最高周波数トークンとしてキャプチャしました。ブランドを定義する__CODEBCK_943___ (#FCD535) は、アクセントとしてほとんど使用されないため、出現頻度ははるかに低くなります。そのシステムの役割はスクリーンショットで確認する必要がありました。
• BinanceNova および BinancePlex の重み軸の値は、可変フォント トークンとして形式化されていません。スクリーンショットで観察された静的な重みのみが文書化されています。
• アニメーションと遷移のタイミング (チャートの再描画、価格変更のフラッシュ) は対象外です。
• _`` を超えるフォーム検証状態はデフォルトでは抽出されません。エラー/成功の入力バリアントを確認するには、サインアップまたは注文確認フローが必要です。
• _取引ダッシュボード画面 (スポット / 先物 / マージン) は、分析された URL セットに含まれていませんでした。オーダーブック、ローソク足チャートの構成、ポジション管理カードについてはここでは説明しません。
• 明るいテーマと暗いテーマの切り替え動作 (ユーザー設定によってトランザクション ページを強制的に暗くできるかどうか) は製品の動作であり、マーケティング画面から抽出されたものではありません。

Visual Identity & Brand Recognition

What makes Binance's design system memorable is not any single element but the cohesive interaction of its parts. The #FCD535 brand color, the consistent use of system font across touchpoints, and the predictable component patterns create a recognizable visual language that users come to trust. This kind of systematic brand building is what distinguishes professionally managed design systems from ad-hoc visual decisions. It signals to users that the same care applied to the visual surface extends to the underlying product quality.

Visual Identity & Brand Recognition

What makes Binance's design system memorable is not any single element but the cohesive interaction of its parts. The #FCD535 brand color, the consistent use of system font across touchpoints, and the predictable component patterns create a recognizable visual language that users come to trust. This kind of systematic brand building is what distinguishes professionally managed design systems from ad-hoc visual decisions. It signals to users that the same care applied to the visual surface extends to the underlying product quality.

Visual Identity & Brand Recognition

What makes Binance's design system memorable is not any single element but the cohesive interaction of its parts. The #FCD535 brand color, the consistent use of system font across touchpoints, and the predictable component patterns create a recognizable visual language that users come to trust. This kind of systematic brand building is what distinguishes professionally managed design systems from ad-hoc visual decisions. It signals to users that the same care applied to the visual surface extends to the underlying product quality.

Related Design Systems

Explore similar design languages from the same category:

• Stripe Design System
• Revolut Design System
• Coinbase Design System
• Kraken Design System