Hướng dẫn vẽ mockup — phong cách Modern SaaS¶

Quy tắc dựng giao diện mẫu cho Longdo ERP, rút ra từ mockup tham chiếu 01-modern-saas.html. Mọi BA dựng màn hình ERP phải bám tài liệu này để các màn đồng bộ, đẹp, đúng một phong cách. Đọc kèm rules/giao-dien.md và skill dung-mockup.

Tinh thần Modern SaaS

Nền sáng, nhiều khoảng trắng, thẻ bo tròn + bóng mềm, một màu nhấn duy nhất, chữ Inter rõ ràng. Gọn gàng như Linear / Stripe / Notion — không rườm rà.

1. Cách dựng (setup)¶

Mockup là một file HTML độc lập, mở là chạy. Dùng Tailwind qua CDN + khối cấu hình token nội tuyến (copy nguyên khối này vào <head>):

<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<script>
tailwind.config = { theme: { extend: {
  fontFamily: { sans: ['Inter','system-ui','sans-serif'] },
  colors: { brand: { 50:'#eef2ff',100:'#e0e7ff',500:'#6366f1',600:'#4f46e5',700:'#4338ca' } },
  boxShadow: {
    card:  '0 1px 2px 0 rgb(16 24 40/.04),0 1px 3px 0 rgb(16 24 40/.06)',
    cardh: '0 8px 24px -6px rgb(16 24 40/.12)'
  }
}}}
</script>
<style>body{font-family:Inter,system-ui,sans-serif}</style>

Thân trang đặt nền & màu chữ nền: <body class="bg-slate-50 text-slate-800">.

2. Design token¶

Màu thương hiệu (brand — indigo)¶

Token	Mã	Dùng cho
brand-50	#eef2ff	Nền item menu active, nền icon chip, nền badge "đang xử lý"
brand-100	#e0e7ff	Cột biểu đồ phụ
brand-500	#6366f1	Chấm màu, viền focus
brand-600	#4f46e5	Nút chính, logo, avatar, cột biểu đồ nổi bật
brand-700	#4338ca	Hover nút chính, chữ menu active, chữ badge

Màu trung tính (slate) & ngữ nghĩa¶

Vai trò	Lớp Tailwind
Nền app	`bg-slate-50`
Bề mặt thẻ	`bg-white`
Viền / kẻ	`border-slate-100` / `border-slate-200`
Chữ phụ	`text-slate-400` / `text-slate-500`
Chữ thường	`text-slate-600` / `text-slate-700`
Chữ đậm/đầu đề	`text-slate-900`
Thành công	`emerald` (nền `-50`, chữ `-600/700`)
Nguy / giảm	`rose` (nền `-50`, chữ `-600/700`)
Chờ / cảnh báo	`amber` (nền `-50`, chữ `-600/700`)
Thông tin	`brand` (nền `-50`, chữ `-700`)

Bo góc · Đổ bóng · Khoảng cách¶

Yếu tố	Quy ước
Bo nhỏ	`rounded-lg` (8px)
Bo vừa	`rounded-xl` (12px)
Bo thẻ	`rounded-2xl` (16px)
Bo tròn	`rounded-full`
Bóng thẻ	`shadow-card`
Bóng hover	`shadow-cardh` + `transition`
Nhịp dọc	vùng main `p-6 space-y-6`
Đệm thẻ	`p-5`

3. Khung trang (layout)¶

┌──────────┬─────────────────────────────────────────┐
│ Sidebar  │ Header (sticky, h-16, backdrop-blur)     │
│ w-64     ├─────────────────────────────────────────┤
│ bg-white │ Main: p-6 space-y-6                      │
│ nav theo │  • Hàng tiêu đề + nút hành động          │
│ nhóm     │  • Lưới KPI (grid 4 cột)                 │
│          │  • Biểu đồ (2/3) + phụ (1/3)             │
│ user ở   │  • Bảng dữ liệu                          │
│ đáy      │                                          │
└──────────┴─────────────────────────────────────────┘

