# Binance — Design System
> The world's leading cryptocurrency exchange platform.
- **Canonical:** https://uiuxskills.com/library/binance
- **Source:** https://www.binance.com
- **Category:** Fintech & Crypto
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 79%
- **License:** MIT
- **Last updated:** 2026-06-09T23:13:31.616Z

---

---
version: alpha
name: Binance
description: The world's leading cryptocurrency exchange platform.
tone: >-
  Professional, authoritative, and efficiency-focused. The tone is direct and utility-driven,
  emphasizing security and market leadership.
color-scheme: dark
colors:
  primary: "#F0B90B"
  surface: "#181A20"
  surface-container: "#202630"
  surface-bright: "#29313D"
  on-surface: "#EAECEF"
  on-primary: "#202630"
  success: "#2EBD85"
  error: "#F6465D"
  outline: "#333B47"
  focus-ring: "#F0B90B"
typography:
  display-lg:
    fontFamily: sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: sans-serif
    fontSize: 1.5rem
  headline-sm:
    fontFamily: sans-serif
    fontSize: 1.25rem
  body-md:
    fontFamily: sans-serif
    fontSize: 1rem
  body-sm:
    fontFamily: sans-serif
    fontSize: 0.875rem
  label-md:
    fontFamily: sans-serif
    fontSize: 0.875rem
  label-sm:
    fontFamily: sans-serif
    fontSize: 0.75rem
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: 100%
  button-primary-hover:
    backgroundColor: "#FCD535"
  button-secondary:
    backgroundColor: "{colors.surface-bright}"
    textColor: "{colors.on-surface}"
  card:
    backgroundColor: "{colors.surface-container}"
    rounded: "{rounded.lg}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface-container}"
  input-field:
    backgroundColor: "{colors.surface-bright}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "{colors.primary}"
  badge:
    backgroundColor: "{colors.surface-bright}"
    textColor: "{colors.primary}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-success:
    textColor: "{colors.success}"
  badge-error:
    backgroundColor: "{colors.error}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  card-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 16px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 2px 4px rgba(0,0,0,0.08)
  lg: 0 4px 8px rgba(0,0,0,0.10)
---

## Overview

Binance is a high-performance, dark-themed financial platform designed for professional crypto trading. Its visual identity is defined by a high-contrast palette of deep charcoal surfaces accented by a signature "Binance Yellow" for primary actions, conveying a sense of speed, reliability, and institutional scale.

## Colors

The color strategy relies on a dark-mode-first approach, using subtle shifts in background tones to create hierarchy and high-contrast accents to guide user action.

