
design-movements
by HermeticOrmus
A repository dedicated to improving Claude Code's UIUX Capabilities.
SKILL.md
name: design-movements description: Historical design movements and their enduring influence. Understand Bauhaus, Swiss International Style, Art Deco, Memphis, and more. Use when choosing an aesthetic direction, understanding cultural context, or predicting trend cycles.
Design Movements
Every movement is a reaction. Understanding the chain of reactions helps you predict what comes next and choose directions intentionally.
When to Use This Skill
- Choosing an aesthetic direction for a project
- Understanding why certain styles feel the way they do
- Connecting visual choices to cultural meaning
- Predicting trend cycles
- Avoiding accidental historical misuse
The Lineage
Arts & Crafts (1850s) ─→ Art Nouveau (1890s) ─→ Art Deco (1920s)
│
↓
Bauhaus (1919-33) ←────── Modernism
│
↓
Swiss International Style (1950s)
│
┌───────────────┼───────────────┐
↓ ↓ ↓
Corporate Psychedelic Postmodernism
Modernism (1960s) (1970s)
(1960s) │ │
│ ↓ ↓
│ Punk/New Wave Memphis Group
│ (1970s) (1980s)
│ │ │
└───────────────┴───────────────┘
│
↓
Grunge/Deconstructivism (1990s)
│
┌───────────────┼───────────────┐
↓ ↓ ↓
Web 2.0 Flat Design Contemporary
Skeuomorphism (2010s) Eclecticism
(2000s) │ (2020s)
│ │ ↑
└───────────────┴───────────────┘
Movements in Depth
Arts and Crafts (1850-1910)
Origin: England → Global Reaction To: Industrial Revolution's dehumanizing mass production Core Belief: Handcraft has moral value
Visual Markers
- Organic, nature-inspired patterns
- Medieval and Gothic references
- Hand-drawn lettering
- Earth tones and natural dyes
- Visible evidence of handwork
- William Morris-style wallpapers
Modern Application
When a brand needs to feel:
- Artisanal
- Sustainable
- Handcrafted
- Anti-corporate
Tailwind Approach:
/* Arts & Crafts-inspired */
colors: earth tones (amber, stone, emerald)
borders: decorative, visible
textures: paper, fabric, natural
typography: serif, slightly ornate
spacing: generous, organic rhythms
Art Nouveau (1890-1910)
Origin: France, Belgium → International Reaction To: Academic historicism and industrialization Core Belief: Art should be everywhere; no separation between art and craft
Visual Markers
- Whiplash curves and flowing lines
- Botanical and female forms
- Integrated typography and image
- Ornate decorative frames
- Asymmetrical compositions
- Jewel-tone colors
Modern Application
When a brand needs to feel:
- Elegant
- Artistic
- Feminine
- Luxurious but organic
Reference: Paris Metro entrances, Alphonse Mucha posters, Tiffany lamps
Art Deco (1920-1940)
Origin: Paris → Global Reaction To: Art Nouveau's organic chaos; post-WWI optimism Core Belief: Machine-age glamour meets geometric precision
Visual Markers
- Sunbursts and radiating lines
- Stepped/zigzag forms
- Bold symmetry
- Metallic colors (gold, silver, bronze)
- Geometric sans-serifs
- Chevron patterns
- Egyptian and Aztec influences
Modern Application
When a brand needs to feel:
- Luxurious
- Celebratory
- Nostalgic glamour
- Premium entertainment
Tailwind Approach:
/* Art Deco-inspired */
colors: gold-500, black, cream
borders: decorative lines, stepped forms
patterns: geometric, repetitive
typography: geometric sans, high contrast display
shadows: sharp, dramatic
Reference: Chrysler Building, Great Gatsby aesthetic, classic Hollywood
Bauhaus (1919-1933)
Origin: Germany (Weimar, Dessau) Reaction To: Decorative excess; need for functional post-war reconstruction Core Belief: Form follows function; art and technology unified
Visual Markers
- Primary colors (red, blue, yellow)
- Geometric primitives (circle, square, triangle)
- Sans-serif typography
- Asymmetrical balance
- Grid-based layouts
- Minimal ornamentation
- Clean lines
Key Figures
- Walter Gropius (architecture)
- László Moholy-Nagy (photography)
- Josef Albers (color theory)
- Herbert Bayer (typography)
Modern Application
When a brand needs to feel:
- Modern
- Functional
- Intelligent
- Progressive
Tailwind Approach:
/* Bauhaus-inspired */
colors: red-600, blue-600, yellow-500, black, white
shapes: geometric, primitive
layout: asymmetric grid
typography: geometric sans (Futura, Avant Garde)
borders: minimal, functional
Legacy: Google Material Design, IKEA, modern corporate identity
Swiss International Style (1950s-1970s)
Origin: Switzerland → Global Reaction To: Post-war need for universal, clear communication Core Belief: Objective communication through mathematical order
Visual Markers
- Helvetica and Univers typefaces
- Asymmetric grid layouts
- Generous white space
- Flush-left, ragged-right text
- Objective photography
- Limited color palettes
- Sans-serif dominance
Key Figures
- Josef Müller-Brockmann
- Max Bill
- Armin Hofmann
- Emil Ruder
Grid Principles
+---+---+---+---+---+---+
| 1 | 2 | 3 | 4 | 5 | 6 |
+---+---+---+---+---+---+
↓ ↓ ↓
Column Gutter Module
- Consistent column widths
- Mathematical proportions
- Elements snap to grid
- Typography aligned to baseline grid
Modern Application
When a brand needs to feel:
- Professional
- Trustworthy
- Clear
- International
Tailwind Approach:
/* Swiss-inspired */
typography: 'Inter', 'Helvetica Neue', sans-serif
colors: black, white, one accent
layout: 12-column grid, generous gutters
spacing: consistent, mathematical
whitespace: abundant
Legacy: NYC Subway signage, corporate identity systems, most of the web
Psychedelic Design (1960s-1970s)
Origin: San Francisco → Global counterculture Reaction To: Swiss Style's sterility; counterculture movement Core Belief: Design as experience; break every rule
Visual Markers
- Vibrating, clashing colors
- Hand-drawn, flowing lettering
- Optical illusions
- Distorted, melting type
- Maximalist density
- Art Nouveau revival elements
- Surreal imagery
Modern Application
When a brand needs to feel:
- Rebellious
- Psychedelic
- Festival/event
- Counter-cultural
Caution: Accessibility nightmare. Use for specific contexts only.
Reference: Grateful Dead posters, Victor Moscoso, Wes Wilson
Postmodernism (1970s-1990s)
Origin: Academic architecture → Design Reaction To: Modernist purity ("less is a bore") Core Belief: Embrace complexity, contradiction, and historical reference
Visual Markers
- Mixed typefaces and scales
- Layered, chaotic layouts
- Historical pastiche
- Irony and humor
- Bright, clashing colors
- Collage aesthetics
- Deliberate "bad" taste
Key Figures
- Robert Venturi (architecture)
- Wolfgang Weingart (typography)
- April Greiman (digital)
Modern Application
When a brand needs to feel:
- Ironic
- Intellectual
- Anti-establishment
- Art-world adjacent
Memphis Group (1981-1987)
Origin: Milan, Italy Reaction To: Good taste and minimalist seriousness Core Belief: Anti-design; pleasure over function
Visual Markers
- Squiggles and arbitrary geometry
- Clashing patterns and colors
- Laminate surfaces
- Asymmetric, unstable forms
- Playful, childlike elements
- Terrazzo patterns
- Bold, jarring combinations
Key Figures
- Ettore Sottsass
- Michele De Lucchi
- Nathalie du Pasquier
Modern Application
When a brand needs to feel:
- Playful
- Bold
- Young/Gen Z
- Anti-serious
Tailwind Approach:
/* Memphis-inspired */
colors: bright clashing (pink + teal + yellow + black)
shapes: irregular geometry
patterns: terrazzo, squiggles
borders: thick, contrasting
shadows: offset, colored
Reference: 80s music videos, Saved by the Bell, current Gen Z aesthetics
Grunge/Deconstructivism (1990s)
Origin: Pacific Northwest → Global Reaction To: Clean corporate design; digital tools enabling mess Core Belief: Destroy legibility; design as art
Visual Markers
- Overlapping layers
- Distressed textures
- Mixed and distorted type
- Deliberate "mistakes"
- Dark, gritty palettes
- Fractured layouts
- Photocopied aesthetics
Key Figures
- David Carson (Ray Gun)
- Neville Brody
- Emigre magazine
Modern Application
When a brand needs to feel:
- Authentic
- Raw
- Underground
- Anti-corporate
Reference: Ray Gun magazine, early MTV, 90s album covers
Flat Design (2010s)
Origin: Microsoft Metro → Apple iOS 7 → Web Reaction To: Skeuomorphic excess; need for responsive design Core Belief: Digital should look digital
Visual Markers
- Flat colors (no gradients)
- Geometric sans-serif type
- Simple iconography
- Generous white space
- Bold, saturated colors
- No shadows or depth
- Grid-based layouts
Modern Application
Now the baseline. Most UI design defaults to flat principles with:
- Subtle depth (neumorphism)
- Micro-animations
- Selective shadows
Contemporary Eclecticism (2020s)
Where We Are Now: All styles available simultaneously
Current Trends
- Neumorphism: Soft shadows, extruded elements
- Glassmorphism: Frosted glass, translucency
- 3D Integration: 3D elements in 2D interfaces
- Variable Typography: Responsive, animated type
- Dark Mode: OLED-friendly, reduced eye strain
- Maximalism: Memphis revival, anti-minimalism
- Y2K Revival: Late 90s/early 2000s nostalgia
The Key Insight
We're in a post-ideological moment. No single style dominates. Success comes from:
- Intentional selection: Choose styles for meaning
- Competent execution: Know the rules before breaking them
- Cultural awareness: Understand what styles communicate
Cyclical Pattern
Styles tend to return on ~30-year cycles:
| Original Era | Revival Era |
|---|---|
| 1960s psychedelic | 1990s rave |
| 1970s disco | 2000s web gradients |
| 1980s Memphis | 2010s hipster design |
| 1990s grunge | 2020s brutalism |
| Y2K aesthetic | 2025-2030s (predicted) |
Prediction: Expect a 1990s deconstructivist/grunge revival in the late 2020s.
Resources
- references/bauhaus.md: Complete Bauhaus history and application
- references/swiss-international.md: Grid systems and Swiss principles
- references/memphis-group.md: Memphis patterns and colors
- references/art-deco.md: Deco geometry and application
- references/minimalism.md: Less-is-more philosophy
Score
Total Score
Based on repository quality metrics
SKILL.mdファイルが含まれている
ライセンスが設定されている
100文字以上の説明がある
GitHub Stars 100以上
3ヶ月以内に更新
10回以上フォークされている
オープンIssueが50未満
プログラミング言語が設定されている
1つ以上のタグが設定されている
Reviews
Reviews coming soon


