Thành phần và token
Bộ này dựa trên design system Avicasa Boutique Living (Fraunces cho tiêu đề, Be Vietnam Pro cho nội dung, teal và vàng) và bổ sung những gì module Công việc cần: màu nhận diện phân hệ, mức ưu tiên, hạn tương đối, checklist, ngăn trượt. Tên lớp bám theo token để đội code chuyển sang Tailwind preset shadcn.
Màu sắc
Bảng màu theo Avicasa Boutique Living: nền kem ấm, chữ tiêu đề teal đậm, teal là màu hành động duy nhất, vàng chỉ dành cho điểm nhấn cao cấp (mục đang chọn, nhãn nhóm trên nền tối). Trong CRM, sidebar dùng teal đậm như footer website để tách vùng điều hướng với vùng làm việc. Đỏ, cam, lục là màu tín hiệu thêm cho nghiệp vụ (quá hạn, ưu tiên, xong), luôn kèm chữ và icon. Vàng không bao giờ là màu chữ trên nền sáng.
Nền và chữ| Ý nghĩa | Hiển thị | Token | Quy tắc |
|---|---|---|---|
| Ưu tiên Khẩn | Khẩn | tag-red + vạch trái danger 3 px | Luôn có chữ "Khẩn" và icon, không chỉ màu đỏ |
| Ưu tiên Cao | Cao | tag-orange | Chữ cam đậm #8A4B12 để đạt tương phản |
| Ưu tiên Bình thường | Không hiện nhãn | none | Giảm nhiễu: phần lớn việc ở mức này |
| Ưu tiên Thấp | Thấp | tag-gray | |
| Trạng thái | Cần làmĐang làmXongĐã huỷ | tag-gray, tag-blue, tag-green | Việc Xong gạch tiêu đề, chữ mờ |
| Hạn | Hôm nay 15:00Còn 45 phútQuá hạn 2 giờ | ink-muted, warning, danger | Dưới 1 giờ chuyển cam, quá hạn chuyển đỏ đậm |
Xử lý phàn nàn máy lạnh phòng 302 kêu to
Gọi lại chị Ngọc xác nhận giờ nhận phòng 1205
Giao lại 1 áo sơ mi thiếu cho đơn LD-2411-0342
Mở tiệm Tiệm T19
Xử lý phàn nàn máy lạnh phòng 302
Đọc chỉ số điện nước toà Q7
Nền tối theo teal-900 của Avicasa, màu hành động chuyển sang vàng gold-500 (6.58:1 trên teal-900).
Chữ
Theo Avicasa: tiêu đề trang, tiêu đề khối và số lớn dùng Fraunces (chữ có chân) để giữ chất boutique; mọi thứ còn lại dùng Be Vietnam Pro, hỗ trợ đầy đủ dấu tiếng Việt. Website dùng cỡ lớn (40 đến 48 px) cho trang giới thiệu; CRM là công cụ làm việc nên thu nhỏ: tiêu đề trang 34 px, tiêu đề màn 26 px. Màn làm việc chủ yếu dùng 14 px và 13 px để vừa nhiều dòng mà vẫn đọc nhanh khi đang đứng quầy. Mã phòng, mã đơn, giờ và số dùng JetBrains Mono để các chữ số thẳng cột. Bản tiếng Anh dài hơn khoảng 30%, nên nút không đặt chiều rộng cố định.
| Style | Cỡ / dòng / đậm | Ví dụ element thật |
|---|---|---|
| page-title | Fraunces 34 / 40 / 600 | Chào buổi sáng, Hà |
| heading-1 | Fraunces 26 / 32 / 600 | Công việc tiêu đề trang danh sách |
| heading-2 | Fraunces 19 / 26 / 600 | Mở ca sáng T19 tiêu đề ngăn chi tiết, hộp thoại |
| heading-3 | 14 / 20 / 600 | Cần chú ý tiêu đề khối, tên nhóm việc |
| body | 14 / 22 / 400-500 | Gọi lại chị Ngọc xác nhận giờ nhận phòng 1205 tiêu đề việc trong danh sách (500) |
| body-sm | 13 / 20 / 400 | Khách báo máy lạnh kêu to từ tối qua, xin đổi phòng nếu không sửa được trước 14:00. |
| caption | 12 / 16 / 500 | Quá hạn 2 giờCaoNgười làm |
| eyebrow | 11 / 16 / 600, giãn 0.22em | Quản trị nhóm menu sidebar |
| numeric | 13 / 20 / 500 mono | LD-2411-034206/11/2026 15:301.250.000 ₫0900 000 123 |
Khoảng cách và kích thước
Lưới 4 px của Avicasa giữ nguyên; nút dạng pill, ô nhập bo 10 px, thẻ bo 18 px, hộp thoại bo 26 px. Hai ngưỡng riêng cho ngành dịch vụ: dòng bảng desktop cao 44 px để bấm chính xác bằng chuột trên máy quầy, vùng chạm mobile tối thiểu 44 px vì người dùng thường đang đứng hoặc đi lại.
| Token | Giá trị | Dùng cho |
|---|---|---|
| space-2 / 3 / 4 | 8 / 12 / 16 px | Khoảng giữa phần tử trong dòng, padding thẻ, padding khối |
| space-6 / 8 | 24 / 32 px | Giữa các section, lề trang desktop |
| row-height | 44 px | Dòng bảng và dòng việc desktop (token mới) |
| touch-min | 44 px | Ô tick, nút trên mobile (token mới) |
| drawer-w | 560 px | Ngăn chi tiết việc; mobile chuyển toàn màn (token mới) |
| radius-md / lg / xl | 6 / 8 / 12 px | Nút và ô nhập / thẻ, popover / cột kanban, hộp thoại |
Thành phần
Thành phần có sẵn trong @hd/ui được vẽ lại theo Avicasa, không đổi hành vi. Component của Avicasa (NavBar, BookingBar, RoomRow…) là khối website khách hàng nên không dùng trong CRM; CRM dùng logo và màu, chữ của Avicasa. Thành phần mới đánh dấu "Mới". Kéo thả (kanban, checklist) và lịch cần thêm thư viện frontend, ghi chú ngay trên thẻ.
Xử lý phàn nàn máy lạnh phòng 302 kêu to
Kiểm kê minibar tầng 12
