Kraken Kraken（加密货币交易所）
A clean, trustworthy exchange on white surfaces with Kraken Purple (#7132f5) as the commanding brand color and darker purples (#5741d8, #5b1ecf) as its only depth scale. Kraken-Brand headlines at weight 700 with negative tracking sit above whisper-level shadows and buttons rounded at exactly 12px.
干净可信的交易所气质：白色表面上用 Kraken Purple（#7132f5）统领，深紫变体（#5741d8、#5b1ecf）构成唯一的紫色阶梯；Kraken-Brand 标题用 700 字重加负字距，按钮圆角精确停在 12px，阴影轻如耳语。
Our reading of the look风格解读
Use Kraken Purple #7132f5 for every CTA and link, with #5741d8 on outlined variants and #5b1ecf as the deepest step — no purples outside this scale.
按钮和链接统一用 Kraken Purple #7132f5，描边变体用 #5741d8，最深一档 #5b1ecf —— 阶梯之外不用别的紫色。
Round buttons at exactly 12px — rounded but never pill — with 13px 16px padding on the primary.
按钮圆角精确停在 12px —— 圆而不胶囊 —— 主按钮内边距 13px 16px。
Set display headlines in Kraken-Brand at weight 700 with -1px tracking (48px hero), and run Kraken-Product (IBM Plex Sans fallback) for all UI text.
展示标题用 Kraken-Brand 700 字重、-1px 字距（英雄区 48px），界面文字全部交给 Kraken-Product（回退 IBM Plex Sans）。
Keep text near-black #101114 and neutrals cool: #686b82 borders, #9497a9 secondary text, #dedee5 dividers on white.
文字用近黑 #101114，中性色保持冷调：#686b82 描边、#9497a9 次要文字、#dedee5 白底分隔线。
Cap shadows at whisper level — rgba(0,0,0,0.03) 0px 4px 24px is the deepest elevation in the system.
阴影上限是耳语级 —— rgba(0,0,0,0.03) 0px 4px 24px 已经是全站最深的投影。
Color palette色板
Typography字体
How to use it 怎么用
Copy the DESIGN.md below into your project root, then tell your coding agent: “Build the page following DESIGN.md.” It also works with Google Stitch and any agent that reads markdown.
把下面的 DESIGN.md 复制到你的项目根目录，然后告诉编程代理：「按 DESIGN.md 搭这个页面」。Google Stitch 和任何能读 markdown 的代理都适用。
DESIGN.md — drop it into your projectDESIGN.md —— 放进你的项目
# 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)."
Source: awesome-design-md (MIT), reproduced verbatim.来源：awesome-design-md（MIT 协议），原样转载。