设计系统 —— 灵感源自 Kraken
1. 视觉主题与氛围
Kraken 的网站是一个干净、可信赖的加密货币交易所，以紫色为主命令色。设计在白色背景上运行，使用 Kraken 紫（#7132f5、#5741d8、#5b1ecf）构建出一种独特的专业加密身份。专有字体 Kraken-Brand 以粗体（700）字重和负字距处理展示标题，而 Kraken-Product（带 IBM Plex Sans 回退）则作为 UI 主力。
关键特征：
- Kraken 紫（
#7132f5）作为主品牌，配深色变体（#5741d8、#5b1ecf） - Kraken-Brand（展示）+ Kraken-Product（UI）双字体系统
- 近黑（
#101114）文字配冷蓝灰中性刻度 - 12px 圆角按钮（圆润但非胶囊）
- 柔和投影（
rgba(0,0,0,0.03) 0px 4px 24px）——轻语级 - 绿色点缀（
#149e61）用于正面/成功状态
2. 配色与角色
主色
- Kraken 紫（
#7132f5）：主 CTA、品牌点缀、链接 - 紫深（
#5741d8）：按钮边框、描边变体 - 紫极深（
#5b1ecf）：最深紫 - 紫淡（
rgba(133,91,251,0.16)）：16% 透明的紫——柔和按钮背景 - 近黑（
#101114）：主文字
中性
- 冷灰（
#686b82）：主中性色，24% 透明的边框 - 银蓝（
#9497a9）：次级文字、弱化元素 - 白（
#ffffff）：主表面 - 边框灰（
#dedee5）：分隔线边框
语义
- 绿（
#149e61）：成功/正面状态，徽标用 16% 透明 - 绿深（
#026b3f）：徽标文字
3. 字体排版规则
字体族
- 展示：
Kraken-Brand，回退：IBM Plex Sans, Helvetica, Arial - UI / 正文：
Kraken-Product，回退：Helvetica Neue, Helvetica, Arial
层级
| 角色 | 字体 | 字号 | 字重 | 行高 | 字距 |
|---|---|---|---|---|---|
| 展示 英雄 | Kraken-Brand | 48px | 700 | 1.17 | -1px |
| 段落标题 | Kraken-Brand | 36px | 700 | 1.22 | -0.5px |
| 副标题 | Kraken-Brand | 28px | 700 | 1.29 | -0.5px |
| 特性标题 | Kraken-Product | 22px | 600 | 1.20 | 正常 |
| 正文 | Kraken-Product | 16px | 400 | 1.38 | 正常 |
| 正文 中 | Kraken-Product | 16px | 500 | 1.38 | 正常 |
| 按钮 | Kraken-Product | 16px | 500–600 | 1.38 | 正常 |
| 说明 | Kraken-Product | 14px | 400–700 | 1.43–1.71 | 正常 |
| 小 | Kraken-Product | 12px | 400–500 | 1.33 | 正常 |
| 微 | Kraken-Product | 7px | 500 | 1.00 | 大写 |
4. 组件样式
按钮
主紫
- 背景：
#7132f5 - 文字：
#ffffff - 内边距：13px 16px
- 圆角：12px
紫描边
- 背景：
#ffffff - 文字：
#5741d8 - 边框：
1px solid #5741d8 - 圆角：12px
紫淡
- 背景：
rgba(133,91,251,0.16) - 文字：
#7132f5 - 内边距：8px
- 圆角：12px
白色按钮
- 背景：
#ffffff - 文字：
#101114 - 圆角：10px
- 阴影：
rgba(0,0,0,0.03) 0px 4px 24px
次级灰
- 背景：
rgba(148,151,169,0.08) - 文字：
#101114 - 圆角：12px
徽标
- 成功：
rgba(20,158,97,0.16)背景，#026b3f文字，6px 圆角 - 中性：
rgba(104,107,130,0.12)背景，#484b5e文字，8px 圆角
5. 布局原则
间距：1px、2px、3px、4px、5px、6px、8px、10px、12px、13px、15px、16px、20px、24px、25px
圆角：3px、6px、8px、10px、12px、16px、9999px、50%
6. 深度与层次
- 柔和：
rgba(0,0,0,0.03) 0px 4px 24px - 微：
rgba(16,24,40,0.04) 0px 1px 4px
7. 推荐与避免
推荐
- CTA 与链接使用 Kraken 紫（#7132f5）
- 所有按钮应用 12px 圆角
- 标题使用 Kraken-Brand，正文使用 Kraken-Product
避免
- 不要使用胶囊按钮——按钮最大圆角为 12px
- 不要在已定义刻度外使用其他紫色
8. 响应式行为
断点：375px、425px、640px、768px、1024px、1280px、1536px
9. 智能体提示指南
快速配色参考
- 品牌：Kraken 紫（
#7132f5） - 深色变体：
#5741d8 - 文字：近黑（
#101114） - 次级文字：
#9497a9 - 背景：白（
#ffffff）
示例组件提示
- "创建英雄区：白色背景。Kraken-Brand 48px 字重 700，字距 -1px。紫色 CTA（#7132f5，12px 圆角，13px 16px 内边距）。"