Loading...
Loading...
Compare original and translation side by side
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)
│ │ ↑
└───────────────┴───────────────┘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)
│ │ ↑
└───────────────┴───────────────┘/* Arts & Crafts-inspired */
colors: earth tones (amber, stone, emerald)
borders: decorative, visible
textures: paper, fabric, natural
typography: serif, slightly ornate
spacing: generous, organic rhythms/* 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 Deco-inspired */
colors: gold-500, black, cream
borders: decorative lines, stepped forms
patterns: geometric, repetitive
typography: geometric sans, high contrast display
shadows: sharp, dramatic/* 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/* 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/* 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+---+---+---+---+---+---+
| 1 | 2 | 3 | 4 | 5 | 6 |
+---+---+---+---+---+---+
↓ ↓ ↓
Column Gutter Module
- Consistent column widths
- Mathematical proportions
- Elements snap to grid
- Typography aligned to baseline grid+---+---+---+---+---+---+
| 1 | 2 | 3 | 4 | 5 | 6 |
+---+---+---+---+---+---+
↓ ↓ ↓
Column Gutter Module
- Consistent column widths
- Mathematical proportions
- Elements snap to grid
- Typography aligned to baseline grid/* Swiss-inspired */
typography: 'Inter', 'Helvetica Neue', sans-serif
colors: black, white, one accent
layout: 12-column grid, generous gutters
spacing: consistent, mathematical
whitespace: abundant/* Swiss-inspired */
typography: 'Inter', 'Helvetica Neue', sans-serif
colors: black, white, one accent
layout: 12-column grid, generous gutters
spacing: consistent, mathematical
whitespace: abundant/* Memphis-inspired */
colors: bright clashing (pink + teal + yellow + black)
shapes: irregular geometry
patterns: terrazzo, squiggles
borders: thick, contrasting
shadows: offset, colored/* Memphis-inspired */
colors: bright clashing (pink + teal + yellow + black)
shapes: irregular geometry
patterns: terrazzo, squiggles
borders: thick, contrasting
shadows: offset, colored| 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) |
| 原始时代 | 复兴时代 |
|---|---|
| 1960年代迷幻风格 | 1990年代锐舞文化 |
| 1970年代迪斯科 | 2000年代网页渐变 |
| 1980年代Memphis风格 | 2010年代潮人设计 |
| 1990年代垃圾摇滚风格 | 2020年代粗野主义 |
| Y2K美学 | 2025-2030年代(预测) |