Kraken

source

---
name: Kraken
description:
  Clean crypto-exchange aesthetic with Kraken Purple as commanding accent, dual
  display/UI font system, and softly-rounded 12px buttons on white surfaces.
originalFonts:
  primary: "Kraken-Brand"
  fallbacks:
    - "IBM Plex Sans"
    - "Helvetica"
    - "Arial"
colors:
  kraken-purple: "#7132f5"
  purple-dark: "#5741d8"
  purple-deep: "#5b1ecf"
  purple-subtle: "rgba(133,91,251,0.16)"
  near-black: "#101114"
  cool-gray: "#686b82"
  silver-blue: "#9497a9"
  white: "#ffffff"
  border-gray: "#dedee5"
  green: "#149e61"
  green-dark: "#026b3f"
  background: "#ffffff"
  surface: "#ffffff"
  ink: "#101114"
  ink-muted: "#9497a9"
  accent: "#7132f5"
  accent-alt: "#5741d8"
  border: "#dedee5"
  link: "#7132f5"
typography:
  h1:
    family: "IBM Plex Sans"
    size: "3rem"
    weight: 700
    lineHeight: 1.17
    letterSpacing: "-1px"
  h2:
    family: "IBM Plex Sans"
    size: "2.25rem"
    weight: 700
    lineHeight: 1.22
    letterSpacing: "-0.5px"
  h3:
    family: "IBM Plex Sans"
    size: "1.75rem"
    weight: 700
    lineHeight: 1.29
    letterSpacing: "-0.5px"
  body:
    family: "IBM Plex Sans"
    size: "1rem"
    weight: 400
    lineHeight: 1.38
  caption:
    family: "IBM Plex Sans"
    size: "0.875rem"
    weight: 400
    lineHeight: 1.43
  code:
    family: "IBM Plex Mono"
spacing:
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "20px"
  xl: "32px"
rounded:
  sm: "6px"
  md: "10px"
  lg: "12px"
  xl: "16px"
shadows:
  sm: "rgba(16,24,40,0.04) 0px 1px 4px"
  md: "rgba(0,0,0,0.03) 0px 4px 24px"
components:
  button-primary:
    background: "{colors.kraken-purple}"
    color: "{colors.white}"
    border: "none"
    radius: "{rounded.lg}"
    padding: "13px 16px"
  button-secondary:
    background: "{colors.white}"
    color: "{colors.purple-dark}"
    border: "1px solid {colors.purple-dark}"
    radius: "{rounded.lg}"
    padding: "13px 16px"
  card:
    background: "{colors.white}"
    border: "1px solid {colors.border-gray}"
    radius: "{rounded.xl}"
    padding: "1.5rem"
  input:
    background: "{colors.white}"
    border: "1px solid {colors.border-gray}"
    radius: "{rounded.lg}"
    padding: "0.625rem 0.875rem"
---

<!-- source: VoltAgent/awesome-design-md @ 80bbbc2 (MIT) — see ATTRIBUTION.md -->

# Design System Inspiration of Kraken

## 1. Visual Theme & Atmosphere

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

## 2. Color Palette & Roles

### Primary

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

### Neutral

- **Cool Gray** (`#686b82`): Primary neutral, borders at 24% opacity
- **Silver Blue** (`#9497a9`): Secondary text, muted elements
- **White** (`#ffffff`): Primary surface
- **Border Gray** (`#dedee5`): Divider borders

### Semantic

- **Green** (`#149e61`): Success/positive at 16% opacity for badges
- **Green Dark** (`#026b3f`): Badge text

## 3. Typography Rules

### Font Families

- **Display**: `Kraken-Brand`, fallbacks: `IBM Plex Sans, Helvetica, Arial`
- **UI / Body**: `Kraken-Product`, fallbacks: `Helvetica Neue, Helvetica, Arial`

### Hierarchy

| Role            | Font           | Size | Weight  | Line Height | Letter Spacing |
| --------------- | -------------- | ---- | ------- | ----------- | -------------- |
| Display Hero    | Kraken-Brand   | 48px | 700     | 1.17        | -1px           |
| Section Heading | Kraken-Brand   | 36px | 700     | 1.22        | -0.5px         |
| Sub-heading     | Kraken-Brand   | 28px | 700     | 1.29        | -0.5px         |
| Feature Title   | Kraken-Product | 22px | 600     | 1.20        | normal         |
| Body            | Kraken-Product | 16px | 400     | 1.38        | normal         |
| Body Medium     | Kraken-Product | 16px | 500     | 1.38        | normal         |
| Button          | Kraken-Product | 16px | 500–600 | 1.38        | normal         |
| Caption         | Kraken-Product | 14px | 400–700 | 1.43–1.71   | normal         |
| Small           | Kraken-Product | 12px | 400–500 | 1.33        | normal         |
| Micro           | Kraken-Product | 7px  | 500     | 1.00        | uppercase      |

## 4. Component Stylings

### Buttons

**Primary Purple**

- Background: `#7132f5`
- Text: `#ffffff`
- Padding: 13px 16px
- Radius: 12px

**Purple Outlined**

- Background: `#ffffff`
- Text: `#5741d8`
- Border: `1px solid #5741d8`
- Radius: 12px

**Purple Subtle**

- Background: `rgba(133,91,251,0.16)`
- Text: `#7132f5`
- Padding: 8px
- Radius: 12px

**White Button**

- Background: `#ffffff`
- Text: `#101114`
- Radius: 10px
- Shadow: `rgba(0,0,0,0.03) 0px 4px 24px`

**Secondary Gray**

- Background: `rgba(148,151,169,0.08)`
- Text: `#101114`
- Radius: 12px

### Badges

- Success: `rgba(20,158,97,0.16)` bg, `#026b3f` text, 6px radius
- Neutral: `rgba(104,107,130,0.12)` bg, `#484b5e` text, 8px radius

## 5. Layout Principles

### Spacing: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 13px, 15px, 16px, 20px, 24px, 25px

### Border Radius: 3px, 6px, 8px, 10px, 12px, 16px, 9999px, 50%

## 6. Depth & Elevation

- Subtle: `rgba(0,0,0,0.03) 0px 4px 24px`
- Micro: `rgba(16,24,40,0.04) 0px 1px 4px`

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

## 8. Responsive Behavior

Breakpoints: 375px, 425px, 640px, 768px, 1024px, 1280px, 1536px

## 9. Agent Prompt Guide

### Quick Color Reference

- Brand: Kraken Purple (`#7132f5`)
- Dark variant: `#5741d8`
- Text: Near Black (`#101114`)
- Secondary text: `#9497a9`
- Background: White (`#ffffff`)

### Example Component Prompts

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