Appearance
Design system
Planner đi theo design system của nemo12.com. Token dưới đây được lấy trực tiếp từ CSS của trang đó.
Màu
| Token | Giá trị | Dùng cho |
|---|---|---|
--foam | #f7fbfc | Nền trang |
--sky | #ddf1fa | Nền nhấn, tab/pill đang chọn |
--mist | #d4e1e5 | Viền card (2px) |
--ink | #0d181c | Chữ chính |
--slate | #526065 | Chữ phụ |
--coral | #d84b00 | CTA, tick, mục đang diễn ra |
--coral-deep | #c33c00 | Hover CTA, cạnh 3D của nút |
--ocean | #12639a | Link |
--deep-ocean | #003151 | Chữ trên nền sky |
--sea | #2f6b4f | Trạng thái tốt, mục tiêu 🎯 |
Màu của từng brand đặt ở trường color trong D1 và dùng cho chấm, khối buổi trên lịch, viền card brand.
Chữ
- Heading: Baloo 2 (600–800)
- Body: Nunito (400–800)
Hình dạng
- Card: viền 2px
--mist, bo1.5rem; card phụ bo1rem. - Nút: pill; nút chính có cạnh dưới 3px
--coral-deeptạo cảm giác bấm được (giống "Tiếp tục" trên nemo12.com). - Chip: pill nhỏ, nền sky / sand / seafoam / coral-wash theo trạng thái.
Quy ước
- Mọi chữ tương phản tối thiểu 4.5:1; mục tiêu bấm tối thiểu ~40px trên điện thoại.
- Có
prefers-reduced-motion, focus ring rõ, nhãnaria-labelcho checkbox. - Không dùng màu làm cách duy nhất truyền nghĩa: việc trễ vừa đổi màu vừa in đậm; "đang diễn ra" có chip chữ.