Design Guideline v1.0 · S01
Duculaba Style Guide
Bánh · Nguyên liệu · Dụng cụ · Kiến thức. Thư viện thành phần dùng chung – mọi trang lấy màu, chữ, card và trạng thái từ đây. Bật nút Giao diện trên header để xem chế độ tối.
01
Màu sắc
Giữ màu nhận diện – không tự ý thay đổi. Trong HTML chỉ dùng class (btn-primary, text-primary-brand, bg-section…), không hard-code mã màu.
Primary
#4E342E
Chocolate Brown
--dcl-brown#D7B58A
Warm Beige
--dcl-beige#F5EFE6
Cream (nền)
--dcl-creamSecondary
#E67E22
Orange (accent)
--dcl-orange#2E7D32
Green (thành công)
--dcl-green#1976D2
Blue (link/info)
--dcl-blueSemantic
#EF5350
Red (cảnh báo)
--dcl-red#6B7280
Gray (trung tính)
--dcl-gray#F2A900
Star (đánh giá)
--dcl-starToken theo chế độ sáng / tối (đổi giá trị khi bật Dark mode)
--dcl-primaryNút chính
--dcl-primary-textChữ / link nhấn
--dcl-surfaceNền card
--dcl-softNền icon, chip
--dcl-sectionSection xen kẽ
--dcl-borderViền
--dcl-priceGiá bán
02
Typography
Aa
Be Vietnam Pro
Hiện đại · Dễ đọc · Hỗ trợ tiếng Việt đầy đủ
Dancing Script – chỉ dùng cho câu slogan trang trí
| Cấp | Mẫu | Cỡ / dòng | Dùng cho |
|---|---|---|---|
h1 | Tiêu đề trang | 44/52 Bold | Một H1 duy nhất mỗi trang |
h2 | Tiêu đề section | 32/40 Bold | Khối nội dung lớn |
h3 | Tiêu đề nội dung | 24/32 SemiBold | Nhóm trong section |
.section-title | Nguyên liệu nổi bật | 26 Bold | Tiêu đề khối trên trang |
body | Nội dung đoạn văn dễ đọc. | 16/24 Regular | Đoạn văn |
.small | Chú thích, ghi chú, meta | 14/20 Regular | Caption |
.section-eyebrow | Problem hub | 13 SemiBold | Nhãn phía trên tiêu đề |
.price | 125.000đ 150.000đ | 17 Bold | Giá bán (dữ liệu thực tế) |
03
Icon
Trang chủ
Danh mục
Tìm kiếm
Giỏ hàng
Tài khoản
Công thức
Kiến thức
Video
Hỗ trợ
Yêu thích
- Bootstrap Icons, nét line đơn giản, nhất quán
.icon-circle-sm/ mặc định /-lg/-solid- Luôn kèm nhãn chữ hoặc
aria-label - Tự đổi màu theo light & dark mode
04
Nút
Trạng thái
Default
Pressed / active
Disabled
Loading
Outline disabled
Success
05
Input & form
Thông tin không hợp lệ.
Tìm kiếm
Số lượng
Checkbox / radio / switch
06
Badge, tag & nhãn
Bánh mì
Công thức
Kỹ thuật
Cơ bản
-15%
Hot
Mới
Bán chạy
Tạm hết hàng
Video
PDF
[MASTER: dữ liệu cần xác minh]
1
2
3
07Card (sinh từ renderer
Card (sinh từ renderer data-render)
product · sale
product · hết hàng
product · liên hệ giá
product-b2b
recipe · video
article
problem
video
product-row (danh sách gọn, giỏ hàng)
bake-cat (danh mục tròn)
quote-card
Nguyên liệu tốt – Tạo nên những chiếc bánh tuyệt vời hơn.
cta-soft
08
Điều hướng
Tabs gạch chân (nav-underline)
Breadcrumb
Phân trang
Accordion (FAQ)
Câu trả lời ngắn, có ích; không nhồi từ khóa.
Nội dung.
Mục lục bài viết (toc)
09
Alert & thông báo
Thành công
Đã thêm vào giỏ hàng.
Thông tin
Giá hiển thị theo dữ liệu thực tế.
Cảnh báo
Sản phẩm sắp hết hàng.
Lỗi
Có lỗi xảy ra, vui lòng thử lại.
alert-brand – ghi chú mẹo, lưu ý kỹ thuật trong công thức và bài viết.
10
Trạng thái rỗng & đang tải
Đang tải…
11
Bo góc & đổ bóng
4px · Small
rounded-18px · Default
rounded-212px · Card
rounded-316px · Banner
rounded-4Shadow 1 · card nghỉ
shadow-1Shadow 2 · hover, menu
shadow-212
Phong cách hình ảnh
Ảnh sản phẩm · 1:1
Rõ nét, đúng màu thực tế
Ảnh nguyên liệu · 1:1
Tự nhiên, gần gũi
Ảnh thành phẩm · 4:3
Đẹp, không chỉnh quá tay
Ảnh quy trình · 16:9
Chân thực, đời thường
- Ưu tiên ảnh thật, ánh sáng tự nhiên; WebP, < 200KB
- Tỷ lệ chuẩn 1:1, 4:3, 16:9;
loading="lazy"trừ ảnh hero - Alt mô tả đúng nội dung ảnh (tiếng Việt)
- Không dùng ảnh AI cho sản phẩm thực tế; ảnh phải có quyền sử dụng
13
Lưới & responsive
| Thiết bị (guideline) | Bootstrap | Cột | Container | Gutter | Ghi chú |
|---|---|---|---|---|---|
| Mobile < 768px | xs, sm | 4 | 100% (≈343px @375) | 16px | 1 cột nội dung, bottom nav, filter dạng offcanvas |
| Tablet 768 – 1439px | md 768, lg 992 | 8 | 720 / 960px | 20px | Header desktop + sidebar từ lg (992px) |
| Desktop ≥ 1440px | xl 1200, xxl 1400 | 12 | 1200px nội dung | 24px | Container tối đa 1248px (1200 + 2×24) |
Desktop · 12 cột
Tablet · 8 cột
Mobile · 4 cột
| Thành phần | Desktop | Tablet | Mobile |
|---|---|---|---|
| Menu chính | Hiện đầy đủ, sticky | Header + menu từ lg | Hamburger + bottom nav |
| Bộ lọc | Sidebar trái | Offcanvas | Nút “Bộ lọc” → offcanvas |
| Card sản phẩm / hàng | 4 – 5 cột | 3 cột | 2 cột |
| Recipe / Article | 3 – 4 cột | 2 – 3 cột | 1 – 2 cột |
| Footer | 5 cột | 3 – 4 cột | 2 cột, gọn |
14
Do & Don't
Nên
- Giữ nhất quán màu sắc, logo, phong cách
- Ưu tiên sự đơn giản và dễ sử dụng
- Hình ảnh thật, nội dung hữu ích
- Tối ưu cho mobile và tốc độ tải trang
- Đảm bảo khả năng truy cập (tương phản, nhãn, bàn phím)
- Dùng class Bootstrap cho layout & responsive
- Kiểm tra cả Light và Dark mode
Không nên
- Tự ý thay đổi màu logo hoặc mã màu
- Nhồi quá nhiều nội dung trong một khối
- Dùng ảnh AI cho sản phẩm thực tế
- Dùng font lạ, khó đọc
- Tạo quá nhiều hiệu ứng chuyển động
- Hard-code mã màu trong HTML (hỏng dark mode)
Quy tắc nội dung
- Không dùng claim “tốt nhất / ngon nhất / giá tốt nhất / chính hãng” khi chưa có bằng chứng.
- Không dùng đánh giá, logo đối tác chưa được xác minh.
- Giá, tồn kho, MOQ, xuất xứ đọc từ master data.
- Thông tin doanh nghiệp bọc trong
<span data-master="…">để thay thế khi lên Drupal.
Precision must not exceed evidence.
Brand message
“Nguyên liệu tốt – Tạo nên những chiếc bánh tuyệt vời hơn”
Duculaba · Bakery Supplies · Design System v1.0 · 09/2026