Bybit

Overview

Bybit is a professional-grade cryptocurrency spot trading platform designed for active traders and institutional participants. The design system embodies "High-Contrast Financial Precision"—a visual language that prioritizes clarity, speed, and data density through a pure black canvas (#000000) punctuated by vibrant, action-oriented accent colors. The brand personality is authoritative yet approachable: confident in its technical depth, never condescending. The UI conveys that trading is serious business, but the platform is built for humans, not algorithms. Voice example: "Buy BTC at market rate or set your limit—execution happens in milliseconds."

Colors

The color system is built on a deep dark foundation (surface #000000, surface-container-low #17181e) that reduces eye strain during extended trading sessions and emphasizes data visualization. Primary accent is the vibrant golden-orange (#ffb11a), used exclusively on call-to-action buttons ("Buy", "Sign Up"), active tab indicators, and promotional badges—this is the color users click. Secondary green (#24ae64) signals buy orders, gains, and positive price movements; tertiary red (#e04040) signals sell orders, losses, and warnings. The neutral palette (on-surface-variant #adb1b8, outline #71757a) provides hierarchy for secondary text, dividers, and disabled states. All interactive elements use rgba overlays for hover states: primary-fixed-dim (#f7a600) for button hover, surface-container-hi

Typography

The type system uses Inter as the primary typeface (with system fallbacks: -apple-system, BlinkMacSystemFont, Roboto, Arial) to ensure crisp rendering at small sizes and across platforms. Display (56px, 700 weight, -0.03em tracking) is reserved for hero headlines; headline-lg (32px, 600 weight) for section titles; body-md (14px, 400 weight) for trading data and order details; label-md (12px, 600 weight, 0.01em tracking) for buttons, tabs, and form labels. The tight tracking on display and label sizes (negative and positive respectively) creates visual tension that mirrors the fast-paced trading environment. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) on small labels (label-sm, 11px) when overlaid on charts or busy backgrounds to ensure legibility. Line heights are set to 1.4–1.5x font

Layout

The layout uses a fixed 12-column grid with a max-width of 1280px and a minimum viewport width of 1080px (enforced via min-width: 1080px on the skeleton root). The primary trading interface is split into a left flex-grow panel (chart + order book) and a fixed 300px right sidebar (order entry form). Spacing follows a 4px unit system: xs (4px) for micro-spacing within components, sm (8px) for padding within cards, md (12px) for internal component spacing, lg (16px) for section gutters, and xl (24px) for major section separation. The container uses gutter: 16px for horizontal padding on desktop. Vertical rhythm is maintained via margin-bottom: 4px between major sections (e.g., chart, order book, recent trades), creating a compact, scannable layout that prioritizes information density over whi

Elevation & Depth

Depth is conveyed through subtle shadows and background color shifts rather than dramatic layering. Level 1 (Base): surface #000000 with no shadow. Level 2 (Cards/Panels): surface-container-low #17181e with a 1px solid border at outline #71757a and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). Level 3 (Modals/Popovers): surface-container #25282c with box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) and a 1px border at surface-container-high #3d3e46. Hover states elevate cards to surface-container-high (#3d3e46) with the Level 2 shadow, creating a tactile sense of interactivity. The shadow values use rgb

Shapes

The shape philosophy is "Precision with Softness"—sharp corners on data-heavy components (tables, charts) contrast with rounded corners on interactive elements (buttons, inputs). Buttons use border-radius: 9999px (full pill shape) for primary CTAs ("Buy", "Sign Up") to draw attention; secondary buttons and form inputs use border-radius: 4px (DEFAULT) for a more technical, grid-aligned appearance. Cards and panels use border-radius: 4px to align with the trading grid aesthetic. Badges and status indicators use border-radius: 9999px for visual distinction. The 4px default radius is the most freq

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons ("Buy", "Sign Up") use backgroundColor: #ffb11a, textColor: #121214, border-radius: 9999px, padding: 8px 20px, height: 36px, and font-weight: 600. On hover, backgroundColor shifts to #f7a600 (primary-fixed-dim) with a transition: all 0.3s ease-in-out. Success buttons ("Sell" in green context) use backgroundColor: #24ae64, on-secondary: #ffffff, border-radius: 8px, height: 40px. Danger buttons (sell orders, liquidation warnings) use backgroundColor: #e04040. All buttons apply text-transform: uppercase and letter-spacing: 0.01em for emphasis. Tab components use a 2px bottom border (border-bottom: 2px solid #ffb11a) for active state, with inactive tabs showing a transparent border and color: #adb1b8.

Conta

Do's and Don'ts

**Do**

• Do use #ffb11a (primary) exclusively for CTAs and active states—it's the brand's signature accent and must remain visually distinct.
• Do maintain the 4px unit spacing grid (4px, 8px, 12px, 16px, 24px) for consistent rhythm and alignment across all components.
• Do apply the full M3 color token stack (surface-container-lowest through surface-container-highest) to create visual hierarchy without relying on brightness alone.
• Do use Inter with system fallbacks and apply tight letter-spacing (-0.03em to 0.02em) on display and label sizes to enhance readability at small scales.
• Do pair dark backgrounds (#000000, #101014) with high-contrast text (#ffffff, #adb1b8) to ensure accessibility (WCAG AA minimum 7:1 ratio on body text).
• Do use green (#24ae64) and red (#e04040) consistently for buy/sell and gain/loss signals—never swap these roles.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) on hover states to create tactile elevation without harsh shadows.

**Don't**

• Don't use primary (#ffb11a) for body text, backgrounds, or non-interactive elements—reserve it for CTAs and active indicators only.
• Don't apply border-radius values outside the defined scale (sm: 2px, DEFAULT: 4px, md: 8px, lg: 10px, xl: 16px, full: 9999px)—consistency is critical for a professional trading platform.
• Don't mix light and dark mode colors within a single view—the platform defaults to dark mode; light mode is a separate, complete theme.
• Don't use shadows darker than rgba(0, 0, 0, 0.2) or lighter than rgba(0, 0, 0, 0.12)—the range is calibrated for the dark background.
• Don't apply transparency to primary or secondary colors for backgrounds (use rgba overlays instead, e.g., rgba(255, 177, 26, 0.12) for badge backgrounds).
• Don't reduce font-weight below 400 for body text or below 500 for labels—the platform prioritizes legibility over delicacy.
• Don't use custom colors for status indicators—always map to the defined palette (green for success, red for error, orange for warning).