Skip to content
Launch offerAll 100 styles $19 $99·Launch pricing ends Sunday
StyleMD

Atomic Modern

Teal, mustard and teak with starbursts and boomerangs: 1956 at its most optimistic.

This style

$9$19

Launch offer · Launch pricing ends Sunday

One-time, no subscription · instant download · client use · 7-day refund before download

getstylemd.com/p/atomic-modern

The idea

A warm paper canvas, teal and mustard shapes floating like boomerang coffee tables, and little atomic starbursts scattered between sections. A soft, wonky serif for headlines, a geometric sans for the rest, and flat illustration that could hang in a 1950s airline office.

Atomic Modern is built on 1950s American mid-century design: the optimism of the space age, boomerang and kidney shapes, atomic starbursts, flat airline-poster illustration and the teak and walnut of modernist furniture. A warm paper canvas carries teal, mustard and burnt-orange shapes that float like objects in a ranch-house living room. A soft, characterful serif with italic flourishes sets headlines; a clean geometric sans handles the rest. Starburst ornaments mark pauses. It should feel optimistic, crafted and sunny.

Principles

  • Shapes are organic: boomerangs, kidneys and soft rounded rectangles.
  • Teal leads, mustard supports, burnt orange is the spark.
  • Scatter small starbursts between sections, never on top of text.
  • Illustrate, don't photograph: flat mid-century scenes with grain.
  • Italicise one word per headline for a hand-lettered feel.

Motion

Starburst ornaments rotate a slow 360° every 40 seconds like a wall clock. Sections float up 20px on scroll and cards lift 4px on hover with a warm shadow.

Do & don't

Do

  • ✓ Use starbursts as section dividers.
  • ✓ Give illustrations paper grain.
  • ✓ Italicise one word in every headline.

Don't

  • ✕ Don't use photography as the hero.
  • ✕ Don't use neon or cool blues.
  • ✕ Don't use sharp brutalist corners.

+ 3 more of each, and component rules, in the full DESIGN.md.

What's in the DESIGN.md

  1. 01Overview & principles
  2. 02Colors (tokens + proportions)
  3. 03Typography (families + 12-role scale)
  4. 04Layout & spacing scale
  5. 05Elevation & depth
  6. 06Shapes & radii
  7. 07Motion (easing, durations, signature)
  8. 08Imagery + generation prompt
  9. 09Components (button, card, nav, input, badge)
  10. 10Do's and don'ts
  11. 11Responsive behaviour
  12. 12Iteration guide + agent checklist

Plus theme.css (Tailwind v4 @theme), tokens.json (W3C) and the preview page source — 364 lines of DESIGN.md in total.

More like this

All Neo-Retro →