返回列表
行业: 金融科技与加密Website

Binance

Binance 以近黑色画布和标志性亮黄色构建高对比金融界面，结合清晰的交易涨跌色、紧凑的信息层级与双主题体系，传达高效、可信赖的交易体验。

Light UIDesign System
Binance 网站预览
设计系统
品牌色彩 · 24

primary

#FCD535

--color-primary

primary active

#F0B90B

--color-primary-active

primary disabled

#3A3A1F

--color-primary-disabled

ink

#181A20

--color-ink

body

#EAECEF

--color-body

body on light

#181A20

--color-body-on-light

muted

#707A8A

--color-muted

muted strong

#929AA5

--color-muted-strong

hairline on light

#EAECEF

--color-hairline-on-light

hairline on dark

#2B3139

--color-hairline-on-dark

border strong

#CDD1D6

--color-border-strong

canvas light

#FFFFFF

--color-canvas-light

canvas dark

#0B0E11

--color-canvas-dark

surface card dark

#1E2329

--color-surface-card-dark

surface elevated dark

#2B3139

--color-surface-elevated-dark

surface soft light

#FAFAFA

--color-surface-soft-light

surface strong light

#F5F5F5

--color-surface-strong-light

on primary

#181A20

--color-on-primary

on dark

#FFFFFF

--color-on-dark

trading up

#0ECB81

--color-trading-up

trading down

#F6465D

--color-trading-down

accent turquoise

#2DBDB6

--color-accent-turquoise

info

#3B82F6

--color-info

info ring

#3B82F6

--color-info-ring

字体系统

字体家族

BinanceNova, -apple-system, BlinkMacSystemFont, sans-serif / BinanceNova, sans-serif / BinancePlex, BinanceNova, sans-serif

字重

700600400500

备注

3 个字体家族，完整字阶、行高和字距见 DESIGN.md

标签
Light UIDesign System
设计文档

品牌设计系统的完整 Markdown 文档

Binance — Style Reference

> A confident financial-platform interface anchored on a deep near-black canvas, where Binance's iconic yellow (#FCD535) carries every primary CTA, brand accent, and value-claim moment. Type runs Binance's custom BinanceNova / BinancePlex stack at modest weights — the system trusts size and yellow voltage over bold weight. Marketing and product surfaces default to the dark theme; transactional surfaces (buy crypto, deposit, exchange) flip to a light theme that shares the same yellow CTAs and gray-blue hairlines. Trading green (up) and red (down) accents thread through both modes for price-direction signals.

**Theme:** light

