01
Token
Hình. @theme gọi tên. .btn-fill, .filter-chip, .field là skin — không rải hex.
Pha / thành phần
Primitive.Rồi mớighép.
Token đặt hình. Radix giữ hành vi. asChild ghép primitive thành sản phẩm — không invent một hệ thứ hai.
Ba lớp
Không hai hệ.Một đường ghép.
Skin CSS đã có. Primitive không vẽ lại — nó cầm focus, Esc, mũi tên, rồi mặc đúng token.
02
Primitive
Hành vi. Radix giữ focus, Esc, mũi tên. cva giữ variant. cn() gộp class.
03
Composition
Ghép. Button asChild thành Link. Dialog bọc Command. ToggleGroup cho một lựa chọn.
Slot
Button
Hành động. Fill, outline, ghost. asChild khi cần là Link.
Toggle
Toggle
Trạng thái nhấn. Filter chip sống trên primitive này.
Toggle Group
ToggleGroup
Một nhóm exclusive. Role, format, filter.
Label
Input · Label
Field. Ember khi lỗi. Không invent border thứ hai.
Checkbox
Checkbox
Checklist bàn giao. Hit area 40px, ô 18px.
Tabs
Tabs
Chương playbook. Mũi tên chuyển, focus trap sẵn.
Dialog
Dialog
Nhân vật. Focus trap, Esc, overlay.
cmdk + Dialog
Command
⌘K. Lọc, vòng, listbox. Không tự viết mũi tên.
Tooltip
Tooltip
Gợi phím tắt. Không mang nhiệm vụ đọc.
Select
Select
Danh sách dài, một lựa chọn, typeahead.
Radio Group
RadioGroup
Một trong vài. Luôn có chọn.
Switch
Switch
Bật / tắt tức thì. Không dùng cho ba trạng thái.
Popover
Popover
Lớp nổi, không khóa trang.
Accordion
Accordion
Giải phẫu. Mở một, đóng một.
Button
Fill là việc.asChild là thẻ.
Primary fill ink. Outline là ghost. DOM có thể là Link — hành vi vẫn là Button. Press 0.96. Không fill sphere.
Fill
Ink trên canvas. Slot bọc Link.
Outline · ghost
Hairline, hover canvas.
⌘K
Tooltip gợi. Command mới là overlay.
Toggle · ToggleGroup
Một nhóm,một lựa chọn.
Chip sống trên Toggle. Exclusive group không được phép về rỗng — onValueChange bỏ chuỗi trống.
Đang lọc: Tất cả. Filter không đổi layout — chỉ đổi tín hiệu.
Field · Label
Canvas fill.Ember khi lỗi.
Label museum. Input .field. Không invent border thứ hai. Ember chỉ báo lỗi.
Cần một câu đứng yên.
Checkbox · Switch
Tick là việc.Switch là tức thì.
Checklist bàn giao dùng Checkbox. Switch không dùng cho ba trạng thái. Hit area 40px, ô 18px.
Checkbox
Switch
Overlay
Dialog, Command,Tooltip, Popover.
Dialog khóa trang. Command là Dialog align top + cmdk. Tooltip không mang nhiệm vụ đọc. Popover không trap.
Select · Radio · Accordion
Radix cầmmũi tên.
Select typeahead. Radio luôn có chọn. Accordion giải phẫu — mở một, đóng một.
Select · người dẫn
PHA-S01 · Mở cửa và mời bước vào
Radio · định dạng
Một headline, một guide, house mark ở góc an toàn.
Accordion · giải phẫu Dialog
Trống, lỗi, đang tải
Tabs cầmba trạng thái.
Empty không để trắng. Error nói việc sửa. Loading là shimmer đá, không spinner màu.
- 01Fill inkHành động chính
- 02GhostHairline + mũi tên
- 03Filter chipPaper, đảo ink-soft
Card & zone
Nâng bằng giấy trắngvà bóng thì thầm.
Foundations
Gọi semantic token, không rải hex.
Feature card: paper, 24px radius, 20px padding, lưới canvas.
Drop zone
Waveform
Ink,không accent.
Thanh sóng cùng màu chữ. Play / pause cross-fade. Icon scale 0.25 → 1, blur 4px, bounce 0.
Trước / sau
Cùng một frame,khác hợp đồng.
Pastel mang chữ. Nhiều guide. CTA vàng.
Atmosphere bị đẩy thành cấu trúc. Route không có điểm đến. Chữ này cố ý mờ — không phải caption ash.
Canvas đọc. Một guide. Fill ink.
Sphere thở ở hero. Link nối headline với việc cần làm.
Dựng một frame