Design system v2
每個元件、每個狀態都在這裡;verify-ui 對這一頁量測,不用眼睛看。
Tokens
顏色一律 light-dark() 一次宣告;字級、間距、半徑、動效都有刻度,沒有半像素。
--bg--surface--well--well-hover--float--line--line-strong--ink--ink-2--ink-3--accent--accent-soft--ok--ok-soft--warn--warn-soft--danger--danger-soft--tone-rose--tone-amber--tone-sage--tone-sky--tone-lilac--tone-teal--fs-1The quick brown fox 跳過懶狗 0123456789--fs-2The quick brown fox 跳過懶狗 0123456789--fs-3The quick brown fox 跳過懶狗 0123456789--fs-4The quick brown fox 跳過懶狗 0123456789--fs-5The quick brown fox 跳過懶狗 0123456789--fs-6The quick brown fox 跳過懶狗 0123456789--fs-7The quick brown fox 跳過懶狗 0123456789--fs-8The quick brown fox 跳過懶狗 0123456789--fs-9The quick brown fox 跳過懶狗 0123456789--fs-10The quick brown fox 跳過懶狗 0123456789--sp-1--sp-2--sp-3--sp-4--sp-5--sp-6--sp-8--sp-10--sp-12--sp-16--r-1--r-2--r-3--r-4pillSurface
canvas → panel → well 三層;巢狀自動翻轉,控件永遠比容器高一階或低一階,永遠看得見。
ladder (3 deep)
Panel
surface on canvas
chipbadge
Well
chipbadge
Panel again
chip
dot grid (standalone pages only)
Sign in
底紋只出現在登入、建團隊與 landing。
Forms
label 真的關聯控件;說明放在問號裡,不常駐;錯誤在欄位下方而且可行動。
Input
optional
We only send sign-in codes.
This key was revoked. Generate a new one.
Textarea
Select
Combobox
Checkbox / Switch / Radio
Slider
ColorSwatches
File
拖曳檔案到這裡，或點擊選擇PNG, JPEG, WebP · up to 2 MB
拖曳檔案到這裡，或點擊選擇
Marks
色調只作分類;狀態一律用點。
Chip
roseambersageskylilactealneutralgrayremovablesmall
Badge
neutralokwarndangerinfoaccentsolidsolid dangerlinerunningsmall799+
StatusDot
OnlineRunningDegradedFailedOffline
Avatar
A
Creature
Kbd
CtrlKShiftEnterEsc
Cards & content
卡片沒有陰影;數字是主角;空狀態一句話一個動作。
Metrics
- Conversations
- 1,284+12%
- last 7 days
- Approvalspending
- 3
- Cost
- 42.8USD−4%
- Loading
Card
Plain card
surface + hairline, no shadow.
Clickable card
Border darkens on hover, no lift.
Callout
Connected
Discord gateway is healthy.
MESSAGE CONTENT INTENT is off for this bot.
Sync failed
The token was revoked. Reconnect to continue.
Neutral note without icon.
EmptyState
No agents yet
Create your first agent to start a conversation.
Table
資料驅動;窄寬度自動堆疊成卡片;列動作走 Menu。
framed, sortable, stacked below sm
| Status | |||
|---|---|---|---|
| Support assistant | Healthy | 1,284 | |
| Research analyst | Degraded | 312 | |
| Sales concierge with a very long display name that truncates | Failing | 0 |
empty + loading
| Status | |||
|---|---|---|---|
| 沒有資料 | |||
| Status |
|---|
Overlays
全部走同一個浮層根;關閉即卸載;焦點困住並還原;背景 inert。
Dialog
Sheet
Confirm / Alert / Prompt
Popover / Menu / Tooltip
Toast
Pickers
日期與選項面板放進 Popover / Sheet 用;側邊預覽不擋背景,窄螢幕自動變成全寬 Sheet。
Calendar
一二三四五六日
DatePicker
TimeInput · type 9, 930, 3pm; ↑↓ = 15 min
09:30
ListPicker · single, chips
Doing
- To-do
- Todo
- In progress
- Doing
- Complete
- Done
ListPicker · multiple, create
FrontendDesign
- Frontend
- Backend
- Design
SidePanel
Feedback
進度條、骨架、旋轉圖示。骨架與內容同形。
Progress
Skeleton
Spinner
Icons
Lucide 子集,1.75px 描邊,16/20 兩種尺寸。