IoT Hub • FIT HCMUS HK1
Trang Tổng Quan / Quy Chuẩn Thiết Kế Hệ Thống
Design System 2.0
Quy chuẩn UI/UX

Quy Trình & Hướng Dẫn Thiết Kế Thống Nhất (Design System)

Quy chuẩn tối giản hóa thị giác cho toàn bộ hệ sinh thái môn học IoT FIT HCMUS. Nguyên tắc cốt lõi: Kiềm chế màu sắc (Color Discipline), ưu tiên tính dễ đọc, thống nhất nút bấm, thẻ và tối ưu 100% trải nghiệm cảm ứng trên điện thoại di động.

1. Bảng Màu Thống Nhất (Restrained Color Palette)

Tối đa 1 màu thương hiệu + 2 màu trạng thái

Loại bỏ các dải màu cầu vồng (tím, hồng, xanh lam neon, cam rực rỡ). Toàn bộ hệ thống chỉ sử dụng 1 màu chủ đạo (Tech Blue) kết hợp với dải trung tính Slate, và chỉ dùng màu chức năng khi có cảnh báo thật sự.

Màu Chủ Đạo (Primary) #2563eb (Blue-600)

Dùng cho: Nút bấm chính, tiêu đề nhấn mạnh, icon chính, trạng thái active.

Chữ & Khối Code (Neutral) #0f172a / #f8fafc

Nền trang dùng Slate-50 (#f8fafc), thẻ màu trắng (#fff), chữ Slate-900 (#0f172a).

Khối Ghi Chú & Lưu Ý (Callout) #1e293b (Slate-800 / Blue-600)

Loại bỏ màu đỏ & vàng cam chói. Dùng viền nhấn border-l-4 thanh lịch, tạo độ tương phản êm dịu.

Thành Công / Đã Học (Success) #16a34a (Emerald-600)

Dùng cho trạng thái tuần đã hoàn thành, đồ án đạt yêu cầu.

2. Quy Chuẩn Nút Bấm & Tương Tác (Buttons)

Chuẩn Touch Target ≥ 40px

Tất cả các nút đều dùng chung một kiểu bo góc rounded-xl, phông chữ font-semibold text-xs sm:text-sm. Chia thành 3 cấp độ rõ ràng:

Cấp 1: Primary Button

Dùng cho hành động điều hướng chính, mở tài liệu hoặc nộp bài.

Cấp 2: Outline Button

Dùng cho hành động phụ, sao chép mã nguồn, đổi tab.

Cấp 3: Ghost Link Button

Dùng cho thanh menu trên cùng hoặc nút quay lại.

3. Quy Chuẩn Cấu Trúc Thẻ (Card Architecture)

Nền trắng, viền mảnh
  • Màu nền thẻ: Luôn luôn là màu trắng thuần bg-white nổi bật trên nền xám nhẹ của trang bg-slate-50.
  • Đường viền: Chỉ sử dụng 1 viền mảnh trung tính border border-slate-200. Tuyệt đối không dùng mỗi thẻ 1 màu viền khác nhau (xanh, đỏ, tím, vàng cạnh nhau gây rối mắt).
  • Bo góc: Thống nhất bo góc rounded-2xl (16px) cho thẻ lớn, rounded-xl (12px) cho khối con bên trong.
  • Đổ bóng: Đổ bóng siêu nhẹ shadow-sm để giữ tính chất phẳng, thanh lịch của giao diện học thuật.
  • Thẻ đang hoạt động (Active): Chỉ dùng 1 đường viền xanh nhẹ border-2 border-blue-600 để báo hiệu người dùng biết đây là tuần đang học.

4. Quy Chuẩn Responsive Cho Điện Thoại (Mobile First)

Tối ưu thao tác 1 tay
Thanh Dock Đáy Màn Hình (Mobile Bottom Dock)

Trên màn hình nhỏ (chiều rộng < 768px), thanh điều hướng đáy được ghim cố định giúp chuyển đổi qua lại giữa Trang chủ, Tuần 2, Đồ án và Tra cứu chỉ bằng ngón tay cái mà không cần phải cuộn lên đầu trang.

Bảng & Code Chống Tràn (Overflow Safe)

Tất cả các bảng đấu chân (Wiring table), bảng mã màu và khối code C++ đều phải được bọc trong container overflow-x-auto, đảm bảo trang không bao giờ bị tràn ngang hoặc méo vỡ khung nhìn.

Tổng quan Tuần 1 Tuần 2 Đồ án Tra cứu