---
name: Binance
description: "This site is a prime example of a high-performance dark-mode interface for complex fintech applications, prioritizing data legibility and professional trust through its restrained but bold color palet"
version: alpha

colors:
  background: "#181a20"
  primary: "#eaecef"
  secondary: "#848e9c"
  tertiary: "#f0b90b"
  neutral: "#707a8a"
  bg-soft: "#2b3139"
  bg-quiet: "#333b47"
  line: "rgba(234,236,239,0.1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 56px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "-1px"
  h1:
    fontFamily: geometric-sans
    fontSize: 40px
    lineHeight: 1.2
    fontWeight: 600
    letterSpacing: "-0.5px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"
  caption:
    fontFamily: geometric-sans
    fontSize: 14px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 4px
  md: 8px
  lg: 16px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 32px

---

## Overview

The world's leading cryptocurrency exchange platform.

*A high-performance financial terminal with a commanding dark interface.*

## Colors

High contrast between a deep dark canvas and a vibrant yellow accent to guide critical user actions.

- **Background (`#181a20`)** — uses `bg` token
- **Primary text (`#eaecef`)** — uses `ink` token
- **Secondary text (`#848e9c`)** — uses `ink-soft` token
- **Accent (`#f0b90b`)** — uses `accent` token
- **Muted (`#707a8a`)** — uses `muted` token
- **Borders (`rgba(234,236,239,0.1)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** geometric-sans
- **Mono:** monospace

- Use geometric sans-serif for all primary display and body text.
- Ensure high contrast (white/gray) on dark backgrounds for maximum legibility.

## Layout

Standard 12-column grid with responsive behavior for mobile.

*Rhythm:* Standard 4px baseline grid for consistent spacing.

## Elevation & Depth

- rgba(0, 0, 0, 0.04) 0px 3px 6px 0px
- Borders: Thin 1px borders using rgba(234,236,239,0.1) to separate sections subtly.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 16px
- `pill`: 999px

## Components

- **button:** Primary buttons feature a solid yellow (#f0b90b) background with dark text. Secondary buttons use an outline or muted style.
- **card:** Dark-themed cards with subtle borders and slight radius (8px-16px) to group market data or news items.
- **chip:** Small, rounded elements (pill shape) for tags or status indicators.
- **input:** Dark background inputs with a focused yellow border for visibility.
- **hero:** Large, bold typography (up to 56px) highlighting key metrics like user counts.

## Do's and Don'ts

**Don't:**
- Don't use light or white backgrounds — screenshot shows a dark charcoal (#181a20) as the primary background.
- Don't use serif or display fonts — screenshot shows a clean geometric sans-serif for all typography.
- Don't use multiple competing accent colors — screenshot shows yellow (#f0b90b) as the sole dominant high-chroma color.
- Don't use large border-radius on primary elements — screenshot shows mostly small (4px-8px) or medium (16px) radii.
- Don't use drop shadows for primary hierarchy — screenshot shows reliance on color contrast and spacing instead.
- Don't use soft pastel tones — screenshot shows high-contrast, vibrant yellow against deep dark grays.

---

## System Prompt (paste into AI agent)

```
Binance is a professional cryptocurrency exchange platform utilizing a high-contrast dark mode interface. Its design DNA is defined by a deep charcoal background (#181a20) paired with a vibrant yellow accent (#f0b90b) for primary actions and highlights. The typography is a clean geometric sans-serif, emphasizing readability and authority through bold, large-scale displays. Critical rules include: never use light backgrounds, maintain the single-yellow accent system, and avoid decorative fonts. The layout uses a structured 12-column grid with subtle 1px borders to organize complex financial data. This combination ensures a focused, high-performance trading environment that feels both modern and secure.
```