色彩 Color

色彩有助于传达层次结构、建立品牌形象、赋予意义并指示元素状态。 Color helps express hierarchy, establish brand identity, give meaning, and indicate of element states.

品牌 Brand

✓ 已复制

brand/mark

美餐绿

#6EB92C

Nature 前景中性色

✓ 已复制

N-5

primary

#F3F9FF

✓ 已复制

N-4

secondary

#EDF3F9 85%

✓ 已复制

N-3

tertiary

#EDF3F9 62%

✓ 已复制

N-2

quaternary

#EDF3F9 40%

✓ 已复制

N-1

disable

#EDF3F9 18%

Background 背景色

Background Light

✓ 已复制

bg/light-4

hover

#FFFFFF 9%

✓ 已复制

bg/light-3

interactive default

#FFFFFF 6%

✓ 已复制

bg/light-2

card default

#FFFFFF 3%

✓ 已复制

bg/light-1

transparent

#FFFFFF 0%

Background Dark

✓ 已复制

bg/dark-4

pressed dark

#000000 40%

✓ 已复制

bg/dark-3

hover

#000000 30%

✓ 已复制

bg/dark-2

default

#000000 20%

✓ 已复制

bg/dark-1

pressed

#000000 12%

Background Solid

✓ 已复制

bg/solid-5

darkest, toast

#0F0F0F

✓ 已复制

bg/solid-4

navigation

#1F1F1F

✓ 已复制

bg/solid-3

menu, pop, noti, toast 等

#242424

✓ 已复制

bg/solid-2

surface-dark

#262626

✓ 已复制

bg/solid-1

surface-light

#2B2B2B

Others 蒙层和分割线

✓ 已复制

overlay-global

#0F0F0F 70%

✓ 已复制

overlay-dark

#262626 70%

✓ 已复制

overlay-light

#2B2B2B 70%

✓ 已复制

border-light

#404040

✓ 已复制

border-light-dis

#383838

✓ 已复制

border-dark

#161616

✓ 已复制

tooltip

#A6B08A

Color Palettes 11 色相色板

每个色相 8 个 stop：4 个 solid（1=最浅 / 2=fg base / 3=bg solid / 4=最深）+ 4 个 alpha（T40/T15/T8/T4 基于 -2）。

4bg pressed

3bg solid

2fg base

1fg hover

T40fg trans

T15bg hover

T8bg trans

T4bg prs

Red 红

red

✓ 已复制

red-4

#933731

✓ 已复制

red-3

#C44941

✓ 已复制

red-2

#EB5147

✓ 已复制

red-1

#F39385

✓ 已复制

red-t40

#EB5147 40%

✓ 已复制

red-t15

#EB5147 15%

✓ 已复制

red-t8

#EB5147 8%

✓ 已复制

red-t4

#EB5147 4%

Apricot 杏

apricot

✓ 已复制

apricot-4

#854220

✓ 已复制

apricot-3

#BE5E2D

✓ 已复制

apricot-2

#F57D42

✓ 已复制

apricot-1

#F79D71

✓ 已复制

apricot-t40

#F57D42 40%

✓ 已复制

apricot-t15

#F57D42 15%

✓ 已复制

apricot-t8

#F57D42 8%

✓ 已复制

apricot-t4

#F57D42 4%

Orange 橙

orange

✓ 已复制

orange-4

#956019

✓ 已复制

orange-3

#C78021

✓ 已复制

orange-2

#F3A237

✓ 已复制

orange-1

#F3CD7B

✓ 已复制

orange-t40

#F3A237 40%

✓ 已复制

orange-t15

#F3A237 15%

✓ 已复制

orange-t8

#F3A237 8%

✓ 已复制

orange-t4

#F3A237 4%

Yellow 黄

yellow

✓ 已复制

yellow-4

#988100

✓ 已复制

yellow-3

#CAAC00

✓ 已复制

yellow-2

#DABF22

✓ 已复制

yellow-1

#F1E56A

✓ 已复制

yellow-t40

#DABF22 40%

✓ 已复制

yellow-t15

#DABF22 15%

✓ 已复制

yellow-t8

#DABF22 8%

✓ 已复制

yellow-t4

#DABF22 4%

Lime 黄绿

lime

✓ 已复制

lime-4

#5B741B

✓ 已复制

lime-3

#7A9B24

✓ 已复制

lime-2

#A7CD45

✓ 已复制

lime-1

#CCE17F

✓ 已复制

lime-t40

#A7CD45 40%

✓ 已复制

lime-t15

#A7CD45 15%

✓ 已复制

lime-t8

#A7CD45 8%

✓ 已复制

lime-t4

#A7CD45 4%

Green 绿

green

✓ 已复制

green-4

#2D7930

✓ 已复制

green-3

#3CA140

✓ 已复制

green-2

#4BC950

✓ 已复制

green-1

#88E385

✓ 已复制

green-t40

#4BC950 40%

✓ 已复制

green-t15

#4BC950 15%

✓ 已复制

green-t8

#4BC950 8%

✓ 已复制

green-t4

#4BC950 4%

Teal 蓝绿

teal

✓ 已复制

teal-4

#0D7A56

✓ 已复制

teal-3

#12A373

✓ 已复制

teal-2

#18CD91

✓ 已复制

teal-1

#62E1AE

✓ 已复制

teal-t40

#18CD91 40%

✓ 已复制

teal-t15

#18CD91 15%

✓ 已复制

teal-t8

#18CD91 8%

✓ 已复制

teal-t4

#18CD91 4%

Blue 蓝

blue

✓ 已复制

blue-4

#3E6DA4

✓ 已复制

blue-3

#5392DB

✓ 已复制

blue-2

#79B5FA

✓ 已复制

blue-1

#A0D1FD

