§ 4.1 · Brand colors

Bộ màu cốt lõi

5 token lõi + 1 elevated. Page bg luôn là Cream #FBF5E7; card luôn dùng Lifted Cream #FFFCF1 + shadow-md để tách khỏi bg. Tỷ lệ Primary ≥ 30%.

Primary · CTA · headline
Chilli Red
--brand-primary
#B41A1A
oklch(0.473 0.184 27.5)
Surface · page bg
Cream
#FBF5E7
oklch(0.969 0.022 88.5)
Accent · gradient pair
Coral
#FF766A
⚠ hạn chế solid
Secondary · accent đậm
Caramel
#8A4C00
oklch(0.443 0.105 53.4)
Container · surface phụ
Peach
#FFC697
oklch(0.850 0.077 60.5)

⚠ Quy định riêng cho Coral

Gradient-first

Coral không phải là một accent độc lập — nó là điểm cuối của signature gradient bắt nguồn từ Chilli Red. Vai trò chính của Coral là "lighten" Primary, không phải là một màu solid riêng. Mặc định: dùng --gradient-signature (Primary → Coral) thay vì solid Coral.

✓ Cho phép solid Coral
  • Icon stroke / icon container ≤ 48px
  • Chip · tag · badge nhỏ
  • Avatar fill, status dot
  • Promo banner contained (tile ≤ 600×300)
  • Button "Accent" variant cho secondary CTA
✕ Cấm solid Coral
  • Page background hoặc section bg toàn trang
  • Hero block lớn (> 800px) — phải dùng gradient
  • Primary CTA — phải là --gradient-signature
  • Text body / heading màu — dùng --brand-primary
  • Đứng cạnh Primary đỏ solid mà không có gradient nối
Examples — khi nào solid, khi nào gradient
✓
Mua ngay
CTA primary
Gradient · default
✓
Bán chạy
Tag / chip
Solid OK · ≤ 48px
✓
Icon container
Solid OK · ≤ 48px
✕
Hero
Hero / section lớn
Solid coral cấm
★ NEW · Card surface — Lifted Cream
Level 0 · Page bg
Cream · #FBF5E7
--brand-surface · no shadow
★ Level 1 · Card / panel
Lifted Cream · #FFFCF1
--surface-elevated · shadow-md