Binance Design System
Dark · Generated 14/04/2026 · 37 colors · 41 type tokens · 24 spacing steps · 11 motion tokens
v1.0.0
Color Palette
Background Colors
Light Gray
#EAECEF
Black
#000000
Yellow 2
#FCD535
White
#FFFFFF
Dark Blue
#202630
Dark Gray 2
#2B3139
Dark Gray 3
#181A20
Dark Gray 4
#12161C
Dark Blue 2
#27455C
Dark Blue 3
#333B47
Dark Blue 4
#29313D
Blue 6
#3860BE
Green
#468254
White 2
#FEF1F2
Dark Gray 7
#1E2329
White 3
#F9FFFA
White 4
#F4F4F4
Text Colors
Yellow
#F0B90B
Blue
#707A8A
Blue 2
#0000EE
Blue 3
#929AA5
Dark Gray
#555555
Cyan
#2EBD85
Blue 4
#5F82D3
Dark Gray 5
#656565
Red
#F6465D
Mid Gray
#696969
Border Colors
Dark Blue 5
#434C5A
Cyan 2
#32AE88
Light Gray 3
#D8D8D8
Light Gray 4
#D1D1D1
Light Gray 5
#BBBBBB
Shadow & Fill Colors
Shadow Dark
rgba(24,26,32,.08)
Light Gray 2
#C7C5C7
Mid Gray 2
#999999
Blue 5
#76808F
Dark Blue 6
#2E3644
Typography
Base Font · BinancePlex / Space Grotesk
BinancePlex
Buy, sell, and trade crypto on the world's leading exchange.
Regular · 400 Medium · 500 Semibold · 600 Bold · 700
Mono Font · BinanceNova / Space Mono
BinanceNova
BTC/USDT 68,420.50 +2.41%
Regular · 400 Bold · 700
Trade Crypto
Display · 72px · Bold · line-height: 76px
Buy Bitcoin Today
Hero · 64px · Bold · line-height: 64px
The World's Largest Crypto Exchange
Heading 6XL · 40px · Bold · line-height: 40px
Spot · Futures · Options
Heading 5XL · 32px · Bold · line-height: 32px
Markets · P2P · Earn · NFT
Heading 4XL · 28px · Semibold · line-height: 28px
Start your crypto journey in minutes with low fees and deep liquidity.
Body 3XL · 20px · Medium · line-height: 24px
Over 350+ cryptocurrencies available for trading on Binance platform.
Body 2XL · 16px · Regular · line-height: 24px
Last price updated 3 seconds ago · 24h volume: $38.2B
Body SM · 14px · Regular · line-height: 24px
BTC · ETH · BNB · SOL · XRP
Caption / Label · 12px · Semibold · letter-spacing: 0.7px
Line Heights
Tight
12px
Snug
14.4px
Normal
16px
Relaxed
16.9px
Loose
17.6px
LH-6
19.5px
LH-7
19.6px
LH-8
20.8px
LH-9
22px
LH-10
24px
LH-11
28px
LH-12
32px
LH-13
40px
LH-14
48px
LH-15
64px
LH-16
76px
Letter Spacing
Binance Exchange
Tight
0.13px · body text
Trade Smarter
Normal
0.144px · default
Crypto Markets
Wide
0.16px · ui labels
BTC · ETH
Wider
0.7px · ticker labels
SPOT FUTURES
Widest
0.96px · caps, badges
Spacing
Spacing Scale
24 tokens — 2px → 288.5px
2
3
4
5
6
7
8
10
11
12
16
24
32
36
40
44
48
63
64
67
72
80
120
288.5
Borders
Border Radii
SM
0 0 8px 8px
MD
1px
LG
2px
2XL
3px
Full
4px
R7
6px
R8
8px
R9
10px
R10
12px
R11
16px
R13
20px
R14
24px
Circle
50%
Pill
50px
Border Widths
Hairline
1px · ×137
Thin
3px · ×16
Base
12px · ×4
Three border widths used throughout the system. --border-width-hairline: 1px · --border-width-thin: 3px · --border-width-base: 12px
Shadows / Elevation
Shadow Tokens
5 tokens
Drop SM
×4
rgba(24,26,32,.08) 8px — cards
Layered
×1
3-layer dark + white inset — panels
Drop LG
×1
rgb(153,153,153) 2px 10px -3px
Corner XL
×1
rgb(199,197,199) -3px -3px 5px
Glow
×1
rgb(199,197,199) 0 0 12px 2px
Z-Index
LayerValueUsage
Base1Base content, inline elements
Raised3Slightly elevated elements
Sticky998Sticky elements, near-top nav
Navigation999Top navigation bar, headers
Modal Base1300Modal containers, overlays
Modal Top1400Top-level modal dialogs
System Max2147483645System-level overlays
System High2147483646Critical system dialogs
System Top2147483647Absolute top — toasts, alerts
Breakpoints
XS
400px
Extra small
SM
425px
Small mobile
MD
426px
Med mobile
LG
500px
Large mobile
XL
530px
XL mobile
2XL
550px
2XL mobile
3XL
600px
Large mobile
BP-8
767px
Tablet portrait
BP-9
768px
Tablet
BP-10
896px
Large tablet
Opacity
Opacity Tokens
1 token detected
Dim
40% · ×1
Accessibility — Contrast Ratios
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 (large/bold) · AAA ≥ 7:1
Text TokenBackground TokenRatioWCAG Rating
YellowLight Gray1.52:1Fail
YellowBlack11.65:1AAA
YellowYellow 21.26:1Fail
YellowWhite1.8:1Fail
YellowDark Blue8.43:1AAA
BlueLight Gray3.67:1AA Large
BlueBlack4.84:1AA
BlueYellow 23.04:1AA Large
BlueWhite4.34:1AA Large
BlueDark Blue3.5:1AA Large
Blue 2Light Gray7.94:1AAA
Blue 2Black2.23:1Fail
Blue 2Yellow 26.58:1AA
Blue 2White9.4:1AAA
Blue 2Dark Blue1.62:1Fail
Blue 3Light Gray2.4:1Fail
Blue 3Black7.39:1AAA
Blue 3Dark Blue5.35:1AA
Dark GrayLight Gray6.3:1AA
Dark GrayBlack2.82:1Fail
Dark GrayYellow 25.22:1AA
Dark GrayWhite7.46:1AAA
Dark GrayDark Blue2.04:1Fail
Blue 3Yellow 21.99:1Fail
Blue 3White2.84:1Fail
CSS Variables Reference
Background Colors 17 tokens
Light Gray--color-light-gray#EAECEF
Black--color-black#000000
Yellow 2--color-yellow-2#FCD535
White--color-white#FFFFFF
Dark Blue--color-dark-blue#202630
Dark Gray 2--color-dark-gray-2#2B3139
Dark Gray 3--color-dark-gray-3#181A20
Dark Gray 4--color-dark-gray-4#12161C
Dark Blue 2--color-dark-blue-2#27455C
Dark Blue 3--color-dark-blue-3#333B47
Dark Blue 4--color-dark-blue-4#29313D
Blue 6--color-blue-6#3860BE
Green--color-green#468254
Dark Gray 7--color-dark-gray-7#1E2329
White 2--color-white-2#FEF1F2
White 3--color-white-3#F9FFFA
White 4--color-white-4#F4F4F4
Text, Border & Fill Colors 20 tokens
Yellow--color-yellow#F0B90B
Blue--color-blue#707A8A
Blue 3--color-blue-3#929AA5
Dark Gray--color-dark-gray#555555
Cyan--color-cyan#2EBD85
Blue 4--color-blue-4#5F82D3
Dark Gray 5--color-dark-gray-5#656565
Red--color-red#F6465D
Mid Gray--color-mid-gray#696969
Dark Blue 5--color-dark-blue-5#434C5A
Cyan 2--color-cyan-2#32AE88
Light Gray 3--color-light-gray-3#D8D8D8
Light Gray 4--color-light-gray-4#D1D1D1
Light Gray 5--color-light-gray-5#BBBBBB
Shadow Dark--color-dark-gray-6rgba(24,26,32,.08)
Light Gray 2--color-light-gray-2#C7C5C7
Mid Gray 2--color-mid-gray-2#999999
Blue 5--color-blue-5#76808F
Dark Blue 6--color-dark-blue-6#2E3644
Blue 2--color-blue-2#0000EE
Typography 41 tokens
Base Font--font-family-baseBinancePlex
Nova Font--font-family-2BinanceNova
Plex Font--font-family-3BinancePlex
Regular--font-weight-regular400
Medium--font-weight-medium500
Semibold--font-weight-semibold600
Bold--font-weight-bold700
Caption--font-size-2xs12px
XS--font-size-xs12.992px
SM--font-size-sm13.008px
Base--font-size-base13.6px
Body--font-size-lg14px
Body XL--font-size-xl14.4px
Body 2XL--font-size-2xl16px
Body 3XL--font-size-3xl20px
Heading 4XL--font-size-4xl28px
Heading 5XL--font-size-5xl32px
Heading 6XL--font-size-6xl40px
Display 64--font-size-64px64px
Display 72--font-size-72px72px
Tight--letter-spacing-tight0.13px
Normal--letter-spacing-normal0.144px
Wide--letter-spacing-wide0.16px
Wider--letter-spacing-wider0.7px
Widest--letter-spacing-widest0.96px
Spacing 24 tokens
Space 1--space-12px
Space 2--space-23px
Space 3--space-34px
Space 4--space-45px
Space 5--space-56px
Space 6--space-67px
Space 8--space-88px
Space 10--space-1010px
Space 12--space-1211px
Space 16--space-1612px
Space 20--space-2016px
Space 32--space-3224px
Space 40--space-4032px
Space 48--space-4836px
Space 64--space-6440px
Space 80--space-8044px
Space 96--space-9648px
Space 128--space-12863px
Space 160--space-16064px
Space 192--space-19267px
Space 256--space-25672px
Space 23--space-2380px
Space 24--space-24120px
Space 25--space-25288.5px
Borders & Radius 19 tokens
Hairline--border-width-hairline1px
Thin--border-width-thin3px
Base--border-width-base12px
Bottom Pill--radius-sm0 0 8px 8px
Micro--radius-md1px
Tiny--radius-lg2px
Small--radius-2xl3px
Base--radius-full4px
Medium--radius-r76px
Large--radius-r88px
XL--radius-r910px
2XL--radius-r1012px
3XL--radius-r1116px
4XL--radius-r1320px
5XL--radius-r1424px
Circle--radius-r1550%
Pill--radius-r1650px
Motion, Opacity & Layers 21 tokens
Instant--duration-instant100ms
Fast--duration-fast150ms
Normal--duration-normal200ms
Slow--duration-slow250ms
Slower--duration-slower400ms
Long--duration-duration-6700ms
Longest--duration-duration-71s
Ease In Out--easing-ease-in-outease-in-out
Linear--easing-linearlinear
Ease Out--easing-ease-outease-out
Ease In--easing-ease-inease-in
Dim--opacity-4040%
Base--z-11
Raised--z-23
Sticky--z-3998
Navigation--z-4999
Modal Base--z-51300
Modal Top--z-61400
System Max--z-72147483645
System High--z-82147483646
System Top--z-92147483647
Design System Preview · Binance (Dark) · Generated 14/04/2026 · 37 color tokens · 13 font-size · 3 font-family · 4 font-weight · 16 line-height · 5 letter-spacing · 24 spacing · 16 radius · 3 border-width · 5 shadow · 7 duration · 4 easing · 9 z-index · 10 breakpoint · 1 opacity