---
version: alpha
name: Kraken
website: "https://www.kraken.com"
description: >-
  A clean, trustworthy crypto exchange identity built on a pure white canvas with Kraken Purple ("#7132f5") as the commanding brand voltage and two darker variants ("#5741d8" and "#5b1ecf") for outlined and deep states. Type runs a dual-family system — Kraken-Brand for display headings at 700 weight with negative tracking (-1px on the 48px hero), and Kraken-Product (IBM Plex Sans fallback) as the UI workhorse for body, buttons, and microcopy. Near-black "#101114" carries primary text against a cool blue-gray neutral scale (cool gray "#686b82", silver blue "#9497a9", border gray "#dedee5"). Buttons cap at 12px radius — rounded but never pill — and elevation is whisper-level: a single subtle shadow at "rgba(0,0,0,0.03) 0px 4px 24px" floats white buttons and the only other tier is a 1px micro shadow at "rgba(16,24,40,0.04)". Green "#149e61" at 16% opacity handles positive states for the trading-aware audience.

seo:
  title: "Kraken Design System for React — Purple (#7132f5), Kraken-Brand, dual font"
  metaDescription: "Kraken's design system as a DESIGN.md file. Kraken Purple #7132f5, dual Kraken-Brand + Kraken-Product fonts, 12px button radius. For React, Next.js, and AI tools."
  highlights:
    - "Single brand voltage — Kraken Purple (#7132f5) drives CTAs and links, with #5741d8 and #5b1ecf as outlined and deep variants"
    - "Dual proprietary type — Kraken-Brand at 700 weight handles display, Kraken-Product (IBM Plex Sans fallback) handles UI"
    - "12px is the radius ceiling — buttons stay rounded but never pill, a deliberate fintech tell separating Kraken from consumer brands"
    - "Whisper-level elevation — one subtle shadow at rgba(0,0,0,0.03) 0px 4px 24px and a 1px micro tier, nothing more"
    - "Green #149e61 at 16% opacity carries positive states; semantic color is reserved for trading data, never decoration"
  tags:
    - "Fintech & Crypto"
    - "Banking & Payments"
  lastUpdated: "2026-05-12"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Kraken's design system is built around two ideas: trust through restraint, and a single owned color. Kraken Purple ("#7132f5") is the brand voltage — it drives every primary CTA, every text link, and the outlined-button stroke at "#5741d8". The remainder of the page is white "#ffffff" canvas, near-black "#101114" ink, and a cool blue-gray neutral ladder running through "#686b82", "#9497a9", and a "#dedee5" hairline. There is no second accent color. Green "#149e61" exists only for positive/success badges, scoped to trading contexts where green has a precise meaning.

    This DESIGN.md packages the full Kraken visual contract into one machine-readable file. Inside: the three-step purple scale, a cool-gray neutral set, a green semantic pair, a dual-family typography stack (Kraken-Brand for display at 48/36/28px in 700 weight with negative tracking, Kraken-Product for UI body/buttons/captions at 16/14/12/7px), 5 button variants, 2 badge styles, 15 spacing tokens (1–25px), and 8 radius tokens. The file follows the Google Labs DESIGN.md spec — drop it into Claude, Cursor, or Copilot and the model writes React that matches Kraken's voice instead of a generic exchange template.

    Two details earn the system its identity. First, the 12px radius ceiling on buttons — rounded enough to feel approachable, never pill-shaped, which is the fintech tell that separates Kraken from consumer brands like Stripe Press or Linear. Second, the whisper-level elevation: a single shadow at "rgba(0,0,0,0.03) 0px 4px 24px" floats white buttons, and a 1px "rgba(16,24,40,0.04)" micro tier handles everything else. Crypto exchanges live and die on perceived trust; Kraken builds that trust by refusing to over-design.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.kraken.com"
      title: "Kraken.com"
      description: "Kraken's live exchange — the source surface this DESIGN.md was extracted from."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Kraken's primary brand color?"
      answer: "Kraken Purple — '#7132f5' — is the single brand voltage. It drives primary CTA buttons, inline links, and the brand wordmark. Two darker variants exist: '#5741d8' for outlined-button borders and the 'Purple Outlined' text color, and '#5b1ecf' as the deepest purple. A subtle 'rgba(133,91,251,0.16)' tint is the only purple background you'll see — used on low-emphasis purple buttons. Kraken does not use a secondary accent color outside this scale."
    - id: "typography"
      title: "What fonts does Kraken use, and what should I substitute?"
      answer: "Kraken runs a dual-family system. Kraken-Brand carries display headings at 48px / 700 / -1px tracking (hero), 36px / 700 / -0.5px (section), and 28px / 700 / -0.5px (sub-heading). Kraken-Product handles all UI — body at 16px / 400, buttons at 16px / 500–600, captions at 14px, small at 12px, and a 7px / 500 uppercase micro label. The proprietary stack falls back through IBM Plex Sans, Helvetica Neue, Helvetica, and Arial. If you cannot license the proprietary faces, IBM Plex Sans is the documented fallback for both roles."
    - id: "button-radius"
      title: "Why does Kraken cap buttons at 12px and avoid pills?"
      answer: "The system explicitly bans pill buttons — 12px is the documented ceiling. Rounded enough to feel approachable, square enough to read as institutional. This is the visual tell that separates Kraken from consumer or developer-tool brands that lean on fully rounded CTAs. The Do/Don't section calls this out: 'Don't use pill buttons — 12px is the max radius for buttons.' Other radii in the system run 3, 6, 8, 10, 12, 16, 9999px (only for circular avatars), and 50%."
    - id: "elevation"
      title: "How does Kraken handle depth and shadows?"
      answer: "Two whisper-level shadow tiers only. 'Subtle' is 'rgba(0,0,0,0.03) 0px 4px 24px' — used on the White Button variant to lift it off the canvas. 'Micro' is 'rgba(16,24,40,0.04) 0px 1px 4px' — used for the slightest separation on cards and dropdown surfaces. There is no third progressive tier. Depth comes from the white-on-white surface separation and 1px '#dedee5' hairlines rather than layered shadows, which keeps the trading interface from feeling visually noisy."
    - id: "semantic-color"
      title: "How does Kraken use green and other semantic colors?"
      answer: "Green '#149e61' at 16% opacity acts as the success badge background, with '#026b3f' as the badge text — used for positive states in trading contexts where green has a precise market meaning. The neutral badge pairing is 'rgba(104,107,130,0.12)' background with '#484b5e' text at 8px radius. Semantic color is scoped tightly: green is for confirmed positives only, never for decorative use, which preserves its signal value in a trading product."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own React fintech app?"
      answer: "Yes — feed the file to Claude, Cursor, or any AI tool that reads structured design tokens and the agent will reproduce Kraken's restraint (single purple voltage, 12px button ceiling, whisper shadows) rather than a generic exchange theme. Every hex, font, radius, and spacing value is a quoted string you can paste directly into Tailwind config or CSS variables. The 7-breakpoint responsive scale (375 / 425 / 640 / 768 / 1024 / 1280 / 1536) maps cleanly onto Tailwind's defaults."

