Sức khỏe cả nhà, trong một tầm nhìn.
Chủ đích tránh tông "xanh dương bệnh viện" phổ biến trong ngành. Nhấn vào ô màu để sao chép mã hex.
Màu trạng thái chỉ số — nhất quán tuyệt đối trong toàn bộ app:
Be Vietnam Pro được chọn vì hiển thị dấu tiếng Việt rõ nét ở cỡ nhỏ — quan trọng cho bảng chỉ số nhiều số liệu.
Theo dõi sức khỏe cả nhà
Chỉ số đường huyết của Ba đang cao hơn mức khuyến nghị. Đây là vài gợi ý đơn giản về chế độ ăn và vận động để cải thiện trong những tuần tới.
6.9% · HbA1c
Đường EKG cách điệu đi lên và uốn thành hình mái nhà ở đỉnh — sinh hiệu được che chở trong một mái ấm.
Lockup chính — nền sáng
Lockup đảo màu — nền Teal đậm
Icon mark — dùng cho app icon, favicon
Wordmark thuần — dùng khi không gian hẹp
Những điều không nên làm:
Không kéo giãn/bóp méo tỉ lệ
Không đổi sang màu ngoài bảng màu thương hiệu
Không xoay nghiêng biểu tượng
Không đặt trên nền thiếu tương phản
Không bao giờ chẩn đoán thay bác sĩ. Luôn dẫn người dùng đến một hành động cụ thể.
| Tình huống | Nên viết | Không nên viết |
|---|---|---|
| Chỉ số bình thường | "Mọi thứ đang ổn. Tiếp tục duy trì nhé!" | Im lặng, không phản hồi gì |
| Chỉ số hơi lệch | "Chỉ số này đang cao hơn khuyến nghị một chút — đây là vài gợi ý đơn giản..." | "CẢNH BÁO NGUY HIỂM!!!" |
| Chỉ số nghiêm trọng | "Chỉ số này cần được bác sĩ xem sớm. Đặt lịch khám ngay nhé?" | Tự nêu tên bệnh, chẩn đoán thay bác sĩ |
| Onboarding người lớn tuổi | Câu ngắn, từ phổ thông, cỡ chữ lớn | Thuật ngữ y khoa, câu phức tạp |
Anh Minh (chủ hộ)
12/06/2026
Ba (65 tuổi)
Đường huyết cao hơn khuyến nghị
Bé Su (5 tuổi)
03/06/2026
Các component dùng chung, dựng từ đúng token màu sắc / typography ở trên — để designer & dev tái sử dụng nhất quán trên mọi màn hình.
Buttons
Primary dùng cho hành động chính DUY NHẤT trên mỗi màn hình; Coral chỉ dùng cho CTA cảm xúc / khẩn cấp (ví dụ "Đặt lịch khám ngay").
Form Fields
Viền dày 1.5px, bo góc 10px đồng nhất với ngôn ngữ bo tròn mềm mại của thương hiệu.
Tags & Badges
Toast / Thông báo
Đã lưu kết quả xét nghiệm
Biểu đồ của Ba vừa được cập nhật.
HbA1c cao hơn khuyến nghị
Xem gợi ý chăm sóc cho Ba.
Không đọc được ảnh phiếu
Vui lòng chụp lại ở nơi đủ sáng.
Điều hướng Mobile
Bottom tab bar 4 mục — giữ tối đa 4–5 mục để phù hợp người dùng lớn tuổi, icon luôn đi kèm nhãn chữ.
Điều hướng Desktop (SaaS)
Bảng giá (SaaS)
Free
0đ/tháng
Family
79.000đ/tháng
Family+
149.000đ/tháng
Modal / Hộp thoại xác nhận
Toàn bộ lịch sử xét nghiệm và biểu đồ liên quan sẽ bị xóa vĩnh viễn. Hành động này không thể hoàn tác.
Trạng thái rỗng & Đang tải
Tải phiếu xét nghiệm đầu tiên để bắt đầu theo dõi
Bảng dữ liệu
| Chỉ số | Giá trị | Đơn vị | Trạng thái | Ngày đo |
|---|---|---|---|---|
| Glucose | 7.8 | mmol/L | Cao | 12/06/2026 |
| HbA1c | 6.9 | % | Cao | 12/06/2026 |
| Creatinine | 82 | µmol/L | Bình thường | 12/06/2026 |
Stepper / Tiến trình
Avatar Group