Dark Mode

Design System
Inspired by Kraken

Every color, font, and component — visualized with crypto-exchange precision.

Create AccountExplore
01 / Colors

Color Palette

Brand
Kraken Purple
#7132f5
Primary CTA
Purple Dark
#5741d8
Borders, outlined
Purple Deep
#5b1ecf
Deepest variant
Purple Subtle
rgba(133,91,251,0.16)
Subtle button bg
Neutral
Near Black
#101114
Primary text
Cool Gray
#686b82
Borders
Silver Blue
#9497a9
Secondary text
02 / Typography

Typography Scale

Display Hero
Kraken-Brand — 48px / 700 / 1.17 / -1px
Section Heading
Kraken-Brand — 36px / 700 / 1.22 / -0.5px
Feature Title
Kraken-Product — 22px / 600 / 1.20
Body — Buy, sell, and trade crypto with Kraken. Trusted by millions worldwide.
Kraken-Product — 16px / 400 / 1.38
Caption — Last updated 2 min ago
Kraken-Product — 14px / 600 / 1.71
03 / Buttons

Buttons

Create Account
Primary Purple
Explore
Purple Outlined
Learn
Purple Subtle
Details
White Shadow
04 / Cards

Cards

Bitcoin (BTC)

The most trusted cryptocurrency. Buy and sell with low fees on Kraken.

Ethereum (ETH)

Smart contracts and DeFi. Trade ETH and hundreds of tokens.

Staking

Earn rewards by staking your crypto. Flexible and bonded options available.

05 / Forms

Forms

Default
Focus (purple ring)
Error
06 / Spacing

Spacing

4
8
12
16
24
07 / Radius

Radius

6px
8px
12px
16px
pill
08 / Elevation

Depth

Flat
No shadow
Subtle
4px 24px at 0.03
Focus
Purple ring