What is Kraken's primary brand color?

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.

What fonts does Kraken use, and what should I substitute?

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.

Why does Kraken cap buttons at 12px and avoid pills?

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%.

How does Kraken handle depth and shadows?

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.

How does Kraken use green and other semantic colors?

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.

Can I use this DESIGN.md to build my own React fintech app?

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.

Kraken Design System

Kraken's design system as a DESIGN.md file.

About Kraken DESIGN.md

Curated by Dov AzencotUpdated May 12, 2026Source kraken.com

Fintech & Crypto
Banking & Payments

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.

What makes it distinct

Single brand voltageKraken Purple (#7132f5) drives CTAs and links, with #5741d8 and #5b1ecf as outlined and deep variants
Dual proprietary typeKraken-Brand at 700 weight handles display, Kraken-Product (IBM Plex Sans fallback) handles UI
12px is the radius ceilingbuttons stay rounded but never pill, a deliberate fintech tell separating Kraken from consumer brands
Whisper-level elevationone 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

Live at kraken.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

kraken.com

Explore Kraken

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Kraken design system FAQ

Common questions about Kraken's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Kraken.com

Kraken's live exchange — the source surface this DESIGN.md was extracted from.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use Kraken in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→