Atomic Age / Mid-Century Modern

---
name: atomic-age-midcentury
description: Apply the Atomic Age / Mid-Century Modern visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Atomic Age / Mid-Century Modern, mentions mid-century modern, MCM, eames era, or describes teal, mustard, coral, walnut palette, geometric sans typography, organic kidney and boomerang curves — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Atomic Age / Mid-Century Modern Design System

Clean 1950s–60s optimism translated to the web: airy cream layouts, teal and mustard and coral accents, walnut wood tones, geometric sans type with a script flourish, organic curved shapes, and flat illustration in the Eames-era spirit.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Atomic Age / Mid-Century Modern.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (mid-century modern, MCM, eames era, 50s modern, danish modern web), or describes its traits: teal, mustard, coral, walnut palette; geometric sans typography; organic kidney and boomerang curves; flat mid-century illustration; airy asymmetric layouts; subtle atomic starburst accents.

## Design tokens

### Color palette

- Warm cream background: `#f7f1e3` (--color-bg)
- Card surface, lighter cream: `#fffaf0` (--color-surface)
- Dark walnut-brown text: `#33261d` (--color-text)
- Secondary warm gray-brown: `#5f5348` (--color-text-muted)
- Coral — CTAs, large accents, illustration fills: `#e07a5f` (--color-accent)
- Deep teal for links and secondary actions: `#1f6f68` (--color-accent-teal)
- Mustard for badges and highlights: `#d9a53a` (--color-accent-mustard)
- Walnut wood tone for rules and furniture-like details: `#6b4a30` (--color-walnut)

### Typography

- Display / headings: Poppins (fallback: Futura, Century Gothic, sans-serif) (ideal: Futura, premium — use Poppins as the free substitute)
- Body: Work Sans (fallback: Helvetica Neue, Arial, sans-serif)
- Type scale: 1.25 ratio, base 16px — computed steps: 16px / 20px / 25px / 31px / 39px / 49px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 600, line-height 1.4, letter-spacing 0.01em
- Body: line-height 1.65, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 8, 16, 24, 32, 48, 64, 96, 128 — Airy — generous whitespace like a well-set interiors magazine; content floats in calm asymmetric balance.
- Border radius: sm 8px, md 16px, pill 999px, organic 58% 42% 50% 50% / 55% 50% 50% 45% — Gentle 8–16px rounding; organic blob radii for illustration containers. Never boxy, never fully sharp.
- Border treatment: 1px solid #d9cfbc — Hairline warm borders; heavier walnut rules (3px) act as horizontal dividers echoing furniture legs.

### Shadows

- soft: `0 3px 10px rgba(51,38,29,0.1)` — Cards and gentle elevation
- soft-lg: `0 8px 24px rgba(51,38,29,0.14)` — Featured panels and modals

### Layout

- Max content width: 1200px
- Asymmetric two-column heroes: text one side, illustration the other
- Organic blob shapes cropping photos or anchoring illustration
- Thin walnut rules dividing sections like tabletop edges
- Illustration-led — flat vector scenes over photography

### Effects

- Small atomic starburst accents beside headings
- Boomerang and kidney curve dividers
- Flat textured illustration (subtle screen-print grain)
- Occasional script-face accent word rendered as SVG for flourish

### Motion

- Easing: cubic-bezier(0.33, 1, 0.68, 1); durations 150ms / 300ms / 550ms
- Calm fades and small rises on scroll entry
- Hover lifts cards a few pixels with the soft shadow deepening
- Illustrations may have one slow ambient element (a rotating starburst) that stops under prefers-reduced-motion

## CSS variables (drop-in)

```css
:root {
  --color-bg: #f7f1e3;
  --color-surface: #fffaf0;
  --color-text: #33261d;
  --color-text-muted: #5f5348;
  --color-accent: #e07a5f;
  --color-accent-teal: #1f6f68;
  --color-accent-mustard: #d9a53a;
  --color-walnut: #6b4a30;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-pill: 999px;
  --radius-organic: 58% 42% 50% 50% / 55% 50% 50% 45%;
  --shadow-soft: 0 3px 10px rgba(51,38,29,0.1);
  --shadow-soft-lg: 0 8px 24px rgba(51,38,29,0.14);
  --border-default: 1px solid #d9cfbc;
  --font-display: Poppins, Futura, "Century Gothic", sans-serif;
  --font-body: "Work Sans", "Helvetica Neue", Arial, sans-serif;
  --text-base: 16px;
  --leading-heading: 1.4;
  --leading-body: 1.65;
  --tracking-heading: 0.01em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.33, 1, 0.68, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 550ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&family=Work+Sans:wght@400;500&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Cream bar, wordmark in geometric sans, quiet links that underline in teal; optional starburst logo mark
- **Hero:** Asymmetric split: headline and coral pill CTA left, flat illustrated scene in an organic blob right, starburst accent
- **Card:** Cream surface, 16px radius, soft shadow, illustration or mustard badge on top, walnut hairline footer rule
- **Button (primary):** Coral pill, cream text, soft shadow; deepens to a darker coral on hover
- **Button (secondary):** Teal outline pill (2px), teal text; fills deep teal with cream text on hover
- **Form fields:** Surface fill, 1px warm border, 8px radius; focus swaps border to deep teal with a soft halo

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

An asymmetric hero where a flat illustrated scene in teal, mustard, and coral balances a geometric-sans headline, with one small atomic starburst and a thin boomerang curve tying the composition together. Spend boldness here; keep everything else quiet.

## Do

- Lead with flat illustration in the four-color palette
- Compose asymmetrically and let whitespace carry the elegance
- Use starbursts and boomerangs sparingly — accents, not wallpaper
- Keep type geometric, medium-weight, and unhurried (1.4+ leading)

## Don't

- Don't crowd the layout — density kills the airy showroom feel
- No neon, chrome, gloss, or dark-mode drama
- Avoid stock photography; the style is drawn, not shot
- Don't lean fully into Googie kitsch — this is the restrained sibling of atompunk

## Accessibility notes

- Coral (#e07a5f) on cream is about 2.6:1 — decorative and large-display only; buttons using coral need the darker hover shade for text-size labels, and links always use deep teal (#1f6f68, ~5.5:1)
- Mustard highlights must carry walnut or dark brown text, never white
- The ambient rotating starburst must respect prefers-reduced-motion

## Reference sites

- Mid-century modern: https://en.wikipedia.org/wiki/Mid-century_modern
- Eames Office: https://www.eamesoffice.com
- Herman Miller: https://www.hermanmiller.com

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip atomic-age-midcentury.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/atomic-age-midcentury.json

Settings → Capabilities → Skills → Upload skill → atomic-age-midcentury.zip