Cubism

# Visual style: Cubism

The Cubism movement of Picasso and Braque, featuring geometric fragmented compositions, multi-perspective overlays, angular shapes, and subdued earth-tone palettes.

## Philosophy
Cubism is one of the most revolutionary art movements of the 20th century, pioneered by Picasso and Braque around 1907. It completely broke with the single-point perspective tradition since the Renaissance, redefining visual expression through geometric fragments and multi-perspective overlays.

Core concepts:
- Geometric fragmentation: Decomposing objects into basic geometric shapes -- triangles, rectangles, irregular polygons
- Multi-perspective overlay: Presenting multiple angles of an object in the same composition, breaking the limitation of a single viewpoint
- Earth-tone palette: Subdued browns, ochres, and steel blues, originating from the restrained color use of the Analytical Cubism period
- Angular tension: Creating visual tension through sharp edges and asymmetric compositions

In digital design, Cubism style is suitable for art galleries, creative agencies, cultural events, and high-end brands. It conveys intellectualism, avant-garde thinking, and a spirit of challenging tradition.

When designing, focus on the layering and interweaving of geometric elements, suggesting depth through planes at different angles rather than using traditional perspective or shadows. Colors are restrained but compositions are bold -- this is the core paradox and charm of Cubism.

## Do
- Use angular geometric shapes with skew and rotate transforms
- Use earth-tone palette #5c4033 and #e8dcc8 as primary colors
- Use thick line borders border-2 paired with dark border colors
- Use small rounded corners rounded or rounded-sm to maintain angularity
- Cards and containers use asymmetric layouts and tilted angles
- Simulate multi-perspective effects through z-index and overlapping elements
- Text uses font-bold and uppercase to emphasize geometric feel
- Use clip-path or transform to create fragmented visuals
- Keep interaction feedback crisp: hover/active primarily use 1-4px displacement and shadow offset, duration kept at 150-200ms

## Don't
- Do not use large rounded corners rounded-2xl, rounded-full
- Do not use soft gradients or blur effects
- Do not use neon or fluorescent colors
- Do not use symmetrical centered traditional layouts
- Do not use circular or organic curved shapes
- Do not use thin hairline borders border
- Do not use overly soft shadows
- Do not use spring bounce, floating loops, or large-scale animations (e.g., hover:scale-110)

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

## Absolutely Forbidden

- Large rounded corners rounded-2xl, rounded-full
- Soft gradients or blur effects
- Neon or fluorescent colors
- Fully symmetrical centered traditional layouts
- Organic curves or circular shapes
- Thin hairline borders border (must be border-2 or thicker)

## Must Follow

- Earth-tone palette: #5c4033 (burnt sienna), #e8dcc8 (canvas)
- Borders use border-2 paired with rounded-sm
- Hard shadows shadow-[Npx_Npx_0px_color]
- font-bold uppercase tracking-widest to emphasize geometric feel
- Create fragmented visuals through skew, rotate, clip-path
- Overlapping elements and asymmetric layouts

## Animation & Interaction Rules

- Motion must be short and crisp: transition duration kept at 100-200ms, prefer combined transitions of transform, box-shadow, and border-color
- Hover feedback primarily uses geometric displacement: 1-2px shift + shadow offset + slight angular disturbance (1-3deg)
- Active state must have a "stamp" feel: 3-4px displacement with shadow significantly shrinking or removed
- No spring bounce, floating loops, slow fade-in/out, or large-scale animations
- One-time light-band/slice sweep effects are allowed but must not steal focus or introduce blur softening

## Color Palette

Primary:
- Sienna: #5c4033
- Canvas: #e8dcc8
- Khaki: #8b7355
- Steel blue: #3d5c6e
- Terracotta: #9b3d25

## Special Elements

- Geometric fragment decorations (clip-path, skew, rotate)
- Hard-edge shadows (no blur)
- Asymmetric compositions
- Bold uppercase letter typography