Three-Layer Architecture
The Binance US design system employs a sophisticated three-layer token architecture that ensures scalability and maintainability across the entire platform.
Core Layer
The foundation consists of Core Tokens - the raw values that define the system's DNA:
Color Palette: Emerald (primary green), Red-velvet, Yellow (brand accent), Tech-gray for neutrals, plus Dark and Light base colors
Typography Scale: Comprehensive sizing system from large display text to small interface labels
Foundational Values: Base measurements, spacing, and visual propertie
Mapped Layer
Mapped Tokens bridge core values to specific component contexts:
Component-specific applications like badges, buttons, chips, inputs
Contextual variations for notifications, selectors, toggles, and snackbars
Ensures consistent implementation while allowing component flexibility
Semantic Layer
Semantic Tokens provide meaning-based naming for intuitive usage:
Functional Colors: Border, brand, destructive, error, warning states
Background/Foreground: Context-aware surface and content relationships
Text Hierarchy: Complete typographic scale for content organization
Icon System: Consistent iconography tokens across all interface elements
This layered approach enables designers and developers to work with tokens at the appropriate level of abstraction - from foundational core values to specific semantic applications - ensuring both consistency and flexibility in implementation.
The design system includes a comprehensive set of components built on the established design tokens. Following Atomic Design methodology, components are organized in a hierarchical structure from basic atoms to complex organisms, ensuring scalability and reusability across the platform.
Each component maintains consistency across multiple platforms while following the three-layer token architecture for systematic implementation.
Component Documentation
Each component follows a standardized documentation structure ensuring clear communication between design and development teams:
Anatomy & Properties
Layout & Spacing
Visual component breakdown with detailed specifications
Node selection views with highlighted dimensions
Multiple layout contexts demonstrating component flexibility
Technical Specifications
Comprehensive styling variables and properties
Text styles and typography applications
Implementation-ready specifications for developer handoff
This documentation approach ensures consistent implementation while providing the flexibility needed for various product contexts across the Binance US platform.