Design System
Hệ thống thiết kế giao diện iOS-native
| Token | Giá trị | Dùng cho |
|---|
--bg | #F2F2F7 | Nền trang |
--bg-card | #FFFFFF | Nền card |
--text | #000000 | Text chính |
--text-secondary | #3C3C43 | Text phụ |
--text-tertiary | #8E8E93 | Text mờ |
--border | rgba(60,60,67,0.12) | Viền nhẹ |
| Token | Giá trị |
|---|
--bg | #000000 |
--bg-card | #1C1C1E |
--text | #FFFFFF |
--text-secondary | #EBEBF5 |
--text-tertiary | #636366 |
| Font | Dùng cho |
|---|
| SF Pro / Be Vietnam Pro / system | Body, UI text |
| Source Serif 4 / Georgia | Câu trích dẫn (italic) |
| Material Symbols Outlined | Icons |
/* Light */
background: rgba(249, 249, 249, 0.94);
backdrop-filter: blur(20px) saturate(180%);
/* Dark */
background: rgba(30, 30, 30, 0.88);
backdrop-filter: blur(20px) saturate(180%);
| Class CSS | Mô tả |
|---|
.ios-tab-bar | Thanh nav dưới, glass blur |
.ios-card | Card bo tròn 12px |
.ios-separator | Đường kẻ 0.5px |
.ios-nav-bar | Thanh nav trên, glass blur |
.ios-segmented-control | Tab switcher kiểu iOS |
| Animation | Hiệu ứng | Thời gian |
|---|
animate-slide-up | Trượt lên | 350ms |
animate-wiggle | Wiggle icon | 600ms |
animate-bounce-in | Pop-in scale | 400ms |
| Màu | Hex | Dùng cho |
|---|
| Emerald (chính) | #0F7B5F | Brand, active states |
| Emerald Light | #10B981 | Success |
| Pro Gradient | #F59E0B → #F97316 | Pro badge |