skills/tocbien-ui-ux/references/styles/art-deco.md

# Art Deco (`art-deco`)

Đen sâu, vàng đồng, hoa văn quạt đối xứng

- Hợp với: Hợp khi đang dùng AI để dựng website cho nhà hàng, bar và đêm diễn cần cảm giác trang trọng của một dịp đặc biệt.
- Ngành minh hoạ: Nhà hàng, quán bar, khách sạn
- Trang minh hoạ làm việc gì: Phòng trà nghệ thuật với chương trình, sơ đồ bàn và vé mẫu
- Thang (1–10): biến tấu bố cục 7 · chuyển động 2 · mật độ 3
- Xem mẫu: https://tocbien.cloud/phong-cach/art-deco/

## Đặc tả

Art Deco: nền xanh đen #111a22, chữ kem #f2e7d2, nhấn vàng đồng #c9a227. Tiêu đề serif hoặc chữ hoa giãn vừa đủ, bố cục cân đối và đường trang trí hình quạt tiết chế. Hero dùng ảnh dọc sân khấu hoặc không gian thật; ảnh ngang bổ sung không khí ở phần sau. Nội dung có thể gồm chương trình, trải nghiệm, thực đơn và đặt chỗ tùy dự án. Viền mảnh vàng, nút rõ, không phủ hoa văn dày và không loại bỏ ảnh chụp. Điện thoại giảm giãn chữ, chia lại cột, giữ dấu tiếng Việt nguyên vẹn.

**Chi tiết cần giữ:** Nội dung phải giãn hết chiều cao khung, không thì đáy trang hở một mảng đen lớn trông như chưa dựng xong. Chữ hoa giãn rộng bằng tiếng Việt cần line-height ít nhất 1.4 để dấu không chạm nhau.

**Lưu ý khi áp dụng:** Đừng dùng cho quán bình dân. Kiểu này đặt kỳ vọng về giá, khách bước vào mà thấy khác là mất lòng tin.

## Đặc tả gốc chi tiết (giữ đầy đủ)

# Design Style: Art Deco (The "Gatsby" Aesthetic)

## 1. Design Philosophy

Art Deco is the visual embodiment of the Roaring Twenties—an era of jazz, prosperity, and unbridled optimism. This design style captures **opulence, mathematical precision, and architectural grandeur**. It celebrates luxury through geometry rather than organic forms, creating a aesthetic that feels both **timeless and theatrical**.

### The DNA of Art Deco

This is not minimalism. Art Deco is **maximalist restraint**—every element is intentional, ornamental, yet precisely placed. The style rejects soft curves in favor of **hard edges, sharp angles, and geometric repetition**. It's the visual language of the machine age meeting high society, where **structure equals beauty**.

The vibe is "The Great Gatsby" meets Fritz Lang's "Metropolis"—champagne towers in skyscraper ballrooms, chrome elevator grilles, sunburst marquees, and zigzag moderne facades. It feels **expensive, confident, and timeless**.

### Core Principles

**Geometry as Decoration:**
Art Deco worships mathematical forms. Triangles, chevrons, trapezoids, stepped pyramids (ziggurat shapes), sunbursts, and fan motifs dominate. These aren't random—they create **visual rhythm through repetition**. Borders aren't just lines; they're multi-layered frames. Corners feature decorative cuts or stepped embellishments. Every surface is an opportunity for geometric ornamentation.

**Contrast as Drama:**
This style thrives on **extreme tonal contrast**. Deep, obsidian blacks set against radiant metallic golds create instant luxury. There's no muddy middle ground—elements are either in shadow or bathed in light. This high contrast extends to typography (massive display faces vs refined body text) and spatial hierarchy (dense ornamentation vs deliberate negative space).

**Symmetry and Balance:**
Art Deco layouts favor **central axes and bilateral symmetry**. Content radiates from centerlines. Column counts are even. Decorative elements mirror across vertical dividers. This symmetry isn't rigid—it's **ceremonial**, like the entrance to a grand hotel or the facade of a cinema palace.

**Verticality and Aspiration:**
Inspired by skyscrapers, Art Deco emphasizes **upward movement**. Vertical lines, tall narrow proportions, and stacked elements create a sense of height and ambition. Sections feel like floors of a building. Dividers act like architectural columns. The design **reaches skyward**.

**Material Luxury:**
Even in digital form, Art Deco evokes **tactile richness**—polished brass, etched glass, lacquered wood, terrazzo floors. Metallic sheens, subtle glows, and layered shadows simulate these premium materials. The style says "this is crafted, not mass-produced."

