packages/shared-skills/skills/frontend/references/design/binance.md
Binance.US radiates the polished urgency of a digital trading floor — a space where money moves and decisions happen in seconds. The design is a two-tone composition that alternates between stark white trading surfaces and deep near-black panels (#222126), creating a visual rhythm that mirrors the bull-and-bear duality of crypto markets. Binance Yellow (#F0B90B) cuts through this monochrome foundation like a gold ingot on a steel desk — unmistakable, confident, and engineered to guide every eye toward the next action.
The interface speaks the language of fintech trust. Custom BinancePlex typography gives every headline and data point a proprietary gravitas, while generous whitespace and restrained decoration keep the focus on numbers, charts, and call-to-action buttons. The design avoids visual complexity in favor of operational clarity — every element exists to either inform or convert. Product screenshots of the mobile trading app dominate the middle sections, presented on floating device mockups against golden gradients, reinforcing that this is a platform you carry with you.
What makes Binance.US distinctive is the tension between warmth and precision. The golden yellow brand color — warm, optimistic, almost celebratory — lives inside a system of cold, clinical grey text and razor-sharp borders. This isn't a playful fintech like Robinhood or a corporate fortress like Fidelity — it's a crypto-native platform that wraps cutting-edge trading technology in the visual language of established finance.
Key Characteristics:
#F0B90B) as the singular accent color driving all primary actions#F0B90B): The signature — primary CTA backgrounds, brand accent, active states, link color. The single most important color in the system#FFD000): Lighter gold variant used for pill button borders, secondary CTA fills, and golden gradient highlights#F8D12F): Soft gold for gradient endpoints and hover-adjacent states#D0980B): Darkened yellow for active/pressed button states — the "clicked" gold#1EAEDB): Accessibility focus state — appears on hover and focus for all interactive elements#FFFFFF): Primary page canvas, card surfaces, light section backgrounds#F5F5F5): Subtle surface differentiation, input backgrounds, alternating row fills#222126): Dark section backgrounds, footer canvas, "Trusted by millions" panel — a near-black with a faint purple undertone#2B2F36): Card surfaces within dark sections, elevated dark containers#1E2026): Button text on yellow backgrounds, deepest text color on light surfaces#1E2026): Main body text, headings on light backgrounds — near-black with slight warmth#32313A): Navigation links, descriptive copy on light surfaces#848E9C): Tertiary text, metadata, timestamps, footer links — the workhorse grey#686A6C): Disabled-adjacent text, subtle labels#777E90): Secondary navigation links, less prominent footer text#1A1A1A): Universal link hover color — text darkens on hover#0ECB81): Positive price movement, success states, "up" indicators#F6465D): Negative price movement, error states, "down" indicators#E6E8EA): Standard card and section borders on light backgrounds#FFD000): Active/selected state borders, pill button outlines#F0B90B center to #F8D12F edge — used behind product mockup screenshots#222126 to transparent — used for dark section transitionsPrimary: BinancePlex (custom proprietary typeface designed by Binance)
System: system-ui stack for cookie banners and third-party UI
| Role | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|
| Display Hero | 60px | 700 | 1.08 | — | Hero headlines, maximum impact |
| Display Secondary | 34px | 700 | 1.00 | — | Section titles on dark backgrounds |
| Heading 1 | 28px | 500 | 1.00 | — | Major section headings |
| Heading 2 | 24px | 700 | 1.00 | — | Feature headings, card titles |
| Heading 3 | 24px | 600 | 1.00 | — | Subsection headings |
| Heading 4 | 20px | 600 | 1.25 | — | Card headings, feature labels |
| Body Large | 20px | 500 | 1.50 | — | Hero subtitle, lead paragraphs |
| Body | 16px | 500 | 1.50 | — | Standard body text |
| Body SemiBold | 16px | 600 | 1.30 | — | Emphasized body, nav links |
| Body Bold | 16px | 700 | 1.50 | — | Strong emphasis text |
| Button | 16px | 600 | 1.25 | 0.16px | Primary button text |
| Button Small | 14.4px | 600 | 1.60 | 0.72px | Secondary buttons, wider tracking |
| Caption | 14px | 500 | 1.43 | — | Metadata, labels, prices |
| Caption SemiBold | 14px | 600 | 1.50 | — | Emphasized captions |
| Small | 12px | 600 | 1.00 | — | Tags, badges, fine print |
| Tiny | 11px | 500 | 1.00 | — | Micro-labels, chart annotations |
BinancePlex is engineered for data-dense interfaces where numbers and text must coexist at multiple scales. The typeface has tabular numerals by default — critical for price columns and portfolio values that need perfect vertical alignment. Weights lean toward the heavier end (500-700), giving the interface a sense of authority and confidence that's essential for a financial platform. The tight line-heights (1.00-1.25) on headings create a stacked, compressed feel that mirrors the density of trading dashboards, while body text opens up to 1.50 for comfortable reading of educational and marketing content.
Primary (Yellow Fill)
#F0B90B)#1E2026), 16px/600, BinancePlex#1EAEDB) with white text#D0980B)#1EAEDB) bg, 1px black border, 2px black outline, opacity 0.9Primary Pill (Gold)
#FFD000)#FFFFFF)#FFD000rgb(153,153,153) 0px 2px 10px -3px#1EAEDB) with white textSecondary (White Outlined)
#FFFFFF)#F0B90B)#F0B90Brgb(153,153,153) 0px 2px 10px -3pxDisabled
#E6E8EA#848E9C#FFFFFF) on light sections, Dark Card (#2B2F36) on dark sections#E6E8EA on light cardsrgba(32, 32, 37, 0.05) 0px 3px 5px 0px — barely visible, trust-buildingrgba(8, 8, 8, 0.05) 0px 3px 5px 5px#FFFFFF) or Snow (#F5F5F5)#1E2026)#E6E8EA#000000), 1px outline#848E9C)#FFFFFF), sticky#32313A#1A1A1ABase unit: 8px
| Token | Value | Use |
|---|---|---|
| space-1 | 4px | Tight inline gaps, icon padding |
| space-2 | 8px | Base unit, button icon gaps, tight margins |
| space-3 | 12px | Card internal padding, input padding |
| space-4 | 16px | Standard padding, section margins |
| space-5 | 20px | Card gaps, medium padding |
| space-6 | 24px | Section internal padding |
| space-7 | 32px | Section breaks, large padding |
| space-8 | 48px | Major section padding |
| space-9 | 64px | Hero section padding |
| space-10 | 80px | Large section spacing |
Binance.US uses whitespace as a trust signal. Generous padding around the hero section and between content blocks creates a sense of spaciousness that counters the information density typically associated with crypto exchanges. The light sections breathe — wide margins around headlines and ample spacing between cards — while dark sections compress, packing features into tighter grids to convey capability and depth. The overall rhythm alternates between "inviting entry" (light, spacious) and "deep functionality" (dark, dense).
| Value | Context |
|---|---|
| 1px | Subtle edge softening, fine UI elements |
| 2px | Close buttons, micro-interactive elements |
| 6px | Primary buttons (non-pill), small cards |
| 8px | Form inputs, data cards, image containers |
| 10px | Navigation pills, tag containers |
| 12px | Content cards, feature containers |
| 24px | Video containers, hero imagery, large cards |
| 50px | Pill buttons (CTA), search inputs, full-round elements |
| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow, solid background | Default for inline elements |
| Subtle | rgba(32, 32, 37, 0.05) 0px 3px 5px | Content cards, resting state |
| Medium | rgba(8, 8, 8, 0.05) 0px 3px 5px 5px | Hovered cards, elevated containers |
| Pill Shadow | rgb(153,153,153) 0px 2px 10px -3px | Pill CTA buttons, floating actions |
| Heavy | rgba(0,0,0) 0px 32px 37px | Modal overlays, dropdown menus |
Binance.US uses a whisper-light shadow system. Card shadows are barely perceptible at 5% opacity — they exist not for dramatic depth but as subtle ground cues that keep cards from feeling pasted onto the surface. The pill button shadow is the exception: slightly more visible to give CTAs a "floating" quality that invites clicks. The philosophy is pragmatic — in a financial context, heavy shadows feel frivolous, while no shadows at all feel flat and untrustworthy. The 5% sweet spot communicates professionalism.
#222126 sections#F0B90B) exclusively for primary CTAs and brand accents — it's the single point of color#848E9C) for all secondary/metadata text — the universal quiet voice#222126 should feel authoritative, not grey| Name | Width | Key Changes |
|---|---|---|
| Mobile | <425px | Single column, stacked hero, hamburger nav, 16px padding |
| Small Mobile | 425-599px | Wider mobile layout, price ticker wraps |
| Tablet Small | 600-768px | 2-column feature grid begins |
| Tablet | 769-896px | Hero side-by-side layout begins |
| Desktop Small | 897-1024px | Full nav expands, 3-column features |
| Desktop | 1024-1280px | Full layout, max content width |
| Large Desktop | 1280-1440px | Increased margins, centered container |
| XL Desktop | >1440px | Max-width container (1200px) with expanded margins |
#F0B90B)#FFD000)#FFFFFF)#222126)#1E2026)#848E9C)#E6E8EA)#0ECB81)#F6465D)When refining existing screens generated with this design system: