Design System: 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 | 500600 | 1.38 | normal |
| Caption | Kraken-Product | 14px | 400700 | 1.431.71 | normal |
| Small | Kraken-Product | 12px | 400500 | 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)."