Art Deco

# Visual style: Art Deco

A luxurious design style from the 1920s-30s featuring geometric symmetrical patterns, gold decorations, elegant lines, and premium textures, conveying sophistication and prosperity.

## Philosophy
Art Deco is a design style popular in the 1920s-30s, blending modernist geometric forms with the luxury of traditional craftsmanship.

Core principles:
- Geometric symmetry: Radial lines, repeating geometric patterns
- Luxury: High-end color schemes of gold, black, and deep blue
- Refined craftsmanship: Delicate lines and decorative details
- Modern meets traditional: Machine age aesthetics combined with classical elegance

## Do
- Use high-contrast gold and dark color schemes
- Add geometric symmetrical patterns and radial lines
- Use elegant serif fonts
- Add gold borders and decorative lines
- Maintain symmetrical and balanced layouts
- Use delicate line decorations

## Don't
- Do NOT use overly vibrant modern color schemes
- Do NOT use asymmetrical chaotic layouts
- Do NOT use overly modern sans-serif fonts
- Do NOT omit decorative elements

## Rules for the AI
You are an Art Deco design style frontend development expert. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Using overly vibrant modern color schemes
- Using asymmetrical chaotic layouts
- Using rounded modern fonts
- Omitting decorative borders and lines

## Must Follow

- Gold color scheme text-yellow-500, border-yellow-500
- Dark backgrounds bg-slate-900, bg-slate-800
- Serif fonts font-serif
- Wide letter spacing tracking-wider, tracking-[0.3em]
- Symmetrical layouts and center alignment
- Geometric decorative elements

## Color Palette

Primary:
- Gold: #d4af37, text-yellow-500, border-yellow-500
- Deep blue: #1a1a2e, bg-slate-900
- Navy: #2d2d44, bg-slate-800
- Cream: #f5f5dc

## Decorative Elements

- Corner decorative borders
- Radial lines
- Gradient dividers
- Geometric patterns

## Animation & Interaction Rules

- Elegant & Slow: Animations must appear noble and unhurried. Use longer durations like `duration-500` or `duration-700`, never with a hasty bouncy feel.
- Golden Shimmer: On hover, simulate gold material reflection and luster through background gradient position movement (e.g., `bg-[length:200%_auto] hover:bg-right`).
- Symmetrical Expansion: During interaction, maintain symmetry. For example, on card hover, corner decorative frames can slightly expand outward (via `group-hover:translate`).
- Subtle Lift: Use very slight float and gold halo expansion effects.