*   Primary (#F0B90B): Signature Binance yellow used for primary CTAs and brand highlights.
*   Surface (#181A20): Base background color for the platform.
*   Surface-container (#202630): Secondary background for cards and containers.
*   Surface-bright (#29313D): Brightened surface for interactive elements and inputs.
*   On-surface (#EAECEF): Primary text color on dark backgrounds.
*   On-primary (#202630): Text color for buttons using the primary yellow background.
*   Success (#2EBD85): Used for positive market trends and buy actions.
*   Error (#F6465D): Used for negative market trends and sell actions.
*   Outline (#333B47): Border color for containers and dividers.
*   Focus-ring (inferred) (#F0B90B): Focus state indicator for inputs.

## Typography

Typography is strictly utilitarian, utilizing a clean sans-serif family to ensure maximum readability for dense financial data.

*   Display-lg (inferred): Used for hero headlines.
*   Headline-md (inferred): Used for card titles.
*   Body-md: Standard body text.
*   Body-sm: Secondary text and labels.
*   Label-md (inferred): Button labels.

## Layout

The platform utilizes a grid-based layout with a max-width container to maintain readability, using a 16px (md) base unit for spacing. The page follows a logical flow from navigation and hero, through market data and social proof, ending with utility sections like FAQs and the footer. The design is mobile-first, with navigation collapsing into a drawer on smaller viewports.

## Elevation & Depth

Depth is conveyed through subtle surface color variations rather than heavy shadows, maintaining a flat, modern financial interface.

*   Elevation.sm (inferred): Subtle lift for small UI elements.
*   Elevation.md (inferred): Standard card lift.
*   Elevation.lg (inferred): Modal or overlay depth.

## Shapes

The design system uses a consistent {rounded.lg} radius for cards and containers, creating a balanced, approachable look while maintaining professional sharpness. Smaller elements like badges use {rounded.sm} to maintain a compact footprint.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
Primary buttons use {colors.primary} with {typography.label-md} to drive conversions. Secondary buttons utilize {colors.surface-bright} to provide a neutral alternative.

### Card
Cards are the primary container for data, utilizing {colors.surface-container} and {rounded.lg} to group information. They should maintain a clean border using {colors.outline}.

### Input Field
Inputs feature a {colors.surface-bright} background and {rounded.md} corners. When active, the border shifts to {colors.focus-ring} to provide clear visual feedback.

### Badge
Badges use {colors.surface-bright} for background and {colors.primary} for text. Success and error variants use specific semantic colors to indicate status.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use {colors.primary} for primary call-to-action buttons. | Do not use {colors.primary} for secondary or tertiary buttons. |
| Use {colors.success} for positive price changes and buy actions. | Do not mix {colors.success} and {colors.error} in ways that confuse market direction. |
| Use {colors.error} for negative price changes and sell actions. | Avoid using high-elevation shadows on cards. |
| Apply {rounded.lg} to all card components. | Do not use {typography.display-lg} for body content. |
| Use {colors.on-surface} for body text on {colors.surface} backgrounds. | Do not use low-contrast text on {colors.surface-container} backgrounds. |
| Use {colors.outline} for all dividers and container borders. | Do not use non-standard border radii on interactive components. |
| Use {typography.label-md} for primary button labels. | Do not use {typography.display-md} for small UI captions. |
| Use {colors.surface-bright} for input field backgrounds. | Do not use {colors.surface} for input field backgrounds. |

## Content Style

CTA labels should be imperative verbs in sentence case, such as "Sign Up" or "View All Coins." This keeps the interface direct and action-oriented.

Headings are phrased to be benefit-oriented and authoritative, focusing on the platform's market leadership and utility.

Copy density is designed to be scannable. Use short paragraphs and frequent lists or data-heavy tables to ensure users can digest complex financial information quickly.

## Imagery & Icons

The imagery style is mixed, utilizing a combination of high-quality brand illustrations and clean, flat-style icons. Icons are monochromatic or two-tone, specifically selected to match the dark aesthetic of the platform. Logo lockups should remain clear and avoid competing with primary action colors.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Binance, a professional enterprise crypto exchange with a direct, utility-driven tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its YAML token name — `{colors.primary}`, `{typography.body-md}`, `{rounded.lg}` — never hardcode hex values, pixel sizes, or font stacks.
2. Use only the component variants defined under `components:`. Do not invent new button styles, badge types, or card variants the spec does not list.
3. Follow the Elevation & Depth narrative: convey depth through surface-color shifts (`{colors.surface}` → `{colors.surface-container}` → `{colors.surface-bright}`), not heavy shadows. Reserve `{elevation.lg}` for modals and overlays only.
4. Apply `{rounded.lg}` to cards, `{rounded.md}` to inputs and secondary containers, and `{rounded.sm}` to compact badges. Do not use non-standard radii on interactive elements.
5. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it, surface the conflict explicitly before proceeding.

## Output contract

**Must:**
- Use all tokens by name on every generated component.
- Include hover, focus, and disabled states whenever the spec defines them (e.g., `button-primary-hover`, `input-field-focus`).
- Apply `{spacing.md}` (16px) as the base unit; use the full `{spacing.xs}` through `{spacing.2xl}` scale for all padding and gaps.
- Use `{colors.success}` exclusively for positive/buy signals and `{colors.error}` exclusively for negative/sell signals.
- Write CTA labels as imperative verbs in sentence case per the Content Style section.

**Must NOT:**
- Invent colors, radii, or type sizes outside the spec.
- Use generic utility defaults (e.g., `gray-500`, `rounded-md` as a literal string) when a brand token exists.
- Apply `{colors.primary}` to secondary or tertiary buttons.
- Add emoji, filler copy, or marketing language.
- Rewrite existing page copy, button labels, or headings, or alter navigation structure as a side effect of applying tokens.

## When in doubt
- If the spec does not define a value, ask the user before inventing one.
- For ambiguous backgrounds, default to `{colors.surface-container}`; for text on dark surfaces, default to `{colors.on-surface}`.
- Tokens marked "(inferred)" are visual approximations. If an authoritative theme file or component source exists, those values supersede the spec.
- For unspecified breakpoints, apply mobile-first layout with one breakpoint at 768px, consistent with the Layout section.
- Prefer composing existing spec components over introducing any new token.