Sidebar w-64, ẩn ở mobile (hidden lg:flex), có logo trên cùng, nav chia nhóm có nhãn (uppercase, tracking-wider, text-slate-400), thẻ user ở đáy.
Header h-16, dính trên (sticky top-0), bg-white/80 backdrop-blur, chứa tiêu đề trang + ô tìm kiếm + chuông + avatar.
Main p-6 space-y-6, các khối cách đều nhau.

4. Thư viện component (recipe)¶

<!-- active -->
<a class="flex items-center gap-3 px-3 py-2 rounded-lg bg-brand-50 text-brand-700 font-medium">📊 Bảng điều khiển</a>
<!-- thường -->
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-600 hover:bg-slate-50">📦 Kho hàng</a>

Nút¶

<!-- chính --><button class="h-9 px-4 rounded-lg bg-brand-600 text-white text-sm font-medium hover:bg-brand-700 shadow-sm">+ Tạo đơn</button>
<!-- phụ  --><button class="h-9 px-4 rounded-lg border border-slate-200 bg-white text-sm font-medium text-slate-700 hover:bg-slate-50">Xuất Excel</button>

Thẻ KPI (icon chip + xu hướng + số lớn + nhãn)¶

<div class="bg-white rounded-2xl p-5 shadow-card hover:shadow-cardh transition">
  <div class="flex justify-between">
    <span class="h-10 w-10 grid place-items-center rounded-xl bg-brand-50 text-brand-600">💵</span>
    <span class="text-xs font-semibold text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-full">▲ 12%</span>
  </div>
  <p class="mt-4 text-2xl font-bold text-slate-900">₫2.4 tỷ</p>
  <p class="text-sm text-slate-500">Doanh thu tháng</p>
</div>

Badge trạng thái (pill)¶

Trạng thái	Lớp
Hoàn tất	`bg-emerald-50 text-emerald-700`
Đang xử lý	`bg-brand-50 text-brand-700`
Chờ duyệt	`bg-amber-50 text-amber-700`
Đã huỷ	`bg-rose-50 text-rose-700`

<span class="text-xs font-medium px-2.5 py-1 rounded-full bg-emerald-50 text-emerald-700">Hoàn tất</span>

Bảng dữ liệu¶

Bọc trong thẻ: bg-white rounded-2xl shadow-card overflow-hidden.
Đầu bảng: chữ nhỏ in hoa mờ — text-xs uppercase tracking-wide text-slate-400.
Hàng: hover:bg-slate-50/60, kẻ mảnh border-b border-slate-50.
Mã/giá trị quan trọng để font-medium/font-semibold text-slate-900; cột phụ text-slate-500.

Ô tìm kiếm (header)¶

<div class="relative">
  <input placeholder="Tìm kiếm…" class="h-9 w-72 rounded-lg border border-slate-200 bg-slate-50 pl-9 pr-3 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500/30 focus:border-brand-500">
  <span class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">🔍</span>
</div>

5. Checklist trước khi đưa duyệt¶

Dùng đúng token: nền slate-50, thẻ white bo 2xl + shadow-card, nhấn brand-600.
Font Inter; tiêu đề font-bold text-slate-900, chữ phụ text-slate-500.
Chỉ một màu nhấn (indigo); màu khác chỉ dùng ngữ nghĩa (emerald/rose/amber).
Mỗi item tương tác có trạng thái hover.
Dữ liệu mẫu tiếng Việt thật (tên, tiền ₫, ngày dd/mm), KHÔNG "Lorem ipsum".
Responsive cơ bản: sidebar ẩn ở mobile (hidden lg:flex), lưới co theo breakpoint.
Mở trực tiếp file HTML chạy được, không cần build.

6. Nên / Không nên¶

Nên	Không nên
Nhiều khoảng trắng, bố cục thở	Nhồi nhét, thẻ sát nhau
Bóng mềm, viền mảnh slate	Bóng đậm, viền đen dày
Một màu nhấn + xám trung tính	Nhiều màu rực cạnh tranh nhau
Badge pill bo tròn, chữ nhỏ	Badge vuông chữ to chói