Binance

Overview

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) and BinancePlex (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.

Colors

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.

Hairline