設計 Token
顏色、字級、圓角、陰影、層級、斷點的唯一來源是 tailwind.config.js。這頁直接讀那份設定，不會有第二份會脫節的清單。
色票
DEFAULT 對應到不帶後綴的 class， 例如 bg-brand 就是 brand.DEFAULT。
文字顏色請用 txt 系列而不是 gray 系列 —— 前者才是語意化的文字色階。
brand
brand-light
#A0BEFF
brand
#110AFF
brand-dark
#285388
secondary
secondary-light
#FFE1C6
secondary
#F0923E
secondary-dark
#8C4B1D
success
success
#ABE06D
success-dark
#61A035
alert
alert-light
#F0923E
alert
#E34E1F
bgc
bgc-paper
#FCFCFC
bgc
#D9D9D9
ad
ad
#5A78FF
ad-light
#8CD3F8
gray
gray-50
#f9fafb
gray-100
#F2F4F7
gray-200
#E4E7EC
gray-300
#D0D5DD
gray-400
#98A2B3
gray-500
#667085
gray-600
#475467
gray-700
#1D2939
gray-800
#101828
gray-900
#111827
gray-950
#030712
txt
txt-white
#FFFFFF
txt-super-light
#98A2B3
txt-light
#667085
txt
#475467
txt-dark
#101828
txt-black
#000000
字級
每個語意字級都同時綁定手機與桌機兩組 token， 斷點在 lg。所以寫一個 class 就有 RWD， 不需要自己加 lg: 變體。
用法
區塊標題
內文
補充說明
<!-- 用語意字級，不要直接寫 text-2xl -->
<h2 class="text-zh-head-3">區塊標題</h2>
<p class="text-zh-body-1">內文</p>
<p class="text-zh-mini text-txt-light">補充說明</p>層級 z-index
500 以上是全站層級表，對應 layouts 裡的 teleport 容器。 請用具名 token，不要再寫 z-[1000] 這種寫死的值。