LuxAlgo

Overview

LuxAlgo is a fintech platform that democratizes algorithmic trading through AI-powered strategy generation and advanced charting. The design system embodies "Technical Minimalism"—a philosophy that strips away visual noise to expose pure functionality, where every pixel serves the trader's decision-making process. The aesthetic is deliberately austere: deep blacks (#0a0a0a), high-contrast whites (#edededed), and surgical accent colors (teal #089981 for buy signals, red #f23645 for sell signals) create an environment of precision and urgency. The brand personality is authoritative yet approachable: confident in technical capability, never condescending. Voice example: "Backtest your strategy in 30 seconds. Deploy when ready."

Colors

The color system is built on a dark-first foundation optimized for extended screen time and financial data visualization. Surface (#0a0a0a) and surface-container (#15161a) form the neutral backbone, with outline (#555e76) and outline-variant (#3d3e45) providing subtle hierarchy without visual fatigue. Primary (#089981, a teal) is reserved exclusively for affirmative actions, buy signals, and success states—it appears on the 'Launch Quant' CTA button and positive price movements. Secondary (#f23645, a vivid red) signals warnings, sell opportunities, and critical alerts. Tertiary (#0d8ed6, a sky blue) supports secondary information and interactive states. The inverse-surface (#f5f5f5) is used sparingly for modals and overlays. All text on dark surfaces uses on-surface (#ededed) at 400 weight

Typography

The type system pairs Aeonik (a geometric, technical sans-serif) for headlines and UI labels with system-ui fallback for body copy. Display (76px, 500 weight, -0.02em tracking) commands attention in hero sections; headline-lg (48px) anchors feature sections; body-md (16px, 400 weight) ensures readability in dense data contexts. The 500-weight Aeonik is used for all interactive labels (button-primary, label-md at 14px) to signal clickability and reduce cognitive load. Line-height is set to 1.5x the font size for body text (28px for 18px body-lg) to prevent eye strain during extended trading sessions. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) on small labels (label-sm) when overlaid on gradient backgrounds to maintain contrast ratio ≥ 4.5:1.

Layout

The layout uses a 12-column grid with a max-width of 1400px, allowing flexible content scaling from mobile (single column) to desktop (multi-column feature grids). Gutter spacing is fixed at 24px (md spacing token), with section separation using lg spacing (40px) for breathing room between hero, features, and CTA zones. The hero section spans full-width with a dark gradient background (black to deep teal), while card-based content uses surface-container with 1px outline-variant borders. Container max-widths are enforced at 1240px for readability; narrower than this, text becomes difficult to scan in financial contexts. Padding inside cards follows md (24px) for comfortable whitespace; inputs and buttons use sm (12px) internal padding for compact density.

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than bright highlights. Level 1 (base): surface (#0a0a0a) with no shadow. Level 2 (cards, inputs): surface-container (#15161a) with box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.06), 0 2px 32px 0 rgba(0, 0, 0, 0.16)—a soft, spread shadow that suggests elevation without drama. Level 3 (modals, popovers): surface-container-high (#1e1e24) with box-shadow: 0px -2px 50px rgba(0, 0, 0, 0.1)—a larger, more diffuse shadow indicating maximum separation. Hover states on cards transition the shadow to a slightly larger blur radius (8px instead of 6px

Shapes

The shape language is "Geometric Precision"—a blend of sharp corners and full-radius pills that reflects the platform's technical nature and user-friendly intent. Buttons use full radius (9999px) to soften the interface and encourage clicking; this is applied to all button variants (button-primary, button-secondary, button-ghost) with padding: 12px 32px and height: 48px. Cards and containers use lg radius (1rem / 16px) to provide subtle rounding without softness. Input fields use DEFAULT radius (0.5rem / 8px) for a neutral, functional appearance. Badges use full radius (9999px) to distinguish

Components

Action Elements Buttons are the primary interaction mechanism. button-primary uses backgroundColor: {colors.primary} (#089981), textColor: {colors.on-primary} (white), rounded: full (9999px), padding: 12px 32px, height: 48px, and typography: label-md (14px, 500 weight). On hover, the background transitions to primary-container (#0bb18f) over 150ms. button-secondary mirrors the primary structure but uses transparent background with a 1px border in outline-variant (#3d3e45); on hover, it fills with surface-container-high (#1e1e24). button-ghost is text-only with no border; it's used for tertiary actions like 'How it Works'. All buttons apply transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) for smooth state changes.

Containers & Surfaces Cards use backgroundColor: {col

Do's and Don'ts

**Do**

• Do use primary (#089981) exclusively for affirmative CTAs and buy signals; this color carries semantic weight in trading contexts.
• Do maintain a minimum contrast ratio of 4.5:1 between text and background; test label-sm over gradients with text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3).
• Do apply 150ms cubic-bezier(0.4, 0, 0.2, 1) transitions on all interactive state changes (hover, focus, active) to signal responsiveness without feeling sluggish.
• Do use Aeonik (500 weight) for all UI labels and interactive text; reserve system-ui for body copy to reduce visual noise.
• Do enforce the 1400px container max-width on desktop to prevent text lines from exceeding 80 characters, maintaining readability during financial decision-making.

**Don't**

• Don't use secondary (#f23645) or tertiary (#0d8ed6) as primary CTAs; these are reserved for warnings and secondary information.
• Don't apply shadows larger than 0 2px 32px 0 rgba(0, 0, 0, 0.16) on standard cards; excessive depth creates visual clutter in data-dense layouts.
• Don't use rounded corners smaller than DEFAULT (0.5rem) on interactive elements; this makes them difficult to target on touch devices.
• Don't mix Aeonik and system-ui in the same headline or label; choose one per component to maintain visual consistency.
• Don't animate opacity or transform on hover for more than 150ms; longer transitions feel unresponsive and frustrate traders monitoring live data.