Binance Futures

Overview

Binance Futures is a professional-grade cryptocurrency derivatives trading platform designed for active traders and institutional participants. The design system embodies 'Institutional Minimalism'—a philosophy that strips away decorative elements to expose pure functionality, using a deep dark palette (#181A20 background, #0B0E11 secondary) paired with high-contrast accent colors to communicate market sentiment and urgency. The interface evokes precision, trust, and speed: every pixel serves the trader's decision-making process, from real-time price feeds to order execution. The brand personality is direct, data-driven, and uncompromising: no hand-holding, no marketing fluff. Example sentence: 'BTCUSDT perpetual at 77,770.2 — mark price 77,782.9, funding rate 0.0064%.'

Colors

The color system is built on a high-contrast dark foundation with three strategic accent roles. **Primary (#F0B90B)** is the signature Binance yellow—used exclusively for call-to-action buttons (Register Now), active tab indicators, and key interactive states. Its lighter variant (#FCD535) provides hover feedback, while the dark surface (#202630) ensures legibility. **Secondary (#2EBD85)** represents bullish sentiment and positive price movement; it appears on buy orders, gains, and success states. **Tertiary (#F6465D)** signals bearish sentiment and risk; it marks sell orders, losses, and error states. The surface stack progresses from the deepest (#0B0E11, used for secondary backgrounds and modals) through the base (#181A20, page background) to the brightest container (#333B47, elevated

Typography

The type system uses BinanceNova exclusively, a custom geometric sans-serif optimized for screen legibility at small sizes and high-speed scanning. Display (56px, 700 weight) anchors hero sections and major price displays; Headline-lg (32px, 700 weight) structures page titles like 'BTCUSDT Perp'; Body-md (16px, 400 weight) carries all trading data and descriptions. Label-md (14px, 500 weight) is the workhorse for buttons, tabs, and form labels—its 20px line-height (1.25x) prevents cramping in dense trading interfaces. Letter-spacing is minimal (-0.02em on display, -0.01em on headlines) to reinforce the 'no wasted space' ethos. On small labels over busy backgrounds (e.g., price badges on candlestick charts), apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) to ensure readability without sacri

Layout

The layout uses a 12-column grid with a 1440px max-width container, but the actual trading interface often breaks this into asymmetric panels (chart on left, order book on right) to maximize information density. Gutter spacing is 16px on desktop, collapsing to 8px on mobile to preserve screen real estate. Section separation uses the lg spacing token (40px) between major regions (header, chart, order panel, trades list), while internal card padding uses md spacing (24px). The design embraces 'compact density'—no unnecessary whitespace, but breathing room is preserved around interactive elements (buttons get 10px vertical, 16px horizontal padding) to prevent mis-clicks. Container backgrounds (#202630) are separated from the base surface (#181A20) by a 1px outline border at rgba(67, 76, 90, 0

Elevation & Depth

Depth is achieved through a restrained shadow system and background color shifts rather than dramatic drop shadows. **Level 1 (Base)**: The page background (#181A20) with no shadow. **Level 2 (Standard Cards)**: Surface-container (#202630) with a 1px border at outline color (rgba(67, 76, 90, 0.5)) and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). **Level 3 (Modals/Elevated Panels)**: Surface-container-high (#29313D) with box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2). Hover states on cards lift to Level 3 with a smooth transition (150ms ease-out). The order book and price panels use Level 2 elevation

Shapes

The shape philosophy is 'Functional Precision'—border-radius values are chosen to balance approachability with technical credibility. **Buttons** use 6px (md radius) to soften hard corners while maintaining a structured, professional appearance; this is the most-touched interactive element and deserves the most polish. **Cards and containers** use 12px (lg radius) to create visual breathing room and distinguish them from the background. **Inputs and form fields** use 4px (DEFAULT radius) to signal 'data entry' without softness—these are functional, not decorative. **Badges and pills** use 9999

Components

Action Elements **Button-Primary** (40px height, 10px vertical / 16px horizontal padding, 6px radius, #F0B90B background, #202630 text) is the sole call-to-action for critical flows: Register Now, Place Order, Confirm Trade. On hover, the background shifts to #F0B90B (primary-fixed-dim) with a 150ms ease-out transition. On active/press, the background darkens to #E6A500 to provide tactile feedback. The label uses label-md typography (14px, 500 weight) in all caps for maximum visibility. **Button-Secondary** (32px height, 0px vertical / 10px horizontal padding, 4px radius, #29313D background, #EAECEF text) is used for secondary actions like 'Cross', 'Cancel', or 'More Options'. On hover, the background lifts to #333B47 (surface-container-highest) with the same 150ms transition. No shado

Do's and Don'ts

**Do**

• Do use #F0B90B (primary) exclusively for CTAs and active states—never for passive text or backgrounds.
• Do apply 16px gutter spacing between major layout regions (header, chart, order panel) to maintain breathing room in dense interfaces.
• Do use label-md (14px, 500 weight) for all button and tab labels to ensure consistency and scannability.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) on card hover to signal interactivity without breaking the dark aesthetic.
• Do use #2EBD85 for buy/bullish states and #F6465D for sell/bearish states to create instant market sentiment recognition.
• Do enforce 6px border-radius on all buttons and 12px on all cards to maintain the 'Functional Precision' shape language.

**Don't**

• Don't use primary yellow (#F0B90B) for body text, backgrounds, or decorative elements—reserve it for interactive CTAs only.
• Don't add blur effects, gradients, or glassmorphism overlays; the dark palette and precise shadows provide sufficient depth.
• Don't exceed 24px padding on cards or 16px on inputs; the design prioritizes information density for active traders.
• Don't mix border-radius values arbitrarily; stick to the defined scale (2px, 4px, 6px, 12px, 16px, 9999px).
• Don't use colors outside the defined palette for status indicators; always use #2EBD85 (buy) or #F6465D (sell), never custom greens or reds.
• Don't apply shadows to buttons; use background color shifts and border changes to signal state instead.