青森雲 設計系統

src/styles/tokens.tssrc/components/ 自動生成 — 撰寫提示詞或交付規格時,可作為一份可攜帶的事實來源。

色彩


主色
#4E7A5C --cedar 杉綠
#1A1B1F --ink 墨黑
#F7F4ED --paper 宣紙
#E8E0D0 --linen 麻布
中性色
#FFFFFF --white 純白
#EDEAE1 --gray-100
#CFCCC2 --gray-300
#85847D --gray-500
#3B3B38 --gray-700
語意色
#8AA577 --success 苔綠
#C78E3F --warning 薑黃
#B04A4A --danger 朱紅
#4A6E96 --info 鈷藍

字體階層


本週重點,先聚焦三件事
主標題 Display 48 / 1.1 / 500
本週重點,先聚焦三件事
標題一 H1 36 / 1.2 / 500
本週重點,先聚焦三件事
標題二 H2 25 / 1.3 / 500
先檢視里程碑、指派負責人,把可能擴散的阻塞點在週會前處理掉。
內文 Body 17 / 1.65 / 430
先檢視里程碑、指派負責人,把可能擴散的阻塞點在週會前處理掉。
小字 Small 15 / 1.55 / 430
兩小時前更新
註解 Caption 13 / 1.45 / 500

間距尺度


4--sp-1
8--sp-2
12--sp-3
16--sp-4
24--sp-5
32--sp-6
48--sp-7
64--sp-8

圓角與陰影


4px--r-xs
8px--r-sm
12px--r-md
20px--r-lg
--shadow-sm0 1px 2px / 6%
--shadow-md0 4px 10px / 8%
--shadow-lg0 12px 28px / 12%

基礎元件


<Button />
<Input />
<Checkbox />
<Badge />
草稿 審閱中 已完成 已逾期