colors:
  primary: "#7132f5"
  primary-dark: "#5741d8"
  primary-deep: "#5b1ecf"
  primary-subtle: "rgba(133,91,251,0.16)"
  ink: "#101114"
  neutral: "#686b82"
  neutral-soft: "#9497a9"
  neutral-strong: "#484b5e"
  canvas: "#ffffff"
  hairline: "#dedee5"
  secondary-gray-bg: "rgba(148,151,169,0.08)"
  success: "#149e61"
  success-bg: "rgba(20,158,97,0.16)"
  success-text: "#026b3f"

typography:
  display-hero:
    fontFamily: "Kraken-Brand, 'IBM Plex Sans', Helvetica, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.17
    letterSpacing: -1px
  section-heading:
    fontFamily: "Kraken-Brand, 'IBM Plex Sans', Helvetica, Arial, sans-serif"
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.22
    letterSpacing: -0.5px
  sub-heading:
    fontFamily: "Kraken-Brand, 'IBM Plex Sans', Helvetica, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.29
    letterSpacing: -0.5px
  feature-title:
    fontFamily: "Kraken-Product, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.20
    letterSpacing: normal
  body:
    fontFamily: "Kraken-Product, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.38
    letterSpacing: normal
  body-medium:
    fontFamily: "Kraken-Product, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.38
    letterSpacing: normal
  button:
    fontFamily: "Kraken-Product, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.38
    letterSpacing: normal
  caption:
    fontFamily: "Kraken-Product, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: normal
  small:
    fontFamily: "Kraken-Product, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: normal
  micro:
    fontFamily: "Kraken-Product, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 7px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: normal
    textTransform: uppercase

rounded:
  xs: 3px
  sm: 6px
  md: 8px
  lg: 10px
  xl: 12px
  xxl: 16px
  full: 9999px
  circle: 50%

