Strike Finance

Overview

Strike Finance is a decentralized perpetuals trading platform engineered for on-chain derivatives with up to 50x leverage, staking rewards, and real yield. The brand embodies 'Crypto-Native Maximalism'—a design philosophy that pairs deep black canvases with high-saturation accent colors (mint-green primary, electric blue secondary, vivid purple tertiary) to convey speed, precision, and technical sophistication. The UI evokes a sense of controlled energy: every interaction feels responsive and intentional, never cluttered. The aesthetic is unapologetically digital, drawing from gaming UI and trading terminal conventions, yet refined through careful whitespace and geometric clarity.

The brand voice is direct, confident, and technically literate. Strike speaks to traders and developers who value efficiency and transparency. Vocabulary favors action verbs ('Launch', 'Trade', 'Stake') and quantifiable outcomes ('50x leverage', '$1B+ volume', '250K+ transactions'). The tone is never hype-driven or casual—it's professional yet energetic, like a seasoned trader explaining a winning strategy. Example sentence: 'Derivatives belong on chain. Strike makes it happen.'

Colors

Strike's color system is built on a high-contrast foundation: pure black (#000000) as the dominant surface, with white (#ffffff) as the primary text layer. The brand's signature accent is mint-green (#4efab0), deployed on all primary CTAs, interactive focus states, and key data highlights. This vivid, saturated green creates immediate visual hierarchy and signals interactivity without relying on traditional blue. Secondary accents include electric blue (#54a2ff) for supporting actions and data visualization, and vibrant purple (#c07eff) for tertiary highlights and status indicators. Error states use a bold red (#fb2c36) for critical warnings.

Color usage rules: Primary (#4efab0) is reserved for the most important CTAs ('Launch App') and active states; it must never appear on body text or

Typography

Strike uses Space Grotesk exclusively—a geometric, tech-forward typeface that reinforces the platform's on-chain, developer-first positioning. The type hierarchy is aggressive and clear: display text (96px, 400 weight) anchors hero sections with italic styling on secondary words ('Perps' in regular, 'On Chain' in mint-green), creating visual rhythm. Headlines scale from 48px (headline-lg) down to 24px (title-lg), all set in 600 weight for authority. Body text sits at 16–18px in 400 weight with 24–28px line-height, ensuring readability over the dark background. Letter-spacing is tight (-0.02em on display, -0.015em on headlines) to convey density and precision, while body text uses neutral spacing (0em) for legibility.

Label text (12–14px, 600 weight) is used for button copy, badges, and me

Layout

Strike uses a 12-column fluid grid with a max-width of 1280px, centered on desktop. The layout philosophy is 'breathing minimalism'—generous whitespace (lg spacing: 40px) separates major sections, while internal card padding uses md spacing (24px). The hero section occupies 100% viewport height with a centered content column (max 800px), allowing the background gradient animation to dominate. Below the fold, sections use a 2–3 column layout on desktop, collapsing to single-column on mobile. Gutter spacing is consistently 24px between grid items.

Container padding follows the spacing scale: outer containers use lg (40px) on desktop, md (24px) on tablet, sm (12px) on mobile. Stats cards and feature blocks use md padding (24px) internally. The layout avoids hard edges—all major containers ha

Elevation & Depth

Strike uses a glow-based elevation system rather than traditional shadows, reflecting the brand's high-energy, digital-first aesthetic. Depth is conveyed through layered mint-green glows and subtle transparency shifts. Level 1 (Base): flat black surface (#000000) with no shadow. Level 2 (Standard Card): 1px border in rgba(78, 250, 176, 0.2) + box-shadow: 0 2px 12px rgba(78, 250, 176, 0.3). Level 3 (Elevated/Hover): border in rgba(78, 250, 176, 0.3) + box-shadow: 0 4px 20px rgba(78, 250, 176, 0.4). Level 4 (Modal/Overlay): border in rgba(78, 250, 176, 0.4) + box-shadow: 0 8px 32px rgba(78, 250,

Shapes

Strike employs 'Geometric Precision'—a shape philosophy that balances sharp technical edges with subtle softness. Buttons use lg radius (1rem / 16px), creating a pill-like form that feels modern and approachable without sacrificing technical credibility. Cards and containers use xl radius (1.5rem / 24px) for a more generous, premium feel. Input fields use DEFAULT radius (0.5rem / 8px) for a tighter, more utilitarian appearance that signals data entry. Badges and small UI elements use full radius (9999px) for maximum softness. The rationale: larger, more prominent components (buttons, cards) re

Components

Action Elements Primary buttons (#4efab0 background, black text, 16px 32px padding, 48px height, 1rem radius) are the dominant CTA. On hover, the background transitions to #3ad99a with a 200ms ease-out animation and glow intensifies to 0 4px 20px rgba(78, 250, 176, 0.4). Active state uses #2bc485 with a 100ms press animation (scale: 0.98). Secondary buttons use transparent backgrounds with 1px mint borders, 10px 24px padding, and full radius (pill shape). On hover, the background fills with rgba(78, 250, 176, 0.1) and the border brightens to #3ad99a. All button text uses Space Grotesk 600 weight, 14px size, with 0.01em letter-spacing.

Containers & Surfaces Cards use surface-container (#141414) backgrounds with 1px borders in rgba(78, 250, 176, 0.2) and xl radius (24px). Padding is

Do's and Don'ts

**Do**

• Do use mint-green (#4efab0) exclusively for primary CTAs and interactive focus states—it is the brand's signature accent and must never be diluted or overused on secondary elements.
• Do maintain high contrast between text and background: white (#ffffff) on black (#000000) or mint-green, black on mint-green. Test all text at WCAG AAA standards, especially on gradient backgrounds.
• Do apply the mint glow (box-shadow with rgba(78, 250, 176, 0.3–0.4)) on hover states for all interactive elements to reinforce the brand's high-energy, digital aesthetic.
• Do use Space Grotesk at 600 weight for all interactive text (buttons, labels) and 400 weight for body copy. Maintain tight letter-spacing (-0.02em) on display text and neutral (0em) on body.
• Do organize information hierarchically using size, weight, and color: display text for hero headlines, headline-lg for section titles, body-md for descriptions, label-md for CTAs.

**Don't**

• Don't use the primary mint-green (#4efab0) on large background areas, body text, or non-interactive elements—it must remain reserved for CTAs and focus states to maintain visual hierarchy.
• Don't mix typefaces; Space Grotesk is the only approved font family. Avoid system-ui, sans-serif, or serif fallbacks in the design system.
• Don't apply shadows using black or gray; all elevation is conveyed through mint-green glows (rgba(78, 250, 176, 0.3–0.4)) to maintain brand cohesion.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full). Arbitrary radii break the geometric precision aesthetic.
• Don't reduce contrast on dark backgrounds by using light grays or desaturated colors for text. On-surface must be white (#ffffff) or on-surface-variant (#e0e0e0) for accessibility.