Mid-Century Modern

# Visual style: Mid-Century Modern

1950s Atomic Age design aesthetics with geometric patterns, organic curves, and saturated colors. Inspired by Eames chairs, atomic clocks, and starburst motifs.

## Philosophy
Mid-Century Modern is a design movement that flourished from the 1940s to 1960s, born at the intersection of post-war optimism and the Space Age. It pursues the perfect unity of form and function, believing that good design should serve everyday life.

Its core aesthetic derives from "organic modernism": the fusion of geometric forms with natural curves. Ovals, kidney shapes, starbursts, and atomic models appear repeatedly, reflecting that era's dual faith in scientific progress and natural harmony.

The color palette favors saturated yet non-glaring warm tones -- burnt orange, mustard yellow, olive green, peacock blue -- paired with cream white and deep charcoal neutral bases. These colors, drawn from nature and modern materials, are both warm and restrained.

Typography emphasizes clarity and readability, favoring sans-serif fonts with moderate weight and generous spacing. Headings often use uppercase with wide letter-spacing, while body text maintains comfortable line height.

In interface design, Mid-Century Modern emphasizes whitespace, grid alignment, and visual hierarchy. Cards and containers use subtle rounded corners (not sharp right angles), shadows are soft and restrained, conveying an elegance that is both retro and timeless.

## Do
- Use saturated warm tones bg-[#e8572a] text-[#2a6e5e] paired with cream base bg-[#f5f0e1]
- Use medium rounded corners rounded-lg rounded-xl to simulate organic curves
- Use wide letter-spacing tracking-wide tracking-wider for retro typography feel
- Add subtle soft shadows shadow-md shadow-lg for depth
- Use sans-serif fonts font-sans for modern clarity
- Maintain ample whitespace p-8 p-12 gap-8 to let the design breathe
- Use border-2 with style colors border-[#e8572a] to emphasize geometric structure
- Leverage grid and flexbox for symmetrical balanced layouts

## Don't
- Do not use fluorescent or neon colors bg-pink-500 text-cyan-400
- Do not use sharp right angles rounded-none or extreme rounded-full
- Do not use heavy shadows shadow-2xl or glow effects
- Do not use serif fonts font-serif or handwritten fonts
- Do not use gradient backgrounds bg-gradient-to-r that break the flat color block feel
- Do not densely arrange content without whitespace
- Do not use pure black backgrounds bg-black

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

Absolutely Forbidden:
- Fluorescent or neon colors (pink-500, cyan-400, lime-400)
- Sharp right angles rounded-none
- Pure black backgrounds bg-black
- Gradients bg-gradient-to-*
- Serif fonts font-serif
- Heavy shadows or glow effects

Must Follow:
- Cream base bg-[#f5f0e1]
- Burnt orange primary text-[#e8572a] bg-[#e8572a]
- Teal accent text-[#2a6e5e] bg-[#2a6e5e]
- Gold decoration text-[#c4a35a]
- Charcoal text text-[#3d3d3d]
- Medium rounded corners rounded-lg rounded-xl
- Sans-serif fonts font-sans
- Wide letter-spacing tracking-wide tracking-wider
- Ample whitespace p-8 gap-8

Animation & Interaction Rules:
- Analog Switch: Interactions should simulate retro mechanical button presses; active uses hard displacement + shadow disappearance for damped feedback.
- Brass Shimmer: Brass decorations (like starbursts) slightly rotate and deepen in color on hover, creating metallic reflection.
- Retro Elevation: Card hover enhances hard-edge shadow extension with slight reverse displacement for printmaking-style layering.
- Warm Dimming: Cream base only slightly darkens on interaction, avoiding high-contrast flashing or modern neon feel.