Olymptrade

Overview

Olymptrade is a fintech trading platform designed for retail traders seeking confidence, speed, and modern digital sophistication. The brand embodies a 'Neon-Minimalist' aesthetic: a pure black canvas (rgb(0, 0, 0)) serves as the foundation, while vibrant neon accents—primarily cyan (#00ffc2) and lime (#42ff00)—punctuate the interface with electric energy. This color strategy mirrors the high-stakes, fast-paced nature of financial markets, where clarity and urgency are paramount. The UI evokes a sense of control and precision: traders feel empowered, not overwhelmed.

The brand voice is direct, confident, and action-oriented. Olymptrade speaks in imperative, benefit-driven language: "Build confidence with every single trade," "Supercharge your funds," "Claim now." Vocabulary emphasizes accessibility ("easy-to-use," "beginner-friendly") alongside professional credibility ("11 years of empowering traders," "advanced tools"). The tone avoids hype; instead, it grounds itself in tangible features and outcomes. Example sentence in brand voice: "Open trades from $1 with a $10 minimum deposit—start your journey today."

Colors

The color system centers on extreme contrast: deep black surfaces (#000000) paired with neon-bright accents that command immediate attention. Primary (#00ffc2, cyan) is the signature call-to-action color, used on buttons, interactive elements, and focus states—it signals "go" and "act now." Secondary (#42ff00, lime) provides a complementary accent for highlights, gradients, and secondary CTAs, creating visual rhythm without competing for dominance. Tertiary (#6cf, light cyan) supports data visualization and chart elements, maintaining the neon palette across trading instruments.

Error states use #ff5765 (vivid red) for negative price movements and warnings, ensuring traders instantly recognize risk. Status badges employ a tiered system: positive trades use #28bd66 (green, rgba(42, 189, 10

Typography

The type system uses Nacelle exclusively, a geometric sans-serif that conveys modernity and precision—critical for a fintech brand. Display (56px, 600 weight, -0.02em letter-spacing) anchors hero sections with commanding presence; Headline-lg (40px, 600 weight) structures major sections; Body-lg (18px, 400 weight, 28px line-height) ensures readability in dense trading interfaces. The weight hierarchy is deliberate: 600-weight headlines create visual dominance, while 400-weight body text maintains legibility at small sizes (16px on mobile, 18px on desktop). Letter-spacing tightens on large sizes (-0.02em on display, -0.015em on headline-lg) to reinforce the brand's precision; body text uses default spacing for accessibility. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) on small labels (1

Layout

The layout employs a 12-column grid with a fixed container max-width of 1280px, centering content on desktop while maintaining full-width flexibility on mobile (320px–767px). Spacing follows a semantic scale: gutter (24px) separates major sections; lg spacing (40px) creates breathing room between hero and content blocks; md spacing (24px) organizes card groups and form fields. Mobile uses tighter spacing (sm: 12px, md: 24px) to maximize screen real estate; tablet and desktop expand to lg (40px) and xl (64px) for visual hierarchy. The hero section uses 80px top padding (from live computed styles) to accommodate fixed header; section gaps scale from 40rem (mobile) to 80rem (tablet+) via CSS custom properties (--gap-h1-cta, --gap-h2-h3-cta). Cards employ 40px horizontal padding on mobile, 64p

Elevation & Depth

Depth is achieved through layered shadows and glass-morphic effects rather than traditional material elevation. Level 1 (Base): pure black background (#000000) with no shadow. Level 2 (Standard Card): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), background: rgba(0, 0, 0, 0.4), border: 1px solid rgba(255, 255, 255, 0.08), backdrop-filter: blur(10px). Level 3 (Elevated/Modal): box-shadow: 0 -11.98px 46.08px rgba(0, 0, 0, 0.7), background: rgba(0, 0, 0, 0.5), border: 1px solid rgba(255, 255, 255, 0.12), backdrop-filter: blur(20px). Interactive elements (buttons, hover states) add a glow: box-shadow

Shapes

The shape philosophy is 'Geometric Precision'—rounded corners are deliberate and functional, never organic. Buttons use 32px border-radius (lg token) for primary and secondary CTAs, creating a pill-like, approachable form that softens the stark black background. Cards use 40px border-radius (xl token) on desktop, 16px (md token) on mobile, balancing visual softness with technical precision. Input fields use 12px border-radius (DEFAULT token) for a subtle, contained appearance. Status badges and small interactive elements use 9999px (full token) for perfect circles or pills, emphasizing their c

Components

Action Elements Primary buttons use {colors.primary} (#00ffc2) background, {colors.on-primary} (black) text, 48px height, 12px 24px padding, and {rounded.lg} (32px) border-radius. Hover state transitions to {colors.primary-container} (#00cc9a) with a 0.4s ease and adds box-shadow: 0 0 20px rgba(0, 255, 194, 0.4). Active state applies box-shadow: 0 0 12px rgba(0, 255, 194, 0.6) and scales text via transform: scale(1.2) on desktop. Secondary buttons use rgba(255, 255, 255, 0.08) background, 1px solid rgba(255, 255, 255, 0.12) border, backdrop-filter: blur(20px), and {colors.on-surface} text. Hover transitions to rgba(255, 255, 255, 0.15) background with {colors.primary} text. Gradient accent buttons (premium CTAs) animate background-image: linear-gradient(90deg, #00ffc2, #42ff00, #00ffc2

Do's and Don'ts

**Do**

• Do use {colors.primary} (#00ffc2) exclusively for primary CTAs and focus states—it is the brand's signature accent and must remain visually dominant.
• Do apply backdrop-filter: blur(10px to 20px) on all glass-morphic surfaces to reinforce the neon-against-black aesthetic and maintain visual separation.
• Do scale button border-radius from {rounded.lg} (32px) on desktop to {rounded.md} (16px) on mobile to maintain touch-friendly sizing and visual hierarchy.
• Do use the full Material 3 color token stack (primary-fixed, primary-fixed-dim, on-primary-fixed-variant, etc.) in hover/active/focus states to ensure consistent, predictable interactions.
• Do pair neon accents (#00ffc2, #42ff00) with pure black (#000000) backgrounds—never use gray or near-black as a substitute, as it dilutes the brand's energy.

**Don't**

• Don't use {colors.primary} (#00ffc2) on non-interactive elements or backgrounds—reserve it exclusively for CTAs, focus indicators, and status highlights to maintain visual clarity.
• Don't apply shadows with light colors (e.g., rgba(255, 255, 255, 0.x))—all shadows must be black-based (rgba(0, 0, 0, 0.x)) to maintain the neon-against-black contrast.
• Don't mix rounded corner sizes arbitrarily; use the defined scale ({rounded.sm}, {rounded.DEFAULT}, {rounded.md}, {rounded.lg}, {rounded.xl}, {rounded.full}) to ensure visual consistency across all components.
• Don't reduce opacity on primary accent colors below 80% or use them in backgrounds—neon accents must remain vibrant and legible to signal interactivity and urgency.
• Don't apply transition durations shorter than 0.3s or longer than 0.4s on interactive elements—this maintains the brand's sense of responsiveness without feeling jarring or sluggish.