---
version: alpha
name: "Design System"
colors:
  primary: "#0A1628"
  secondary: "#64748B"
  tertiary: "#0096FF"
  neutral: "#FFFFFF"
  on-tertiary: "#FFFFFF"
  border: "#CBD5E1"
  error: "#DC2626"
typography:
  h1:
    fontFamily: Inter
    fontSize: 3rem
    fontWeight: 700
  body-md:
    fontFamily: Inter
    fontSize: 1rem
    fontWeight: 400
  label-caps:
    fontFamily: Inter
    fontSize: 0.75rem
    fontWeight: 600
rounded:
  small: 4px
  medium: 8px
spacing:
  small: 8px
  medium: 16px
  large: 24px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.on-tertiary}"
    rounded: "{rounded.small}"
    padding: "12px 20px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.tertiary}"
    borderColor: "{colors.tertiary}"
    rounded: "{rounded.small}"
    padding: "12px 20px"
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.medium}"
    padding: "20px"
  input:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    borderColor: "{colors.border}"
    rounded: "{rounded.small}"
    padding: "10px 14px"
---

# Design System

## Overview

本设计系统追求简洁、专业、一致的视觉体验。以克制的色彩运用和清晰的信息层级为核心，确保用户在任何场景下都能高效完成任务。所有组件遵循 8px 网格对齐，保持视觉节奏统一。

## Elevation & Depth

使用 3 级阴影层级：sm（微浮起，用于卡片悬停）、md（中等浮起，用于下拉菜单和弹出层）、lg（强浮起，用于模态框和对话框）。深色模式下阴影透明度加倍以保持可感知性。避免使用超过 2 层叠加阴影。

## Do's and Don'ts

✓ 使用语义化 Token 引用颜色，不要硬编码 HEX 值
✓ 按钮文案不超过 6 个字
✓ 间距使用 4px 的倍数
✗ 不要在同一页面使用超过 3 种强调色
✗ 不要使用纯黑 #000000 作为文字色
✗ 不要在小于 12px 的文字上使用 light 字重

## Colors

- **primary**: `#0A1628`
- **secondary**: `#64748B`
- **tertiary**: `#0096FF`
- **neutral**: `#FFFFFF`
- **on-tertiary**: `#FFFFFF`
- **border**: `#CBD5E1`
- **error**: `#DC2626`

## Typography

| Token | Font | Size | Weight |
| --- | --- | --- | --- |
| `h1` | Inter | 3rem | 700 |
| `body-md` | Inter | 1rem | 400 |
| `label-caps` | Inter | 0.75rem | 600 |

## Components

### button-primary
- backgroundColor: `{colors.tertiary}`
- textColor: `{colors.on-tertiary}`
- rounded: `{rounded.small}`
- padding: `12px 20px`

### button-secondary
- backgroundColor: `transparent`
- textColor: `{colors.tertiary}`
- borderColor: `{colors.tertiary}`
- rounded: `{rounded.small}`
- padding: `12px 20px`

### card
- backgroundColor: `{colors.neutral}`
- textColor: `{colors.primary}`
- rounded: `{rounded.medium}`
- padding: `20px`

### input
- backgroundColor: `{colors.neutral}`
- textColor: `{colors.primary}`
- borderColor: `{colors.border}`
- rounded: `{rounded.small}`
- padding: `10px 14px`