Áp dụng Helsinki Design System principles — accessibility-first, semantic tokens, responsive grid. Mọi yếu tố dưới đây đều dùng token từ 1thay design system.
Mỗi màu có semantic role rõ ràng. Tỉ lệ tương phản đạt WCAG AA.
Heading dùng Hanken Grotesk, body dùng Inter, code dùng JetBrains Mono.
| Level | Font | Size | Weight | Preview |
|---|---|---|---|---|
| H1 | Hanken Grotesk | 36–48px | Bold 700 | Tiêu đề chính |
| H2 | Hanken Grotesk | 24–30px | Semibold 600 | Tiêu đề phụ |
| H3 | Hanken Grotesk | 18–24px | Semibold 600 | Tiêu đề nhỏ |
| Body | Inter | 16px | Regular 400 | Văn bản chính — dễ đọc, thoáng |
| Caption | Inter | 12px | Medium 500 | CHÚ THÍCH NHỎ |
| Code | JetBrains Mono | 14px | Regular 400 | const theme = '1thay'; |
Mỗi button có role rõ ràng. Một primary CTA mỗi section — nguyên tắc từ Helsinki DS.
Card grid responsive, mỗi card chứa một ý tưởng — theo Helsinki DS principle.
Mỗi card chỉ nên truyền tải một thông điệp hoặc một hành động. Giữ nội dung ngắn gọn, có thứ bậc rõ ràng.
Tất cả nội dung trong card phải đạt contrast WCAG AA. Màu nền và chữ được kiểm tra tự động.
Grid tự động co giãn từ 1 cột (mobile) đến 3 cột (desktop). Touch target tối thiểu 44px.
Input fields với label, helper text, validation — theo chuẩn Helsinki DS.
Semantic tags cho trạng thái và phân loại.
Các nguyên tắc cốt lõi được áp dụng vào 1thay design system.
| Nguyên tắc | Mô tả | Áp dụng trong 1thay |
|---|---|---|
| ♿ Accessibility-first | Mọi component đều đạt WCAG AA trước khi ship | Tỉ lệ tương phản màu ≥ 4.5:1, focus ring 3px, touch target ≥ 44px |
| 🎨 Semantic tokens | Token đặt tên theo mục đích, không theo giá trị | --color-text-primary thay vì --color-gray-900 |
| 📐 Consistent spacing | Spacing dựa trên lưới 4px | Token spacing: 4, 8, 12, 16, 20, 24, 32, 48, 64px |
| 📱 Mobile-first | Thiết kế từ mobile lên desktop | Grid 1 cột → 2 cột → 3 cột, padding 16px → 24px → 40px |
| 🧩 Composability | Component nhỏ kết hợp thành pattern lớn | Button + Card + Form = Settings Page pattern |
| 📝 Clear documentation | Mỗi component đều có hướng dẫn sử dụng | Anatomy, variants, states, do/don't, code example |