Kraken

### Kraken - Crypto trading platform. - Purple-accented dark UI, data-dense dashboards - Kraken's website is a clean, trustworthy crypto exchange that uses p…

High Quality

Join 0+ developers using this skill

skill

Designs

intermediate

0 installs

4/5 quality

View Source

Last updated: June 19, 2026

AI Skill Market Insights

Real data. Real impact.

Popularity

Rising

Emerging

Active Users

Developers

Quick Start

Install Command

Source: https://github.com/VoltAgent/awesome-design-md?ref=explainx

TEAR & SHARE

3-5hrs/WK

RISING

0.0K+ USING

Design System Inspired by 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)."

Kraken

AI Skill Market Insights

Quick Start

Install Command

TEAR & SHARE

Tags

Be Part of the 0+ Developer Community

Design System Inspired by Kraken

1. Visual Theme & Atmosphere

2. Color Palette & Roles

Primary

Neutral

Semantic

3. Typography Rules

Font Families

Hierarchy

4. Component Stylings

Buttons

Badges

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

7. Do's and Don'ts

Do

Don't

8. Responsive Behavior

9. Agent Prompt Guide

Quick Color Reference

Example Component Prompts

License

MongoDB

NVIDIA

Mintlify

Spotify

Channels

Learn

Compare

Company

Agents