---
title: "Kraken design system"
variant: extended
source: https://www.kraken.com/
captured_at: 2026-10-12
theme: light
industry: crypto
generator: Design DNA (https://four.wiralomi.com/style/kraken-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Kraken · Design System

> Quiet lavender canvas, vivid purple action, confident dark trading panels.

**Theme:** light · **Industry:** crypto · **Source:** https://www.kraken.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Kraken pairs a restrained, pale-lavender canvas with crisp typography and purple conversion controls. Dark, rounded trading showcases provide a strong contrast while the market table and footer keep information easy to scan.

## North star

Keep the pale, spacious page calm and let purple actions and dark product showcases provide the contrast.

## Overview

The page uses #f6f5f9 as a soft, cool canvas across the hero and market content, with #101114 for primary text and #686b82 or #9497a9 for supporting copy. The saturated #7132f5 is reserved for high-intent controls, links, and brand marks, so actions stand out without overwhelming the open layout. A centered hero pairs a large, light-weight Kraken-Brand headline with a short supporting line, email entry, and compact trust metrics. Below, broad dark trading showcases with rounded corners and subtle purple gradients introduce a high-contrast product mode; their interface imagery is treated as product proof rather than decoration. Content returns to the pale canvas for market tabs, a compact asset table, and a final signup prompt. Kraken-Brand carries display headings, while Kraken-Product handles navigation, body text, and buttons. Generous whitespace separates the major blocks; understated hairlines and restrained shadows keep cards crisp.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Lavender Mist | `#f6f5f9` | `--color-lavender-mist` | surface | Main page canvas and light content bands, including the hero and market area. |
| Kraken Violet | `#7132f5` | `--color-kraken-violet` | brand | Primary signup buttons, brand accents, and selected link text. |
| Slate Lavender | `#686b82` | `--color-slate-lavender` | neutral | Muted navigation, footer copy, and secondary body text. |
| Clean White | `#ffffff` | `--color-clean-white` | surface | Light card surfaces, button text on violet, and contrast within product UI. |
| Soft Slate | `#9497a9` | `--color-soft-slate` | neutral | Low-emphasis supporting text, especially footer details and captions. |
| Near Black | `#101114` | `--color-near-black` | semantic | Primary text and selected dark section content. |
| Night Plum | `#16121f` | `--color-night-plum` | surface | Deep product showcase and dark card backgrounds. |
| Quiet Gray | `#d3d3d3` | `--color-quiet-gray` | neutral | Measured card and element borders; use as a subtle hairline. |
| Abyss Violet | `#0b041a` | `--color-abyss-violet` | surface | Dark card surface, most visible in product-related panels. |
| Pale Divider | `#e5e4eb` | `--color-pale-divider` | neutral | Subtle footer and navigation separators. |
| Footer Haze | `#ededf0` | `--color-footer-haze` | neutral | Light divider detail in the footer. |
| Muted Amethyst | `#63528c` | `--color-muted-amethyst` | accent | Purple-toned section gradient accent, not a dominant interface color. |
| Illustration Charcoal | `#444445` | `--color-illustration-charcoal` | semantic | Dark gradient stop within a section treatment; not a core text color. |
| Illustration Gray | `#666666` | `--color-illustration-gray` | semantic | Gradient detail in dark section artwork, not a primary brand surface. |
| Coral Glint | `#f9bdba` | `--color-coral-glint` | accent | Warm gradient accent appearing in a section treatment, not a recurring UI control. |
| Deep Ink | `#0c0713` | `--color-deep-ink` | surface | Near-black product-card detail within dark showcase artwork. |

### Semantic aliases

`--color-canvas` → `#f6f5f9` (Lavender Mist) · `--color-surface` → `#ffffff` (Clean White) · `--color-surface-2` → `#16121f` (Night Plum) · `--color-surface-3` → `#101114` (Near Black) · `--color-surface-4` → `#0b041a` (Abyss Violet) · `--color-text` → `#101114` (Near Black) · `--color-text-muted` → `#686b82` (Slate Lavender) · `--color-text-subtle` → `#9497a9` (Soft Slate) · `--color-border` → `#d3d3d3` (Quiet Gray) · `--color-accent` → `#7132f5` (Kraken Violet) · `--color-accent-2` → `#63528c` (Muted Amethyst) · `--color-accent-3` → `#f9bdba` (Coral Glint) · `--color-on-accent` → `#ffffff` (Clean White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#101114` | `#f6f5f9` | 17.39:1 | AAA |
| `#101114` | `#ffffff` | 18.88:1 | AAA |
| `#101114` | `#16121f` | 1.03:1 | fail |
| `#686b82` | `#f6f5f9` | 4.82:1 | AA |
| `#686b82` | `#ffffff` | 5.23:1 | AA |
| `#686b82` | `#16121f` | 3.52:1 | AA-large |
| `#686b82` | `#101114` | 3.61:1 | AA-large |
| `#9497a9` | `#f6f5f9` | 2.67:1 | fail |
| `#9497a9` | `#ffffff` | 2.89:1 | fail |
| `#9497a9` | `#16121f` | 6.36:1 | AA |

### Gradients

- `radial-gradient(56.48% 85.48% at 29.29% 38.62%, rgba(43, 20, 99, 0.72) 0%, rgba(0, 0, 0, 0.72) 100%), none`
- `radial-gradient(40.63% 40.63% at 50% 59.37%, rgb(102, 102, 102) 0%, rgb(20, 20, 20) 100%)`
- `linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), linear-gradient(rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 85%)`
- `radial-gradient(83.9% 170.46% at 30.28% 1.87%, rgba(255, 59, 41, 0.3) 0%, rgba(255, 59, 41, 0) 77.05%), none`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Kraken-Product | `--font-body` | webfont | 400, 500, 700 | Navigation, body copy, buttons, captions, and links | Inter |
| Kraken-Brand | `--font-display` | webfont | 400, 500 | Display headings and major hero titles | Manrope |
| Kraken-Mono | `--font-mono` | webfont | 500 | Code-like or technical interface snippets | Roboto Mono |

- **Kraken-Product:** Neutral sans-serif workhorse; measured weights 400, 500, and 700. Keep case natural and tracking unaccented.
- **Kraken-Brand:** Light, open display voice; measured at 400 with no added tracking or uppercase treatment.
- **Kraken-Mono:** Use sparingly for technical text; measured weight 500 and regular letter spacing.

### Type scale — Perfect Fourth (ratio ≈ 1.329, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 58px | 400 | 1.14 | 0 | — | Kraken-Brand | Large, brand-led headline treatment, especially the home hero. |
| h1 | 48px | 400 | 1.17 | 0 | — | Kraken-Brand | Primary page heading and prominent section titles. |
| h2 | 36px | 400 | 1.22 | 0 | — | Kraken-Brand | Major section headings such as market exploration. |
| h3 | 24px | 400 | 1.33 | 0 | — | Kraken-Brand | Subsection headings inside feature and product content. |
| h4 | 20px | 400 | 1.4 | 0 | — | Kraken-Product | Smaller card and content headings. |
| body | 14px | 400 | 1.43 | 0 | — | Kraken-Product | General explanatory copy and product descriptions. |
| caption | 12px | 400 | 1.33 | 0 | — | Kraken-Product | Trust metric notes, legal details, and low-priority labels. |
| button | 20px | 500 | 1.4 | 0 | — | Kraken-Product | Signup and other prominent conversion controls. |
| nav | 14px | 400 | 1.43 | 0 | — | Kraken-Product | Header navigation and footer column labels. |
| link | 12px | 400 | 1.33 | 0 | — | Kraken-Product | Compact inline links and footer destinations. |
| code | 14px | 500 | 1.43 | 0 | — | Kraken-Mono | Technical or command-line content where present. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 6, 8, 10, 12, 15, 16, 20, 24, 40, 48, 54, 56, 72 px.
- Section rhythm 56px · element gap 12px · card padding 26px · max content width 1332px.

The page centers its hero content within a broad desktop canvas, then uses wide, rounded showcase panels and a narrower market table to vary the rhythm. Measured page max width is 1332px; the layout feels comfortable rather than dense. Major content blocks are separated by a measured 56px section rhythm, with tighter 12px element spacing. The header is a single horizontal navigation row. Footer content shifts to a multi-column directory layout with fine-print and secondary legal navigation below.

## Shape & elevation

- Radius: button `12px` · card `20px` · media `50%` · nav `12px` · xs `12px` · sm `20px` · md `24px`
- Shadow `hairline` (button): `rgb(255, 255, 255) 0px 0px 0px 0px, rgba(59, 130, 246, 0.5) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `inset` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(133, 91, 251, 0.16) 0px 0px 0px 1px inset`
- Shadow `xl` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(0, 0, 0) 0px 4px 60px 0px`
- Shadow `sm` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(16, 24, 40, 0.04) 0px 1px 4px 0px`
- Shadow `hairline-2` (card): `rgba(16, 24, 40, 0.04) 0px 1px 2px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Most light content remains flat, with thin muted borders separating cards and table surfaces. Rounded dark showcases create the main depth shift; use shadows sparingly rather than adding elevation to every block. Measured card corners are 20px and buttons 12px. Any inset button treatment should remain subtle.

## Imagery

The visible product imagery is primarily trading-interface capture: dark charts, order books, and market data framed within large rounded showcase panels. Treat these as product proof, with the interface itself carrying most detail. Supporting dark gradients and subtle purple glow can enrich the showcase, but the page is not led by lifestyle photography or illustration. Keep market data and logos crisp against light surfaces.

## Components

### Header navigation

Single-row light header with Kraken mark, compact Kraken-Product navigation, language and search controls, then login and violet signup actions.

### Hero signup

Centered headline and supporting sentence above a bordered email entry paired with a #7132f5 action; social signup and trust metrics sit below.

### Primary CTA

Violet #7132f5 fill, white text, 12px measured radius, and medium-weight Kraken-Product typography.

### Trading showcase

Large rounded dark panel with pale text, centered heading and CTA, and a trading-interface visual extending below the copy.

### Market table

Light, compact asset listing with category tabs, columns for price and movement, and subtle separation between rows.

### Footer directory

Dense multi-column link directory with muted text, social icons, account actions, and a separate legal-information band.

### Measured component styles

- **Primary button** (“Sign up now”): background #7132f5 · text #ffffff · radius 12px · padding 15px 16px · 500 16px Kraken-Product
- **Link** (“Your agent can trade now Kraken CLI for ”): transparent background · text #101114 · radius 0px · padding 0px · 400 14px Kraken-Product
- **Input**: transparent background · text #101114 · radius 0px · padding 0px 2px 0px 0px · 500 14px Kraken-Product
- **Card** (“Your agent can trade now Kraken CLI for ”): background #191322 · text #101114 · radius 20px · padding 56px 24px 0px 24px · 400 14px Kraken-Product
- **Navigation item** (“Individuals Businesses Affiliates VIP Ma”): transparent background · text #101114 · radius 0px · padding 0px · 400 14px Kraken-Product

## Do

- Use #f6f5f9 as the dominant light-page canvas.
- Reserve #7132f5 for primary actions and selective brand emphasis.
- Set major headings in Kraken-Brand with a calm, light-weight appearance.
- Use dark rounded panels to frame trading product imagery.
- Keep market data compact, aligned, and easy to scan.
- Separate major sections with generous whitespace and restrained rules.

## Don't

- Do not flood the light canvas with saturated purple.
- Do not make every card dark or heavily shadowed.
- Do not crowd the hero with extra competing calls to action.
- Do not use gradient-only decoration as a substitute for product UI.
- Do not style headings in uppercase or add artificial tracking.
- Do not mistake illustration colors for recurring interface colors.

## Agent prompt

Build a crypto-exchange page in Kraken's calm, product-led style. Use Lavender Mist (#f6f5f9) for the main canvas, Near Black (#101114) for primary text, and Slate Lavender (#686b82) for secondary copy. Make Kraken Violet (#7132f5) the selective action color for signup buttons and important links, with white button text. Use Kraken-Brand-like light sans-serif headings and a neutral sans-serif for navigation, body, and controls. Center the hero around a concise promise and a clear signup path. Follow it with broad, rounded Night Plum (#16121f) or Abyss Violet (#0b041a) product panels containing crisp trading-interface imagery. Return to light surfaces for market data and supporting content. Keep borders subtle, spacing open, and shadows limited; ensure dense footer links remain orderly and readable.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | footer | Four-column link directory on a light canvas, followed by legal links and a distinct lower company-information band. | grouped navigation, account actions, social links, legal disclosures | muted link columns, violet account button, fine divider lines, light footer bands |

## Source CSS custom properties (selected)

```css
--special-font: "";
--special-font-bold: "";
--colors-ds-semantic-action-primary-background: #7132f5;
--colors-ds-semantic-action-primary-background-hover: #5b1ecf;
--colors-ds-semantic-action-primary-foreground: #fff;
--colors-ds-semantic-action-secondary-background: #686b8214;
--colors-ds-semantic-action-secondary-background-hover: #686b821f;
--colors-ds-semantic-action-secondary-border: #fff0;
--colors-ds-semantic-action-secondary-foreground: #484b5e;
--colors-ds-semantic-border-default: #686b8229;
--colors-ds-semantic-border-negative: #d11d45;
--colors-ds-semantic-border-positive: #08844f;
--colors-ds-semantic-border-strong: #686b82;
--colors-ds-semantic-border-subtle: #686b8229;
--colors-ds-semantic-content-brand: #7132f5;
--colors-ds-semantic-content-dimmed: #9497a9;
--colors-ds-semantic-content-disabled: #fff6;
--colors-ds-semantic-content-info: #0079b4;
--colors-ds-semantic-content-inverse: #fff;
--colors-ds-semantic-content-negative: #d11d45;
--colors-ds-semantic-content-neutral: #686b82;
--colors-ds-semantic-content-positive: #08844f;
--colors-ds-semantic-content-primary: #101114;
--colors-ds-semantic-content-warning: #c39621;
--colors-ds-semantic-focus-ring-inverse: #fff;
--colors-ds-semantic-overlay-scrim: #0006;
--colors-ds-semantic-status-brand-content: #37187d;
--colors-ds-semantic-status-brand-content-strong: #2b1463;
--colors-ds-semantic-status-brand-on-solid: #fff;
--colors-ds-semantic-status-brand-on-subtle: #7132f5;
--colors-ds-semantic-status-brand-solid: #7132f5;
--colors-ds-semantic-status-brand-subtle: #855bfb29;
--colors-ds-semantic-status-info-content: #003c5c;
--colors-ds-semantic-status-info-content-strong: #002940;
--colors-ds-semantic-status-info-on-solid: #fff;
--colors-ds-semantic-status-info-on-subtle: #006394;
--colors-ds-semantic-status-info-solid: #0079b4;
--colors-ds-semantic-status-info-subtle: #0092d829;
--colors-ds-semantic-status-negative-content: #5f0018;
--colors-ds-semantic-status-negative-content-strong: #3c000c;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/kraken-com