{
  "$schema": "https://tr.designtokens.org/format/",
  "$description": "Design tokens for Binance",
  "meta": {
    "name": "Binance",
    "description": "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"
  },
  "color": {
    "primary": {
      "$value": "#fcd535",
      "$type": "color",
      "$description": "Use for the primary role."
    },
    "primary-active": {
      "$value": "#f0b90b",
      "$type": "color",
      "$description": "Use for the primary active role."
    },
    "primary-disabled": {
      "$value": "#3a3a1f",
      "$type": "color",
      "$description": "Use for the primary disabled role."
    },
    "ink": {
      "$value": "#181a20",
      "$type": "color",
      "$description": "Use for the ink role."
    },
    "body": {
      "$value": "#eaecef",
      "$type": "color",
      "$description": "Use for the body role."
    },
    "body-on-light": {
      "$value": "#181a20",
      "$type": "color",
      "$description": "Use for the body on light role."
    },
    "muted": {
      "$value": "#707a8a",
      "$type": "color",
      "$description": "Use for the muted role."
    },
    "muted-strong": {
      "$value": "#929aa5",
      "$type": "color",
      "$description": "Use for the muted strong role."
    },
    "hairline-on-light": {
      "$value": "#eaecef",
      "$type": "color",
      "$description": "Use for the hairline on light role."
    },
    "hairline-on-dark": {
      "$value": "#2b3139",
      "$type": "color",
      "$description": "Use for the hairline on dark role."
    },
    "border-strong": {
      "$value": "#cdd1d6",
      "$type": "color",
      "$description": "Use for the border strong role."
    },
    "canvas-light": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the canvas light role."
    },
    "canvas-dark": {
      "$value": "#0b0e11",
      "$type": "color",
      "$description": "Use for the canvas dark role."
    },
    "surface-card-dark": {
      "$value": "#1e2329",
      "$type": "color",
      "$description": "Use for the surface card dark role."
    },
    "surface-elevated-dark": {
      "$value": "#2b3139",
      "$type": "color",
      "$description": "Use for the surface elevated dark role."
    },
    "surface-soft-light": {
      "$value": "#fafafa",
      "$type": "color",
      "$description": "Use for the surface soft light role."
    },
    "surface-strong-light": {
      "$value": "#f5f5f5",
      "$type": "color",
      "$description": "Use for the surface strong light role."
    },
    "on-primary": {
      "$value": "#181a20",
      "$type": "color",
      "$description": "Use for the on primary role."
    },
    "on-dark": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the on dark role."
    },
    "trading-up": {
      "$value": "#0ecb81",
      "$type": "color",
      "$description": "Use for the trading up role."
    },
    "trading-down": {
      "$value": "#f6465d",
      "$type": "color",
      "$description": "Use for the trading down role."
    },
    "accent-turquoise": {
      "$value": "#2dbdb6",
      "$type": "color",
      "$description": "Use for the accent turquoise role."
    },
    "info": {
      "$value": "#3b82f6",
      "$type": "color",
      "$description": "Use for the info role."
    },
    "info-ring": {
      "$value": "#3b82f6",
      "$type": "color",
      "$description": "Use for the info ring role."
    }
  },
  "typography": {
    "hero-display": {
      "$value": {
        "fontFamily": "BinanceNova, -apple-system, BlinkMacSystemFont, sans-serif",
        "fontSize": "64px",
        "fontWeight": 700,
        "lineHeight": 1.1,
        "letterSpacing": "-1px"
      },
      "$type": "typography",
      "$description": "Typography style for hero display."
    },
    "display-lg": {
      "$value": {
        "fontFamily": "BinanceNova, sans-serif",
        "fontSize": "48px",
        "fontWeight": 700,
        "lineHeight": 1.1,
        "letterSpacing": "-0.5px"
      },
      "$type": "typography",
      "$description": "Typography style for display lg."
    },
    "display-md": {
      "$value": {
        "fontFamily": "BinanceNova, sans-serif",
        "fontSize": "40px",
        "fontWeight": 600,
        "lineHeight": 1.15,
        "letterSpacing": "-0.3px"
      },
      "$type": "typography",
      "$description": "Typography style for display md."
    },
    "display-sm": {
      "$value": {
        "fontFamily": "BinanceNova, sans-serif",
        "fontSize": "32px",
        "fontWeight": 600,
        "lineHeight": 1.2,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for display sm."
    },
    "title-lg": {
      "$value": {
        "fontFamily": "BinanceNova, sans-serif",
        "fontSize": "24px",
        "fontWeight": 600,
        "lineHeight": 1.3,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for title lg."
    },
    "title-md": {
      "$value": {
        "fontFamily": "BinanceNova, sans-serif",
        "fontSize": "20px",
        "fontWeight": 600,
        "lineHeight": 1.35,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for title md."
    },
    "title-sm": {
      "$value": {
        "fontFamily": "BinanceNova, sans-serif",
        "fontSize": "16px",
        "fontWeight": 600,
        "lineHeight": 1.4,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for title sm."
    },
    "number-display": {
      "$value": {
        "fontFamily": "BinancePlex, BinanceNova, sans-serif",
        "fontSize": "40px",
        "fontWeight": 700,
        "lineHeight": 1.1,
        "letterSpacing": "-0.3px"
      },
      "$type": "typography",
      "$description": "Typography style for number display."
    },
    "number-md": {
      "$value": {
        "fontFamily": "BinancePlex, BinanceNova, sans-serif",
        "fontSize": "16px",
        "fontWeight": 500,
        "lineHeight": 1.4,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for number md."
    },
    "number-sm": {
      "$value": {
        "fontFamily": "BinancePlex, BinanceNova, sans-serif",
        "fontSize": "14px",
        "fontWeight": 500,
        "lineHeight": 1.4,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for number sm."
    },
    "body-md": {
      "$value": {
        "fontFamily": "BinanceNova, sans-serif",
        "fontSize": "14px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for body md."
    },
    "body-sm": {
      "$value": {
        "fontFamily": "BinanceNova, sans-serif",
        "fontSize": "13px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for body sm."
    },
    "caption": {
      "$value": {
        "fontFamily": "BinanceNova, sans-serif",
        "fontSize": "12px",
        "fontWeight": 500,
        "lineHeight": 1.4,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for caption."
    },
    "button": {
      "$value": {
        "fontFamily": "BinanceNova, sans-serif",
        "fontSize": "14px",
        "fontWeight": 600,
        "lineHeight": 1,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for button."
    },
    "nav-link": {
      "$value": {
        "fontFamily": "BinanceNova, sans-serif",
        "fontSize": "14px",
        "fontWeight": 500,
        "lineHeight": 1.4,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for nav link."
    }
  },
  "spacing": {
    "xxs": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Spacing step xxs."
    },
    "xs": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Spacing step xs."
    },
    "sm": {
      "$value": "12px",
      "$type": "dimension",
      "$description": "Spacing step sm."
    },
    "md": {
      "$value": "16px",
      "$type": "dimension",
      "$description": "Spacing step md."
    },
    "lg": {
      "$value": "24px",
      "$type": "dimension",
      "$description": "Spacing step lg."
    },
    "xl": {
      "$value": "32px",
      "$type": "dimension",
      "$description": "Spacing step xl."
    },
    "xxl": {
      "$value": "48px",
      "$type": "dimension",
      "$description": "Spacing step xxl."
    },
    "section": {
      "$value": "80px",
      "$type": "dimension",
      "$description": "Spacing step section."
    }
  },
  "radius": {
    "xs": {
      "$value": "2px",
      "$type": "dimension",
      "$description": "Border radius xs."
    },
    "sm": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Border radius sm."
    },
    "md": {
      "$value": "6px",
      "$type": "dimension",
      "$description": "Border radius md."
    },
    "lg": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Border radius lg."
    },
    "xl": {
      "$value": "12px",
      "$type": "dimension",
      "$description": "Border radius xl."
    },
    "pill": {
      "$value": "9999px",
      "$type": "dimension",
      "$description": "Border radius pill."
    },
    "full": {
      "$value": "9999px",
      "$type": "dimension",
      "$description": "Border radius full."
    }
  },
  "shadow": {},
  "$extensions": {
    "com.design-md-editor.source": {
      "url": "https://www.binance.com/",
      "note": "Official brand website used for visual comparison."
    }
  }
}