**Source website:** [https://www.binance.com/](https://www.binance.com/)

Use the live official website to compare and validate this extracted snapshot. The current source website remains authoritative.

Tokens — Colors

| Name | Value | Token | Role |

|---|---|---|---|

| primary | `#fcd535` | `--color-primary` | primary role extracted from the source design |

| primary active | `#f0b90b` | `--color-primary-active` | primary active role extracted from the source design |

| primary disabled | `#3a3a1f` | `--color-primary-disabled` | primary disabled role extracted from the source design |

| ink | `#181a20` | `--color-ink` | ink role extracted from the source design |

| body | `#eaecef` | `--color-body` | body role extracted from the source design |

| body on light | `#181a20` | `--color-body-on-light` | body on light role extracted from the source design |

| muted | `#707a8a` | `--color-muted` | muted role extracted from the source design |

| muted strong | `#929aa5` | `--color-muted-strong` | muted strong role extracted from the source design |

| hairline on light | `#eaecef` | `--color-hairline-on-light` | hairline on light role extracted from the source design |

| hairline on dark | `#2b3139` | `--color-hairline-on-dark` | hairline on dark role extracted from the source design |

| border strong | `#cdd1d6` | `--color-border-strong` | border strong role extracted from the source design |

| canvas light | `#ffffff` | `--color-canvas-light` | canvas light role extracted from the source design |

| canvas dark | `#0b0e11` | `--color-canvas-dark` | canvas dark role extracted from the source design |

| surface card dark | `#1e2329` | `--color-surface-card-dark` | surface card dark role extracted from the source design |

| surface elevated dark | `#2b3139` | `--color-surface-elevated-dark` | surface elevated dark role extracted from the source design |

| surface soft light | `#fafafa` | `--color-surface-soft-light` | surface soft light role extracted from the source design |

| surface strong light | `#f5f5f5` | `--color-surface-strong-light` | surface strong light role extracted from the source design |

| on primary | `#181a20` | `--color-on-primary` | on primary role extracted from the source design |

| on dark | `#ffffff` | `--color-on-dark` | on dark role extracted from the source design |

| trading up | `#0ecb81` | `--color-trading-up` | trading up role extracted from the source design |

| trading down | `#f6465d` | `--color-trading-down` | trading down role extracted from the source design |

| accent turquoise | `#2dbdb6` | `--color-accent-turquoise` | accent turquoise role extracted from the source design |

| info | `#3b82f6` | `--color-info` | info role extracted from the source design |

| info ring | `#3b82f6` | `--color-info-ring` | info ring role extracted from the source design |

Tokens — Typography

BinanceNova, -apple-system, BlinkMacSystemFont, sans-serif · `--font-primary`

  • **Substitute:** Inter, system-ui, sans-serif
  • **Weights:** 700
  • **Sizes:** 64px
  • **Line height:** 1.1
  • **Letter spacing:** -1px
  • **Role:** Brand typography family observed across the documented type scale.

    • BinanceNova, sans-serif · `--font-family-2`

  • **Substitute:** Inter, system-ui, sans-serif
  • **Weights:** 700, 600, 400, 500
  • **Sizes:** 48px, 40px, 32px, 24px, 20px, 16px, 14px, 13px, 12px
  • **Line height:** 1.1, 1.15, 1.2, 1.3, 1.35, 1.4, 1.5, 1
  • **Letter spacing:** -0.5px, -0.3px, 0
  • **Role:** Brand typography family observed across the documented type scale.

    • BinancePlex, BinanceNova, sans-serif · `--font-family-3`

  • **Substitute:** Inter, system-ui, sans-serif
  • **Weights:** 700, 500
  • **Sizes:** 40px, 16px, 14px
  • **Line height:** 1.1, 1.4
  • **Letter spacing:** -0.3px, 0
  • **Role:** Brand typography family observed across the documented type scale.

    • Type Scale

    | Role | Size | Line Height | Letter Spacing | Token |

    |---|---|---|---|---|

    | hero-display | 64px | 1.1 | -1px | `--text-hero-display` |

    | display-lg | 48px | 1.1 | -0.5px | `--text-display-lg` |

    | display-md | 40px | 1.15 | -0.3px | `--text-display-md` |

    | display-sm | 32px | 1.2 | 0 | `--text-display-sm` |

    | title-lg | 24px | 1.3 | 0 | `--text-title-lg` |

    | title-md | 20px | 1.35 | 0 | `--text-title-md` |

    | title-sm | 16px | 1.4 | 0 | `--text-title-sm` |

    | number-display | 40px | 1.1 | -0.3px | `--text-number-display` |

    | number-md | 16px | 1.4 | 0 | `--text-number-md` |

    | number-sm | 14px | 1.4 | 0 | `--text-number-sm` |

    | body-md | 14px | 1.5 | 0 | `--text-body-md` |

    | body-sm | 13px | 1.5 | 0 | `--text-body-sm` |

    | caption | 12px | 1.4 | 0 | `--text-caption` |

    | button | 14px | 1 | 0 | `--text-button` |

    | nav-link | 14px | 1.4 | 0 | `--text-nav-link` |

    Tokens — Spacing & Shapes

    **Density:** comfortable

    Spacing Scale

    | Name | Value | Token |

    |---|---|---|

    | xxs | 4px | `--spacing-xxs` |

    | xs | 8px | `--spacing-xs` |

    | sm | 12px | `--spacing-sm` |

    | md | 16px | `--spacing-md` |

    | lg | 24px | `--spacing-lg` |

    | xl | 32px | `--spacing-xl` |

    | xxl | 48px | `--spacing-xxl` |

    | section | 80px | `--spacing-section` |

    Border Radius

    | Name | Value | Token |

    |---|---|---|

    | xs | 2px | `--radius-xs` |

    | sm | 4px | `--radius-sm` |

    | md | 6px | `--radius-md` |

    | lg | 8px | `--radius-lg` |

    | xl | 12px | `--radius-xl` |

    | pill | 9999px | `--radius-pill` |

    | full | 9999px | `--radius-full` |

    Layout

  • **Section gap:** 80px
  • **Card padding:** 24px
  • **Element gap:** 16px
  • **Max content width:** 1200px

    • Components

    button primary

    **Role:** button primary component

  • **backgroundColor:** `{colors.primary}`
  • **textColor:** `{colors.on-primary}`
  • **typography:** `{typography.button}`
  • **rounded:** `{rounded.md}`
  • **padding:** `12px 24px`
  • **height:** `40px`

    • button primary active

    **Role:** button primary active component

  • **backgroundColor:** `{colors.primary-active}`
  • **textColor:** `{colors.on-primary}`
  • **rounded:** `{rounded.md}`

    • button primary disabled

    **Role:** button primary disabled component

  • **backgroundColor:** `{colors.primary-disabled}`
  • **textColor:** `{colors.muted}`
  • **rounded:** `{rounded.md}`

    • button primary pill

    **Role:** button primary pill component

  • **backgroundColor:** `{colors.primary}`
  • **textColor:** `{colors.on-primary}`
  • **typography:** `{typography.button}`
  • **rounded:** `{rounded.pill}`
  • **padding:** `14px 32px`

    • button secondary on dark

    **Role:** button secondary on dark component

  • **backgroundColor:** `{colors.surface-card-dark}`
  • **textColor:** `{colors.on-dark}`
  • **typography:** `{typography.button}`
  • **rounded:** `{rounded.md}`
  • **padding:** `12px 24px`

    • button secondary on light

    **Role:** button secondary on light component

  • **backgroundColor:** `{colors.canvas-light}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.button}`
  • **rounded:** `{rounded.md}`
  • **padding:** `12px 24px`

    • button tertiary text

    **Role:** button tertiary text component

  • **backgroundColor:** `transparent`
  • **textColor:** `{colors.body}`
  • **typography:** `{typography.button}`

    • button trading up

    **Role:** button trading up component

  • **backgroundColor:** `{colors.trading-up}`
  • **textColor:** `{colors.on-dark}`
  • **typography:** `{typography.button}`
  • **rounded:** `{rounded.sm}`
  • **padding:** `8px 20px`

    • button trading down

    **Role:** button trading down component

  • **backgroundColor:** `{colors.trading-down}`
  • **textColor:** `{colors.on-dark}`
  • **typography:** `{typography.button}`
  • **rounded:** `{rounded.sm}`
  • **padding:** `8px 20px`

    • button subscribe

    **Role:** button subscribe component

  • **backgroundColor:** `{colors.primary}`
  • **textColor:** `{colors.on-primary}`
  • **typography:** `{typography.button}`
  • **rounded:** `{rounded.sm}`
  • **padding:** `6px 16px`
  • **height:** `28px`

    • text link

    **Role:** text link component

  • **backgroundColor:** `transparent`
  • **textColor:** `{colors.primary}`
  • **typography:** `{typography.body-md}`

    • top nav dark

    **Role:** top nav dark component

  • **backgroundColor:** `{colors.canvas-dark}`
  • **textColor:** `{colors.on-dark}`
  • **typography:** `{typography.nav-link}`
  • **height:** `64px`

    • top nav light

    **Role:** top nav light component

  • **backgroundColor:** `{colors.canvas-light}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.nav-link}`
  • **height:** `64px`

    • hero band dark

    **Role:** hero band dark component

  • **backgroundColor:** `{colors.canvas-dark}`
  • **textColor:** `{colors.on-dark}`
  • **typography:** `{typography.hero-display}`
  • **padding:** `80px`

    • stat callout card

    **Role:** stat callout card component

  • **backgroundColor:** `transparent`
  • **textColor:** `{colors.primary}`
  • **typography:** `{typography.number-display}`

    • trust badge

    **Role:** trust badge component

  • **backgroundColor:** `{colors.surface-card-dark}`
  • **textColor:** `{colors.on-dark}`
  • **typography:** `{typography.title-sm}`
  • **rounded:** `{rounded.lg}`
  • **padding:** `16px 20px`

    • markets table card

    **Role:** markets table card component

  • **backgroundColor:** `{colors.surface-card-dark}`
  • **textColor:** `{colors.on-dark}`
  • **typography:** `{typography.body-md}`
  • **rounded:** `{rounded.xl}`
  • **padding:** `24px`

    • markets row

    **Role:** markets row component

  • **backgroundColor:** `transparent`
  • **textColor:** `{colors.on-dark}`
  • **typography:** `{typography.number-md}`
  • **padding:** `12px 0`

    • price up cell

    **Role:** price up cell component

  • **backgroundColor:** `transparent`
  • **textColor:** `{colors.trading-up}`
  • **typography:** `{typography.number-md}`

    • price down cell

    **Role:** price down cell component

  • **backgroundColor:** `transparent`
  • **textColor:** `{colors.trading-down}`
  • **typography:** `{typography.number-md}`

    • search input on dark

    **Role:** search input on dark component

  • **backgroundColor:** `{colors.surface-card-dark}`
  • **textColor:** `{colors.on-dark}`
  • **typography:** `{typography.body-md}`
  • **rounded:** `{rounded.lg}`
  • **padding:** `10px 16px`
  • **height:** `40px`

    • text input on light

    **Role:** text input on light component

  • **backgroundColor:** `{colors.canvas-light}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body-md}`
  • **rounded:** `{rounded.md}`
  • **padding:** `10px 16px`
  • **height:** `40px`

    • funds safu band

    **Role:** funds safu band component

  • **backgroundColor:** `{colors.canvas-dark}`
  • **textColor:** `{colors.primary}`
  • **typography:** `{typography.display-lg}`
  • **padding:** `80px`

    • feature photo card

    **Role:** feature photo card component

  • **backgroundColor:** `{colors.surface-card-dark}`
  • **textColor:** `{colors.on-dark}`
  • **rounded:** `{rounded.xl}`

    • qr promo card

    **Role:** qr promo card component

  • **backgroundColor:** `{colors.surface-card-dark}`
  • **textColor:** `{colors.on-dark}`
  • **typography:** `{typography.title-md}`
  • **rounded:** `{rounded.xl}`
  • **padding:** `32px`

    • faq row

    **Role:** faq row component

  • **backgroundColor:** `transparent`
  • **textColor:** `{colors.on-dark}`
  • **typography:** `{typography.title-sm}`
  • **rounded:** `{rounded.md}`
  • **padding:** `20px 0`

    • cta band dark

    **Role:** cta band dark component

  • **backgroundColor:** `{colors.surface-card-dark}`
  • **textColor:** `{colors.on-dark}`
  • **typography:** `{typography.display-sm}`
  • **rounded:** `{rounded.xl}`
  • **padding:** `48px`

    • arena hero gradient

    **Role:** arena hero gradient component

  • **backgroundColor:** `{colors.canvas-dark}`
  • **textColor:** `{colors.primary}`
  • **typography:** `{typography.display-lg}`
  • **padding:** `80px`

    • cookie consent card

    **Role:** cookie consent card component

  • **backgroundColor:** `{colors.canvas-light}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body-sm}`
  • **rounded:** `{rounded.lg}`
  • **padding:** `16px`

    • buy crypto amount card

    **Role:** buy crypto amount card component

  • **backgroundColor:** `{colors.canvas-light}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.number-display}`
  • **rounded:** `{rounded.lg}`
  • **padding:** `24px`

    • steps card

    **Role:** steps card component

  • **backgroundColor:** `{colors.canvas-light}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.title-sm}`
  • **rounded:** `{rounded.lg}`
  • **padding:** `24px`

    • price chart card

    **Role:** price chart card component

  • **backgroundColor:** `{colors.canvas-light}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body-md}`
  • **rounded:** `{rounded.lg}`
  • **padding:** `24px`

    • conversion cell

    **Role:** conversion cell component

  • **backgroundColor:** `transparent`
  • **textColor:** `{colors.body-on-light}`
  • **typography:** `{typography.body-md}`

    • trader row

    **Role:** trader row component

  • **backgroundColor:** `transparent`
  • **textColor:** `{colors.on-dark}`
  • **typography:** `{typography.body-md}`
  • **padding:** `12px 0`

    • footer light

    **Role:** footer light component

  • **backgroundColor:** `{colors.surface-soft-light}`
  • **textColor:** `{colors.body-on-light}`
  • **typography:** `{typography.body-md}`
  • **padding:** `64px`

    • Do's and Don'ts

    Do

  • Use `--color-primary` for the brand's primary interaction treatment.
  • Keep page surfaces anchored to `--color-canvas-light`.
  • Preserve every typography style's documented size, line height, and letter spacing.
  • Compare major implementation decisions against [the live Binance website](https://www.binance.com/).

    • Don't

  • Do not introduce colors outside the documented color token set.
  • Do not replace `--color-ink` with an arbitrary neutral.
  • Do not flatten documented component states or spacing relationships.
  • Do not treat this extracted snapshot as newer than the live source website.

    • Layout

    Use the documented spacing scale and component geometry as the implementation baseline. Validate responsive composition and current page rhythm against [the live source](https://www.binance.com/).

    同类品牌推荐

    Kraken

    Light UI · Minimal

    Mastercard

    Light UI · Editorial

    Revolut

    Light UI · Playful

    Binance 设计系统 | 品牌模板 · ViboDesign