What is Binance's primary brand color?

Binance's brand color is Binance Yellow — #FCD535, a saturated mid-yellow that carries every primary CTA, the wordmark, brand-claim headlines like 'FUNDS ARE SAFU', and the largest stat numbers on the homepage. It pairs with #181a20 black text on the button surface (never white on yellow — that combination is a system violation). The press state darkens to #f0b90b, and disabled flattens to a desaturated #3a3a1f tint on dark canvas. There is no secondary brand accent; a single turquoise (#2dbdb6) appears on the Smart Money product but is treated as a one-off experiment rather than a system token.

What typography does Binance use, and what should I use if BinanceNova isn't available?

Binance runs two custom typefaces: BinanceNova for editorial (headlines, body, buttons, nav) and BinancePlex for numerical data (prices, volumes, percentages, stat counters). The split is functional, not decorative — putting BinancePlex on a paragraph reads monospace-cold, putting BinanceNova on a price ticker loses the trading-platform character. Display weights sit at 600–700, body at 400. If BinanceNova is unavailable, Inter is the closest open-source substitute; for BinancePlex use JetBrains Mono or IBM Plex Sans depending on whether tabular fidelity matters more than humanist proportions. Adjust display line-heights down by ~3% to match BinanceNova's tighter cap height.

Why does Binance use two canvas modes?

Marketing surfaces (homepage, Smart Money, Futures Arena) default to dark — canvas #0b0e11, surface cards #1e2329 — because dark feels authoritative for a trading platform. Transactional surfaces (buy crypto, deposit, withdraw) flip to light — canvas #ffffff with #f5f5f5 form fills — because forms read more cleanly on white and reduce cognitive load during money movement. The yellow CTAs and trading green (#0ecb81) / red (#f6465d) tokens carry through both modes unchanged, which is what makes the brand recognisable across the flip. A distinctive quirk: even dark-canvas pages close with a #fafafa light footer, deliberately inverting the surface to act as a marketing reset.

Can I use this DESIGN.md to build my own React trading dashboard?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Binance's exact rules: yellow scarcity, BinancePlex for numbers, trading green and red as text-only color, flat surfaces with color-block separation. You can also reference the tokens directly: every color, type style, radius, and spacing value is a quoted hex or unit you can paste into Tailwind config, CSS variables, or your own component library. The 36 components cover top nav, markets tables, trust badges, FAQ rows, buy-crypto cards, and the price-chart card needed to build out a working exchange surface.

How does Binance handle price-direction colors?

Trading green (#0ecb81) and red (#f6465d) are reserved semantic tokens — they signal price direction in tables, charts, and inline tickers and are applied as text color rather than card-surface fill. The one exception is the Buy / Long and Sell / Short action buttons, which use the green and red as backgrounds at small size (4px radius, 8×20px padding) inside dense trading interfaces. Never repurpose them for generic 'success' or 'error' states — that conflates UI feedback with price meaning and breaks the trading-platform contract.

What's missing from this DESIGN.md spec?

A handful of items documented in the Known Gaps section: the BinanceNova / BinancePlex variable-font weight axis is not formalized — only the static weights observed in screenshots are documented. Animation timings (chart redraws, price-change flashes) are out of scope. Form validation error and success states beyond the default text-input-on-light were not extracted because they require a sign-up or order flow to surface. The full Spot / Futures / Margin trading dashboards (order book layout, candlestick chart configuration, position-management cards) were not in the analyzed URL set, so they aren't documented here. The light/dark theme toggle behavior is product behavior, not extracted from marketing surfaces.

Binance Design System

Binance's design system as a DESIGN.md file.

About Binance DESIGN.md

Curated by Dov AzencotUpdated May 12, 2026Source binance.com

Fintech & Crypto
Banking & Payments

Binance's design system is built around scarcity and contrast. One brand color (Binance Yellow, #FCD535) does every primary CTA, every value-claim headline, every wordmark. The canvas is a near-black #0b0e11 on marketing pages and pure white on transactional pages — yellow CTAs and gray-blue hairlines thread through both modes unchanged.

This page packages all of that into a single DESIGN.md file. Inside: 22 colors, 16 type styles, 7 spacing values, 6 corner radii, and 36 components — every piece you need to build something that looks like a trading platform rather than a generic SaaS theme.

Download the file and feed it to Claude, Cursor, or GitHub Copilot. The AI writes React components and Tailwind classes that respect the system's distinctive rules — BinancePlex on every number, trading green and red as text only, yellow reserved for the focal action. Or just use it as a reference for your own work.

What makes it distinct

Single yellow voltage#FCD535 with #181a20 black text is the only primary CTA combination, never inverted
Two-typeface splitBinanceNova for editorial, BinancePlex for every price, volume, and stat counter
Dual-theme surfacesdark #0b0e11 for marketing, white #ffffff for buy/deposit transactional flows
Trading semantics built in#0ecb81 up and #f6465d down as text-only color, never card surfaces
Light footer on dark body#fafafa footer closes every page, a deliberate marketing-reset inversion

Live at binance.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

binance.com

Explore Binance

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Binance design system FAQ

Common questions about Binance's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

React blocks for shadcn/ui

Production-ready hero, pricing, CTA, and dashboard sections built with the same Tailwind + shadcn primitives.

Use Binance in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→