MidCentury
PaletteComponentsAnimationsCollectionPhilosophy
←StyleKit
Atomic Age Design — Mid-Century Modern

MID-
CENTURY
MODERN

50s atomic-age optimism fused with organic modernism. Starburst motifs, kidney forms, and saturated earth tones for design that is timeless.

1945
Era Origin
5
Core Colors
12+
Icon Designers
Timeless
Style Verdict
Palette

Earth-Tone Color System

Five saturated-but-restrained earth tones. Warm, grounded, optimistic. Drawn from nature and 1950s Formica surfaces. Hover a swatch to see the Retro Elevation interaction.

Burnt Orange
#e8572a
Primary
Warm Cream
#f5f0e1
Background
Teal Green
#2a6e5e
Secondary
Brushed Gold
#c4a35a
Accent
Charcoal
#3d3d3d
Text

Canonical pairings — atomic-age approved

EXPLORE
Primary on Cream
DISCOVER
Cream on Charcoal
GALLERY
Teal on Cream
ATOMIC
Orange on Charcoal
Components

Atomic-Age Building Blocks

Every component uses hard-edge shadows, organic-ish rounded corners, and the Analog Switch press pattern. No gradients. No neon.

Primary — Analog Switch (hard-offset shadow + damped press)

Outline variants — Retro Elevation on hover

Size variants

Interactions

Animation & Interaction Rules

Four named patterns govern every interaction in this style. Hover or click each demo panel to feel the precise mechanic.

Analog Switch

Active: hard offset disappears + translate(4px,4px)

Mimics a retro mechanical key: shadow collapses to zero as the button physically "sinks" into the surface. No spring — pure damped precision.

Click and hold to see the shadow collapse

Brass Shimmer

hover: rotate(45deg) + deepen gold color

Brass / gold decorations (starbursts, accent points) rotate slightly and deepen in hue on hover, evoking metal reflecting ambient light.

Hover to see the starburst rotate and gold deepen

Retro Elevation

hover: shadow 4px→8px + translate(-2px,-2px)

Cards lift via longer hard-edge shadow (printmaking / woodblock aesthetic) paired with a slight counter-translate — the element appears to pull away from its own shadow.

Atomic Living
Form meets function in perfect analog harmony.

Hover the card to see it pull from its shadow

Warm Dimming

hover: bg #f5f0e1 → #efe9d3 (gentle darken only)

Cream-background surfaces respond to interaction through slight darkening only — no color shift, no flash. Avoids modern neon or high-contrast flicker that would break the period feel.

Item Alpha#f5f0e1
Item Beta#f5f0e1
Item Gamma#f5f0e1
Item Delta#f5f0e1

Hover each row — cream gently darkens, nothing more

App Demo

Atomic Furniture Catalog

A mock product catalog demonstrating the design system in context: hard-edge cards, starburst accents, Retro Elevation on hover, and Warm Dimming on list rows.

1950s Icons

4 essential pieces

Eames Lounge Chair
Walnut + Leather
1956
Tulip Side Table
Fibreglass + Marble
1957
Egg Chair
Fibreglass + Fabric
1958
Atomic Clock
Brass + Enamel
1951
Era
1950s
Atomic age peak
Materials
Fibreglass80%
Walnut60%
Brass45%
Timeline

Atomic-Age History

Five defining moments from post-war optimism to the moon landing. Click any year to explore the era.

1945

Post-War Optimism

New materials from wartime industry — fibreglass, plywood, aluminium — enter domestic design.

Philosophy

Design Principles

Three core pillars define this aesthetic. Warm but not nostalgic. Geometric but organic. Bold but never brash.

Form + Function

Utility is never sacrificed for ornament

Every decorative element — starburst, boomerang, kidney curve — has structural purpose. Chairs that look like sculpture but sit beautifully.

  • Organic forms from ergonomic needs
  • Starburst as focal anchor, not filler
  • Geometry guides the eye intentionally

Warmth & Earth

Saturated but never garish

Colours drawn from forest, sand, copper, and foliage. Bold enough to be expressive. Muted enough to coexist with natural materials.

  • Burnt orange + teal: nature pairing
  • Cream background breathes for colour
  • Gold as punctuation, not flood fill

Optimism & Space

Post-war belief in tomorrow

The atom is friendly. The stars are reachable. Space and generous whitespace communicate confidence — nothing is crammed or anxious.

  • p-8 / p-12 minimum container padding
  • Grid alignment over visual chaos
  • Shadow as depth, not decoration

Do

  • bg-[#f5f0e1] cream background always
  • rounded-lg rounded-xl — organic but not circular
  • Hard-edge shadow: shadow-[4px_4px_0_#3d3d3d]
  • Analog Switch on every interactive element
  • font-sans font-bold uppercase tracking-wider labels
  • Generous p-8 / p-12 / gap-8 spacing
  • Starburst gold decorations on card corners
  • Warm Dimming on list rows and hover surfaces
  • Brass Shimmer on any gold / star accent

Don't

  • No neon or fluorescent colours (pink-500, cyan-400)
  • No sharp rounded-none or pill-only rounded-full
  • No gradient backgrounds — flat colour blocks only
  • No black backgrounds bg-black
  • No heavy drop shadows or glow effects
  • No serif or handwriting fonts
  • No spring easing — damped analog precision only
  • No dense, margin-free layouts
  • No proportional scale animations (breaks the press feel)
Features

Built with Atomic Precision

Starburst Motifs

Atomic-age star and sunburst decorations applied to card corners, dividers, and accent points.

Orbital Details

Atom and orbital shapes for empty states, illustrations, and loading indicators.

Organic Curves

Kidney, boomerang, and amoeba outlines break geometric rigidity with natural flow.

Hard-Edge Shadows

4px offset solid borders replace soft drop-shadows, referencing letterpress printing.

Earth Palette

Five grounded tones: burnt orange, cream, teal, brushed gold, and charcoal.

Analog Interactions

Press mechanics that sink and shadow-collapse, mimicking vintage Bakelite switches.

MidCentury

Atomic-age optimism meets organic modernism. Timeless design for every digital surface.

StyleDocumentationShowcaseCover
StyleKitHomeAll Styles
PaletteBurnt OrangeWarm CreamTeal GreenBrushed GoldCharcoal
Built for StyleKit — Mid-Century Modern
Back to StyleKit→