# Design System Inspiration of Binance

A confident financial-platform interface anchored on a deep near-black canvas, where Binance's iconic yellow carries every primary CTA, brand accent, and value-claim moment.

Popular
New listing
Top gainers
BTC
$78,065.04
+1.42%
ETH
$3,219.18
+0.85%
SOL
$162.40
−2.31%
BNB
$586.00
+0.34%
01 — Color Palette

## Single-accent system on dual-canvas modes

Binance Yellow does all brand voltage. Marketing pages default dark, transactional pages flip light — but yellow CTAs and trading green/red thread through both modes unchanged.

### Brand

primary (Binance Yellow)
#fcd535
All primary CTAs, brand-claim headlines, the wordmark.
primary-active
#f0b90b
Press state on yellow buttons.
primary-disabled
#3a3a1f
Desaturated yellow on dark canvas.
accent-turquoise
#2dbdb6
Smart Money "Check Now" — sparingly used product accent.

### Surface — Dark

canvas-dark
#0b0e11
Marketing pages, Smart Money, Futures Arena.
surface-card-dark
#1e2329
Cards, secondary buttons, markets table.
surface-elevated-dark
#2b3139
Nested cards, hovered nav, chart panels.

### Surface — Light

canvas-light
#ffffff
Transactional pages (buy crypto, deposit).
surface-soft-light
#fafafa
Footer surface, disabled states.
surface-strong-light
#f5f5f5
Form input backgrounds in muted contexts.
hairline-on-light
#eaecef
1px borders on light surfaces.

### Text

ink
#181a20
Strongest text on light surfaces.
body (on dark)
#eaecef
Default running-text on dark canvas.
muted
#707a8a
Footer links, captions, table headers.
muted-strong
#929aa5
Second-tier muted for emphasized labels.

### Trading Semantics

trading-up
#0ecb81
Price-up green. Used as text color on prices and changes.
trading-down
#f6465d
Price-down red. Symmetric to trading-up.
info / focus-ring
#3b82f6
Info badges, input focus ring.
02 — Typography Scale

## BinanceNova + BinancePlex split

Display + body run BinanceNova; numerical / financial data run BinancePlex (preview uses Inter + JetBrains Mono as substitutes). The split is functional — every price ticker, stat counter, and percentage uses the monospace-tuned numeric face.

hero-display64px / 700 / 1.1 / -1px
316,258,026 USERS TRUST US
display-lg48px / 700 / 1.1 / -0.5px
FUNDS ARE SAFU
display-md40px / 600 / 1.15 / -0.3px
The World's Leading Cryptocurrency Exchange
display-sm32px / 600 / 1.2 / 0
Secure, Low-Fee Trading on Binance
title-lg24px / 600 / 1.3 / 0
Frequently Asked Questions
title-md20px / 600 / 1.35 / 0
Trade on the go. Anywhere, anytime.
title-sm16px / 600 / 1.4 / 0
Why is Binance the best exchange for crypto traders?
number-display40px / 700 / 1.1 / -0.3px
BinancePlex (JetBrains Mono substitute)
15,000 BTC
number-md16px / 500 / 1.4 / 0
BinancePlex
$78,065.04
number-sm14px / 500 / 1.4 / 0
BinancePlex
+0.45%
body-md14px / 400 / 1.5 / 0
Buy and sell crypto with confidence on Binance — the world's most trusted cryptocurrency exchange.
body-sm13px / 400 / 1.5 / 0
By clicking "Strictly Necessary" cookies are stored on your device.
caption12px / 500 / 1.4 / 0
24H VOLUME
button14px / 600 / 1 / 0
Sign Up
nav-link14px / 500 / 1.4 / 0
Buy Crypto · Markets · Trade · Futures
03 — Button Variants

## Yellow-on-black across modes

Primary stays identical across dark and light surfaces — yellow with black text is the system's universal action signal. Trading green and red signal Buy/Sell direction; never general confirm/cancel.

button-primary
primary / on-primary / md radius / standard CTA
button-primary-active
primary-active background
button-primary-disabled
primary-disabled / muted text
button-primary-pill
Pill radius for top-of-page sign-up moments
button-secondary-on-dark
surface-card-dark / on-dark / md radius
button-secondary-on-light
canvas-light / ink with hairline outline
button-tertiary-text
No background; inline link-style action
button-trading-up
trading-up / sm radius / dense trading interfaces
button-trading-down
trading-down / sm radius / symmetric to up
button-subscribe
28px height — fits inside dense table rows
04 — Trust & Stat Components

## Yellow-as-emphasis

Stat numbers render in BinancePlex with yellow ink — no surface card, just the numeral and a small label below.

No.1
Customer Service
No.1
Trading Volume
99.9%
Uptime
15,000 BTC
SAFU Insurance Fund
7,488,223
Users helped
$429,423,449
Funds recovered
05 — Markets Table Card

## Trading data, dense rows

Right-rail markets table on the homepage. BinancePlex prices, green/red change cells, hairline dividers between rows.

