A confident financial-platform interface anchored on a deep near-black canvas, where Binance's iconic yellow carries every primary CTA, brand accent, and value-claim moment.
Binance Yellow does all brand voltage. Marketing pages default dark, transactional pages flip light — but yellow CTAs and trading green/red thread through both modes unchanged.
Display + body run BinanceNova; numerical / financial data run BinancePlex (preview uses Inter + JetBrains Mono as substitutes). The split is functional — every price ticker, stat counter, and percentage uses the monospace-tuned numeric face.
Primary stays identical across dark and light surfaces — yellow with black text is the system's universal action signal. Trading green and red signal Buy/Sell direction; never general confirm/cancel.
Stat numbers render in BinancePlex with yellow ink — no surface card, just the numeral and a small label below.
Right-rail markets table on the homepage. BinancePlex prices, green/red change cells, hairline dividers between rows.
Available on iOS and Android. Scan to download.
Buy crypto, deposit, withdraw, conversion pages render on light canvas. Yellow CTAs and trading green/red stay identical.
Choose how much you want to buy and pick your preferred payment method.
Review the conversion rate, fees, and order details before confirming.
Your crypto lands in your spot wallet within minutes.
Dense table row with avatar, ROI %, AUM, mint date, and yellow subscribe CTA. The 28px subscribe button fits the table density.
Search input on dark canvas (homepage hero) at 40px height with 8px radius. Light-mode inputs match transactional surfaces.
Section rhythm 80px — slightly tighter than airy marketing sites because Binance mixes marketing bands with product surfaces.
6px primary CTAs, 8px content cards, 12px elevated containers, pill for top-of-page actions.
No drop shadows, no glassmorphism. Depth comes from the lightness step between canvas-dark (#0b0e11) and surface-card-dark (#1e2329).
No shadow. Body sections, top nav, hero bands, footer.
1px hairline. Inputs, table dividers, FAQ separators.
surface-card-dark over canvas-dark — 12-step lightness jump.
surface-elevated-dark for nested cards inside markets-table-card.
canvas-light over surface-soft-light — same flat philosophy.
0 0 0 2px info-ring at 50% alpha. Inputs and buttons.
Markets table reflows to a horizontally-scrollable card list on mobile. The hero h1 shrinks proportionally rather than wrapping.
| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 768px | Hamburger nav; hero h1 ~36px; markets table → horizontal-scroll cards; demo grids 1-up; footer 6 cols → 2. |
| Tablet | 768–1024px | Top nav tightens, secondary items in "More"; markets 2-up; pricing/feature grids 2-up. |
| Desktop | 1024–1440px | Full top-nav; 5-col markets table; trading dashboards in 8/4 split (chart + side rail). |
| Wide | > 1440px | Same as desktop with more outer breathing room; max content 1280-1440px. |