Voido Coffee Roaster
Design System Preview
Trang kiểm tra trực quan các token đang có trong voido-theme.css. Mọi màu sắc, typography, spacing, radius và button dưới đây đều tham chiếu trực tiếp từ design system hiện tại.
00 · Brand
Logo
Logo Voido từ media hiện có trên nền surface của hệ thống.
01 · Color
Color palette
Palette Voido gồm primary red, neutral scale, black và white. Border dùng neutral-300.
Primary
--color-primary
#A30000
Primary 100
--color-primary-100
#F5A2A2
Primary 600
--color-primary-600
#A42A2A
White
--color-white
#FFFFFF
Neutral 100
--color-neutral-100
#E8E6E6
Neutral 300
--color-neutral-300
#C7C7C7
Neutral 600
--color-neutral-600
#595959
Black
--color-black
#000000
02 · Type
Typography scale
Các heading, body và caption kế thừa trực tiếp từ Theme Style và global classes.
Hành trình tìm kiếm hương vị
Về chúng tôi
Sản phẩm rang mộc
Giải pháp cho quán
Giá trị cốt lõi
Hương vị nguyên bản
Voido Coffee Roaster theo đuổi trải nghiệm cà phê nguyên bản, nhất quán và có chiều sâu.
Thông tin chú thích, pháp lý hoặc điều khoản dịch vụ sử dụng caption scale.
03 · Properties
Typography properties
Weight, line-height và letter-spacing được kiểm tra riêng để tránh hard value ở component.
Font weight
Line-height
Letter-spacing
Tracking wide
--tracking-wide · 0.05em
04 · Spacing
Spacing scale
Base spacing là 4px. Các thanh bên dưới dùng trực tiếp giá trị từng --space-*.
05 · Shape
Radius scale
Voido dùng --radius-none cho CTA vuông; các radius còn lại được giữ sẵn cho component cần dùng.
06 · Actions
Button & link states
Hover button đổi background theo token nhưng vẫn giữ border 1px.
07 · Layout
Container inheritance
Preview minh họa một container không tự đặt width/max-width riêng; sizing kế thừa từ Theme Style.
Shared container surface
Padding đang tham chiếu var(--space-6) cho phần minh họa. Trong Bricks, không tự thêm sizing nếu Theme Style đã quản lý container.
08 · Content
Article example
Ví dụ bài viết thực tế để kiểm tra hierarchy, line-height, rhythm và khả năng đọc tiếng Việt.
Kiến thức cà phê · 13.09.2026
Hành trình tạo nên một tách cà phê nguyên bản
Một tách cà phê ngon bắt đầu từ sự tôn trọng nguyên liệu, sự nhất quán trong rang xay và cách người pha truyền tải trọn vẹn hương vị.
Từ hạt cà phê đến hương vị
Mỗi vùng trồng mang đến một câu chuyện riêng. Độ cao, thổ nhưỡng và phương pháp sơ chế cùng tạo nên những lớp hương khác nhau trong từng mẻ rang.
Nguồn nguyên liệu
Voido lựa chọn nguyên liệu với tiêu chí rõ ràng, ưu tiên sự ổn định và khả năng thể hiện đặc tính tự nhiên của hạt. Tìm hiểu thêm về bảng màu và token của hệ thống.
Giữ trọn trải nghiệm trong từng lần pha
Từ quán cà phê đến căn bếp gia đình, một quy trình phù hợp giúp hương vị được tái hiện nhất quán. Đây là nền tảng để mỗi trải nghiệm trở nên gần gũi và đáng nhớ hơn.