Màu sắc
Bảng màu brand (trang 30–32)
| Nhóm | Token | HEX | Vai trò trong minigame |
|---|
| Cam (chính) | --ftel-orange | #FF8206 | Màu thương hiệu, nền hero, khối bit |
| --ftel-orange-red | #FF6A13 | Nền CTA phẳng, badge, đáy gradient |
| --ftel-orange-top | #FF971A | Đỉnh gradient |
| Xanh dương | --ftel-blue | #0047BB | Nút phụ, thông tin, màu đổ bóng |
| --ftel-blue-2 | #3755DF | Theme "công nghệ", vòng focus |
| --ftel-cyan | #6BDBFF | Accent theme xanh |
| Xanh lá | --ftel-green | #29B80A | Thành công, theme "kết nối" |
| --ftel-green-2 | #00CF50 | Gradient xanh lá |
| --ftel-lime | #BCEA3E | Nền "Trúng thưởng", top 3 |
| Bổ trợ | --ftel-pink | #FF9BD3 | Accent theme cam, confetti |
| --ftel-lotion | #F5F5F5 | Nền phụ |
| --ftel-black | #1E1E1E | Chữ chính |
Tông dẫn xuất (không có trong brand book)
| Token | HEX | Lý do |
|---|
--ftel-orange-ink | #C2410C | Chữ/link cam trên nền trắng (5.2:1) |
--ftel-green-ink | #168A00 | Chữ thành công (4.5:1) |
--ftel-red | #D92D20 | Lỗi form, lỗi hệ thống |
--ftel-amber | #F5A300 | Cảnh báo |
--ftel-gray-300/500/700 | #E3E3E3 #8A8A8A #545454 | Viền, chữ phụ |
Tương phản — quy tắc bắt buộc
| Cặp màu | Tỉ lệ | Được dùng cho |
|---|
Trắng / #0047BB | 8.0 | Mọi cỡ chữ |
#1E1E1E / cam bất kỳ | 5.8–7.7 | Mọi cỡ chữ |
Trắng / #C2410C | 5.2 | Mọi cỡ chữ |
Trắng / #FF6A13 | 2.9 | Chỉ chữ đậm ≥ 17px (nút, tiêu đề) — chấp nhận vì brand |
Trắng / #FF8206 | 2.5 | Chỉ tiêu đề ≥ 24px đậm. Không đặt đoạn văn, thể lệ, giá trên nền này |
Cam #FF8206 / trắng (chữ cam) | 2.5 | Không dùng cho chữ — dùng #C2410C |
Tỉ lệ phối màu 6-3-1 (trang 33)
| Tỉ lệ | Vai trò | Ví dụ màn chơi theme cam |
|---|
| 60% | Màu chủ đạo | Gradient cam / trắng |
| 30% | Màu phụ | Trắng, Lotion |
| 10% | Nhấn | Hồng, lime (confetti, badge) |
Theme chiến dịch (trang 29)
data-theme | Cặp màu | Ý nghĩa | Gợi ý dùng |
|---|
orange | Cam + hồng | Trí tuệ · bền vững | Mặc định, FPT Internet |
blue | Xanh + cyan | Công nghệ · năng động | FPT Camera, Hi FPT, game công nghệ |
green | Lá + lime | Kết nối · phát triển | Sự kiện cộng đồng, game xanh |
Theme green có cùng vấn đề tương phản như cam: chữ trắng trên #29B80A chỉ dùng cho chữ lớn đậm.
Chữ viết (trang 18–27)
| Vai trò | Font | Web/App/Zalo | Kiosk | Leading | Kiểu viết |
|---|
| Display | SongVui Bold | 40 (64 desktop) | 112 | 1.1 | Sentence case |
| H1 | SongVui Bold | 32 (44) | 80 | 1.1 | Sentence case |
| H2 | SongVui Bold | 24 (32) | 56 | 1.15 | Sentence case, tracking −25 |
| H3 | SongVui Bold | 20 | 40 | 1.2 | Sentence case, tracking −25 |
| Sub 1 | SongVui | 18 | 32 | 1.4 | Title Case |
| Sub 2 | SongVui | 13 | 22 | 1.3 | UPPER CASE |
| Body | Articulat | 16 | 26 | 1.5 | Thường |
| Body nhỏ | Articulat | 14 | 22 | 1.5 | Thường |
| Caption | Articulat | 12 | 18 | 1.4 | Thường |
| Nút | SongVui Bold | 17 | 34 | 1 | Sentence case |
| Điểm số | SongVui Bold | 48 | 140 | 1 | Số tabular |
Không được (trang 22–27):
- Quá 2 font trong 1 màn.
- Viết tay, đổ bóng loè loẹt, viền chữ, kéo giãn/bẻ cong chữ.
- Toàn bộ chữ in hoa cho tiêu đề (trừ Sub 2).
- Căn lệch tiêu đề và đoạn văn — luôn thẳng hàng.
Hình khối bit-dot (trang 5–8, 35–38)
| Quy tắc | Giá trị | Áp dụng trong UI |
|---|
| Góc nghiêng | 13° (token --ftel-skew: -13deg) | Badge, nút --bit, số thứ tự, thanh tiến độ bit, loader |
| Cụm chính | 5 khối bit = 5 sub-brand | assets/bitdot/bitdot-cluster.svg — nền màn kết quả, attract |
| Bit-dot bắt buộc | Hiển thị đầy đủ hoặc cắt góc trong mọi thiết kế | Mỗi màn hình phải có ít nhất 1: pattern nền, corner shape, hoặc cụm bit |
| Kích thước tối thiểu | Không nhỏ hơn 1× ô lưới | Bit nhỏ nhất: 18px (mobile), 36px (kiosk) |
| Hiển thị | Opacity / gradient / flat; dương bản / âm bản | Pattern nền dùng opacity 5–10% |
Asset:
Logo (trang 10–16)
| Quy tắc | Giá trị |
|---|
| Vùng an toàn | ½A quanh logo (A = chiều cao chữ F) |
| Cỡ tối thiểu digital | Ngang 150px |
| Nền tối/cam | Bắt buộc bản âm bản fpt-telecom-white.png |
| Cạnh logo đối tác | Logo FPT không nhỏ hơn, đặt trước |
| Bản dọc | Hạn chế dùng |
| Vị trí | Trong vùng an toàn, ưu tiên góc trên trái (web/app) hoặc giữa trên (kiosk) |
Khoảng cách, bo góc, bóng
| Nhóm | Token | Giá trị |
|---|
| Spacing (lưới 4) | --ds-space-1…20 | 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64 · 80 |
| Radius | xs sm md lg xl 2xl pill | 4 · 8 · 12 · 16 · 24 · 32 · 999 (kiosk: md 20, lg 28, xl 40) |
| Shadow | sm md lg | Pha xanh rgba(0,47,124,…) |
| Shadow CTA | --ds-shadow-cta | Quầng cam dưới nút chính |
Chuyển động
| Token | Giá trị | Dùng cho |
|---|
--ds-dur-fast | 120ms | Nhấn nút, đổi trạng thái |
--ds-dur-base | 200ms | Hover, fade |
--ds-dur-slow | 320ms | Mở modal, sheet |
--ds-dur-reward | 640ms | Hiện phần thưởng |
--ds-ease-bounce | cubic-bezier(.34,1.56,.64,1) | Pop phần thưởng, modal kết quả |
Khi hệ điều hành bật "Giảm chuyển động", mọi duration về 0 (đã xử lý trong tokens.css).
Lịch sử thay đổi
| Bản | Ngày | Người sửa | Nội dung |
|---|
| 1.0 | 2026-11-11 | Designer | Chuyển từ Markdown sang HTML |
