Files
teamai-test/.teamai/skills/common/web-design-engineer/references/style-recipes/mid-century-modern.md
T

53 lines
2.7 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# mid-century-modern — Mid-Century Modern (Paul Rand / Saul Bass)
- **School**: Specialty / Genre (also touches Information Architecture)
- **Vibe**: 1950s–60s American graphic modernism — geometric shapes, considered hand-feel, jazz-album confidence
- **Best for**: Cultural / film / publishing identity, premium consumer brands with heritage claim, "tasteful sophistication"
- **Touchstone**: IBM logo (Paul Rand), Saul Bass Vertigo / Anatomy of a Murder posters, Alvin Lustig book covers, mid-century jazz album sleeves (Reid Miles / Blue Note)
**Palette**
- Ground: warm cream `#EBE3D2` or mustard `#D9A441` or muted teal `#3D6E70`
- Ink: `#1A1A18`
- Limited palette per piece — 3 colors max, one bold, two muted
- Common mid-century pairings: mustard + brick + cream; teal + cream + black; sienna + ink + bone
**Typography**
- Display: a geometric grotesque (Futura, Avenir, ITC Avant Garde) at large scale, often condensed weight
- Or a slab serif (Egyptian / Memphis) for editorial moments
- Body: humanist serif (Sabon, Garamond) at 16–17px
- Numerals often set in figures-as-image (a single big numeral as a graphic element)
**Spacing**: structured grid; 4 / 8 / 16 / 24 / 32 / 48
**Radius**: 0 throughout. Mid-century is geometric, not soft.
**Shadow**: none — flat color shapes only
**Motion**: minimal. Shapes slide into place on a single beat, like a Saul Bass title sequence.
**Signature moves**
- Geometric shape compositions — a single big circle, a triangle, a half-moon — as the primary visual
- Hand-cut paper feel (shapes have slightly imperfect edges, suggesting they were cut and pasted)
- Type integrated with the shapes (a headline curving around a circle, or sitting *inside* a colored block)
- A single illustrative motif repeated (a stylized bird, an abstract figure) tying the piece together
- Print-feel grain or paper texture at low opacity
**Avoid**
- Gradients — mid-century is flat color
- Photography as the lead visual (illustration leads; photography supports)
- More than 3 colors per piece
- Rounded / soft-corner UI
**AI prompt seed**
> Mid-century modern poster composition in the style of Saul Bass, single bold geometric shape (large circle in mustard #D9A441) on warm cream #EBE3D2 paper background, flat color shapes, slight paper texture, hand-cut edges, no gradient, no shadow, 3:4.
**Don't use when**
- The product is feature-dense / utility-focused (mid-century is editorial / poster thinking)
- The brand has no heritage / cultural / craft claim
- Realistic photography is essential to the message
---
> **Same school — Specialty / Genre**: [`y2k-retrofuturism`](./y2k-retrofuturism.md)
> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)