# Kraken · Design system migration spec

> Source: https://www.kraken.com  ·  Curated by OpenDesign  ·  en

> Worth including as a benchmark for 'Clean Fintech' design, showing how to balance professional tooling with accessible, premium aesthetics.

## 1. Identity DNA

If a cryptocurrency exchange were a building, Kraken would be a sleek, modern vault—its architecture communicates trust and security through clean lines and purposeful weight. Every element, from the generous white space to the singular purple accent, reinforces the idea of a secure yet accessible digital asset environment.

**One-liner:** A premier cryptocurrency exchange platform offering secure, high-performance trading for individuals and institutions.
**Keywords:** Kraken · Crypto · Trading · Exchange · Finance
**Analogy:** A high-end financial terminal for the digital age, balancing professional tooling with accessible retail entry.

## 2. Color

The system's color principle is one of high contrast and clean separation, using a stark palette of white, black, and dark gray to establish clarity. A single, vibrant purple (#6B21E2) is reserved exclusively for calls-to-action, making interactive elements instantly recognizable.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F5F5F5` | main background |
| `--bg-soft` | `#E8E8ED` | card background |
| `--bg-quiet` | `#F6F5F9` | quiet area |
| `--ink` | `#101114` | body text |
| `--ink-soft` | `#686B82` | secondary text |
| `--muted` | `#9497A9` | placeholder |
| `--accent` | `#7132F5` | single accent |
| `--line` | `rgba(16,17,20,0.1)` | divider |

**Color principle:** High-contrast dark text on light backgrounds for readability, anchored by a vibrant purple primary accent for conversion elements.

This disciplined use of a single accent ensures a cohesive and trustworthy visual hierarchy.

## 3. Typography

The typographic voice is set by modern, geometric sans-serifs, chosen for their clean, professional character. Rules enforce sentence case for headlines and demand sufficient contrast for readability, particularly on the darker backgrounds used for advanced product sections.

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 64px | 1.0 | 500 | -0.5px | Hero headline |
| heading | 36px | 1.1 | 500 | 0 | Section headings |
| body | 18px | 1.5 | 400 | 0 | Paragraphs |
| label | 14px | 1.4 | 400 | 0 | UI labels |
| mono | 12px | 1.3 | 400 | 0 | Data tables |

**Type rules:**
- Display font is a geometric sans-serif used for high-impact headings.
- Body font is a clean humanist sans-serif optimized for long-form reading.
- Monospace font is used strictly for data, code, and terminal elements.

## 4. Spacing

The layout breathes through a consistent and generous spacing rhythm, creating a measured sense of calm and professionalism.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 56 / 64 / 72 px
- **Rhythm:** Consistent 4px base scale with generous padding (16px, 24px, 54px) creating a balanced, airy layout.

## 5. Surfaces

Surface definition is achieved with subtle precision: soft shadows lift components without drama, and thin 1px borders provide clean edges. This approach maintains depth while preserving the overall flat, clean aesthetic.

- **Radius:** sm 8px · md 12px · lg 20px · pill 9999px
- **Shadows:**
  - 0 4px 60px rgba(0,0,0,0)
  - 0 1px 4px rgba(16,24,40,0.04)
  - 0 1px 2px rgba(16,24,40,0.04)
- **Borders:** 1px solid rgba(16,17,20,0.1)

## 6. Layout

The layout skeleton begins with a full-width hero section, a clear and welcoming entry point. This transitions into a contrasting, dark, immersive section designed specifically to showcase the depth and power of the 'Pro' trading platform.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered single-column hero flowing into a 12-column grid for feature cards and stats.

## 7. Motion & Interaction

Motion is treated as a functional detail, not a spectacle. Animations are minimal and purposeful—subtle fade-ins on scroll and smooth hover transitions guide attention and confirm interaction without distraction.

- **Durations:** micro 150ms · small 300ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Opacity and transform transitions on hover for interactive elements.
  - Smooth background-color and border-color shifts for state changes.
  - Subtle fade-in for loading elements.

- **Hover:** Color and background transitions (0.15s) for buttons and links.
- **Click:** Subtle opacity or scale reduction for tactile feedback.
- **Transition:** Smooth easing (0.4, 0, 0.2, 1) across all interactive properties.
- **Keyboard:** Focus states likely mirror hover states with added outlines (standard browser or custom focus rings).

## 8. Voice & Don'ts

The editorial voice is authoritative, confident, and empowering, matching the platform's professional credibility. Headlines are direct and benefit-oriented, while CTAs are clear and action-focused, avoiding casual playfulness or unexplained jargon.

- **Tone:** Professional, authoritative, yet empowering and accessible.
- **Headline style:** Bold, direct statements focusing on ownership and market power.
- **CTA style:** Action-oriented and urgent (e.g., 'Try Kraken', 'Sign-up now').
- **Avoid:** Overly casual or 'crypto-bro' slang. / Passive or uncertain language. / Visual clutter or neon-heavy 'gamer' aesthetics. / Dense walls of text without clear hierarchy.

### Don'ts
- ❌ Don't use a heavy drop shadow on cards — screenshot shows flat or very subtle layered backgrounds instead.
- ❌ Don't use sharp, square corners — screenshot shows consistent rounding (8px to 20px) on all containers and buttons.
- ❌ Don't use a chaotic, multi-color palette — screenshot shows a disciplined purple-accent scheme with neutral grays.
- ❌ Don't use a cluttered layout with too many competing elements — screenshot maintains generous whitespace and clear sectioning.
- ❌ Don't use decorative, script, or serif fonts for UI elements — screenshot uses clean, functional sans-serif and monospace families.
- ❌ Don't use low-contrast text — screenshot maintains high legibility with dark ink on light or dark backgrounds.

The system deliberately avoids decorative fonts, cluttered layouts, and competing accent colors to maintain its unwavering focus on clarity and trust.

## System Prompt (paste into AI tool)

```
Kraken is a premium cryptocurrency exchange platform. The design language is clean, professional, and empowering, utilizing a high-contrast palette of dark ink (#101114) on light backgrounds (#F5F5F5) with a vibrant purple accent (#7132F5) for primary actions. Typography relies on geometric and humanist sans-serifs for a modern, trustworthy feel, complemented by monospace for data-heavy interfaces. Critical constraints include maintaining generous whitespace, avoiding overly decorative elements, and ensuring all interactive components have clear, pill-shaped affordances. Do not use neon-heavy colors, sharp corners, or dense, unformatted text blocks. The system should feel like a secure, high-performance financial terminal accessible to both retail and professional traders.
```
