Kraken Design System

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)."