Design system
Gác
Quán cà phê nhỏ trên gác chung cư cũ, kiểu ấn phẩm indie: chữ hiển thị Bricolage rất to và khít, chữ nhấn là serif nghiêng mềm như viết tay trên bảng menu, nhãn mono như máy in hoá đơn. Giấy có hạt, viền mực 2px với bóng cứng, sticker xoay nghiêng, ảnh polaroid dán băng keo hoặc kẹp dây, dải chữ chạy theo tốc độ cuộn. Giờ mở cửa, chỉ đường và Zalo luôn trong tầm tay.
Font
Tiêu đề
Bricolage Grotesque
Cà phê rang mỗi tuần, trên một cái gác cũ
Chữ nhấn
Fraunces (nghiêng)
ngồi lâu cũng được
Nội dung
Hanken Grotesk
Robusta Cầu Đất pha phin, kem muối biển đánh tay, bánh nướng lúc 7 giờ sáng.
Nhãn, giá, hoá đơn
JetBrains Mono
Mở 7:00 – 22:30 · 46 Hàng Bạc
Màu
Nền giấy
#F1E9DA
CMS: Màu nền
Mực cà phê
#22170F
Chữ, viền 2px, bóng cứng. CMS: Màu chữ
Cà chua
#C4421B
Chữ nhấn, nút, nền FAQ khi mở. CMS: Màu chính
Lòng đỏ trứng
#E7A93A
Sticker, vé mời. CMS: Màu nhấn
Giấy kraft
#E2D2B6
Băng keo. CMS: Màu phụ
Giấy in
nền + 62% trắng
Hoá đơn, polaroid, phiếu đặt bàn
Thang chữ
H1
Tinh tế trong từng chi tiết
Bricolage 700 · 48→132px · -5% · lh .98
H2
Tinh tế trong từng chi tiết
Bricolage 700 · 38→84px · -4.5%
H3
Tinh tế trong từng chi tiết
Bricolage 600 · 22→30px
Nhấn
Tinh tế trong từng chi tiết
Fraunces nghiêng · SOFT 100, WONK
Thân
Tinh tế trong từng chi tiết
Hanken 400 · 15→16px
Nhãn
Tinh tế trong từng chi tiết
JetBrains Mono 500 · 11px · in hoa · +14%
Bo góc
- Nút, dock999px
- Sticker6px
- Thực đơn, phiếu, ô liên hệ0 (vuông, viền 2px)
- Vé mời, footer16–25px
Khoảng cách
- Khung nội dung1280px, lề 16→24px
- Khoảng section64px → 112px
- Bóng cứng3px (sticker) · 8px (thẻ giấy)
Chuyển động
Hiện dần kiểu "in": nhích 22px và nghiêng -0.6° rồi thẳng lại (700ms, cubic-bezier(.22,1,.36,1)). Tiêu đề trồi từng chữ qua khe; hoá đơn in từ trên xuống; mực tràn ngang 360–400ms (cubic-bezier(.76,0,.24,1)) trên nút và FAQ; polaroid đung đưa theo lò xo; dải chữ chạy nhanh hơn khi cuộn.
Thành phần
Robusta Cầu Đất pha phin, kem muối biển đánh tay.
Gác
Cà phê muối 45k, Bạc xỉu 39k, Pour-over 65k, Bánh chuối nướng 35k