Hệ thống màu đầy đủ cho SoiTarot — primary palette, scales 10 bậc, neutral, semantic, gradient và token cho cả dark/light theme. Export ra CSS · Tailwind · JSON.
5 màu gốc đã chốt từ brand. Mỗi màu chính (navy, gold, lavender) mở rộng thành thang 10 bậc (50 → 900) — bậc ★ là màu gốc thương hiệu.
Cool gray ngả tím nhẹ — không phải neutral lạnh chuẩn — để hài hoà với navy/lavender. 10 bậc, đánh số 50 → 900.
Success / Warning / Error / Info — chọn tông desaturated, hài hoà cosmic. Mỗi cái có 3 variant: base (cho icon/border), bg (nền badge mờ), fg (chữ trên bg đậm).
3 gradient chính + 2 phụ. Mỗi cái ghi đầy đủ stops và hướng. Click block CSS để copy.
Background hero / section lớn. Hướng dọc, từ navy → tím nhẹ → void.
Highlight CTA, hover state, ánh quanh logo/lá bài. Radial từ center.
Card / section nhẹ — pha lavender mờ vào góc. Diagonal 135°.
Cho button primary, badge premium. Mô phỏng kim loại lá vàng.
Hero ấn tượng — 2 radial layer (lav + gold) trên nền navy. Mystical.
Bottom-of-image fade cho legibility — image overlay khi cần đặt text.
Bảng quy định màu cho từng vai trò UI + check cặp tương phản theo WCAG + ví dụ dùng đúng vs sai.
| Vai trò | Token | Giá trị | Ghi chú |
|---|---|---|---|
| Page background | --color-bg | #0A0E27 (void) | Nền toàn trang. |
| Surface · card | --color-surface | #0F1B3D (navy) | Card, section panel. |
| Surface · elevated | --color-surface-elev | #1E2D53 (navy-600) | Modal, popover, dropdown. |
| Text · primary | --color-text | #F8F4E3 (ivory) | Body, heading mặc định. |
| Text · secondary | --color-text-muted | ivory @ 75% | Sub-text, captions. |
| Text · disabled | --color-text-disabled | ivory @ 35% | Disabled state. |
| Heading display | --color-text + gold accent | + | Ivory + italic gold cho emphasis word. |
| Link · text | --color-link | #D4A574 (gold) | Inline link. |
| Link · hover | --color-link-hover | #E0BD86 (gold-300) | Lighter gold. |
| Border · subtle | --color-border-subtle | ivory @ 6% | Card outline, divider mờ. |
| Border · default | --color-border | ivory @ 12% | Input border, table divider. |
| Border · accent | --color-border-accent | #D4A574 (gold) | Focused input, emphasis box. |
| Button · primary | --color-btn-primary | gold bg + navy text | CTA chính ("Rút bài ngay"). |
| Button · secondary | --color-btn-secondary | transparent + ivory border | Action phụ. |
| Icon · default | --color-icon | ivory @ 75% | Icon UI, không nhấn mạnh. |
| Icon · accent | --color-icon-accent | #D4A574 (gold) | Icon emphasized / decorative. |
| Glow · gold | --color-glow-gold | rgba(212,165,116,0.35) | Box-shadow / drop-shadow halo. |
| Glow · lavender | --color-glow-lav | rgba(184,168,217,0.30) | Halo nhẹ cho element phụ. |
Bộ token đầy đủ cho dark theme — mặc định của SoiTarot. Đặt tên theo convention --color-[role]-[variant].
Phiên bản light dùng dự phòng (print, light mode option). Map 1-1 với dark tokens — chỉ đảo bg/text.
3 format sẵn sàng: CSS variables · Tailwind config snippet · JSON design tokens. Click "Copy" để paste vào codebase.
--color-* dễ dùng với CSS Modules / Tailwind plugin / Style Dictionary. JSON theo cấu trúc nested phổ biến (color.brand.*, color.scale.*, color.semantic.*).