Kraken DESIGN.md
Brands
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,…
At a glance
- Group
- Brands
- Main color
- #7132f5Purple design systems
- Font
- IBM Plex Sans
Colors in this file
- #7132f5
Kraken Purple
- #5741d8
Purple Dark
- #101114
Near Black
- #ffffff
White
- #5b1ecf
Purple Deep
- #149e61
Green
- #9497a9
Silver Blue
- #026b3f
Green Dark
- #686b82
Cool Gray
- #dedee5
Border Gray
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,#026b3ftext, 6px radius - Neutral:
rgba(104,107,130,0.12)bg,#484b5etext, 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)."
Use it with your agent
Save the file as DESIGN.md in your project root, then ask your agent to follow it for UI work. Or let the agent fetch it over MCP.
Download
MCP server
MCP tool call
Related Design.md files
PUBLY (퍼블리)
Brands · Pretendard
PUBLY is a Korean career-knowledge membership, and its interface reads like a calm professional reading room rebuilt for the work-from-anywhere generation -- clean, credible, and quietly confident. The page opens on…
Stytch
Brands · Inter
Authentication and identity platform with a clean enterprise aesthetic — deep navy, electric purple accents, and security-first UI patterns.
Webflow
Brands · WF Visual Sans
An inspired interpretation of Webflow's design language — a visual web development platform whose surface contrasts a deep near-black #080808 primary against a generous white canvas, broken by a five-stop chromatic…
Railway
Brands · Inter
Deployment platform design with dark command-center surfaces, violet infrastructure accents, and fast project-to-production workflows.
Cabify
Brands · Cabify Ciudad
Cabify is a ride-hailing and mobility company. In its own words: "We were born in Madrid (Spain) in 2011 and have been pioneers in creating a new mobility in Iberoamerica." It operates in six countries — Spain,…
MetaMask
Brands · Euclid Circular
The most popular crypto wallet and web3 gateway. MetaMask combines a dark, cyber-focused foundation with fox-inspired branding and purple/blue accent tones for core actions. The system centers on dark mode as…