---
version: alpha
name: "Kraken"
description: "Kraken 的 DESIGN.md 中文参考模板，保留原始 design token 与专业术语，覆盖 color system、typography、layout、components、motion 与 interaction states。"
language: zh-CN
sourceLanguage: en
---
# Kraken 启发的设计系统
## 1. 视觉主题与氛围
Kraken 的网站是一个干净、可信的加密货币交易平台，使用紫色作为强势品牌色。设计运行在白色背景之上，通过 Kraken Purple (`#7132f5`, `#5741d8`, `#5b1ecf`) 建立鲜明且专业的 crypto identity。专有的 Kraken-Brand 字体负责 display heading，使用 bold (700) weight 和 negative tracking；Kraken-Product（以 IBM Plex Sans 作为 fallback）则承担 UI 主力字体角色。
**Key Characteristics:**
- Kraken Purple (`#7132f5`) 作为 primary brand，并配合更深的变体 (`#5741d8`, `#5b1ecf`)
- Kraken-Brand (display) + Kraken-Product (UI) 的双字体系统
- Near-black (`#101114`) 文本，搭配冷调 blue-gray neutral scale
- 12px radius button（圆角，但不是 pill）
- Subtle shadow (`rgba(0,0,0,0.03) 0px 4px 24px`)，轻到接近耳语级
- Green accent (`#149e61`) 用于 positive/success state
## 2. 色彩 palette 与角色
### Primary
- **Kraken Purple** (`#7132f5`): Primary CTA、brand accent、links
- **Purple Dark** (`#5741d8`): Button border、outlined variant
- **Purple Deep** (`#5b1ecf`): 最深的 purple
- **Purple Subtle** (`rgba(133,91,251,0.16)`): 16% purple，用于 subtle button background
- **Near Black** (`#101114`): Primary text
### Neutral
- **Cool Gray** (`#686b82`): Primary neutral，border 通常以 24% opacity 使用
- **Silver Blue** (`#9497a9`): Secondary text、muted element
- **White** (`#ffffff`): Primary surface
- **Border Gray** (`#dedee5`): Divider border
### Semantic Colors
- **Green** (`#149e61`): Success/positive，用于 badge 时通常以 16% opacity 呈现
- **Green Dark** (`#026b3f`): Badge text
## 3. Typography 规则
### Font Families
- **Display**: `Kraken-Brand`，fallback: `IBM Plex Sans, Helvetica, Arial`
- **UI / Body**: `Kraken-Product`，fallback: `Helvetica Neue, Helvetica, Arial`
### Hierarchy
| 角色 | 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 样式
### 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 原则
### 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
- CTA 和 link 使用 Kraken Purple (#7132f5)
- 所有 button 使用 12px radius
- Heading 使用 Kraken-Brand，body 使用 Kraken-Product
### Don't
- 不要使用 pill button；12px 是 button 的最大 radius
- 不要使用定义 scale 之外的其他 purple
## 8. Responsive Behavior
Breakpoints: 375px, 425px, 640px, 768px, 1024px, 1280px, 1536px
## 9. Agent Prompt 指南
### 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)."
