Design System
Pattern Design
Ngôn ngữ thiết kế của DIVAHOME: Sự kết hợp giữa tối giản hiện đại của Ý và cảm hứng nghệ thuật thuần khiết.
Bảng màu (Color Palette)
Primary
#ED7D37
Main Accent - Vibrant & Modern
Secondary
#536D4A
Earth Tone - Nature & Stability
Background
#FFFFFF
Main Background - Pure & Clean
Off-White
#F9FAFB
Section Background - Subtle Contrast
Text Main
#111827
Headings - Deep Gray (Almost Black)
Text Light
#6B7280
Body Text - Balanced Readability
Phông chữ (Typography)
Playfair Display / 8xl (96px)
Playfair Display / 6xl (60px)
Playfair Display / 3xl (30px)
Inter / lg (18px)
Inter / xs (12px)
Quy cách khoảng cách (Spacing & Rhythm)
Section Padding
py-40 (160px)
Main page sections separation
Container Margin
mb-24 (96px)
Header to content distance
Inner Spacing
gap-12/16/20
Grid items and component internals
Thành phần cốt lõi (Core Components)
Cards & Hover Principle
Nguyên tắc: Grayscale mặc định ➔ Color khi hover. Phóng đại nhẹ 105%. Backdrop mờ.
Buttons & Luxury CTA
Nguyên tắc: Vuông vức, tracking vệt dài (0.3em), padding lớn để tạo cảm giác quyền lực.
Nút Catalogue (đã ẩn — chờ link)
Các nút dưới đây đã được ẩn khỏi trang công khai vì chưa có link PDF/Online thực tế. Khi có link, khôi phục vào bo-suu-tap/index.astro, en/collections/index.astro, và san-pham/[...slug].astro.
Download PDF Button
Dùng ở: trang Bộ sưu tập (VI/EN), bên dưới mỗi catalogue item.
Thay [PDF_URL] bằng link PDF thực tế.
View Online Button
Dùng ở: trang Bộ sưu tập (VI/EN), kết hợp cạnh nút Download PDF.
Thay [ONLINE_URL] bằng link flipbook thực tế.
Technical Specs Button
Dùng ở: trang chi tiết sản phẩm (VI/EN), cạnh nút "Tư vấn thiết kế".
Thay [SPECS_URL] bằng link tài liệu thực.
Combined Layout (Download + View)
Layout 2 nút kết hợp: Primary (dark bg) + Secondary (text-only).
Triết lý thiết kế (Design Pillars)
- – Minimalism over Complexity: Loại bỏ chi tiết thừa, để hình ảnh sản phẩm lên tiếng.
- – Luxury is in the details: Chú trọng vào hiệu ứng hover tỉ mỉ, bóng đổ siêu nhẹ, typography rộng.
- – Consistency of spacing: Mọi section phải thở đều đặn với nhịp py-40.
- – Focus on Art: Website như một gallery nghệ thuật, không phải một sạp hàng hóa thông thường.