Mid-Century Modern

STYLEKIT_STYLE_REFERENCE
style_name: Mid-Century Modern
style_slug: mid-century-modern
style_source: /styles/mid-century-modern

# Hard Prompt

## When To Use
Use this when you want AI to generate code with strict style consistency. It is the safest default for production UI.

## How To Use
- Copy the full prompt into ChatGPT, Claude, Cursor, or another coding assistant.
- Append the concrete product/page requirement after the prompt.
- After generation, check the forbidden rules and interaction states before accepting the output.

Strictly follow the style rules below and maintain consistency. No style drift allowed.

## Requirements

- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.

## Style Rules

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.

---

# Mid-Century Modern Design System

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

## Design 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.

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border-2
Color: border-[#3d3d3d]
Radius: rounded-lg
```

### Shadow
```
sm: shadow-[2px_2px_0_#3d3d3d]
md: shadow-[4px_4px_0_#3d3d3d]
lg: shadow-[6px_6px_0_#3d3d3d]
hover: hover:shadow-[6px_6px_0_#3d3d3d]
focus: focus:shadow-[0_0_0_3px_rgba(232,87,42,0.15)]
```

### Interaction
```
Hover translate: (none)
Hover scale: (none)
Hover opacity: hover:opacity-90
Transition: transition-all duration-200 ease-in-out
Active: active:translate-y-[2px]
```

### Typefaces
```
Heading: font-sans font-bold tracking-wide uppercase
Body: font-sans
Mono: font-mono
```

### Type scale
```
Hero: text-5xl md:text-7xl lg:text-8xl
H1: text-3xl md:text-5xl
H2: text-2xl md:text-3xl
H3: text-lg md:text-xl
Body: text-sm md:text-base
Small: text-xs md:text-sm
```

### Spacing
```
Section: py-16 md:py-24 lg:py-32
Container: px-6 md:px-12 lg:px-20
Card: p-6 md:p-8
Gap sm: gap-3 md:gap-4
Gap md: gap-5 md:gap-8
Gap lg: gap-8 md:gap-12
```

### Color roles
```
Background primary: bg-[#f5f0e1]
Background secondary: bg-white
Background accent: bg-[#e8572a], bg-[#2a6e5e], bg-[#c4a35a]
Text primary: text-[#3d3d3d]
Text secondary: text-[#3d3d3d]/70
Text muted: text-[#3d3d3d]/40
Button primary: bg-[#e8572a] text-[#f5f0e1]
Button secondary: bg-transparent text-[#3d3d3d] border-2 border-[#3d3d3d]
```

---

## [FORBIDDEN]

These classes are banned in this style. Check for them before returning code:

### Banned classes
- `font-serif`
- `rounded-none`
- `rounded-full`
- `shadow-2xl`
- `bg-gradient-to-r`
- `bg-gradient-to-l`
- `bg-gradient-to-b`
- `bg-gradient-to-t`
- `bg-black`
- `bg-[#ff71ce]`
- `bg-[#01cdfe]`
- `bg-[#00ff00]`
- `text-[#ff71ce]`
- `text-[#01cdfe]`

### Banned patterns
- matches `^font-serif$`
- matches `^rounded-(?:none|full)$`
- matches `^shadow-2xl$`
- matches `^bg-gradient-`
- matches `^bg-(?:pink|cyan|lime)-`
- matches `^text-(?:pink|cyan|lime)-`

### Why they are banned
- `font-serif`: Mid-Century Modern uses clean sans-serif typography (font-sans)
- `rounded-none`: MCM uses organic curves with medium rounding (rounded-lg, rounded-xl)
- `rounded-full`: MCM uses moderate rounding, not pill shapes
- `bg-gradient-to-r`: MCM uses flat solid color blocks, not gradients
- `bg-black`: MCM uses warm cream and charcoal, never pure black

> WARNING: if your code contains any of the above, replace it before shipping.

---

## [REQUIRED]

### Every button must include
```
rounded-lg
font-sans font-semibold uppercase tracking-wider
transition-all duration-200
```

### Every card must include
```
rounded-xl
border-2 border-[#3d3d3d]
bg-[#f5f0e1]
```

### Every input must include
```
rounded-lg
border-2 border-[#3d3d3d]/30
bg-white
text-[#3d3d3d]
font-sans tracking-wide
focus:border-[#e8572a]
focus:outline-none
```

---

## [COMPARE] Mid-Century Modern wrong vs right

The wrong examples below stand for generic library defaults that were never adapted to this style. Do not read them as visual suggestions.

### Button

[WRONG] **Wrong** (generic component library default, do not copy):
```html
<button class="{GENERIC_LIBRARY_BUTTON_DEFAULT}">
  Click me
</button>
```

[CORRECT] **Right** (uses this style's tokens):
```html
<button class="rounded-lg font-sans font-semibold uppercase tracking-wider transition-all duration-200 bg-[#e8572a] text-[#f5f0e1]">
  Click me
</button>
```

### Card

[WRONG] **Wrong** (generic card, not adapted to this style):
```html
<div class="{GENERIC_LIBRARY_CARD_DEFAULT}">
  <h3>{TITLE}</h3>
</div>
```

[CORRECT] **Right** (uses this style's card tokens):
```html
<div class="rounded-xl border-2 border-[#3d3d3d] bg-[#f5f0e1] p-6 md:p-8">
  <h3 class="font-sans font-bold tracking-wide uppercase text-lg md:text-xl">{TITLE}</h3>
</div>
```

### Input

[WRONG] **Wrong** (generic input, not adapted to this style):
```html
<input class="{GENERIC_LIBRARY_INPUT_DEFAULT}" />
```

[CORRECT] **Right** (uses this style's input tokens):
```html
<input class="rounded-lg border-2 border-[#3d3d3d]/30 bg-white text-[#3d3d3d] font-sans tracking-wide focus:border-[#e8572a] focus:outline-none" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Mid-Century Modern page skeletons

These skeletons use this style's tokens only. Replace `{PLACEHOLDER}` values, but keep every token in place:

### Navigation
```html
<nav class="bg-[#f5f0e1] text-[#3d3d3d] border-2 border-[#3d3d3d] px-6 md:px-12 lg:px-20">
  <div class="flex items-center justify-between max-w-6xl mx-auto gap-5 md:gap-8">
    <a href="/" class="font-sans font-bold tracking-wide uppercase text-lg md:text-xl">
      {LOGO_TEXT}
    </a>
    <div class="flex gap-5 md:gap-8 font-sans text-xs md:text-sm">
      {NAV_LINKS}
    </div>
  </div>
</nav>
```

### Hero section
```html
<section class="bg-[#e8572a] text-[#3d3d3d] py-16 md:py-24 lg:py-32 px-6 md:px-12 lg:px-20">
  <div class="max-w-4xl mx-auto">
    <h1 class="font-sans font-bold tracking-wide uppercase text-5xl md:text-7xl lg:text-8xl">
      {HEADLINE}
    </h1>
    <p class="font-sans text-sm md:text-base max-w-xl">
      {SUBHEADLINE}
    </p>
    <button class="rounded-lg font-sans font-semibold uppercase tracking-wider transition-all duration-200 bg-[#e8572a] text-[#f5f0e1]">
      {CTA_TEXT}
    </button>
  </div>
</section>
```

### Card grid
```html
<section class="bg-[#f5f0e1] text-[#3d3d3d] py-16 md:py-24 lg:py-32 px-6 md:px-12 lg:px-20">
  <div class="max-w-6xl mx-auto">
    <h2 class="font-sans font-bold tracking-wide uppercase text-2xl md:text-3xl">{SECTION_TITLE}</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 md:gap-8">
      <!-- Card template - repeat for each card -->
      <div class="rounded-xl border-2 border-[#3d3d3d] bg-[#f5f0e1] p-6 md:p-8">
        <h3 class="font-sans font-bold tracking-wide uppercase text-lg md:text-xl">{CARD_TITLE}</h3>
        <p class="font-sans text-sm md:text-base text-[#3d3d3d]/40">{CARD_DESCRIPTION}</p>
      </div>
    </div>
  </div>
</section>
```

### Form input
```html
<input class="rounded-lg border-2 border-[#3d3d3d]/30 bg-white text-[#3d3d3d] font-sans tracking-wide focus:border-[#e8572a] focus:outline-none" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-white text-[#3d3d3d]/70 py-16 md:py-24 lg:py-32 px-6 md:px-12 lg:px-20">
  <div class="max-w-6xl mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
      <div>
        <span class="font-sans font-bold tracking-wide uppercase text-lg md:text-xl">{LOGO_TEXT}</span>
        <p class="font-sans text-xs md:text-sm">{TAGLINE}</p>
      </div>
      <div>
        <h4 class="font-sans font-bold tracking-wide uppercase text-lg md:text-xl">{COLUMN_TITLE}</h4>
        <ul class="font-sans text-xs md:text-sm">
          {FOOTER_LINKS}
        </ul>
      </div>
    </div>
  </div>
</footer>
```

---

## [CHECKLIST] Mid-Century Modern post-generation self check

**Before returning code, verify every token and rule below. Fix any violation before delivering:**

### Token check
- [ ] Button includes: `rounded-lg font-sans font-semibold uppercase tracking-wider transition-all duration-200`
- [ ] Card includes: `rounded-xl border-2 border-[#3d3d3d] bg-[#f5f0e1]`
- [ ] Input includes: `rounded-lg border-2 border-[#3d3d3d]/30 bg-white text-[#3d3d3d] font-sans tracking-wide focus:border-[#e8572a] focus:outline-none`

### Forbidden check
- [ ] Not using `font-serif`
- [ ] Not using `rounded-none`
- [ ] Not using `rounded-full`
- [ ] Not using `shadow-2xl`
- [ ] Not using `bg-gradient-to-r`
- [ ] Not using `bg-gradient-to-l`
- [ ] Not using `bg-gradient-to-b`
- [ ] Not using `bg-gradient-to-t`

### Style rule check
- [ ] 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

### Style drift check
- [ ] Does not violate: Do not use fluorescent or neon colors bg-pink-500 text-cyan-400
- [ ] Does not violate: Do not use sharp right angles rounded-none or extreme rounded-full
- [ ] Does not violate: Do not use heavy shadows shadow-2xl or glow effects
- [ ] Does not violate: Do not use serif fonts font-serif or handwritten fonts
- [ ] Does not violate: Do not use gradient backgrounds bg-gradient-to-r that break the flat color block feel

### Delivery check
- [ ] Responsive layout holds on phone, tablet and desktop with no horizontal overflow
- [ ] Every interactive element has a visible focus state, an accessible name and a reduced-motion path
- [ ] Text contrast meets WCAG AA and colour alone never carries state
- [ ] The result is still recognizable at a glance as Mid-Century Modern

## Absolute Bans (Match and Refuse)

If any of the following patterns appear, it is a style violation — rewrite without exception.

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

## Self-Check (Verify Before Shipping)

If any item fails, the style has drifted — fix before shipping.

- [ ] No purple-to-blue gradients
- [ ] No overused fonts (Inter, Roboto, Geist, Fraunces, Plus Jakarta Sans)
- [ ] No nested cards (cards inside cards)
- [ ] No gray text on colored backgrounds
- [ ] Body text contrast meets WCAG AA (>= 4.5:1)
- [ ] No bounce or elastic easing curves
- [ ] Animations have a prefers-reduced-motion fallback
- [ ] Body text line length capped at 65-75 characters
- [ ] No side-stripe accent borders (border-left/right > 1px)
- [ ] No gradient text (background-clip: text)
- [ ] No glassmorphism used as the default surface treatment
- [ ] No tiny uppercase tracked eyebrow labels above every section heading
- [ ] 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