Design

Kraken Design

Crypto trading. Purple-accented dark UI, data-dense dashboards.

Kraken

hero / exchange market module / purple controls

Kraken design system

A clean crypto exchange UI built from white surfaces, Kraken Purple action states, cool gray neutrals, compact market rows, small-radius badges, and whisper-level shadows.

market watch

verified

BTC$104,821+2.4%

ETH$4,012+0.8%

USD1.000stable

palette / exact color swatches / roles

Color roles

Kraken Purple

#7132f5

Primary CTA, links, selected states

Purple Dark

#5741d8

Outlined button border

Purple Deep

#5b1ecf

Deep brand variant

Near Black

#101114

Primary text

Success Green

#149e61

Positive badges

Green Dark

#026b3f

Badge text

Cool Gray

#686b82

Neutral border and UI

White Surface

#ffffff

Primary canvas

typography / scale / line-height / tracking

Type hierarchy

typography.display-hero

48px / 700 / 1.17

Trade with confidence

Kraken-Brand display hero

typography.section-heading

36px / 700 / 1.22

Portfolio movement

Exchange section headings

typography.feature-title

22px / 600 / 1.2

Funding and staking

Feature cards

typography.body

16px / 400 / 1.38

Clean exchange copy uses cool-gray support text.

Body and UI copy

typography.caption

14px / 700 / 1.43

BTC / USD VERIFIED

Market labels

components / controls / badges / states

Interface components

component.button-primary-purple

Primary Purple

#7132f5 fill, white text, 13px x 16px padding, 12px radius.

component.button-purple-outlined

Purple Outlined

White surface with #5741d8 text and border.

component.button-purple-subtle

Purple Subtle

16% purple background for quieter recurring actions.

component.badges

Badges

Success and neutral badges use small 6px to 8px radius, never pills.

elevation / depth / shadow

Whisper shadow only

Depth stays at rgba(0,0,0,0.03) 0px 4px 24px with borders and surface contrast carrying structure.

spacing / radius / shape

spacing.8 8px

spacing.16 16px

spacing.25 25px

rounded.badge 6px

rounded.white-button 10px

rounded.button 12px

mobile 375px breakpoint

Mobile markets

Market rows stack into compact cards with 44px controls.

tablet 768px breakpoint

Tablet modules

Portfolio, funding, and staking modules move into two-up groups.

desktop 1280px breakpoint

Desktop exchange

Dense market rows, stats, and CTA panels restore full exchange rhythm.

# Design System Inspired by Kraken

## 1. Visual Theme & Atmosphere

Kraken's website is a clean, trustworthy crypto exchange that uses purple as its commanding brand color. The design operates on white backgrounds with Kraken Purple (`#7132f5`, `#5741d8`, `#5b1ecf`) creating a distinctive, professional crypto identity. The proprietary Kraken-Brand font handles display headings with bold (700) weight and negative tracking, while Kraken-Product (with IBM Plex Sans fallback) serves as the UI workhorse.

**Key Characteristics:**
- Kraken Purple (`#7132f5`) as primary brand with darker variants (`#5741d8`, `#5b1ecf`)
- Kraken-Brand (display) + Kraken-Product (UI) dual font system
- Near-black (`#101114`) text with cool blue-gray neutral scale
- 12px radius buttons (rounded but not pill)
- Subtle shadows (`rgba(0,0,0,0.03) 0px 4px 24px`) — whisper-level
- Green accent (`#149e61`) for positive/success states

## 2. Color Palette & Roles

### Primary
- **Kraken Purple** (`#7132f5`): Primary CTA, brand accent, links
- **Purple Dark** (`#5741d8`): Button borders, outlined variants
- **Purple Deep** (`#5b1ecf`): Deepest purple
- **Purple Subtle** (`rgba(133,91,251,0.16)`): Purple at 16% — subtle button backgrounds
- **Near Black** (`#101114`): Primary text

