Mẫu Thiết Kế Dùng Chung
M1S Storybook & Components
Không gian thiết kế tập trung hiển thị các layout, bảng màu chuẩn, typography và các UI component dùng chung được xây dựng bằng HTML, Tailwind CSS, Alpine.js và HTMX.
Bảng Màu Chủ Đạo (4 Tông Màu)
Toàn bộ project sử dụng tông màu chủ đạo: Trắng, Xanh dương (pha Tím than), Tím than, Đen. Hệ thống màu sắc được định nghĩa bằng các hằng số CSS Variables trong color.css và được ánh xạ qua Tailwind CSS classes (tiền tố ui-) để hỗ trợ đa giao diện sáng/tối đồng bộ.
#FFFFFF
Trắng
#564AEB
Xanh dương (pha Tím than)
#1E1B4B
Tím than
#09090B
Đen
| Element | CSS Variable | Tailwind Class | Hiển thị (Màu động) | Sử dụng cho |
|---|---|---|---|---|
| Nền trang (Page Body) | --bg-page | bg-ui-bg | Nền toàn bộ trang web (Light: #f9fafb / Dark: #0a0714) | |
| Topbar (Thanh trên) | --topbar-bg | bg-ui-topbar-bg | Nền của header/topbar bán trong suốt có backdrop filter | |
| Sidebar (Thanh bên) | --sidebar-bg | bg-ui-sidebar-bg | Nền của menu điều hướng sidebar trái | |
| Thẻ nội dung (Cards) | --card-bg | bg-ui-card-bg | Nền của các hộp thông tin, dashboard cards, modal box | |
| Nút bấm chính (Primary) | --btn-primary-bg | bg-ui-btn-primary | Nút bấm hành động chính, dùng chung cho cả Admin/Operator và Guest/Member | |
| Nút bấm phụ (Secondary) | --btn-secondary-bg | bg-ui-btn-secondary | Nút hủy bỏ, nút đóng hoặc các tùy chọn phụ khác | |
| Nút nguy hiểm (Danger) | --btn-danger-bg | bg-ui-btn-danger | Nút xóa dữ liệu, nút cảnh báo nguy hiểm | |
| Liên kết (Link) | --link-primary | text-ui-link | Link Demo | Thẻ liên kết <a>, dùng chung cho cả Admin/Operator và Guest/Member |
| Chữ chính (Primary Text) | --text-primary | text-ui-text | Mẫu chữ | Màu chữ chính cho body text, tiêu đề và các nhãn chính |
Typography & Phông chữ
Sử dụng Google Font Noto Sans (đồng bộ cảm giác chữ với giao diện chat Discord) cho giao diện hiện đại, sạch sẽ. Dưới đây là danh sách tất cả các kích cỡ text đang sử dụng trong project.
| Tailwind Class | CSS Size | Xem trước (Preview) | Sử dụng cho |
|---|---|---|---|
| text-3xl | 30px / 2.25rem | Tiêu đề trang | Hero heading, tiêu đề trang chính |
| text-xl | 20px / 1.25rem | Tiêu đề lớn | Tiêu đề card, heading section |
| text-lg | 18px / 1.125rem | Tiêu đề nhỏ | Tiêu đề card con, tên component |
| text-base | 16px / 1rem | Tiêu đề phụ / Body lớn | Tiêu đề phụ, tên brand, body text lớn |
| text-sm | 14px / 0.875rem | Văn bản thông thường (body) | Body text chính, menu sidebar, nút bấm, input text |
| text-xs | 12px / 0.75rem | Chữ nhỏ / Mô tả phụ / Code snippet | Mô tả, chú thích, badge, input placeholder, topbar text, mã mật mã, dữ liệu kỹ thuật, code inline nhỏ |
| text-[10px] | 10px | Label sidebar / Mã màu / Tên icon | Nhãn nhóm sidebar, mã HEX, badge trạng thái nhỏ, tên icon trong thư viện icon, caption micro |