§ NEW · Components rules

Quy định chung cho components

10 quy tắc bất biến áp dụng cho mọi card · panel · sheet · modal. Mục tiêu: components nổi bật khỏi page bg, visual rhythm nhất quán, không "chìm" hoặc "phẳng".

1. Surface elevation — 3 tầng

Page bg là Cream #FBF5E7. Mọi card phải lift lên surface sáng hơn để tạo độ tách bạch.

Level 0 · Flat
Page bg
--brand-surface · #FBF5E7 · no shadow
Level 1 · Resting ★
Card · panel
--surface-elevated · #FFFCF1 · shadow-md
Level 2 · Floating
Sheet · modal · popover
--surface-elevated · #FFFCF1 · shadow-xl
2. Bad vs Good — cards phải pop khỏi page
✕ Không nên — card chìm vào bg
Kho Quẹt Chay
vị nấm ngọt thanh
65K
✓ Đúng — card lift lên
Kho Quẹt Chay
vị nấm ngọt thanh
65K
3. Padding chuẩn cho component card
Tight--space-2 · 8px
chip, tag, badge
Cosy--space-3 · 12px
list item, small card
Default ★--space-4 · 16px
card, panel
Roomy--space-6 · 24px
hero card, modal
4. 10 quy tắc bất biến

① Surface đúng tầng

Page = Cream · Card = --surface-elevated · Sheet/Modal = elevated + shadow-xl.

② Border + shadow đi đôi

Card có shadow-md → border 1px neutral-200. Cardless flat → không cả 2.

③ Radius ≥ --radius-lg (14px)

Card mặc định 14px · Product card 18px · Modal/sheet 26px+.

④ Title dùng Heading font

Card title = tc-h4 (Be Vietnam Pro SemiBold 18-20px). Không dùng Display cho card title.

⑤ Action button hierarchy

1 card / 1 primary. Primary = gradient. Secondary = outline/accent. Tertiary = ghost.

⑥ Icon = Lucide outline

16/20/24/32 size · stroke 1.5 (sm/md) hoặc 2 (lg/xl). Cấm emoji production.

⑦ Không card-on-card cùng surface

Nếu card chứa sub-card → sub-card dùng --brand-surface (Cream) để tránh "flat trên flat".

⑧ Không pure black/white

Card bg luôn --surface-elevated không phải #FFFFFF. Text luôn neutral-700/800.

⑨ Không hard corner

border-radius: 0 bị cấm. Tối thiểu --radius-sm (6px).

⑩ Hover state bắt buộc

Mọi interactive card phải có hover: shadow-md → shadow-lg, hoặc translateY(-2px). Duration --duration-fast.