Design system
Sương
Sổ tay du lịch, nhịp sống chậm giữa đồi thông. Ảnh phong cảnh tràn khung, tiêu đề Alegreya có chữ nghiêng gạch dạ quang màu dã quỳ, nhãn chữ hẹp in hoa như biển chỉ đường, đường đồng mức làm hoạ tiết, đường kẻ đứt như lộ trình trên bản đồ. Phòng là thẻ có thông số bằng icon, giá theo mùa là những tấm vé có lỗ bấm, một ngày ở homestay là dòng thời gian trên nền đêm.
Font
Tiêu đề
Alegreya
Ngủ giữa mây, thức dậy cùng đồi thông
Nội dung
Commissioner
Năm phòng gỗ nhìn ra rừng thông, bữa sáng nhà làm và lò sưởi cho những đêm 14 độ.
Nhãn & số
Barlow Condensed
Ngày đến · 1.520 m · 6:00
Màu
Nền sương
#EEF0EA
CMS: Màu nền
Mực thông
#1B2420
CMS: Màu chữ
Thông xanh
#1F3D36
Nút, icon, nhãn. CMS: Màu chính
Dã quỳ
#D69A1E
Gạch dạ quang, sao, giờ trên nền đêm. CMS: Màu nhấn
Địa y
#C9D3CC
Nền icon, ghi chú giá. CMS: Màu phụ
Đêm
màu chính 42% + #0A0D0C
Tự tính: dòng thời gian, thanh nổi
Viền
chữ 14% trên nền
Tự tính, thường là nét đứt
Thang chữ
H1
Tinh tế trong từng chi tiết
Alegreya 500 · 44→96px · cao dòng 0.98
H2
Tinh tế trong từng chi tiết
Alegreya 500 · 34→58px · chữ nghiêng có gạch dã quỳ
H3
Tinh tế trong từng chi tiết
Alegreya 500 · 26px
Thân
Tinh tế trong từng chi tiết
Commissioner 400 · 15.5→16.5px
Chú thích
Tinh tế trong từng chi tiết
Alegreya nghiêng · 15px
Nhãn
Tinh tế trong từng chi tiết
Barlow Condensed 500 · 13px · in hoa · +16%
Bo góc
- Nút, thanh đặt phòng999px
- Thẻ phòng, véCMS bo góc + 6px (≈ 14–16px)
- Ảnh, ô nhậpCMS bo góc (8px) / 12px
Khoảng cách
- Khung nội dung1248px, lề 20 → 32px
- Khoảng section80px → 112px, hero cao 100svh
- Lưới12 cột: tiêu đề 4 cột bám dính, nội dung 8 cột
Chuyển động
Hiện dần như sương tan 1s cubic-bezier(.16,1,.3,1): mờ → rõ, nhoè 10px → 0, nhích 18px. Ảnh hero trôi từ 108% về 100% trong 2.6s. Hàng "quanh đây" nở cao 700ms khi rê, panel ảnh nở theo flex-basis 620ms.
Thành phần
Phòng nghỉ
Năm căn phòng, một khu đồi
- 2 khách
- Giường đôi 1m8
- View đồi thông
Giá từ950.000đ / đêm
Giữ phòng