Popular
New listing
Top gainers
BTC
$78,065.04
+1.42%
ETH
$3,219.18
+0.85%
SOL
$162.40
−2.31%
BNB
$586.00
+0.34%
XRP
$0.5821
−1.15%
06 — FUNDS ARE SAFU + Pre-Footer CTA

## Yellow-headlined value claim + dark CTA strip

## FUNDS ARE SAFU

15,000 BTC
SAFU Insurance Fund
7,488,223
Users helped
$429,423,449
Funds recovered

### Secure, Low-Fee Trading on Binance

07 — QR Promo Card + FAQ Rows

## Trade on the go + Q&A pattern

#### Trade on the go. Anywhere, anytime.

Available on iOS and Android. Scan to download.

Why is Binance the best exchange for crypto traders? +
Which products does Binance provide? +
How do I buy Bitcoin and other cryptocurrencies on Binance? +
How is Binance a secure cryptocurrency exchange? +
08 — Light-Mode Transactional Components

## Transactional surfaces flip to white canvas

Buy crypto, deposit, withdraw, conversion pages render on light canvas. Yellow CTAs and trading green/red stay identical.

Buy
78,254.6
USDT
1

#### Enter Amount & Select Payment

Choose how much you want to buy and pick your preferred payment method.

2

#### Confirm Order

Review the conversion rate, fees, and order details before confirming.

3

#### Receive Crypto

Your crypto lands in your spot wallet within minutes.

BTC
$78,065.04
+0.45% • 24H
09 — Smart Money Trader Rows

## Top traders subscription pattern

Dense table row with avatar, ROI %, AUM, mint date, and yellow subscribe CTA. The 28px subscribe button fits the table density.

Trader
ROI
AUM
Active
FuturesGuy01
+86.42%
$1,521,344
128d
ChainTrader
+62.18%
$2,340,810
95d
SatoshiPilot
+54.07%
$782,450
214d
10 — Form Elements

## Inputs on dark + light

Search input on dark canvas (homepage hero) at 40px height with 8px radius. Light-mode inputs match transactional surfaces.

Search currencies (on dark)
Email address (on light)
Email (focused)
11 — Spacing Scale

## Base unit 4px

Section rhythm 80px — slightly tighter than airy marketing sites because Binance mixes marketing bands with product surfaces.

xxs · 4px
xs · 8px
sm · 12px
md · 16px
lg · 24px
xl · 32px
xxl · 48px
section · 80px
12 — Border Radius Scale

## Tight radius hierarchy

6px primary CTAs, 8px content cards, 12px elevated containers, pill for top-of-page actions.

2 · xs
4 · sm
6 · md
8 · lg
12 · xl
pill
full
13 — Elevation & Depth

## Flat surfaces, color-block separation

No drop shadows, no glassmorphism. Depth comes from the lightness step between canvas-dark (#0b0e11) and surface-card-dark (#1e2329).

##### Flat

No shadow. Body sections, top nav, hero bands, footer.

##### Soft hairline

1px hairline. Inputs, table dividers, FAQ separators.

##### Card surface

surface-card-dark over canvas-dark — 12-step lightness jump.

##### Card elevated

surface-elevated-dark for nested cards inside markets-table-card.

##### Light card flat

canvas-light over surface-soft-light — same flat philosophy.

##### Focus ring

0 0 0 2px info-ring at 50% alpha. Inputs and buttons.

14 — Responsive Behavior

## Dense layouts that scale to mobile

Markets table reflows to a horizontally-scrollable card list on mobile. The hero h1 shrinks proportionally rather than wrapping.

Name | Width | Key Changes
--- | --- | ---
Mobile | < 768px | Hamburger nav; hero h1 ~36px; markets table → horizontal-scroll cards; demo grids 1-up; footer 6 cols → 2.
Tablet | 768–1024px | Top nav tightens, secondary items in "More"; markets 2-up; pricing/feature grids 2-up.
Desktop | 1024–1440px | Full top-nav; 5-col markets table; trading dashboards in 8/4 split (chart + side rail).
Wide | > 1440px | Same as desktop with more outer breathing room; max content 1280-1440px.

375
mobile
600
small phone
768
tablet
1024
laptop
1280
desktop
1440
wide

#### Touch Targets

- Primary CTA buttons render at min 40 × 40px.
- Subscribe / inline action buttons at 28 × 28 — denser than ideal but matches industry trading norms; row-tap area effective ≥ 44px.
- Coin icons in markets tables are 32 × 32px.

#### Collapsing Strategy

- Top nav collapses to hamburger at < 768px; full-screen sheet with bottom-anchored CTAs.
- Markets table reflows to horizontally-scrollable card-per-pair on mobile.
- Hero stat numbers shrink proportionally, never wrap — must read as single block.
- Trading dashboards switch chart + side-rail → chart-only with a separate "Trade" tab on mobile.
- Light footer stays full-bleed at every breakpoint.