Official swatches

Yellow
主色 · 亮黃色

#FFD028 · text black

Cyan
主色 · 青藍色

#10B8D9 · text black

Orange
主色 · 橘紅色

#E74310 · text black

Pink
點綴 · 淺粉色

#F9D2E5 · text black

Green
點綴 · 綠色

#00993E · text black

Magenta
點綴 · 桃紅色

#E4003D · text white

Purple
點綴 · 紫紅色

#C54090 · text white or black

Blue
輔色 · 深藍色

#004E9D · text white

Gray 50
基底 · 淺灰色

#F6F6F6 · text black

Ink
基底 · 深灰黑色

#1E1F1C · text white

White
基底 · 白色

#FFFFFF · text black

Black
結構 · 黑色

#000000 · text white

One dominant color per screen. Pink, green, magenta and purple are for rhythm and sectioning and never rank the three places. Orange-white and green-white pairs are display sizes only.

Semantic roles

--bgPage canvas · white

--surfaceLifted block · gray 50

--surface-warmTertiary tint · pink

--fgBody copy · ink

--fg-2Headings · black

--muted / --metaCaptions · ink + 28% white (≈7:1)

--borderGrid rules · black

--border-softRow separators · black 15%

--accentPrimary action · yellow, black text

--successGreen

--warnOrange

--dangerMagenta