Ceramics
Bacera
Design System
Hệ thống thư viện UI Component hoàn chỉnh được phân rã cấu trúc theo mô hình Atomic Design, sẵn sàng tái sử dụng cho mọi Layout của bạn.
1. Foundations
Typography
Bricolage Grotesque Font Scale
Heading / H1
Building better digital experiences
28px / 29px / -3% LS
Heading / H2
Designing for the future
22px / 24px / -3% LS
Heading / H3
Essential design principles
18px / 21px / -3% LS
Body / Regular
Typography is the foundation of any good design system. The quick brown fox jumps over the lazy dog. A cohesive system starts with great typography.
18px / 22px / 0% LS
Body / Small
Perfect for fine print, captions, tooltips, and secondary info.
15px / 14px / -2% LS
Colors
Brand Palette Scale. Click any square to copy HEX code.
Primary
Neutral
Accent
2. Molecules
Buttons
Light Theme
Dark Theme
Badges & Tags
Brand Tag
Hot Seller
Draft Note
Completed
Toasts / Alerts
Thành công
Thao tác hoàn tất gọn gàng.
Lỗi kết nối
Lòng lòng điền đủ các trường bắt buộc.
Form Controls
Inputs
Selects
Select City
Select City
Select City
Textareas
Tabs
Pagination
Interactive Overlays
3. Organisms
Workshop Card
Product Card
Product
-50%
Product
Product
Blog Card
Ceramics
Mealtime fun
Ceramics
Mealtime fun
Collection Gallery (Bento Grid)
Hệ thống thẻ linh hoạt theo Layout thực tế (Tái hiện đúng Specs JSX gốc: Hỗ trợ linh hoạt 16:9, 4:3, 3:4). Tự động co giãn 100% cột chứa, gradient chuẩn 253deg và khoảng cách nội dung y hệt thiết kế.
Whispers of Clay
Soft forms. Gentle hues. Pieces shaped by quiet hands and slow mornings.
Earthy Textures
Rough edges and raw finishes.
Modern Minimalist
Clean lines for modern homes.
Ceramic Mugs
Everyday companions.
Handmade Plates
For beautiful dinners.
Modals & Popups
Copied