Design system
Hoà An
Y khoa nhân văn: bình tĩnh, ân cần và rất dễ đọc, vì người lớn tuổi cũng đọc website này. Chữ thân 17–18px có nút tăng cỡ chữ, tiêu đề serif nhân văn Petrona, nội dung Lexend. Ngôn ngữ riêng lấy từ không gian phòng khám: biển chỉ dẫn mang màu từng khoa, vạch dẫn đường ba màu như dưới sàn bệnh viện, phiếu số thứ tự, khung ảnh vòm, nét điện tim dưới chữ nhấn mạnh. Bề mặt phẳng, viền mảnh, không bóng đổ, không lưới kẻ.
Font
Tiêu đề
Petrona
Khám kỹ, giải thích rõ, an tâm về nhà
Nội dung
Lexend
Bác sĩ chuyên khoa khám trực tiếp, kết quả xét nghiệm trả trong ngày qua Zalo.
Nhãn
Lexend 500
Khoa Nội tổng quát · Tầng 1
Màu
Nền ngà
#F7F4EE
CMS: Màu nền
Chữ
#18222F
Tương phản 15:1 trên nền. CMS: Màu chữ
Lam Hoà An
#1E4E8C
Nút, liên kết, thẻ chân trang. CMS: Màu chính
Cam san hô
#D25B43
Hotline, nét điện tim, huy hiệu. CMS: Màu nhấn
Lam nhạt
#E2EAF4
Nền phụ. CMS: Màu phụ
Chỉ dẫn: Lam
#2F6DB5
Màu khoa thứ 1, nền #E3ECF7
Chỉ dẫn: Nắng
#B7800F
Màu khoa thứ 2, nền #FBF0D5
Chỉ dẫn: Sen
#BE4F6D
Màu khoa thứ 3, nền #F9E3E9
Chỉ dẫn: Lá
#3F7F59
Màu khoa thứ 4, nền #E1F0E6
Chỉ dẫn: Tím
#7356AE
Màu khoa thứ 5, nền #EDE6F7
Chỉ dẫn: Mơ
#C0612E
Màu khoa thứ 6, nền #FBE7D9
Thang chữ
H1
Tinh tế trong từng chi tiết
Petrona 600 · 38→65px · -1.8%
H2
Tinh tế trong từng chi tiết
Petrona 600 · 32→52px · -1.4%
H3
Tinh tế trong từng chi tiết
Petrona 600 · 24px
Thân
Tinh tế trong từng chi tiết
Lexend 400 · 17→18px · dòng 1.65 (A+ 19.5px, A++ 21.5px)
Bài viết
Tinh tế trong từng chi tiết
Lexend 400 · 19.4px · dòng 1.8
Nhãn
Tinh tế trong từng chi tiết
Lexend 500 · 16px · chữ thường, chấm màu khoa
Bo góc
- Nút, viên nhãn999px
- Thẻ, ảnh20px (CMS: Bo tròn)
- Ảnh chân dungVòm: 999px trên, 20px dưới
- Ô nhập16px, cao 52px
Khoảng cách
- Khung nội dung1216px, lề 20 → 32px
- Khoảng section64px → 96px
- Vùng bấm tối thiểu44–56px (nút 52px, thanh đáy 56px)
Chuyển động
Hiện dần 700ms cubic-bezier(.25,.8,.25,1): mờ → rõ, nhích 16px, lần lượt 90ms. Vạch dẫn đường tự kéo dài từ trái khi cuộn tới. Nút hotline có vòng sóng chậm 2.2s. Tắt hết khi người dùng chọn giảm chuyển động.
Thành phần
Nội tổng quát
Tầng 1 · Phòng 102
Nhi khoa
Tầng 2 · Phòng 202
024
Quầy tiếp đón số 2
- T2
- T3
- T4
- T5
- T6
- T7
- CN