# Kraken — Design System
> A global cryptocurrency exchange platform offering trading, staking, and financial services.
- **Canonical:** https://uiuxskills.com/library/kraken
- **Source:** https://www.kraken.com
- **Category:** Fintech & Crypto
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:10:58.549Z

---

---
version: alpha
name: Kraken
description: A global cryptocurrency exchange platform offering trading, staking, and financial services.
tone: >-
  Authoritative, transparent, and direct. The voice is focused on financial empowerment and
  institutional-grade security, avoiding hype in favor of clarity.
color-scheme: light
colors:
  primary: "#7132F5"
  surface: "#FFFFFF"
  surface-dim: "#F6F5F9"
  surface-container: "#DEDEE5"
  on-surface: "#000000"
  on-primary: "#FFFFFF"
  neutral: "#2E3350"
  error: "#D32F2F"
  success: "#388E3C"
  focus-ring: "#7132F5"
typography:
  display-lg:
    fontFamily: Kraken-Product
    fontSize: 3rem
  display-md:
    fontFamily: Kraken-Product
    fontSize: 2.25rem
  headline-lg:
    fontFamily: Kraken-Product
    fontSize: 1.875rem
  headline-md:
    fontFamily: Kraken-Product
    fontSize: 1.5rem
  headline-sm:
    fontFamily: Kraken-Product
    fontSize: 1.25rem
  body-md:
    fontFamily: Kraken-Product
    fontSize: 1rem
  label-sm:
    fontFamily: Kraken-Product
    fontSize: 0.75rem
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 20px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    width: auto
  button-primary-hover:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.xl}"
    borderColor: "{colors.surface-container}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.xl}"
  input-field:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.surface-container}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "{colors.neutral}"
  badge:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.neutral}"
    typography: "{typography.label-sm}"
  badge-success:
    backgroundColor: "#E8F5E9"
    textColor: "{colors.success}"
  divider:
    backgroundColor: "{colors.surface-container}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
motion:
  duration-medium: 300ms
  easing-standard: ease-out
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 4px 6px rgba(0,0,0,0.10)
  lg: 0 10px 15px rgba(0,0,0,0.12)
---

## Overview

Kraken maintains a professional, high-trust aesthetic that balances financial authority with modern digital accessibility. The visual identity relies on a deep, high-contrast palette and clean, geometric typography to convey stability and security for crypto investors.

## Colors

The color strategy focuses on high-contrast legibility and clear semantic signaling, essential for a financial platform.

*   Primary (#7132F5): Brand signature purple used for primary CTAs and key highlights.
*   Surface (#FFFFFF): Primary background color for clean content presentation.
*   Surface-dim (#F6F5F9): Secondary background for cards and section containers.
*   Surface-container (#DEDEE5): Neutral container color for borders and dividers.
*   On-surface (#000000): Primary text color for high readability.
*   On-primary (#FFFFFF): Text color for buttons and elements on primary background.
*   Neutral (#2E3350): Dark neutral for secondary text and iconography.
*   Error (inferred) (#D32F2F): Semantic color for negative market trends and error states.
*   Success (inferred) (#388E3C): Semantic color for positive market trends and success states.
*   Focus-ring (inferred) (#7132F5): Focus indicator for accessibility.

## Typography

The typography uses the Kraken-Product font family to maintain a consistent, institutional-grade voice across all interface levels.

*   Display-lg (inferred): Used for hero headlines.
*   Display-md (inferred): Secondary hero or section titles.
*   Headline-lg (inferred): Primary section headers.
*   Headline-md (inferred): Sub-section headers.
*   Headline-sm (inferred): Small headers or list titles.
*   Body-md (inferred): Standard body text.
*   Label-sm (inferred): Small labels and metadata.

## Layout

The site utilizes a responsive grid system with a 1252px max-width, transitioning from a 2-column desktop layout to a single-column stack on mobile. Vertical rhythm is governed by a spacing scale (xs: 4px, sm: 8px, md: 16px, lg: 24px, xl: 32px, 2xl: 48px) to ensure consistent breathing room. The page pattern follows a logical flow: nav, hero, stats, portfolio, and footer. The hero section is centered, prioritizing a clear primary CTA and secondary sign-up path.

## Elevation & Depth

Depth is used sparingly to highlight interactive cards and navigation elements, relying on three distinct shadow weights.

*   elevation.sm: Subtle lift for small UI elements.
*   elevation.md: Standard depth for cards and interactive containers.
*   elevation.lg: Pronounced depth for modals or overlays.
*   *Note: These values are inferred based on standard design system practices for high-trust financial platforms.*

## Shapes

The brand employs a intentional mix of corner radii to balance software accessibility with structural stability. Large containers, such as the `card` component, utilize a `rounded.xl` (20px) radius to soften the enterprise aesthetic, while smaller interactive elements like buttons often use `rounded.full` (pill shape) to emphasize their clickable nature.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
The primary button uses `{colors.primary}` with a `label-sm` typography style. Secondary buttons are transparent with a `{colors.primary}` border. Use primary buttons for core actions and secondary for alternative paths.

### Card
Cards utilize `{colors.surface}` with a `{rounded.xl}` radius and a subtle `{colors.surface-container}` border. Use these to group related content or data points.

### Input Field
Input fields feature a `{colors.surface}` background and a `{colors.surface-container}` border, which transitions to `{colors.focus-ring}` when active.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs. | Never use `{colors.primary}` for background surfaces. |
| Apply `{rounded.xl}` to all `card` containers. | Do not use sharp corners (0px) on `card` components. |
| Use `{typography.headline-lg}` for main section titles. | Avoid mixing `{typography.body-md}` with non-standard font weights. |
| Maintain consistent `{spacing.md}` between grid items. | Do not use `{spacing.xs}` for primary layout gutters. |
| Use `{colors.success}` for positive market indicators. | Never apply `{colors.error}` for non-semantic status indicators. |
| Apply `{colors.surface-dim}` for background sections. | Avoid excessive use of shadows on flat UI elements. |
| Use `input-field-focus` for active form states. | Never omit `focus-ring` on interactive elements. |
| Use `badge-success` for positive price movement. | Do not use `badge-error` for non-critical information. |

## Content Style

CTA labels are imperative and action-oriented, using verbs like "Get started" or "Sign up." Headings are direct and benefit-focused, designed to communicate value immediately.

Copy density is kept concise and scannable, prioritizing clear data points and frequent use of whitespace to prevent cognitive overload.

## Imagery & Icons

The brand employs minimal, vector-based iconography for platform features and asset representation. Imagery should be high-contrast and minimalist, avoiding decorative clutter in favor of functional, clear visual communication.