Kraken

Overview

Kraken is a fintech-forward cryptocurrency and equities trading platform designed for both retail and professional traders. The design system embodies 'Accessible Fintech Minimalism'—a philosophy that strips away unnecessary complexity while maintaining the visual authority and precision required for financial decision-making. The brand personality is confident yet approachable: users should feel empowered to take control of their assets without being intimidated by technical jargon or visual noise. The UI uses a light, neutral canvas (surface: #f6f5f9) paired with a signature vibrant purple accent (#7132f5) that signals action, trust, and forward momentum. Every interaction—from signing up to executing a trade—is designed to feel direct, secure, and purposeful.

Kraken's voice is clear, direct, and human. Sentences are active and benefit-focused: 'Own the power of your money' rather than 'Manage your portfolio.' The brand avoids corporate jargon and instead uses language that resonates with both newcomers and seasoned traders. Tone is calm and reassuring during moments of uncertainty (market volatility, account setup) and energetic during moments of opportunity (new features, market rallies). Example sentence in brand voice: 'Trade 600+ crypto pairs with the liquidity and speed you deserve.'

Colors

The Kraken color system is built on a foundation of trust and clarity. The primary color, #7132f5 (vibrant purple), is the brand's signature accent and appears on all primary call-to-action buttons, active states, and key interactive elements. This purple is chosen specifically because it conveys both innovation (tech-forward) and stability (financial authority) without the coldness of pure blue or the aggression of pure red. Secondary color #3b9b4a (forest green) is reserved for positive semantic states—gains, successful transactions, and confirmations. The tertiary/error color #d11d45 (deep red) is used exclusively for warnings, losses, and destructive actions, ensuring users instantly recognize risk. The surface stack is anchored in a very light lavender (#f6f5f9) that provides visual w

Typography

Kraken's type system balances brand personality with functional clarity. Display and Headline levels use Kraken-Brand (a custom typeface paired with IBM Plex Sans fallback), which conveys authority and modernity at large sizes while remaining warm and accessible. Body copy uses Kraken-Product (a custom font paired with Helvetica Neue fallback), optimized for legibility at 14–18px sizes where users read market data, transaction details, and educational content. The type scale follows a deliberate hierarchy: Display (60px, 700 weight) for hero statements like 'Own the power of your money'; Headline-lg (48px, 400 weight) for section titles; Headline-md (32px, 400 weight) for subsections; Title-lg (20px, 600 weight) for card headers and feature names; Body-lg (18px, 400 weight) for introductor

Layout

Kraken uses a fluid 12-column grid system with a maximum container width of 1280px, allowing the design to scale gracefully from mobile (single column) to desktop (full grid). The page rhythm is built on a semantic spacing scale: xs (4px) for micro-adjustments and icon spacing; sm (12px) for tight component padding; md (24px) for standard section gutters and card padding; lg (40px) for major section separation; xl (64px) for hero-to-content transitions. The gutter width is consistently 24px, creating breathing room between grid columns without excessive whitespace. Hero sections use lg spacing (40px) above and below to establish visual dominance, while card grids use md spacing (24px) between items. The background color (#f6f5f9) is intentionally subtle—a very light lavender rather than pu

Elevation & Depth

Kraken's elevation system uses subtle shadows to create depth without visual heaviness, reflecting the brand's 'clear and direct' philosophy. The system has three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle card borders and light interactive elements; md (0 3px 8px rgba(0, 0, 0, 0.15)) for hovered cards and modals; lg (0 12px 40px rgba(0, 0, 0, 0.16)) for floating elements like dropdowns and tooltips. Most cards use sm elevation by default, transitioning to md on hover to signal interactivity. Input fields and form containers use no shadow, relying instead on a 2px border in the outl

Shapes

Kraken's shape philosophy is 'Functional Precision'—rounded corners are used strategically to soften the interface without sacrificing the technical, data-focused aesthetic. Buttons use lg radius (12px), creating a modern, approachable feel while remaining clearly clickable. Input fields and form containers use the same lg radius (12px) for visual consistency and to signal that they are interactive. Cards use lg radius (12px) to match buttons and inputs, creating a cohesive component family. Badges and small UI elements use full radius (9999px) to create pill-shaped containers that feel lightw

Components

Action Elements Buttons are the primary interaction pattern on Kraken. Primary buttons use the signature purple (#7132f5) background with white text, 16px Label-md weight, 12px border-radius, and 15px vertical / 24px horizontal padding for a 48px total height. On hover, the background darkens to #6a2ae0 with a 200ms transition, signaling responsiveness. On active/pressed state, the background further darkens to #5a1fd0. Secondary buttons use a transparent background with a 2px purple border and purple text, maintaining the same height and padding. Buttons never use box-shadow; elevation is conveyed through color change alone. All button text is center-aligned and uses font-weight: 500 for clarity.

Containers & Surfaces Cards are the primary container for grouped content. Standard

Do's and Don'ts

**Do**

• Do use primary purple (#7132f5) exclusively for primary CTAs, focus states, and active navigation—this creates a predictable, learnable interaction model.
• Do maintain 48px minimum height for all clickable elements (buttons, input fields, list items) to ensure touch-friendly targets on mobile.
• Do apply md spacing (24px) between major sections and lg spacing (40px) for hero-to-content transitions to create visual rhythm and reduce cognitive load.
• Do use Label-md (16px, 500 weight) for all button text and interactive labels to signal clickability and maintain hierarchy.
• Do apply 200ms ease-in-out transitions to all hover and focus state changes to feel responsive without being jarring.
• Do use the full rounded radius (9999px) exclusively for badges and pill-shaped secondary elements to visually distinguish them from primary interactive components.

**Don't**

• Don't use secondary colors (green #3b9b4a or red #d11d45) for primary CTAs—these are reserved for semantic states (gains, losses, confirmations) and will confuse users about action intent.
• Don't apply shadows (elevation) to input fields or form containers—use borders instead to maintain visual clarity and prevent the interface from feeling 'floaty'.
• Don't use border-radius values between 2px and 8px on primary interactive elements; stick to lg (12px) for buttons/inputs or full (9999px) for badges to maintain visual consistency.
• Don't exceed lg elevation (0 12px 40px rgba(0, 0, 0, 0.16)) on any component—deeper shadows create visual clutter and make the interface feel disconnected.
• Don't use Headline or Display typography for body copy or form labels—these sizes are reserved for page titles and hero statements; use Body-md or Label-md instead.
• Don't apply text-shadow to body copy or standard labels—use it only on small labels (Label-sm) over busy or colored backgrounds where legibility is at risk.