Untitled Design System
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, every 'Sign Up' pill, every featured tier indicator, and the wordmark itself.
Color Palette
Brand & Accent
Surface
Hairlines & Borders
Text
Trading Semantics
Info / Focus
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
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, every 'Sign Up' pill, every featured tier indicator, and the wordmark itself.
Components
Buttons
Elevation & Depth
Do's & Don'ts
Do
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.
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.
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.
Use with MCP
Don't have the MCP? Install it here