✓ 已复制

blue-t40

#79B5FA 40%

✓ 已复制

blue-t15

#79B5FA 15%

✓ 已复制

blue-t8

#79B5FA 8%

✓ 已复制

blue-t4

#79B5FA 4%

Indigo 靛

indigo

✓ 已复制

indigo-4

#5960A4

✓ 已复制

indigo-3

#7680DB

✓ 已复制

indigo-2

#8C96F9

✓ 已复制

indigo-1

#ACB3FF

✓ 已复制

indigo-t40

#8C96F9 40%

✓ 已复制

indigo-t15

#8C96F9 15%

✓ 已复制

indigo-t8

#8C96F9 8%

✓ 已复制

indigo-t4

#8C96F9 4%

Purple 紫

purple

✓ 已复制

purple-4

#76619D

✓ 已复制

purple-3

#9D82D2

✓ 已复制

purple-2

#BB9AFB

✓ 已复制

purple-1

#D2B7FA

✓ 已复制

purple-t40

#BB9AFB 40%

✓ 已复制

purple-t15

#BB9AFB 15%

✓ 已复制

purple-t8

#BB9AFB 8%

✓ 已复制

purple-t4

#BB9AFB 4%

Magenta 品红

magenta

✓ 已复制

magenta-4

#985388

✓ 已复制

magenta-3

#CA6FB6

✓ 已复制

magenta-2

#F586DC

✓ 已复制

magenta-1

#F9ACE2

✓ 已复制

magenta-t40

#F586DC 40%

✓ 已复制

magenta-t15

#F586DC 15%

✓ 已复制

magenta-t8

#F586DC 8%

✓ 已复制

magenta-t4

#F586DC 4%

交互状态 Interact State

颜色在 default / hover / pressed / disabled 四个交互状态间的取色规律。前景色用于按钮文字、icon、文字描边；背景色用于按钮底色、卡片底色等"有面"的元素。

数字方向小心

不同 token 家族的"大小方向"是反着的：

• 彩色 palette（red / yellow / lime / orange 等 11 个）：数字越大越深（1 最浅 → 4 最深）
• nature：数字越大越亮（N-1 最暗 18% → N-5 全白）
• bg/light：数字越大越亮（叠白蒙层不透明度递增）
• bg/dark：数字越大越暗（叠黑蒙层不透明度递增）

下面表格里的"+1 / −1"按各家族自己的方向理解。

Foreground 前景色规律

按钮文字、icon、描边等"前景"用色的状态变化。

• 彩色：hover 取浅一档（−1），pressed 取深一档（+1），disabled 一律 nature/N-1
• nature：hover 取亮一档（+1），pressed 取暗一档（−1），到顶 / 到底保持不变，disabled 一律 nature/N-1

lime-2

STATES

default

lime-2

hover

lime-1

pressed

lime-3

disabled

nature/N-1

yellow-2

STATES

default

yellow-2

hover

yellow-1

pressed

yellow-3

disabled

nature/N-1

red-2

STATES

default

red-2

hover

red-1

pressed

red-3

disabled

nature/N-1

nature/N-5

STATES

default

nature/N-5

hover

nature/N-5

pressed

nature/N-4

disabled

nature/N-1

nature/N-4

STATES

default

nature/N-4

hover

nature/N-5

pressed

nature/N-3

disabled

nature/N-1

nature/N-3

STATES

default

nature/N-3

hover

nature/N-4

pressed

nature/N-2

disabled

nature/N-1

nature/N-2

STATES

default

nature/N-2

hover

nature/N-3

pressed

nature/N-1

disabled

nature/N-1

nature/N-1

STATES

default

nature/N-1

hover

nature/N-2

pressed

nature/N-1

disabled

nature/N-1

Background 背景色规律

按钮底色、卡片底色等"背景"用色的状态变化。

• 彩色 solid（3 起步）：hover 取浅一档（−1），pressed 取深一档（+1），disabled bg/light-2
• 彩色 tint（T8 起步，半透明叠加）：hover 不透明度升至 T15，pressed 降至 T4，disabled bg/light-2
• bg/light（白蒙层）：hover 一律 bg/light-4，pressed 一律 bg/dark-1，disabled bg/light-2（light-1 例外保持 light-1）
• bg/dark（黑蒙层）：hover 一律 bg/dark-3，pressed 一律 bg/dark-4，disabled bg/dark-1

lime-3

STATES

default

lime-3

hover

lime-2

pressed

lime-4

disabled

bg/light-2

lime-T8

STATES

default

lime-T8

hover

lime-T15

pressed

lime-T4

disabled

bg/light-2

yellow-3

STATES

default

yellow-3

hover

yellow-2

pressed

yellow-4

disabled

bg/light-2

yellow-T8

STATES

default

yellow-T8

hover

yellow-T15

pressed

yellow-T4

disabled

bg/light-2

red-3

STATES

default

red-3

hover

red-2

pressed

red-4

disabled

bg/light-2

red-T8

STATES

default

red-T8

hover

red-T15

pressed

red-T4

disabled

bg/light-2

bg/light-1

STATES

default

bg/light-1

hover

bg/light-4

pressed

bg/dark-1

disabled

bg/light-1

bg/light-2

STATES

default

bg/light-2

hover

bg/light-4

pressed

bg/dark-1

disabled

bg/light-2

bg/light-3

STATES

default

bg/light-3

hover

bg/light-4

pressed

bg/dark-1

disabled

bg/light-2

bg/dark-1

STATES

default

bg/dark-1

hover

bg/dark-3

pressed

bg/dark-4

disabled

bg/dark-1

bg/dark-2

STATES

default

bg/dark-2

hover

bg/dark-3

pressed

bg/dark-4

disabled

bg/dark-1