Trojan

Overview

Trojan is a high-velocity onchain trading terminal designed for professional crypto and memecoin traders who demand speed, precision, and tactical advantage. The brand embodies 'Tactical Minimalism'—a design philosophy that strips away visual noise while maintaining aggressive visual hierarchy through strategic use of electric blue (#0099ff) and warning amber (#ffb224) accents against a near-black canvas (#010409). The interface evokes the aesthetic of professional trading floors and esports arenas: dark, focused, and optimized for rapid decision-making. Every pixel serves a purpose; every interaction is instantaneous. The emotional response is one of control and confidence—traders feel equipped to execute complex strategies without friction.

Trojan's voice is direct, tactical, and unapologetically competitive. The brand speaks in the vernacular of traders: 'snipe', 'edge', 'arena', 'trenches'. Copy is concise and action-oriented, avoiding marketing fluff. Example: 'Buy, sell and snipe instantly with Trojan. Exclusive real-time data and automation.' The tone assumes the user is experienced, impatient, and motivated by speed and alpha—not hand-holding.

Colors

The color system is built on a dark-first foundation with three strategic accent layers. The surface stack anchors the UI in near-black (#010409 for base, #0d1015 for dim, #1f2429 for bright), creating a low-contrast, focused environment that reduces eye strain during extended trading sessions. The on-surface palette (#f7f8f9 for primary text, #aeb3ba for secondary) maintains WCAG AA contrast ratios (minimum 4.5:1) while preserving the dark aesthetic.

Primary (#0099ff) is the electric blue accent used exclusively for interactive elements—call-to-action buttons ('Launch App'), active states, focus rings (3px rgba(0, 153, 255, 0.1) glow), and data highlights. Secondary (#ffb224) is the tactical amber accent reserved for warnings, alerts, and secondary CTAs ('THE ARENA' button). Tertiary (#5

Typography

The type system pairs Inter (a geometric sans-serif optimized for screen legibility) across all weights (400, 500, 600, 700) with Rouben (a custom display typeface) reserved for hero headlines and brand moments. Display (72px, 600 weight, -0.02em tracking) is used for hero headlines like 'Your Ultimate Onchain Trading Experience' and commands the full width of the viewport with 80px line-height for breathing room. Headline-lg (40px, 600 weight) is used for section titles and modal headers. Headline-md (28px, 600 weight) for subsections. Title-lg (20px, 600 weight) for card titles and navigation items. Body-lg (18px, 400 weight, 28px line-height) for long-form copy and descriptions. Body-md (16px, 400 weight, 24px line-height) for body text and UI labels. Label-md (14px, 600 weight, 0.01em

Layout

The layout follows a 12-column grid with a 1200px container max-width, centered with 24px gutters on desktop and 12px on mobile. The page rhythm is built on a semantic spacing scale: xs (4px) for micro-spacing within components, sm (12px) for internal padding and tight grouping, md (24px) for standard component padding and section separation, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. White-space is aggressive and intentional—the dark background means negative space reads as premium, not empty. Sections are separated by lg spacing (40px) to create visual breathing room and reduce cognitive load. The hero section uses a centered, single-column layout with the Trojan logo (white knight icon, 64px) centered above the headline, followed by a 2-line subhe

Elevation & Depth

Elevation is achieved through a restrained shadow system and strategic use of surface-container layers rather than aggressive drop shadows. Level 1 (Base): the surface (#010409) with no shadow—the foundation. Level 2 (Standard Card): surface-container-low (#111418) with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)—used for cards, modals, and floating elements. Level 3 (Elevated/Hover): surface-container (#181c20) with box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35)—used for hovered cards, active modals, and focus states. The shadows are soft and spread (no blur-radius less than 8px) to avoid harsh co

Shapes

The shape philosophy is 'Tactical Precision'—rounded corners are used strategically to soften the industrial edge of the dark interface without sacrificing visual sharpness. Buttons and primary interactive elements use lg radius (1rem / 16px) to create a friendly, clickable affordance. Cards and containers use lg radius (16px) for consistency. Input fields use DEFAULT radius (0.5rem / 8px) for a more technical, form-like appearance. Badges and micro-components use full radius (9999px) for a pill-shaped, attention-grabbing silhouette. Modals and overlays use xl radius (1.5rem / 24px) to create

Components

Action Elements Buttons are the primary interaction mechanism and use a consistent 44px height with 12px vertical and 24px horizontal padding. Primary buttons (button-primary) use primary color (#0099ff) background with on-primary text (#010409), label-md typography (14px, 600 weight), and lg radius (16px). On hover (button-primary-hover), the background shifts to primary-fixed-dim (#0077cc) with a 150ms transition. Secondary buttons (button-secondary) use surface-container background with on-surface text and a 1px outline-variant border, maintaining the same height and padding. Accent buttons (button-accent) use secondary color (#ffb224) with bold 700 weight typography to signal importance—used for 'THE ARENA' and other high-priority CTAs. All buttons include a focus ring: box-shadow:

Do's and Don'ts

**Do**

• Do use primary (#0099ff) for all CTAs and interactive states—it's the only accent that should appear frequently and signal actionability.
• Do maintain the dark surface stack (#010409 to #4d545b) as the foundation; never introduce light backgrounds except in light-mode variants.
• Do apply md elevation shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to all floating elements; avoid harsh drop shadows that break the minimalist aesthetic.
• Do use label-md (14px, 600 weight) for all button text and form labels; consistency in micro-typography reinforces the tactical precision brand.
• Do reserve secondary (#ffb224) and tertiary (#56d364) for warnings and success states only; overuse dilutes their signal value in a trading context.
• Do include a 3px focus ring (0 0 0 3px rgba(0, 153, 255, 0.1)) on all interactive elements for keyboard navigation accessibility.

**Don't**

• Don't use light backgrounds or near-white surfaces in the main UI; the dark aesthetic is core to the brand identity and trader psychology.
• Don't apply border-radius larger than xl (24px) to buttons or cards; it softens the tactical edge and makes the interface feel less professional.
• Don't use shadows with blur-radius less than 8px or spread less than 0px; hard shadows break the minimalist, refined aesthetic.
• Don't mix typefaces; Inter is the system font for all UI text. Rouben is reserved for hero headlines only.
• Don't use on-surface-variant (#aeb3ba) for interactive elements; it's for secondary labels and disabled states only.
• Don't animate transitions longer than 200ms; traders expect instantaneous feedback, and slow animations feel sluggish in a high-velocity context.