Brand Guidelines

Thư viện component

Mẫu tương tác của hệ thống Toàn Thắng. Nút và biểu cảm trong khu vực này dùng để xem thiết kế.

• Nút hành động

  Một primary trong một nhóm thao tác. Secondary để quay lại; ghost/text cho việc phụ; danger chỉ cho thao tác có hậu quả. Kích thước 32/44/52px, vùng chạm 44px trên mobile.

• Nút biểu tượng

  44×44px, icon Lucide 18–20px, aria-label cụ thể. Chevron carousel là hình tròn; mũi tên trên badge có vùng chạm trong suốt.

• Ô nhập

  Label hiển thị 12–14px, input 14–16px, cao tối thiểu44px. Hint và lỗi nối bằng aria-describedby; aria-invalid cho lỗi.

• Bộ chọn

  Single-select combobox/listbox, item44px, dấu chọn và nhãn dài xuống dòng. Arrow/Home/End/Enter; Escape/Tab/click ngoài đóng.

• Checkbox và radio

  Checkbox cho nhiều lựa chọn, radio cho một. Label là vùng chạm44px; không dùng switch để chọn đáp án.

• Công tắc

  Cho tùy chọn bật/tắt áp dụng ngay. role=switch, aria-checked, label ổn định; không đổi chữ thành hành động mơ hồ.

• Form theo phase

  Một nhóm thông tin/phase, Back/Continue, kiểm tra trước khi đi tiếp, giữ dữ liệu khi quay lại và review trước gửi/lưu.

• Điều hướng

  Một dock theo theme, link cho URL và button cho state. aria-current=page; menu mobile mở trên dock, Escape trả focus.

• Tabs và segmented

  Chỉ dùng tablist khi có đủ tab/tabpanel, roving keyboard và aria-controls. Route navigation dùng aria-current.

• Menu và popover

  Nền đặc, border theo theme, item44px, giới hạn chiều cao và cuộn nội bộ; không mở ra ngoài viewport.

• Dialog

  Native dialog, tiêu đề và mô tả, focus containment, Escape/Close và trả focus. Nội dung có max-height; thao tác chính rõ.

• Panel và card

  Surface đặc, radius12px, padding16/24px; heading16px cho panel nghiệp vụ. Không thêm glass vào bảng hoặc thẻ dữ liệu.

• Bảng

  Header12px/600; dữ liệu14px. Số căn phải/tabular-nums, nội dung căn trái. Mobile có nhãn mỗi trường hoặc scroller chứa riêng.

• List và row

  Căn đầu dòng, khoảng12/16px, separator theo theme. Tên và trạng thái quan trọng ở hàng chính, chi tiết mở theo yêu cầu.

• Chip và avatar

  Chip là nhãn12px, không phải button. Trạng thái có chữ/icon. Avatar tròn/bo góc có fallback initials và cùng tỷ lệ crop.

• Thông báo và lỗi

  Success/warning/error/info có màu ngữ nghĩa, icon và câu cụ thể. role=status cho tiến độ; alert cho lỗi cần xử lý.

• Empty, loading và skeleton

  Nói rõ chưa có dữ liệu, chưa cấu hình hoặc tải thất bại. Skeleton giữ kích thước; spinner không thay toàn bộ nhãn.

• Lịch

  Tên ngày tiếng Việt, ngày đang xem có aria-pressed, event có nhãn/giờ. Month/list giữ cùng dữ liệu; print không cắt event.

• Biểu đồ

  Màu chỉ bổ sung ý nghĩa; nhãn/đơn vị/chú giải luôn rõ. Hover/touch/focus dùng cùng dữ liệu. Không bịa số để lấp chỗ trống.

• Bài tập

  Radio và nút Kiểm tra riêng; sau kiểm tra khóa đáp án, hiện lời giải, đúng/sai có dấu và màu ngữ nghĩa.

• Carousel

  Một mục chính, chevron tròn44px không co, không autoplay; keyboard và vị trí n/tổng. Rewards giữ hợp đồng một viewport.

• Linh vật

  Một artwork được duyệt, một rig, một controller. State do sự kiện thật; preview biểu cảm được ghi rõ trong trang quy chuẩn.

• Hình ảnh và artwork

  Ảnh nội dung WebP, alt đúng nội dung; ảnh trang trí alt rỗng. Crop/object-fit có chủ đích, tỷ lệ dự phòng để tránh layout shift.

• Chuyển động

  Hover120ms, press80ms, phase250ms/8px. Không transition màu khi đổi theme. Reduced motion bỏ chuyển động không thiết yếu.