Phantom

Overview

Phantom is a fintech-forward crypto trading and prediction platform that embraces a bold, high-contrast visual language rooted in 'Digital Maximalism'—a design philosophy that celebrates vibrant accent colors against deep, near-black canvases to convey energy, precision, and financial confidence. The brand serves crypto-native users who demand both sophistication and clarity in their trading interfaces. The UI personality is direct and uncompromising: white space is minimal, color is purposeful, and every interactive element signals intent. The emotional response is one of control and possibility—users feel empowered to make decisive financial moves. Voice: confident, technical but accessible, never patronizing. Example: 'Trade predictions in real time—your edge is speed and data.'

Colors

The color system employs a dark-first strategy with three distinct accent families: Primary (Lavender #e2ddfe, rgb(226, 223, 254)) anchors all CTAs, focus states, and brand-critical interactions—its high luminosity against the near-black surface (#0f0f0f) creates immediate visual hierarchy. Secondary (Neon Green #45e863, rgb(69, 232, 99)) signals success, gains, and positive outcomes; it is reserved for confirmations and bullish indicators. Tertiary (Vivid Yellow #ffd600, rgb(255, 214, 0)) highlights warnings, pending states, and neutral alerts. Error (Vivid Red #ff0037, rgb(255, 0, 55)) is deployed for losses, critical errors, and destructive actions. The surface stack ranges from #0a0a0a (surface-dim, used for recessed elements) through #0f0f0f (base surface) to #2a2a2a (surface-containe

Typography

The type system uses a single typeface family, Phantom, across all scales to reinforce brand cohesion and technical precision. Display (71px, 400 weight, -0.02em letter-spacing) anchors hero sections with commanding presence; Headline-lg (48px) and Headline-md (32px) establish section hierarchy without excessive visual weight. Body text (16px–18px, 400 weight, 24–28px line-height) prioritizes legibility in dense trading interfaces; the generous line-height (1.5x) prevents eye strain during extended data scanning. All typography uses 400 weight exclusively—no bold, no 600—to maintain the brand's austere, data-driven aesthetic. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) on small labels (label-sm, 14px) when layered over gradient or multi-color backgrounds to preserve readability.

Layout

The layout system uses a 12-column grid with a max-width of 1280px, maintaining a fluid layout on mobile (100vw with 24px gutter) and fixed on desktop. Spacing follows a semantic scale: xs (4px) for micro-interactions, sm (12px) for component padding, md (24px) for section separation, lg (40px) for major section breaks, and xl (64px) for hero spacing. The hero section in the screenshot demonstrates this: the main headline sits in a 24px gutter, with 40px vertical separation between the tagline and CTA. Container padding is consistently 24px on all sides (md spacing), creating a predictable rhythm. White space is minimal but intentional—the dark background absorbs negative space, so visual breathing room comes from color contrast and scale hierarchy rather than empty pixels.

Elevation & Depth

Depth is conveyed through a three-tier shadow system and subtle background color shifts. Level 1 (Base): surface (#0f0f0f) with no shadow, used for body and default cards. Level 2 (Standard): surface-container (#141414) with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to cards, input fields, and standard interactive elements. Level 3 (Elevated): surface-container-high (#1f1f1f) with box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), reserved for modals, dropdowns, and hover states. The primary CTA button in the hero uses a 56px height with 16px 32px padding, a full border-radius (96px), and the

Shapes

The shape philosophy is 'Functional Softness'—sharp corners are avoided in favor of rounded rectangles that feel modern and approachable without sacrificing precision. Buttons use full border-radius (9999px) for primary actions, creating pill-shaped affordances that are unmistakably clickable; secondary buttons and cards use lg (1rem / 16px) radius for a balanced, refined appearance. Input fields use DEFAULT (0.5rem / 8px) radius for a subtle, technical feel. The hero section background in the screenshot uses xl (1.5rem / 24px) radius on the container, reinforcing the premium, polished aesthet

Components

Action Elements Buttons are the primary interaction primitive. The primary button (button-primary) uses backgroundColor: {colors.primary} (#e2ddfe), textColor: {colors.on-primary} (#3c315b), 56px height, 16px 32px padding, and full border-radius. On hover, the background shifts to primary-fixed-dim (#baa7ff) and the shadow expands from 0 3px 8px to 0 6px 16px rgba(0, 0, 0, 0.2), creating a 200ms ease-out transition. The active state uses primary-container (#6e56cf) with on-primary-container text (#fffdf8). Secondary buttons are transparent with a 1px border in {colors.outline} (#6e6e6e), 48px height, and 12px 20px padding; on hover, the background becomes surface-container-high (#1f1f1f) and the border shifts to primary. Accent buttons for success (button-accent-success) use secondary

Do's and Don'ts

**Do**

• Do use primary (#e2ddfe) exclusively for CTAs, focus rings, and brand-critical interactions—never dilute it with secondary accents.
• Do maintain the 24px gutter and md (24px) padding consistently across all containers to preserve the grid rhythm.
• Do apply the full shadow stack (Level 1 → Level 2 → Level 3) on hover and active states to create tactile depth; never skip the transition timing (200ms ease-out).
• Do use secondary (#45e863) only for success, gains, and positive confirmations; never use it for neutral or warning states.
• Do layer text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) on small labels over multi-color backgrounds to preserve readability.

**Don't**

• Don't use colors from the surface stack (surface, surface-container, etc.) as accent colors—they are structural, not interactive.
• Don't apply rounded: full (9999px) to anything except primary buttons; it dilutes the affordance signal.
• Don't mix typeface families; Phantom is the only font—no fallbacks to system fonts or serif alternatives.
• Don't reduce the primary button height below 56px or padding below 16px 32px; the size is critical for touch targets and visual prominence.
• Don't use error (#ff0037) for warnings or neutral states; reserve it exclusively for losses, critical errors, and destructive actions.