Style Guide
Design tokens（Color Ramp + Typography Scale）与 5 个展示原子组件的 API。
Color System
Forge 色板：8 色 × 10 档（50 / 100–900）+ White。
Purple
Purple 50F1EBFD
Purple 100D3C2F8
Purple 200BEA4F5
Purple 300A17AF1
Purple 4008E61EE
Purple 5007239EA
Purple 6006834D5
Purple 7005128A6
Purple 8003F1F81
Purple 900301862
Blue
Blue 50EBEEFF
Blue 100C0CAFF
Blue 200A2B0FF
Blue 300788CFF
Blue 4005D75FF
Blue 5003553FF
Blue 600304CE8
Blue 700263BB5
Blue 8001D2E8C
Blue 90016236B
Green
Green 50E6F8F0
Green 100B3E9D2
Green 2008EDFBC
Green 3005AD09D
Green 4003AC78A
Green 50009B96D
Green 60008A863
Green 70006834D
Green 80005663C
Green 900044E2E
Red
Red 50FFEDE9
Red 100FFC7BB
Red 200FFAC9A
Red 300FE866C
Red 400FE6E4F
Red 500FE4A23
Red 600E74320
Red 700B43519
Red 8008C2913
Red 9006B1F0F
Yellow
Yellow 50FEF9E6
Yellow 100FCEBB1
Yellow 200FBE28B
Yellow 300F9D555
Yellow 400F8CD35
Yellow 500F6C002
Yellow 600E0AF02
Yellow 700AF8801
Yellow 800876A01
Yellow 900675101
Cyan
Cyan 50ECFAFB
Cyan 100C5F0F3
Cyan 200A9E8ED
Cyan 30081DEE4
Cyan 40069D8DF
Cyan 50043CED7
Cyan 6003DBBC4
Cyan 700309299
Cyan 800257176
Cyan 9001C575A
Black
Black 50E6E7E8
Black 100B0B3B8
Black 2008A8E95
Black 300545B65
Black 400333B47
Black 500000A19
Black 600000917
Black 700000712
Black 80000060E
Black 90000040B
Gray
Gray 50F8F8F8
Gray 100EBEBEB
Gray 200E1E1E1
Gray 300D3D3D3
Gray 400CACACA
Gray 500BDBDBD
Gray 600ACACAC
Gray 700868686
Gray 800686868
Gray 9004F4F4F
White
WhiteFFFFFF
Typography Scale
Plus Jakarta Sans（Display）+ Manrope（Text）。每行自动铺 700 / 600 / 500 / 400 四档字重。
Typeface
AaPlus Jakarta Sans
Display XL - 32px
Display700
Display600
Display500
Display400
Display L - 28px
Display700
Display600
Display500
Display400
Display M - 24px
Display700
Display600
Display500
Display400
Display S - 20px
Display700
Display600
Display500
Display400
Text XL - 18px
Text700
Text600
Text500
Text400
Text L - 16px
Text700
Text600
Text500
Text400
Text M - 14px
Text700
Text600
Text500
Text400
Text S - 12px
Text700
Text600
Text500
Text400
Text XS - 10px
Text700
Text600
Text500
Text400
ColorSwatch
单个色块，左上 label + 右下 HEX pill，纯白自动描边。
Import
import {
ColorSwatch, ColorSection,
TypefaceBlock, TypographyWeightSample, TypographySizeRow,
} from "@forge-ui/react";Usage
通过 tone 控制标签字色，size 控制尺寸。
Purple 5008E61EE
1<ColorSwatch label="Purple 500" hex="#8E61EE" tone="light" />API
| Attribute | Type | Default | Description |
|---|---|---|---|
label | string | — | 色卡左上角标签。 |
hex | string | — | 背景色 HEX 值，右下角 pill 会显示大写去号版本。 |
tone | 'dark' | 'light' | — | 决定 label 字色：深色底用 light，浅色底用 dark。 |
size | 'sm' | 'md' | 'lg' | 'sm' | 色卡尺寸，控制宽高、label 字号与 pill 内边距。 |
ColorSection
一行色系，左侧标题 + 10 档色阶，自动根据 darkLabelUntil 翻转字色。
Usage
把完整 10 档色阶传入 scale，darkLabelUntil 控制字色翻转阈值。
Purple
Purple 50F1EBFD
Purple 100D3C2F8
Purple 5008E61EE
Purple 900301862
1<ColorSection2 title="Purple"3 darkLabelUntil={200}4 scale={[5 { shade: "50", hex: "#F1EBFD" },6 { shade: "100", hex: "#D3C2F8" },7 { shade: "500", hex: "#8E61EE" },8 { shade: "900", hex: "#301862" },9 ]}10/>API
| Attribute | Type | Default | Description |
|---|---|---|---|
title | string | — | 色系标题，同时作为每个 swatch 的 label 前缀。 |
scale | { shade: string; hex: string }[] | — | 色阶数组，通常 10 档（50 / 100-900）。 |
darkLabelUntil | number | — | shade 值 ≤ 此值的用深色文字，超过则白字。 |
swatchSize | 'sm' | 'md' | 'lg' | 'sm' | 每个 swatch 的尺寸。 |
TypefaceBlock
字体样张，大号 Aa + 字体名展示。
Usage
Typeface
AaPlus Jakarta Sans
1<TypefaceBlock name="Plus Jakarta Sans" />API
| Attribute | Type | Default | Description |
|---|---|---|---|
name | string | — | 字体名称，显示在 Aa 右侧。 |
sample | string | 'Aa' | 大字展示内容。 |
TypographyWeightSample
单字重样本，用于多字重横向对比。
Usage
Display700
1<TypographyWeightSample text="Display" weight={700} sizeClass="text-2xl leading-8" />API
| Attribute | Type | Default | Description |
|---|---|---|---|
text | string | — | 展示文案。 |
weight | 400 | 500 | 600 | 700 | — | 字重档位。 |
sizeClass | string | — | Tailwind 字号 / 行高 class，如 text-2xl leading-8。 |
TypographySizeRow
一行字号展示，自动铺 700 / 600 / 500 / 400 四档字重。
Usage
Display M - 24px
Display700
Display600
Display500
Display400
1<TypographySizeRow label="Display M - 24px" text="Display" sizeClass="text-2xl leading-8" />API
| Attribute | Type | Default | Description |
|---|---|---|---|
label | string | — | 行标题（如 Display XL - 32px）。 |
text | string | — | 每列展示文案。 |
sizeClass | string | — | Tailwind 字号 / 行高 class。 |