**Theatricality:**
Art Deco doesn't whisper—it **announces**. Transitions are dramatic. Hover states glow. Headings demand attention with all-caps, wide tracking, and imposing scale. Interactive elements feel like mechanical buttons on a vintage elevator panel—precise, satisfying, engineered.

### Emotional Resonance

When executed correctly, Art Deco should evoke:
- **Confidence** - Nothing tentative or apologetic
- **Heritage** - Rooted in a golden age of design
- **Exclusivity** - Premium, members-only, VIP access
- **Optimism** - The future was bright in 1925, and it still is
- **Sophistication** - Educated taste, cultural refinement

This isn't a style for soft SaaS startups or friendly consumer apps. It's for **luxury brands, premium services, cultural institutions, and products that want to feel like heirlooms**.

### Key Visual Signatures

1. **Stepped Corners** - Ziggurat-style cuts on cards and containers
2. **Rotated Diamonds** - 45-degree squares as frames and accents
3. **Sunburst Radials** - Emanating rays from focal points
4. **Metallic Gold (#D4AF37)** - Used sparingly but decisively on obsidian black
5. **Double Borders** - Frames within frames for depth
6. **Roman Numerals** - Classical sophistication in numbering
7. **All-Caps Typography** - Display text in uppercase with generous tracking
8. **Linear Patterns** - Repeating diagonal grids, chevrons, or fan motifs at low opacity
9. **Glow Effects** - Soft halos around gold elements, never harsh drop shadows
10. **Corner Embellishments** - Decorative L-brackets or lines at card corners

The goal is instant recognition: when someone sees this design, they should immediately think "Art Deco" without being told.

## 2. Design Token System

### Colors (Dark Luxury Palette)
*   **Background**: `#0A0A0A` (Obsidian Black) - The deep void.
*   **Foreground**: `#F2F0E4` (Champagne Cream) - For primary text, warm and readable.
*   **Card Background**: `#141414` (Rich Charcoal) - Slightly lighter than bg for depth.
*   **Primary Accent (Gold)**: `#D4AF37` (Metallic Gold) - The core luxury element.
*   **Secondary Accent**: `#1E3D59` (Midnight Blue) - For subtle depth or inactive states.
*   **Border**: `#D4AF37` (Gold) - Borders are celebrated, not hidden.
*   **Muted**: `#888888` (Pewter) - For secondary text.

### Typography
*   **Headings**: **"Marcellus"** (Google Font) or "Italiana". These have the classic Roman structures with Art Deco flair.
*   **Body**: **"Josefin Sans"** (Google Font). Geometric, vintage feel, but readable.
*   **Scaling**: High contrast. Headings should be imposing.
    *   H1: `text-6xl` or `text-7xl`, uppercase, generous letter-spacing (`tracking-widest`).
    *   Body: `text-lg`, comfortable `leading-relaxed`.

### Radius & Border
*   **Radius**: **Strictly `0px`** or very specific `2px` for softness. Art Deco is about sharp lines.
*   **Border Width**: Thin, precise lines (`1px`) or double lines (`3px` double style) are common.
*   **Stepped Corners**: Use CSS clip-paths or pseudo-elements to create "stepped" corners (ziggurat shape) on cards.

### Shadows & Effects
*   **Glow**: Instead of soft drop shadows, use "glows" or hard offsets.
    *   `box-shadow: 0 0 15px rgba(212, 175, 55, 0.2)` (Gold Glow).
*   **Gradients**: Use linear gradients that mimic metallic sheen on buttons or borders (e.g., Gold Light to Gold Dark).
*   **Textures**: A subtle "grain" or "noise" overlay on the background adds vintage film quality.

## 3. Component Stylings

### Buttons (Precision Instruments)
Buttons in Art Deco are **architectural elements**, not soft pills. They command attention and provide satisfying tactile feedback.

**Structure:**
- Sharp corners (`rounded-none`) or minimal softness (`rounded-sm` at 2px max)
- Minimum height of 48px (h-12) for touch accessibility
- All-caps text with wide tracking (`tracking-widest` or `tracking-[0.2em]`)
- 2px borders that glow on hover

**Variants:**
- **Default**: Transparent background, gold border (2px), gold text. Hover: gold background, black text, intensified glow (`shadow-[0_0_20px_rgba(212,175,55,0.4)]`)
- **Solid**: Gold background, black text. Hover: lighter gold (`#F2E8C4`) for brightness shift
- **Outline**: Thin gold border (1px), transparent background. Hover: midnight blue fill (`#1E3D59`)

**Interaction:**
- Transition duration: 300-500ms for theatrical effect
- Glow effect increases on hover (subtle shadow-based halo)
- No rounded corners—maintain geometric precision

### Cards (Geometric Containers)
Cards are **framed exhibits**, each one a miniature architectural facade.

**Structure:**
- Background: Rich charcoal (`#141414`) for depth against obsidian black page
- Border: Full 1px gold border at 30% opacity, increases to 100% on hover
- Corner decorations: Small L-shaped brackets at opposite corners (top-right + bottom-left OR top-left + bottom-right)
- Header separator: Bottom border on card header at 20% gold opacity

**Decorative Elements:**
- Stepped corners using pseudo-elements with 2px borders
- Corner embellishments positioned absolutely at 4-8px inset
- Optional: diagonal corner cut using `clip-path` for advanced cards

**Interaction:**
- Subtle lift on hover: `-translate-y-2` with 500ms duration
- Border opacity intensifies from 30% to 100%
- Corner decorations transition from 50% to 100% opacity

**Card Internal Hierarchy:**
- CardHeader: `p-6` with bottom border separator
- CardTitle: Display font, gold color (`#D4AF37`), 2xl, uppercase, wide tracking
- CardDescription: Body font, muted gray (`#888888`), normal case
- CardContent: `p-6` spacing

### Inputs (Underlined Elegance)
Inputs embrace **minimalism within maximalism**—no background boxes, just refined underlines.

**Structure:**
- Transparent background (`bg-transparent`)
- Bottom border only: 2px solid gold (`#D4AF37`)
- No side or top borders—emphasizes horizontal flow
- Height: `h-12` (48px) for touch accessibility
- Padding: `px-3 py-2` for comfortable text entry

**Typography:**
- Font: Body sans-serif (Josefin Sans)
- Text color: Champagne cream (`#F2F0E4`)
- Placeholder: Muted gray (`#888888`)

**Focus State:**
- Border color brightens to lighter gold (`#F2E8C4`)
- Bottom shadow appears: `shadow-[0_4px_10px_rgba(212,175,55,0.2)]`
- Smooth transition: `transition-all`
- No ring, only the enhanced underline

**Label Pattern:**
- Uppercase, small font size (xs or sm)
- Gold color for active state
- Positioned above input or floating label pattern

## 4. Non-Generic Bold Choices

These mandatory elements prevent the design from looking like default Tailwind or generic templates:

**1. Diagonal Crosshatch Background Pattern**
Apply a repeating diagonal grid pattern to the main background at 3-5% opacity. Use CSS `repeating-linear-gradient` at 45° and -45° angles with gold lines. This subtle texture adds vintage print quality.

**2. Rotated Diamond Containers**
Icons and avatars sit inside 45-degree rotated squares (`rotate-45`). The content inside counter-rotates (`-rotate-45`) to remain upright. This creates instant Art Deco recognition.

**3. Roman Numerals for Numbering**
Use I, II, III, IV instead of 1, 2, 3, 4 for steps, tiers, or lists. Display them in the serif display font for classical elegance.

**4. Stepped Corner Decorations**
Add small L-shaped border elements at opposite corners of cards and containers. Use absolute positioning with 2-4px borders on two sides only (e.g., `border-t border-l` for top-left corner).

**5. Double-Frame Images**
Never use plain images. Wrap in:
- Outer border container with gold border
- Inner inset div with thick dark border (creates frame-within-frame)
- Apply grayscale filter by default, remove or add gold overlay on hover

**6. Sunburst Radial Gradients**
Use `radial-gradient` with gold at 10-20% opacity emanating from key focal points (especially hero section). This creates the iconic Art Deco sunburst effect.

**7. Section Dividers with Decorative Lines**
Section headings include horizontal gold lines above and below the text (e.g., `h-px w-24` dividers). These are never full-width—they're measured, balanced accents.

**8. Vertical Divider Lines**
Use absolute-positioned vertical lines (`w-px h-full`) to create column separation or architectural height. These should be gold at low opacity.

**9. Glow Effects Over Drop Shadows**
Replace traditional drop shadows with box-shadow glows: `0 0 15px rgba(212,175,55,0.2)`. This simulates neon or backlit signage from the 1920s.

**10. All-Caps Display Typography with Extreme Tracking**
Headings must be uppercase with `tracking-widest` (0.2em). This isn't optional—it's fundamental to the style's voice.

## 5. Layout & Spacing

**Container Width:**
- Maximum content width: `max-w-6xl` for primary sections, `max-w-7xl` for wider grids (testimonials, blog)
- Hero and major sections: `max-w-5xl` for focused, centered content

**Spacing System:**
- Base unit: 8px (Tailwind's default)
- Section padding: `py-32` (128px) for generous breathing room
- Card padding: `p-8` (32px) for comfortable content spacing
- Grid gaps: `gap-8` (32px) between cards and columns

**Grid Philosophy:**
Art Deco is mathematically precise. Use even column counts:
- Features: 3 columns (lg), 2 columns (md), 1 column (base)
- Testimonials: 3 columns (lg), 2 columns (md), 1 column (base)
- Pricing: 3 columns, equal width
- Benefits: 2 columns (md), 1 column (base)
- Footer: 5 columns (lg) with company info spanning wider

**Alignment:**
- Centered axis for hero, headings, and CTAs
- Justified or centered text for formal sections
- Alternating left-right patterns in timeline layouts (How It Works)

**Negative Space:**
Space is intentional, not accidental. Large gaps between sections (32-40px) create visual separation. White space around centered headings provides "stage presence."

## 6. Animation & Interaction

**Philosophy:**
Animations should feel **theatrical and mechanical**—like Art Deco elevator doors opening or stage curtains rising. Nothing bouncy or organic.

**Transition Timing:**
- Standard: `duration-300` (300ms) for quick feedback
- Theatrical: `duration-500` (500ms) for dramatic reveals
- Easing: `ease-out` or `ease-in-out` for smooth mechanical motion

**Hover States:**
- Cards: Lift upward (`-translate-y-2`) + border glow intensifies
- Buttons: Background color flip + glow expansion
- Links: Color shift to gold + subtle underline expansion
- Images: Scale slightly (`scale-105`) + overlay appearance

**Page Load Animations (Optional):**
- Sections slide up with fade: `translate-y-8 opacity-0` → `translate-y-0 opacity-100`
- Stagger delays for sequential reveal (100ms between elements)
- Hero elements can have a sunburst expand effect

**Interactive Micro-details:**
- FAQ chevrons rotate 180° on open
- Icon containers rotate from 45° to 0° on hover (then back)
- Gold lines can animate width from 0 to full on section scroll-into-view
- Button glows pulse subtly on focus state

## 7. Accessibility & Contrast

**Color Contrast:**
- Gold text (`#D4AF37`) on black (`#0A0A0A`): **Passes WCAG AA** at ~7:1 ratio
- For body text or smaller sizes, use champagne cream (`#F2F0E4`) for better readability
- Gold should be used for accents, headings, and borders—not long-form body text
- Muted text (`#888888`) on black: ~4.5:1 ratio, acceptable for secondary content

**Focus States:**
- Buttons: 2px gold ring with 2px offset (`ring-2 ring-[#D4AF37] ring-offset-2 ring-offset-black`)
- Links: Gold underline appears or thickens
- Inputs: Bottom border glows brighter with subtle shadow
- Interactive cards: Border intensifies rather than adding a ring

**Touch Targets:**
- Minimum button height: 48px (`h-12`)
- Minimum clickable area: 44x44px for mobile
- FAQ accordion buttons: Full-width with generous padding (`p-6`)
- Adequate spacing between interactive elements (min 8px gap)

**Keyboard Navigation:**
- Clear focus indicators on all interactive elements
- Focus follows visual hierarchy (top to bottom, left to right)
- Skip-to-content link for keyboard users (if header is complex)

**Screen Reader Considerations:**
- Decorative elements (corner brackets, divider lines) use `aria-hidden="true"`
- Images have descriptive alt text
- Icon buttons include accessible labels
- Form inputs have associated labels

## Đặc tả áp dụng chi tiết

CÁCH ÁP DỤNG PHONG CÁCH ART-DECO
Bố cục và nhận diện: Trục đối xứng, obsidian #0A0A0A/gold #D4AF37/cream #F2F0E4; Marcellus và Josefin Sans theo nguồn, radius 0–2 px. H1 80–104 px, viết hoa, tracking 0.12em, không mở quá ngang đến mất dấu.

## 3. Nội dung mở đầu

**H1:** NGUYỆT CẦM

**Lời dẫn:** Một đêm nhạc phòng trà, được trình bày như tấm vé bước vào một nhà hát cổ.

**Hành động chính:** Chọn buổi nghe / Xem vị trí ngồi

## 4. Đặc tả từng vùng nội dung và tác vụ

### 1. Mặt tiền nhà hát

**Bố cục và hành vi:** Tựa giữa sunburst, hai cột dọc cân xứng, cửa vòm ảnh sân khấu nằm trên trục trung tâm.

**Nội dung và đầu ra:** Thông tin suất mẫu và CTA Xem chương trình; không chữ tựa lệch trái kiểu editorial.

### 2. Chương trình I–III

**Bố cục và hành vi:** Ba phần nhạc đánh La Mã, khung đôi và divider hình quạt.

**Nội dung và đầu ra:** Mỗi phần có tên/chất giọng/thời lượng minh họa; nghệ sĩ hư cấu được ghi rõ.

### 3. Không gian phòng trà

**Bố cục và hành vi:** Ảnh sân khấu và chi tiết đồng/vải theo cùng không gian.

**Nội dung và đầu ra:** Ảnh hưởng chất liệu vàng/đen, không stock quán cà phê sáng.

### 4. Chọn vị trí mẫu

**Bố cục và hành vi:** Sơ đồ bàn đối xứng, trạng thái ghế/chỗ trống bằng shape và nhãn.

**Nội dung và đầu ra:** Chọn bàn hiện góc nhìn minh họa; không thanh toán.

### 5. Tấm vé minh họa

**Bố cục và hành vi:** Tóm tắt vị trí/chương trình trong khung bậc thang.

**Nội dung và đầu ra:** Nhãn Không có giá trị đặt chỗ rõ, nút Đổi lựa chọn.

## 5. Dữ liệu và trạng thái tương tác

selectedTable chỉ một; bàn không khả dụng không chọn được và có lý do. Đổi suất xóa lựa chọn không tương thích; reset trả sơ đồ ban đầu.

Phân biệt rõ dữ liệu dựng sẵn với hành động thực: chức năng thử trong mẫu không gửi tin, tạo đơn, đặt lịch hoặc thực thi workflow bên ngoài. Nếu phiên bản khách sau này kết nối dịch vụ thật, đó là phần tích hợp riêng cần quyền và kiểm lỗi phù hợp.

## 6. Responsive và thứ tự đọc

Ở 390 px, H1 40–52 px với tracking giảm, khung giữ đối xứng. Sơ đồ có danh sách bàn thay cho zoom/kéo; ornament mảnh không ăn vùng chữ.

Kiểm thêm 320 px và 1280×720 để phát hiện cắt chữ/đáy panel. Thứ tự DOM phải theo việc người xem cần làm, không chỉ sắp lại bằng CSS rồi khiến Tab đi lộn. Bảng/log dài cuộn bên trong vùng có nhãn.

## 7. Chuyển động và phản hồi

Gold glow khi hover 350 ms, mở vé 400 ms ease-out; không xoay card/nảy. Giảm chuyển động tĩnh nhưng viền kim loại còn đủ.

Không để motion làm chậm thao tác hoặc che lỗi. Lưu trạng thái pause trong phiên khi có vòng lặp; reduced-motion phải giữ toàn bộ thông tin và thứ tự nội dung.

## 8. Art direction và ảnh đại diện

**Tài sản nội dung:** Artwork AI sân khấu và chi tiết nhạc cụ cùng ánh sáng; không một ảnh generic piano duy nhất.

**Cover:** Masthead chính giữa, sunburst và đôi cột trọn khung; không cropleft/right khác nhau làm hỏng đối xứng. Dọc không cắt mất đầu quạt.

**Bộ xuất:** cover 1200×750; cover dọc 900×1200; OG 1200×630; screenshot QA riêng ở viewport thực. Chụp/compose từ đúng phiên bản đã dựng, không ảnh hero hứa một thiết kế khác trang thật.

## 9. Trường hợp nghiệm thu riêng

1. Trục giữa các section và cover trùng nhau.
2. Chọn bàn bằng bàn phím được.
3. Vé mẫu luôn ghi cảnh báo không đặt chỗ, không QR giả.

Ngoài ba trường hợp này, chạy bộ kiểm chung của kế hoạch: tải ảnh/font lỗi, focus, reduced-motion, zoom200%, trạng thái trống và quay lại/reset. Không ghi đạt nếu chưa có bằng chứng.

Các tên, ngành và tác vụ ở trên là ví dụ có thể chuyển sang dự án của người dùng. Giữ ngôn ngữ thị giác gốc; không ép dự án thật thành nội dung của trang minh họa.