品牌、色彩与字体Brand, color & typography

# 品牌、色彩与字体 / Brand, color & typography

ID: foundations
Version: 1.2.1

用稳定的身份标志和语义变量统一界面；颜色说明作用，字号说明信息层级。

Use a stable identity and semantic tokens. Color expresses purpose; typography establishes hierarchy.

## Anatomy
- 身份：六边形轮廓、向上留白、45% 中心三角形。
  Identity: hexagonal outline, upward cutout, 45% central triangle.
- 颜色：品牌强调、内容表面、文字、边界与反馈。
  Color: brand, surfaces, text, borders, and feedback.
- 字体：Geist 与中文系统字体，代码使用 IBM Plex Mono。
  Type: Geist and system CJK fonts; IBM Plex Mono for code.

## Parameters
- color.brand: #6741c2 / #b79af5
  浅 / 深主题中的主动作与选中状态。
  Primary actions and selection in light / dark themes.
- color.text: #17151b / #f5f2fa
  标题与正文；不要以品牌色替代整页正文。
  Headings and body; do not color all prose with the brand accent.
- type.body: 15px / 1.7
  常规说明正文；卡片短简介可使用专用密度。
  Regular prose; compact card descriptions use their own density.
- logo.centerScale: 45%
  围绕空心三角形重心等比缩小，保持方向。
  Scale around the triangle centroid without changing direction.
- logo.lockup: Geist 500 · gap 0.5 cap
  标志 + AI UP LAB：桌面 32px 标志配 18px 字，手机 24px 配 14px；标志与首字母的可见间距 = 字母大写高度的一半；字距 -0.02em；标志按可见图形对齐网格并与大写高度居中。
  Mark + AI UP LAB: 32px mark with 18px type on desktop, 24px with 14px on mobile. Visible gap to the first letter = half the cap height; tracking -0.02em; align the visible glyph to the grid and centre it on the cap height.

## Rules
- 使用语义色值，不在组件内部另造一套紫色。
  Use semantic colors instead of inventing component-specific violet values.
- Logo 使用原始 SVG；保留至少 1/4 标志盒宽的留白。
  Use the supplied SVG and at least one-quarter box width of clear space.
- 横向组合只用一种比例：可见图形高度约为字母大写高度的 1.75 倍，间距为大写高度的 0.5 倍，不要按 SVG 外框另加间距。
  Use one horizontal lockup ratio: the visible glyph is about 1.75 × the cap height and the gap is 0.5 × the cap height; do not add spacing on top of the SVG box padding.
- 普通文字与表面的对比度至少 4.5:1；状态含义同时用文字表达。
  Normal text must contrast at least 4.5:1 with its surface; label states in words as well as color.
- 区分选中与键盘焦点：选中保留强调，焦点有独立外描边。
  Differentiate selection from keyboard focus: persistent emphasis versus a separate outline.

## States
- 浅色 / Light: 白色背景、近黑正文、深紫动作。
  White surfaces, near-black text, deep-violet actions.
- 深色 / Dark: 深灰紫背景、浅色正文、浅紫动作；保留用户选择。
  Dark neutral surfaces, light text, lighter-violet actions; preserve user preference.

## Do / Avoid
- Do: 同一按钮引用品牌色和对应前景色；深浅主题一起验证。 / Pair the brand token with its on-brand token and verify both themes.
- Avoid: 深色主题继续使用白字配浅紫底，或把分隔线颜色用来显示正文。 / Use white text on pale violet in dark mode, or use a border color for body text.

## Code mapping
- src/lib/design-system.ts: 主题与字体参数 / Theme and type tokens
- src/components/BrandMark.astro: 品牌标志组件 / Shared brand mark

## Dependencies
None

## Acceptance
- 深浅主题均可读，导出色值与实际界面一致。
  Both themes are readable and exported values match the interface.
- 16 / 24 / 32 px 下 Logo 的中心三角形都能辨认。
  The central triangle remains recognizable at 16/24/32px.
- 页头组合的可见间距约等于大写高度的一半，图形左缘与正文对齐。
  The header lockup gap is about half the cap height and the glyph edge aligns with the content edge.
- 中英标题没有溢出或切断关键短语。
  Chinese and English titles fit without breaking key phrases.

## Implementation example
```
.primary {
  color: var(--lab-color-onBrand);
  background: var(--lab-color-brand);
  font-family: var(--lab-font-sans);
}
```

## Reference
Method reference: https://tmall-design.com/#style/element/color
Rules, parameters, examples, and branding in this file are specific to AI UP LAB.