WEEX

Overview

WEEX is a next-generation cryptocurrency exchange that merges institutional-grade trading infrastructure with playful, accessible onboarding. The brand aesthetic combines a dark, professional trading interface (deep blacks at #000000, #161616, #262626) with vibrant accent colors—a golden primary (#ffd700) for CTAs and trust signals, emerald green (#24c18d) for gains, and coral red (#f14b3f) for alerts. The visual language embraces "Crypto-Maximalist Playfulness": 3D character-driven hero imagery conveys approachability and fun, while the core platform maintains institutional credibility through clean typography, precise spacing, and high-contrast readability. The emotional response is confidence mixed with accessibility—users feel they're joining a serious, well-funded exchange that doesn't take itself too seriously.

The brand voice is direct, energetic, and jargon-aware without being gatekeeping. WEEX speaks to both retail traders and institutional players: "BTC Pizza Day | Zero fees + 3% APR" reads as playful yet substantive. Vocabulary leans into crypto vernacular ("spot," "futures," "slippage") while avoiding hype-speak. Tone is conversational but precise—every claim ("1,000 BTC Protection Fund," "fast token listings") is backed by concrete product features. Example sentence in brand voice: "Trade Bitcoin with zero maker fees, earn 3% APR on your holdings, and sleep knowing your assets are protected by our 1,000 BTC insurance fund."

Colors

The WEEX color system is built on a dark-mode-first philosophy optimized for 24/7 trading environments. The surface stack anchors on pure black (#000000) as the base, with carefully calibrated grays (#161616 for containers, #262626 for elevated surfaces, #8b8b8e for secondary text) providing depth without eye strain. This hierarchy ensures readability during extended trading sessions: on-surface text (#ffffff) maintains WCAG AAA contrast (21:1) against all surface layers, while on-surface-variant (#8b8b8e) is reserved for tertiary information and disabled states.

The primary accent is golden yellow (#ffd700), deployed on all call-to-action buttons ("Sign Up," "Markets"), interactive focus states, and brand-critical UI elements. This color signals opportunity and trust in crypto contexts—i

Typography

WEEX uses Plus Jakarta Sans as the primary typeface—a modern, geometric sans-serif that balances warmth with precision. The type system is built on a 6-level hierarchy: Display (60px, 700 weight) for hero headlines; Headline-lg (40px, 700 weight) for section titles; Headline-md (28px, 600 weight) for subsections; Title-lg (20px, 600 weight) for card headers; Body-lg (18px, 400 weight) for long-form content; Body-md (16px, 400 weight) for UI copy and form labels; Label-md (14px, 600 weight) for buttons and badges; Label-sm (12px, 500 weight) for helper text and metadata. Letter-spacing is minimal (0 to 0.02em) to maintain the modern, tight aesthetic—negative tracking (-0.04em) is applied only to Display sizes to enhance visual impact. Line-height is set conservatively (1.4–1.7x font size) t

Layout

WEEX employs a 12-column fluid grid with a max-width of 1280px, allowing responsive scaling from mobile (320px) to desktop (1920px+). The gutter is fixed at 24px, providing consistent breathing room between content blocks. Page rhythm is driven by the spacing scale: xs (4px) for micro-interactions and icon spacing, sm (12px) for form field padding and tight component spacing, md (24px) for standard section margins and card padding, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. Container max-width of 1280px ensures that trading dashboards and market data remain scannable without excessive horizontal scrolling. White-space is generous but purposeful—the dark background (#000000) is never left completely empty, as this would feel cold; instead, subtle

Elevation & Depth

WEEX uses a shadow-based elevation system to convey depth and hierarchy without relying on color shifts. The system defines three elevation levels: Level 1 (sm) applies 0 1px 2px rgba(0, 0, 0, 0.06) to subtle UI elements like input fields and small cards—this is barely perceptible, maintaining the flat aesthetic while adding tactile definition. Level 2 (md) applies 0 3px 8px rgba(0, 0, 0, 0.15) to standard cards, dropdowns, and popovers—this creates clear separation from the background without feeling heavy. Level 3 (lg) applies 0 8px 24px rgba(0, 0, 0, 0.25) to modals, floating action buttons

Shapes

WEEX embraces a "Technical Minimalism" shape philosophy: rounded corners are used strategically to soften the hard edges of a data-heavy interface without sacrificing precision. The rounded scale progresses from sm (4px) for small UI elements like checkboxes and minor icons, DEFAULT (6px) for input fields and small cards, md (12px) for standard cards and list items, lg (20px) for larger containers and modals, xl (32px) for hero sections and full-width components, and full (9999px) for pills and badges. Buttons use full (9999px) border-radius to create pill-shaped CTAs that feel friendly and in

Components

Action Elements

Buttons are the primary interaction mechanism. Primary buttons use {colors.primary} (#ffd700) background with {colors.on-primary} (#161616) text, full border-radius (9999px), 12px horizontal padding, and 48px height. Font-weight is strictly 700 (bold) to ensure CTAs stand out. On hover, the background transitions to {colors.primary-fixed-dim} (#d8ae15) with a 200ms ease-out timing function—this creates a subtle darkening effect that signals interactivity without jarring color shifts. Focus state adds a 3px outline in {colors.primary} at 50% opacity. Secondary buttons use transparent background with a 2px solid border in {colors.primary}, same text color, and identical padding/height. On hover, the background fills with {colors.surface-container-high} (#262626) while ma