Style Guide — Vivu eSIM
Bộ nguyên tắc giao diện rút ra từ trang chủ: màu sắc, kiểu chữ, nút, badge, thẻ và icon. Mọi thành phần ở đây dùng đúng design token của trang chủ, nên đây cũng là bản tham chiếu sống cho nhà thiết kế và lập trình viên.
Màu sắc
Hệ màu OKLCH: brand xanh đại dương, accent coral ấm, và dải trung tính cân bằng nóng-lạnh.
Brand — xanh đại dương
--brand --brand-strong --brand-soft --brand-softer Accent — coral
--accent --accent-soft Bề mặt & chữ
--bg --surface --surface-2 --ink --ink-2 --muted --border --border-strong Kiểu chữ
Font Be Vietnam Pro — thiết kế riêng cho dấu tiếng Việt. Tiêu đề có letter-spacing âm và text-wrap: balance.
Đặt chân tới đâu, online tới đó.
Người Việt đang đi đâu?
eSIM du lịch cho người Việt. Mua trước chuyến bay, quét một mã QR, và có mạng ngay khi máy bay vừa hạ cánh — không cần đổi SIM, không lo phí chuyển vùng.
Không còn cảnh xếp hàng mua SIM ở sân bay hay dò Wi-Fi miễn phí. Mọi thứ chuẩn bị xong từ nhà.
Nút
Bo tròn hoàn toàn (pill). Bốn biến thể, ba kích thước.
| Class | Dùng cho |
|---|---|
.btn-primary | Hành động chính (CTA) |
.btn-ghost | Hành động phụ, viền |
.btn-light | Trên nền sáng/đổ bóng |
.btn-lg / .btn-sm | Biến thể kích thước |
Badge & pill
Nhãn nhỏ cho trạng thái và phân loại.
| Class | Dùng cho |
|---|---|
.pill | Nhãn trung tính (brand soft) |
.pill-accent | Nhấn mạnh / nổi bật (coral) |
Thẻ
Thẻ điểm đến và thẻ bài viết — di chuột để xem hiệu ứng nâng & đổ bóng.
Ảnh placeholder
Khi chưa có ảnh thật, dùng .ph với data-label mô tả. Biến thể coral: .ph-accent.
Icon
Bộ icon đường nét đồng nhất (stroke 1.7, bo tròn). Tô màu theo currentColor.
Bo góc & bóng
Ba mức bo góc và ba mức đổ bóng dùng xuyên suốt trang.
--radius-sm--radius--radius-lg--shadow-sm--shadow-md--shadow-lg