spacing:
  px: 1px
  xxs: 2px
  xxs-plus: 3px
  xs: 4px
  xs-plus: 5px
  sm: 6px
  sm-plus: 8px
  md: 10px
  md-plus: 12px
  base: 13px
  base-plus: 15px
  lg: 16px
  lg-plus: 20px
  xl: 24px
  xl-plus: 25px

components:
  button-primary-purple:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    padding: 13px 16px
    rounded: "{rounded.xl}"
  button-purple-outlined:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary-dark}"
    border: "1px solid {colors.primary-dark}"
    rounded: "{rounded.xl}"
  button-purple-subtle:
    backgroundColor: "{colors.primary-subtle}"
    textColor: "{colors.primary}"
    padding: 8px
    rounded: "{rounded.xl}"
  button-white:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    shadow: "rgba(0,0,0,0.03) 0px 4px 24px"
  button-secondary-gray:
    backgroundColor: "{colors.secondary-gray-bg}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
  badge-success:
    backgroundColor: "{colors.success-bg}"
    textColor: "{colors.success-text}"
    rounded: "{rounded.sm}"
  badge-neutral:
    backgroundColor: "rgba(104,107,130,0.12)"
    textColor: "{colors.neutral-strong}"
    rounded: "{rounded.md}"
---

## Overview

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 (`{colors.primary}` — "#7132f5", `{colors.primary-dark}` — "#5741d8", `{colors.primary-deep}` — "#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 (`{colors.primary}` — "#7132f5") as primary brand with darker variants (`{colors.primary-dark}` — "#5741d8", `{colors.primary-deep}` — "#5b1ecf")
- Kraken-Brand (display) + Kraken-Product (UI) dual font system
- Near-black (`{colors.ink}` — "#101114") text with cool blue-gray neutral scale
- 12px radius buttons (`{rounded.xl}`) — rounded but not pill
- Subtle shadows (`rgba(0,0,0,0.03) 0px 4px 24px`) — whisper-level
- Green accent (`{colors.success}` — "#149e61") for positive/success states

### Color Palette & Roles

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

**Neutral**
- **Cool Gray** (`{colors.neutral}` — "#686b82"): Primary neutral, borders at 24% opacity
- **Silver Blue** (`{colors.neutral-soft}` — "#9497a9"): Secondary text, muted elements
- **White** (`{colors.canvas}` — "#ffffff"): Primary surface
- **Border Gray** (`{colors.hairline}` — "#dedee5"): Divider borders

**Semantic**
- **Green** (`{colors.success}` — "#149e61"): Success/positive at 16% opacity for badges
- **Green Dark** (`{colors.success-text}` — "#026b3f"): Badge text

### Typography Principles

The system runs a dual-family stack. **Kraken-Brand** (fallbacks: `IBM Plex Sans, Helvetica, Arial`) handles display headings — the 48px hero at 700 weight with -1px tracking, the 36px section heading at -0.5px, and the 28px sub-heading at -0.5px. **Kraken-Product** (fallbacks: `Helvetica Neue, Helvetica, Arial`) carries everything else: the 22px / 600 feature title, 16px / 400 body, 16px / 500–600 buttons, 14px caption, 12px small, and a 7px / 500 uppercase micro label for the densest UI affordances.

### Layout Principles

**Spacing scale:** 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 13px, 15px, 16px, 20px, 24px, 25px — a granular ladder that supports the dense data layout of a trading product.

**Border radius scale:** 3px, 6px, 8px, 10px, 12px, 16px, 9999px, 50% — with 12px as the documented ceiling for buttons. 9999px is reserved for circular avatars; 50% handles perfect circles.

### Depth & Elevation

- **Subtle:** `rgba(0,0,0,0.03) 0px 4px 24px` — floats the White Button variant
- **Micro:** `rgba(16,24,40,0.04) 0px 1px 4px` — the slightest card and dropdown separation

There are no progressive elevation tiers beyond these two. Depth comes from white-on-white surface separation and 1px `{colors.hairline}` ("#dedee5") borders.

### 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

### Responsive Behavior

Breakpoints: 375px, 425px, 640px, 768px, 1024px, 1280px, 1536px — a 7-step ladder that maps cleanly onto Tailwind's defaults with two extra small-mobile steps (375, 425) for narrow-device tuning.

### Agent Prompt Guide

**Quick color reference**
- Brand: Kraken Purple (`{colors.primary}` — "#7132f5")
- Dark variant: `{colors.primary-dark}` — "#5741d8"
- Text: Near Black (`{colors.ink}` — "#101114")
- Secondary text: `{colors.neutral-soft}` — "#9497a9"
- Background: White (`{colors.canvas}` — "#ffffff")

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