Design system
Gió Biển
Bungalow ven biển phía tây Phú Quốc, nắng rửa bạc màu: nền cát vôi có hạt, mực biển sâu, xanh ngọc thuỷ tinh biển và cam hoàng hôn. Dấu hiệu riêng là mặt trời lặn trên đường chân trời (biểu tượng, vòng cung nắng ở hero, đường đi của mặt trời cho trải nghiệm trong ngày), mép sóng cắt ở đáy ảnh, ghi chú viết tay bằng Caveat, giá phòng ba mức đổi bằng công tắc và trang đặt phòng có lịch nhận/trả phòng kèm tạm tính từng đêm.
Font
Tiêu đề
Brygada 1918
Ngủ dậy là biển ở ngay hiên nhà
Nội dung
Plus Jakarta Sans
Mười hai căn bungalow mái lá, cách mép nước ba mươi bước chân, lặng gió từ tháng mười một tới tháng tư.
Ghi chú tay
Caveat
giá đổi theo ngày bạn ở ↓
Màu
Nền cát vôi
#F4EEE3
CMS: Màu nền
Mực biển
#14343A
Chữ, footer biển đêm. CMS: Màu chữ
Thuỷ tinh biển
#0F6B68
Nút, nhãn, lịch. CMS: Màu chính
Hoàng hôn
#D9623A
Mặt trời, nút đặt phòng, chữ nghiêng. CMS: Màu nhấn
Bọt sóng
#D7E8E3
Dải nền nhạt, ô trong khoảng ngày. CMS: Màu phụ
Cát đậm
nền + 14% cát #C9A66B
Tự tính, dải xen kẽ
Biển đêm
chữ 88% + chính
Tự tính, footer và thanh nổi
Thang chữ
Hiển thị
Tinh tế trong từng chi tiết
Serif 500 · 43→96px · -2.8% · em nghiêng màu hoàng hôn
H2
Tinh tế trong từng chi tiết
Serif 500 · 33→56px · -2.2%
H3
Tinh tế trong từng chi tiết
Serif 500 · 25px
Dẫn
Tinh tế trong từng chi tiết
Sans 400 · 17px · dòng 1.7
Nhãn
Tinh tế trong từng chi tiết
Sans 700 · 11px · in hoa · +20% · có mặt trời nhỏ
Ghi chú tay
Tinh tế trong từng chi tiết
Caveat 600 · 23px · nghiêng -2°
Bo góc
- Nút, công tắc, thanh nổi999px
- Thẻ, ảnh (CMS: Bo góc)var(--r), mặc định 20px
- Ô nhập14px
- Ảnh mép sóngbo trên + đáy lượn sóng 120×14px
Khoảng cách
- Khung nội dung1280px, lề 16→24px
- Khoảng section80px → 112px
- Lưới12 cột, khe 24–64px
Chuyển động
Nước dâng: mờ → rõ và nhích 18px trong 800ms cubic-bezier(.22,1,.36,1), lệch 90ms theo thứ tự. Mặt trời nhô khỏi chân trời khi tải (1.6s). Giá đổi mức có nhích + nhoè 2px như pricing-7. Đánh giá chạy hai hàng ngược chiều, dừng khi rê chuột.
Thành phần
giá đổi theo ngày bạn ở ↓