设计规范 <BrandKit />

左边一张卡列出 2–3 种字体（大号 Aa 样字），右上是几排色点，右下是 4 个尺寸令牌。颜色在这里是内容，可以写色值。

Template and style descriptions are currently available in Chinese only.

Group: 产品 · 字体、颜色和尺寸
Component: BrandKit · #brand-kit

Good for

介绍品牌规范或设计系统
给设计、前端交接视觉规则

Avoid when

只有一种颜色要说明：写在正文里即可
字体多于 3 种

Content limits

1	fonts 2–3 种：name ≤ 20 个字符，role ≤ 10 字
2	palettes 2–3 排，每排 4–10 个
3	tokens 0–4 个：label ≤ 8 字，value ≤ 12 个字符

Fields

Field	Type
`kicker` · required	`string`	小节名，2–8 字
`title` · required	`string \| string[]`	标题；数组手动断行
`lead`	`string`	一两句导语，≤ 60 字
`source`	`string`	事实出处
`fonts` · required	`{ name, role, family, sample? }[]`	字体
`palettes` · required	`{ name, colors: { name, value }[] }[]`	色板
`tokens`	`{ label, value }[]`	尺寸令牌

Example

<BrandKit
  kicker="设计规范"
  title="字体、颜色和尺寸，都在一个文件里"
  fonts={[{ name: 'Geist', role: '正文', family: 'var(--f-sans)' }]}
  palettes={[{ name: '主题色', colors: [{ name: 'cobalt', value: '#2457f5' }] }]}
/>