### Neutral
- **Cool Gray** (`#686b82`): Primary neutral, borders at 24% opacity
- **Silver Blue** (`#9497a9`): Secondary text, muted elements
- **White** (`#ffffff`): Primary surface
- **Border Gray** (`#dedee5`): Divider borders

### Semantic
- **Green** (`#149e61`): Success/positive at 16% opacity for badges
- **Green Dark** (`#026b3f`): Badge text

## 3. Typography Rules

### Font Families
- **Display**: `Kraken-Brand`, fallbacks: `IBM Plex Sans, Helvetica, Arial`
- **UI / Body**: `Kraken-Product`, fallbacks: `Helvetica Neue, Helvetica, Arial`

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing |
|------|------|------|--------|-------------|----------------|
| Display Hero | Kraken-Brand | 48px | 700 | 1.17 | -1px |
| Section Heading | Kraken-Brand | 36px | 700 | 1.22 | -0.5px |
| Sub-heading | Kraken-Brand | 28px | 700 | 1.29 | -0.5px |
| Feature Title | Kraken-Product | 22px | 600 | 1.20 | normal |
| Body | Kraken-Product | 16px | 400 | 1.38 | normal |
| Body Medium | Kraken-Product | 16px | 500 | 1.38 | normal |
| Button | Kraken-Product | 16px | 500–600 | 1.38 | normal |
| Caption | Kraken-Product | 14px | 400–700 | 1.43–1.71 | normal |
| Small | Kraken-Product | 12px | 400–500 | 1.33 | normal |
| Micro | Kraken-Product | 7px | 500 | 1.00 | uppercase |

## 4. Component Stylings

### Buttons

**Primary Purple**
- Background: `#7132f5`
- Text: `#ffffff`
- Padding: 13px 16px
- Radius: 12px

**Purple Outlined**
- Background: `#ffffff`
- Text: `#5741d8`
- Border: `1px solid #5741d8`
- Radius: 12px

**Purple Subtle**
- Background: `rgba(133,91,251,0.16)`
- Text: `#7132f5`
- Padding: 8px
- Radius: 12px

**White Button**
- Background: `#ffffff`
- Text: `#101114`
- Radius: 10px
- Shadow: `rgba(0,0,0,0.03) 0px 4px 24px`

**Secondary Gray**
- Background: `rgba(148,151,169,0.08)`
- Text: `#101114`
- Radius: 12px

### Badges
- Success: `rgba(20,158,97,0.16)` bg, `#026b3f` text, 6px radius
- Neutral: `rgba(104,107,130,0.12)` bg, `#484b5e` text, 8px radius

## 5. Layout Principles

### Spacing: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 13px, 15px, 16px, 20px, 24px, 25px
### Border Radius: 3px, 6px, 8px, 10px, 12px, 16px, 9999px, 50%

## 6. Depth & Elevation
- Subtle: `rgba(0,0,0,0.03) 0px 4px 24px`
- Micro: `rgba(16,24,40,0.04) 0px 1px 4px`

## 7. Do's and Don'ts

### Do
- Use Kraken Purple (#7132f5) for CTAs and links
- Apply 12px radius on all buttons
- Use Kraken-Brand for headings, Kraken-Product for body

### Don't
- Don't use pill buttons — 12px is the max radius for buttons
- Don't use other purples outside the defined scale

## 8. Responsive Behavior
Breakpoints: 375px, 425px, 640px, 768px, 1024px, 1280px, 1536px

## 9. Agent Prompt Guide

### Quick Color Reference
- Brand: Kraken Purple (`#7132f5`)
- Dark variant: `#5741d8`
- Text: Near Black (`#101114`)
- Secondary text: `#9497a9`
- Background: White (`#ffffff`)

### Example Component Prompts
- "Create hero: white background. Kraken-Brand 48px weight 700, letter-spacing -1px. Purple CTA (#7132f5, 12px radius, 13px 16px padding)."