Design System Inspired by Binance

A complete design token catalog extracted from Binance.US — BinancePlex typography, golden accent palette, and fintech component patterns.

BTC $71,234.21 +2.34%
ETH $3,891.45 +1.12%
BNB $642.80 -0.87%
SOL $182.33 +5.61%

Color Palette

Binance Yellow is the singular accent in a monochrome system — gold for action, grey for data, dark for depth.

Primary & Brand

Binance Yellow
#F0B90B
Primary CTA, brand accent
Binance Gold
#FFD000
Pill buttons, secondary CTA
Light Gold
#F8D12F
Gradient endpoint, hover
Active Yellow
#D0980B
Pressed/active state

Surface & Background

Page Dark
#181A20
Dark mode page bg
Card Dark
#1E2026
Card surfaces
Binance Dark
#222126
Hero bg, dark sections
Elevated Dark
#2B2F36
Hover state, input bg

Text & Neutrals

Text Primary
#EAECEF
Headings, primary text
Text Secondary
#B7BDC6
Body, descriptions
Slate
#848E9C
Metadata, muted text
Input Border
#3C3F44
Borders, dividers

Semantic

Crypto Green
#0ECB81
Positive, up, success
Crypto Red
#F6465D
Negative, down, error
Focus Blue
#1EAEDB
Focus ring, a11y state

Typography Scale

BinancePlex custom typeface (IBM Plex Sans as web substitute) — tabular numerals, 500-700 weights for financial authority.

Display Hero — 60px / 700 / 1.08
Buy, sell & trade crypto
Heading 1 — 34px / 700 / 1.00
Trusted by millions
Heading 2 — 28px / 500 / 1.00
Take your crypto journey further
Heading 3 — 24px / 700 / 1.00
Advanced Trading
Heading 4 — 20px / 600 / 1.25
Feature Card Title
Body Large — 20px / 500 / 1.50
The most trusted US-based crypto exchange with institutional-grade security.
Body — 16px / 500 / 1.50
Standard body text used throughout the platform for product descriptions and educational content.
Body SemiBold — 16px / 600 / 1.30
Navigation links and emphasized text
Caption — 14px / 500 / 1.43
$71,234.21 +2.34% | Last updated 2 min ago
Small — 12px / 600 / 1.00
BADGE LABEL
Tiny — 11px / 500 / 1.00
Chart annotation, micro-label

Button Variants

Pill buttons (50px radius) for CTAs, standard buttons (6px radius) for form actions.

Standard Buttons (6px radius)
Pill Buttons (50px radius)
On Light Background

Cards & Containers

12px radius, dark surfaces with subtle border differentiation. Hover reveals lighter card bg.

$

Low Fees

Trade with competitive fees starting at 0.1% for makers and takers.

S

Security First

Institutional-grade security with SOC 2 compliance and cold storage.

24

24/7 Support

Round-the-clock customer service with real human agents.


Form Elements

Dark input surfaces with subtle borders. Yellow focus ring for brand consistency.

Please enter a valid email address

Spacing Scale

8px base unit system with progressive scaling for financial UI density.

4
8
12
16
20
25
32
48
64

Border Radius Scale

From tight data cards to full pill buttons — radius communicates interaction level.

2px
Micro
6px
Buttons
8px
Inputs
10px
Tags
12px
Cards
24px
Video
50px
Pill CTA

Depth & Elevation

In dark mode, elevation is communicated through surface lightness rather than shadows.

Flat
Border only, base surface
Subtle
Light shadow, resting cards
Medium
Lighter surface, hovered
Pill
Visible shadow, CTAs