A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
Binance, in one page
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 ("FUNDS ARE SAFU"), every "Sign Up" pill, every featured tier indicator, and the wordmark itself. There is no secondary brand color. The system trusts the yellow voltage to do the brand work, and it carries it.
Type runs Binance's custom BinanceNova (display + body) and BinancePlex (numerical / financial display) stack. BinanceNova carries display headlines, section titles, and body copy. BinancePlex appears on price tickers, large stat numbers (transaction volumes, user counts, prize pools) — anywhere a number wants to feel "tabular and reliable." Both run at modest weights — display sizes use weight 600-700 (bolder than typical marketing because trading platforms need numbers to read at a glance), body stays at 400.
The product is multi-theme: marketing surfaces (homepage, smart-money, futures arena) default to dark, while transactional surfaces (buy crypto, deposit, withdraw) flip to a light theme. The same yellow CTAs and gray-blue hairlines ({colors.hairline-on-light} — #eaecef) thread through both — only canvas, surface, and text tones flip. Trading green ({colors.trading-up} — #0ecb81) and red ({colors.trading-down} — #f6465d) signal price direction in tables, charts, and price tickers across both modes.
Key Characteristics:
- Single accent color:
{colors.primary}(#FCD535) does all brand voltage — primary CTAs, hero headlines, brand mark, badges. Used scarcely on dark for emphasis, ubiquitously on transactional dialogs. - Custom type stack:
BinanceNova(display + body) andBinancePlex(numbers, prices, financial data). Big stat numbers always render in BinancePlex for tabular consistency. - Multi-theme: marketing pages default dark (
{colors.canvas-dark}); transactional pages flip light ({colors.canvas-light}). Yellow CTAs and trading green/red are shared across both. - Light footer on dark body: the homepage uses
{colors.surface-soft-light}(#fafafa) for the footer even when the body above it is dark — a deliberate inversion that visually closes the page. - Trading semantics: green up / red down (
{colors.trading-up}/{colors.trading-down}) for price changes, applied as text color rather than badge background. - Card surfaces:
{colors.surface-card-dark}(#1e2329) for elevated cards on dark;{colors.canvas-light}for cards on light. No gradient surfaces, no atmospheric backdrops — flat color blocks throughout. - Border radius is small to medium:
{rounded.md}(6px) for primary buttons,{rounded.lg}(8px) for inputs and content cards,{rounded.xl}(12px) for elevated card containers,{rounded.pill}for prominent feature CTAs. - Spacing follows a 4-multiple scale; major editorial bands sit at
{spacing.section}(80px) — slightly tighter than typical marketing-only sites because product pages need denser layouts.
Do's and don'ts
Do
- Reserve
{colors.primary}(Binance Yellow) for primary actions, brand-claim headlines, and the wordmark. Never use it for secondary or decorative purposes — yellow's scarcity is what makes it powerful. - Keep
{component.button-primary}(yellow with black text) as the universal primary CTA across both dark and light modes. The same button appears identically on{colors.canvas-dark}and{colors.canvas-light}. - Use
{component.button-trading-up}(green) and{component.button-trading-down}(red) only for explicit Buy/Sell or Long/Short actions. Never use them for general "confirm" or "cancel" because they carry semantic price-direction meaning. - Use BinancePlex for every number. Prices, volumes, percentages, stat counters — all BinancePlex. Mixing BinanceNova into a number ticker breaks the trading-platform character.
- Choose canvas mode by surface intent: dark for marketing / product showcase / trading dashboards; light for transactional dialogs (buy / deposit / withdraw / form submission).
- Anchor every editorial band with
{spacing.section}(80px). Binance is denser than airy marketing sites — 80px is the right rhythm.
Don't
- Don't introduce a second brand color. The system has exactly one accent (
{colors.primary}) and any expansion dilutes the brand identity. The turquoise on Smart Money is a single-product experiment, not a system token. - Don't use yellow for body text or large surface fills. It is for focal-point CTAs and headlines only.
- Don't use
{colors.trading-up}/{colors.trading-down}as background fills on cards. They are price-direction signals, expressed as text color or small badge fill — never as a card surface. - Don't soften display weight.
{typography.hero-display}and{typography.display-lg}are intentionally weight 700 — going to 400 reads as design-portfolio, not trading platform. - Don't add atmospheric gradients to the canvas (mesh, aurora, glow effects). Binance trusts color-block contrast — adding atmospheric depth muddies the trading-platform feel.
- Don't invert
{component.button-primary}'s text color. Black on yellow is the system's signature — white text on yellow loses contrast and brand recognition.
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Binance design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- primary: #fcd535
- primary-active: #f0b90b
- primary-disabled: #3a3a1f
- ink: #181a20
- body: #eaecef
- body-on-light: #181a20
- muted: #707a8a
- muted-strong: #929aa5
- hairline-on-light: #eaecef
- hairline-on-dark: #2b3139
Type:
- families: BinanceNova, -apple-system, BlinkMacSystemFont, BinancePlex
- scale: 12, 13, 14, 16, 20, 24, 32, 40, 48
- weights: 400, 500, 600, 700
Shape:
- radius: 2, 4, 6, 8, 12
Spacing: 4, 8, 10, 12, 14, 16, 20, 24, 32, 48
Rules:
- Reserve `{colors.primary}` (Binance Yellow) for primary actions, brand-claim headlines, and the wordmark. Never use it for secondary or decorative purposes — ye…
- Keep `{component.button-primary}` (yellow with black text) as the universal primary CTA across both dark and light modes. The same button appears identically on…
- Use `{component.button-trading-up}` (green) and `{component.button-trading-down}` (red) only for explicit Buy/Sell or Long/Short actions. Never use them for gen…
- Use BinancePlex for every number. Prices, volumes, percentages, stat counters — all BinancePlex. Mixing BinanceNova into a number ticker breaks the trading-plat…
- Choose canvas mode by surface intent: dark for marketing / product showcase / trading dashboards; light for transactional dialogs (buy / deposit / withdraw / fo…
- Anchor every editorial band with `{spacing.section}` (80px). Binance is denser than airy marketing sites — 80px is the right rhythm.
Avoid:
- Don't introduce a second brand color. The system has exactly one accent (`{colors.primary}`) and any expansion dilutes the brand identity. The turquoise on Smar…
- Don't use yellow for body text or large surface fills. It is for focal-point CTAs and headlines only.
- Don't use `{colors.trading-up}` / `{colors.trading-down}` as background fills on cards. They are price-direction signals, expressed as text color or small badge…
- Don't soften display weight. `{typography.hero-display}` and `{typography.display-lg}` are intentionally weight 700 — going to 400 reads as design-portfolio, no…
- Don't add atmospheric gradients to the canvas (mesh, aurora, glow effects). Binance trusts color-block contrast — adding atmospheric depth muddies the trading-p…
- Don't invert `{component.button-primary}`'s text color. Black on yellow is the system's signature — white text on yellow loses contrast and brand recognition.
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Brand & Accent
- Binance Yellow (
{colors.primary}— #FCD535): The single brand color. Used for primary CTA backgrounds, the wordmark, brand-claim headlines ("FUNDS ARE SAFU"), trust badges ("No.1 Trading Volume"), large stat numbers in{component.stat-callout-card}, and inline links. - Binance Yellow Active (
{colors.primary-active}— #f0b90b): The press / hover-darker variant. Slightly more saturated yellow. - Binance Yellow Disabled (
{colors.primary-disabled}— #3a3a1f): A desaturated dark-yellow used on disabled CTAs over dark canvas. - Accent Turquoise (
{colors.accent-turquoise}— #2dbdb6): A small secondary accent used very sparingly on Smart Money's "Check Now" CTA over dark surfaces. Treat as a single-product accent, not a system color.
Surface
The system has two canvas modes that map to product context:
Dark mode (marketing default):
- Canvas Dark (
{colors.canvas-dark}— #0b0e11): The primary page floor. Near-black with a slight warm tint — never pure black. - Surface Card Dark (
{colors.surface-card-dark}— #1e2329): Cards, navigation dropdowns, secondary buttons over dark canvas, markets table. - Surface Elevated Dark (
{colors.surface-elevated-dark}— #2b3139): One step lighter, used for nested cards, hovered nav items, and chart background panels.
Light mode (transactional):
- Canvas Light (
{colors.canvas-light}— #ffffff): The page floor on transactional pages (buy crypto, deposit forms, account dialogs). - Surface Soft Light (
{colors.surface-soft-light}— #fafafa): Footer surface and disabled states. - Surface Strong Light (
{colors.surface-strong-light}— #f5f5f5): Form input backgrounds in muted contexts.
Hairlines & Borders
- Hairline on Light (
{colors.hairline-on-light}— #eaecef): The 1px border tone on light surfaces. Dembrandt's frequency analysis confirms this as the highest-count token (1022 occurrences) — Binance uses hairlines liberally. - Hairline on Dark (
{colors.hairline-on-dark}— #2b3139): The 1px border tone on dark surfaces. Same hex as{colors.surface-elevated-dark}— borders feel like surface steps, not ink lines. - Border Strong (
{colors.border-strong}— #cdd1d6): A heavier border tone used on disabled secondary buttons.
Text
- Ink (
{colors.ink}— #181a20): The strongest text on light surfaces. Display headlines on transactional pages. - Body on Dark (
{colors.body}— #eaecef): Default running-text on dark canvas — deliberately not pure white, slightly cooler. - Body on Light (
{colors.body-on-light}— #181a20): Same as ink — light-mode body text reuses the ink token. - Muted (
{colors.muted}— #707a8a): Footer links, breadcrumbs, captions, table column headers. Works on both light and dark canvas. - Muted Strong (
{colors.muted-strong}— #929aa5): A second-tier muted for emphasized labels. - On Primary (
{colors.on-primary}— #181a20): Black text on yellow primary CTAs. - On Dark (
{colors.on-dark}— #ffffff): Pure white for high-contrast headlines on dark canvas.
Trading Semantics
- Trading Up (
{colors.trading-up}— #0ecb81): Price-up green, used as text color in tables, charts, and inline ticker arrows. Never as a button background. - Trading Down (
{colors.trading-down}— #f6465d): Price-down red. Same usage rules as trading-up.
Info / Focus
- Info (
{colors.info}— #3b82f6): Inline info badges and the focus-ring base. The Tailwind--tw-ring-colortoken surfaced by dembrandt — used on input focus.
Type scaleRead the full spec
Font Family
The system runs BinanceNova for display and body, and BinancePlex for numerical / financial data. Both are licensed Binance custom typefaces. The fallback stack walks -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif.
The split is functional, not decorative:
- BinanceNova → editorial type (headlines, paragraphs, button labels, nav)
- BinancePlex → tabular numerical type (prices, volumes, percentages, stat counters, prize pools)
Mixing them is not optional — BinanceNova on a price ticker would lose the trading-platform character; BinancePlex on a paragraph would feel monospace-cold.
Hierarchy
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
{typography.hero-display} | 64px | 700 | 1.1 | -1px | Homepage h1 ("316,258,026 USERS TRUST US") |
{typography.display-lg} | 48px | 700 | 1.1 | -0.5px | Brand-claim headlines ("FUNDS ARE SAFU"), prize-pool hero ("Futures Masters Arena") |
{typography.display-md} | 40px | 600 | 1.15 | -0.3px | Section heads on long-scroll pages |
{typography.display-sm} | 32px | 600 | 1.2 | 0 | CTA band headlines ("Secure, Low-Fee Trading on Binance") |
{typography.title-lg} | 24px | 600 | 1.3 | 0 | Sub-section titles |
{typography.title-md} | 20px | 600 | 1.35 | 0 | QR-promo cards, feature card titles |
{typography.title-sm} | 16px | 600 | 1.4 | 0 | Trust badges, FAQ rows, step labels |
{typography.number-display} | 40px | 700 | 1.1 | -0.3px | Big stat numbers (15,000 BTC, $429,423,449) — BinancePlex |
{typography.number-md} | 16px | 500 | 1.4 | 0 | Markets table prices, table cells — BinancePlex |
{typography.number-sm} | 14px | 500 | 1.4 | 0 | Inline prices, % changes — BinancePlex |
{typography.body-md} | 14px | 400 | 1.5 | 0 | Default running-text — BinanceNova |
{typography.body-sm} | 13px | 400 | 1.5 | 0 | Cookie consent text, footer body |
{typography.caption} | 12px | 500 | 1.4 | 0 | Small meta labels |
{typography.button} | 14px | 600 | 1 | 0 | Standard CTA button labels |
{typography.nav-link} | 14px | 500 | 1.4 | 0 | Top nav menu items |
Principles
Display sizes use weight 700 — heavier than most marketing systems. This makes sense for a trading platform: numbers need to read at a glance, headlines need to compete with chart visualizations and dense data tables. The system will not soften display weight to 400 the way Airtable or Stripe does.
{typography.number-display} and the smaller number variants always use BinancePlex, even when surrounding body type uses BinanceNova. Prices, volumes, and stat counters render in BinancePlex regardless of context — it is the system's "trustworthy number" voice.
Note on Font Substitutes
If BinanceNova and BinancePlex are unavailable, Inter is the closest open-source substitute for BinanceNova and JetBrains Mono or IBM Plex Sans is the closest substitute for BinancePlex (depending on whether tabular monospace fidelity matters more than humanist proportions). Adjust display headlines down by ~3% in line-height to match BinanceNova's tighter cap height.
Components and layoutRead the full spec
Top Navigation
top-nav-dark — The marketing top nav on dark canvas. 64px tall, {colors.canvas-dark} background. Carries the yellow Binance wordmark at left, primary horizontal menu (Buy Crypto, Markets, Trade, Futures, Earn, Square, Smart Money, Campaigns), right-side cluster with language selector, light/dark toggle, "Log In" text link, "Sign Up" {component.button-primary}. The wordmark uses {colors.primary} for "BINANCE" type.
top-nav-light — The transactional top nav on light canvas (buy crypto, deposit pages). Same layout but {colors.canvas-light} background and {colors.ink} menu items.
Buttons
button-primary — The signature primary CTA. Background {colors.primary}, text {colors.on-primary} (black on yellow — the system's iconic combination), type {typography.button}, padding 12px × 24px, height 40px, rounded {rounded.md} (6px). Press state: button-primary-active darkens to {colors.primary-active} (#f0b90b). Disabled state: button-primary-disabled desaturates to {colors.primary-disabled}.
button-primary-pill — A larger pill variant of the primary CTA used for top-of-page sign-up moments and product-launch heroes (Futures Arena "Join Now"). Same yellow + black combination, padding 14px × 32px, rounded {rounded.pill} (9999px). Use sparingly — the pill is a "this is THE action" signal.
button-secondary-on-dark — Used over {colors.canvas-dark} for less-emphasized actions. Background {colors.surface-card-dark}, text {colors.on-dark}, rounded {rounded.md}.
button-secondary-on-light — Light-canvas equivalent. Background {colors.canvas-light} with {colors.hairline-on-light} 1px border, text {colors.ink}.
button-tertiary-text — Inline text button with no background. Used for "Log In" in the top nav and inline "Read More" links.
button-trading-up — A solid green button used on price-up signals (Buy / Long actions). Background {colors.trading-up}, text {colors.on-dark}, rounded {rounded.sm} (4px), padding 8px × 20px. Smaller and tighter than {component.button-primary} because it appears in dense trading interfaces.
button-trading-down — Symmetric red variant for Sell / Short actions. Same shape, background {colors.trading-down}.
button-subscribe — Compact yellow CTA used in the Smart Money traders table to subscribe to a top trader. Smaller height (28px) and tighter padding than the primary CTA — fits inside dense table rows. Same yellow + black combination.
text-link — Inline body links in {colors.primary} (yellow on dark, also yellow on light). No underline by default. Type inherits {typography.body-md}.
Cards & Containers
hero-band-dark — Full-width dark band carrying the homepage h1 + sub-headline + dual CTA pair. Background {colors.canvas-dark}, padding {spacing.section} (80px). The h1 ("316,258,026 USERS TRUST US") uses {typography.hero-display} at 64px / 700 — the system's largest type role.
stat-callout-card — Inline yellow stat numbers (15,000 BTC, 7,488,223, $429,423,449). Transparent background, text {colors.primary}, type {typography.number-display} in BinancePlex. Used as a flat layout block, not a card with surface — the yellow text alone carries the visual weight.
trust-badge — Small dark cards holding "No.1 Customer Service" / "No.1 Trading Volume" claims. Background {colors.surface-card-dark}, rounded {rounded.lg} (8px), padding 16px × 20px. Yellow numeric or word badge ("No.1") sits next to a short label.
markets-table-card — The right-side markets table on the homepage. Background {colors.surface-card-dark}, rounded {rounded.xl} (12px), padding {spacing.lg} (24px). Carries a tab row (Popular / New listing / Top gainers), then a 5-column row of coin pairs with last price, 24h change %, action button. Each row uses {component.markets-row}.
markets-row — A single row inside the markets table. Transparent background, 12px vertical padding, hairline divider between rows. Coin icon (32×32) + symbol on left; last price in {typography.number-md} (BinancePlex); 24h change cell colored by direction ({component.price-up-cell} or {component.price-down-cell}); right-aligned chevron icon for "view detail."
price-up-cell / price-down-cell — Colored text cells for price changes. Transparent background, text {colors.trading-up} or {colors.trading-down}, type {typography.number-md} in BinancePlex. Always paired with a small triangle arrow indicating direction.
feature-photo-card — The "Trade on the go" section's photo strip — 3 lifestyle photos showing people using the Binance app. Background {colors.surface-card-dark}, rounded {rounded.xl}. Photos crop edge-to-edge, no internal padding around the image.
qr-promo-card — The "Trade on the go. Anywhere, anytime." card with QR code. Background {colors.surface-card-dark}, rounded {rounded.xl}, padding {spacing.xl} (32px). Contains an h2 in {typography.title-md}, a body paragraph, app store badges (iOS / Android), and a centered QR code.
funds-safu-band — The yellow-headlined "FUNDS ARE SAFU" band. Background stays {colors.canvas-dark}, but the headline uses {colors.primary} at {typography.display-lg}. Below the headline, three large {component.stat-callout-card} numbers anchor the band: total BTC reserves, users helped, funds recovered.
faq-row — A single FAQ accordion row. Transparent background, padding 20px vertical, hairline divider between rows. Closed state: question in {typography.title-sm} + chevron icon at right. Open state: question + answer body in {typography.body-md}.
Responsive behaviourRead the full spec
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.
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-binance {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #181a20;
--heading-color: #181a20;
--link-color: #8e7303;
--link-hover-color: #5c4b02;
--border-color: #d5d6d7;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(24,26,32,0.06);
--card-hover-shadow: 0 6px 18px rgba(24,26,32,0.12);
--header-bg: #181a20;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #696a6e;
--button-bg: #fcd535;
--button-text-color: #181a20;
--button-hover-bg: #faca04;
--button-border: none;
--button-border-radius: 6px;
--button-secondary-bg: #f1f1f2;
--button-secondary-text-color: #181a20;
--button-secondary-hover-bg: #e3e4e4;
--button-secondary-border: 1px solid #d5d6d7;
--prompt-bg: #f3f4f4;
--prompt-text-color: #181a20;
--base-font: var(--font-helvetica);
--heading-font: var(--font-inter);
--card-border-radius: 6px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- cal 82.1%
- ferrari 80.3%
- coinbase 80.0%
- clickhouse 78.6%
- notion 76.9%
Where this came from
- Source document
volt/design-md/binance/DESIGN.md· 38.7 KB- Repository
- VoltAgent/awesome-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.