Gói cuối tuần dài
2 đêm + bữa tối bếp củi + đón sân bay một chiều
2.890.000₫
Áp dụng T6 đến CN
Foundations · v1.0 · 08.2026
Design tokens — hai mươi mẫu
Một bộ token dùng chung cho cả hai mươi mẫu. Thang chữ, thang khoảng cách, bo góc và trạng thái component giữ nguyên giữa các mẫu; mỗi mẫu chỉ đổi bảy vai trò màu, bộ chữ và bậc bo góc. Mười mẫu đầu (01–10) dùng chung cấu trúc trang ở mục 08; mười mẫu sau (11–20) cố ý phá cấu trúc đó. Cấu trúc trang, thang đo và trạng thái component giữ nguyên giữa các theme; chỉ lớp màu, bo góc và bộ chữ thay đổi.
01 · Vai trò màu
Bảy vai trò cố định. Mọi theme phải khai báo đủ bảy, kèm tỉ lệ tương phản đạt WCAG AA cho chữ nhỏ.
--bg
Nền trang
--surface
Thẻ, panel, khung chat
--ink
Chữ chính
--muted
Chữ phụ, ≥ 4.5:1
--accent
CTA, giá, ngày đã chọn
--accent-soft
Nền nhạt của accent
--line
Viền và đường chia
02 · Bảng màu hai mươi mẫu
Mười bốn mẫu sáng, năm mẫu tối, một mẫu kết hợp khung tối với màn hình sáng. Mỗi theme dùng đúng một màu accent, áp dụng nhất quán toàn trang. Thứ tự ô: bg · surface · ink · muted · accent · accent-soft · line.
01 Editorial Olive
SÁNG · radius 2
#ffffff
#fbfbfa
#101014
#55554e
#4d5c33
#eaeee2
#e6e6e0
02 Swiss Signal
SÁNG · radius 0
#ffffff
#fafafa
#0a0a0a
#3d3d3d
#b3122f
#f7dfe4
#c9c9c9
03 Terracotta Slate
SÁNG · radius 16
#f4f5f6
#ffffff
#1e2833
#4c5a68
#b4532c
#f7e4dc
#e6e9ec
04 Field Green
SÁNG · radius 4
#f7f6f2
#ffffff
#16211a
#4a5850
#2f6b45
#e2efe6
#e2e2da
05 Olive Brick
SÁNG · radius 6
#f2f1ec
#fbfaf7
#1b1c18
#55574d
#a63d24
#f4e2dc
#ddddd3
06 Blush Sand
SÁNG · radius 20 / pill
#faf6f4
#ffffff
#2a2124
#6b5b60
#b0576b
#f8e5ea
#ece2df
07 Mono Lime
SÁNG · radius 0 / nút pill
#fcfcfc
#f4f4f4
#111111
#4d4d4d
#5c8a00
#e9f4d2
#e4e4e4
08 Forest Night
TỐI · radius 8
#0e1512
#16201b
#eef1ec
#a8b3ab
#d99a3e
#2c2417
#24312a
09 Carbon Emerald
TỐI · radius 2
#0b0b0c
#141416
#f2f2f2
#a0a0a3
#2fbf71
#10251a
#232326
10 Espresso Champagne
TỐI · radius 4
#171310
#211b17
#f2ece4
#b3a595
#c9a35f
#2e2519
#302720
11 Booking modal
SÁNG · radius 14
#f3f4f2
#ffffff
#14181a
#5a625e
#0f6b62
#f2faf8
#e0e2de
12 Cinematic Scroll
TỐI · radius 4
#0c0b09
#12100d
#f4efe6
#9d968c
#cbb894
#241f18
#241f18
13 Split Screen
SÁNG · radius 0
#e9e5dd
#f5f2eb
#1c1a17
#665e51
#7a4a1e
#f0e6d8
#d9d3c7
14 Chat First
TỐI · radius 14
#0f1113
#15181b
#f5f3f0
#a6adb3
#e0644a
#1f2226
#22262a
15 Magazine
SÁNG · radius 0
#f7f5f0
#ffffff
#191714
#5c564c
#8a2f2f
#f2e6e2
#ddd8cd
16 Rate Sheet
SÁNG · radius 0
#fbfbfa
#ffffff
#15181b
#3f4749
#1f5c8b
#eaf1f6
#d9dcdb
17 Bento
SÁNG · radius 20
#eceae4
#f6f4ef
#17150f
#5d574a
#9a3412
#f7e5da
#ddd9d0
18 Mobile First
TỐI + SÁNG · radius 16
#1a1c22
#f7f6f3
#eceef2
#9ba3ae
#0f6b62
#eef4f2
#2f333c
19 Poster
SÁNG · radius 0
#f2f0e9
#ffffff
#12120f
#5a5646
#b8410f
#fbe6dc
#12120f
20 Calendar First
SÁNG · radius 16
#faf9f7
#ffffff
#1a1a1c
#61605c
#7c3f8f
#f2e7f5
#e5e2dd
03 · Thang chữ
Tiếng Việt có dấu chồng lên chữ hoa, nên mọi tiêu đề đặt line-height tối thiểu 1.1. Cỡ chữ display dùng clamp() để không vỡ bố cục ở màn hình hẹp.
displaySáu căn phòngclamp(38,4.4vw,62) / 1.1 / −0.03em
h2Hạng phòngclamp(28,2.9vw,40) / 1.12
h3Pine Deluxe · 28m²17–21 / 1.25
body-lgNhà nhỏ do gia đình tự vận hành, cách trung tâm 3 km.16.5 / 1.6 / tối đa 65ch
bodyBan công hướng rừng thông, hai khách.14–14.5 / 1.55
captionGiá đã gồm bữa sáng cho hai khách12.5 / 1.45
labelNhận phòng · Check-in10–11 / giãn 0.14–0.2em
numeric620.000₫ · 28m² · 14–16/08giá và số liệu luôn dùng mono
01 · 02
Bricolage Grotesque + Public Sans; Archivo + IBM Plex Mono
03 · 06
Outfit + DM Sans + DM Mono; Manrope
04 · 05 · 07
Space Grotesk; Sora + Libre Franklin; Instrument Sans
08 · 09 · 10
Sora; Archivo + IBM Plex Mono; Outfit + DM Mono
Quy tắc
Tối đa 3 họ chữ mỗi theme; số liệu luôn dùng mono
04 · Khoảng cách, bo góc, đổ bóng
Thang 4pt
4khoảng cách nhãn với giá trị
8chip gợi ý, ô lịch
12đệm trong bong bóng chat
20khoảng cách lưới thẻ phòng
44lề trang trên desktop
76đệm dọc giữa các section
Bo góc
0
2
8
16
pill
Mỗi theme khoá đúng một bậc cho thẻ và nút. Không trộn thẻ vuông với nút bo tròn trong cùng một trang.
Đổ bóng
e0 · chỉ viền — thẻ nằm trong trang
e1 · thanh kiểm tra phòng
e2 · nút chat nổi
e3 · khung chat mở
Bóng luôn nhuộm theo màu nền của theme, không dùng đen thuần.
05 · Component & trạng thái
Mẫu hiển thị bằng theme 01. Các theme khác thay token màu và bo góc, giữ nguyên kích thước, khoảng cách và trạng thái.
Nút
Đặt cọc giữ chỗprimary · cao 48px
Đặt cọc giữ chỗhover · accent tối hơn 12%
Đặt cọc giữ chỗfocus · viền 2px, cách 2px
Đặt cọc giữ chỗdisabled · không nhận thao tác
Vị trí & di chuyểnsecondary
Có đưa đón sân bay?chip gợi ý trong chat
Trường nhập
Số điện thoại
Nhập số để nhận mã giữ chỗ
Chỉ dùng để xác nhận đơn đặt phòng.
Số điện thoại
0903 555 218
Trạng thái focus.
Số điện thoại
0903 555
Số điện thoại phải có 10 chữ số.
Thẻ hạng phòng (Generative UI)
Pine Deluxe · 28m²
Ban công hướng rừng thông
620.000₫ /đêm
Ảnh vuông 60px, tên hạng phòng và diện tích trên cùng một dòng, giá luôn dùng mono và mang màu accent.
Bong bóng chat & ô lịch
Cuối tuần này còn phòng trống không?
Dạ còn hai hạng phòng ạ.
12
13
14
15
16
Ngày đã chọn dùng nền accent, đêm ở giữa dùng accent-soft, ngày quá khứ để mờ.
06 · Khung chat & nút nổi
Trợ lý xuất hiện dưới dạng nút nổi ở góc phải dưới của mọi trang. Khung chat rộng 372–380px, cao tối đa 620px hoặc 82% chiều cao màn hình.
Nút nổi
Cao 50–54px, cách mép 26–30px, luôn nằm trên cùng lớp z-index 40.
Đầu khung
Tên cơ sở, trạng thái trực và nút đóng 28px.
Thân khung
Cuộn dọc, khoảng cách 12px giữa các khối, đệm 16px.
Ô nhập
Cố định dưới cùng, nút gửi vuông 38–42px.
Thẻ hạng phòng
Ảnh, tên, diện tích, giá
Lịch trống
Chọn đêm ngay trong chat
Bảng so sánh
Diện tích, tầng, chính sách huỷ
Bảng tạm tính
Giá phòng, dịch vụ, tiền cọc
Form thu thông tin
Họ tên và số điện thoại
Bản đồ & chỉ đường
Ảnh khu vực và khoảng cách
07 · Khối nội dung dùng lại
Hai khối này xuất hiện trên cả hai mươi mẫu. Cấu trúc và khoảng cách giữ nguyên, chỉ token màu và bo góc đổi theo từng mẫu.
Thẻ đánh giá
“Nhà nhỏ, chủ nhà nấu bữa sáng ngon và nhớ cả việc mình không ăn được hành.”
Trích dẫn tối đa 3 dòng, dùng nháy kép cong. Tên khách in đậm, nguồn và tháng để ở dòng dưới bằng màu muted.
Thẻ gói lưu trú
Ba gói mỗi mẫu, gói giữa dùng nền accent-soft và viền accent để đánh dấu gói được chọn nhiều nhất. Giá luôn mono và mang màu accent.
08 · Cấu trúc trang chuẩn
Trình tự chuẩn của mười mẫu đầu (01–10). Mười mẫu sau cố ý phá cấu trúc này để thử cách tổ chức thông tin khác, nhưng vẫn giữ nguyên token màu, thang chữ và các khối ở mục 07.
01Thanh điều hướngTên cơ sở, 4 mục, chuyển ngôn ngữ, nút đặt phòng. Cao tối đa 78px.
02HeroVị trí, tiêu đề tối đa 2 dòng, mô tả dưới 25 từ, hai nút.
03Thanh kiểm tra phòngNhận phòng, trả phòng, số khách, hạng phòng, nút kiểm tra.
04Hạng phòng3–4 hạng, mỗi hạng có ảnh, diện tích, mô tả ngắn và giá theo đêm.
05Tiện nghi / ẩm thựcDanh sách có giờ phục vụ và mức phí, không viết văn dài.
06Vị trí & di chuyểnẢnh khu vực, địa chỉ đầy đủ, bảng khoảng cách tới các điểm chính.
07Câu hỏi thường gặp4 câu, tập trung vào đặt cọc, huỷ phòng, giờ nhận phòng, chỗ đậu xe.
08Khách đã ở nói gìBa trích dẫn thật, mỗi trích dẫn kèm tên khách và nguồn (Zalo, Google, Facebook).
09Gói lưu trúBa gói đặt sẵn, ghi rõ gồm những gì, giá trọn gói và điều kiện áp dụng.
10Chân trangĐịa chỉ, hạng phòng, thông tin, liên hệ (Zalo, Facebook, email).
11Trợ lý nổiLuôn hiện ở góc phải dưới, mở ra khung chat Generative UI.