Expressive & trend · 1910s (origin); digital revival 2010s – present
Collage
Cut photos, torn edges, layered textures, mixed media fragments — the assembled-from-pieces aesthetic of the physical collage artist, rendered digitally.
Live preview base style — press Wear
$2,100
Revenue, up 12% from last month.
| Customer | Plan | Status | MRR |
|---|---|---|---|
| Northwind | Studio | Active | $1,240 |
| Acme Labs | Team | Trial | $0 |
| Kaldi Coffee | Studio | Active | $860 |
Use this style 15 tokens
- --bg
oklch(92% 0.02 72) - --fg
oklch(12% 0.01 50) - --muted
oklch(42% 0.03 60) - --surface
oklch(97% 0.01 75) - --surface-2
oklch(86% 0.03 70) - --border
oklch(58% 0.05 65) - --accent
oklch(40% 0.28 25) - --accent-fg
oklch(99% 0 0) - --focus
oklch(40% 0.28 25)
| Token | Value |
|---|---|
| --font-body | 'Special Elite', 'IBM Plex Sans', system-ui, sans-serif |
| --font-display | 'Playfair Display', Georgia, serif |
| --radius | 0px |
| --radius-sm | 0px |
| --shadow | 4px 4px 0 oklch(50% 0.04 62), 8px 8px 0 oklch(40% 0.28 25 / 0.3) |
| --shadow-lg | 6px 6px 0 oklch(45% 0.04 60), 12px 12px 0 oklch(40% 0.28 25 / 0.4) |
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,400;1,700&family=Special+Elite&family=IBM+Plex+Sans:wght@400;600&display=swap');
:root {
--bg: oklch(92% 0.02 72);
--fg: oklch(12% 0.01 50);
--muted: oklch(42% 0.03 60);
--surface: oklch(97% 0.01 75);
--surface-2: oklch(86% 0.03 70);
--border: oklch(58% 0.05 65);
--accent: oklch(40% 0.28 25);
--accent-fg: oklch(99% 0 0);
--focus: oklch(40% 0.28 25);
--font-body: 'Special Elite', 'IBM Plex Sans', system-ui, sans-serif;
--font-display: 'Playfair Display', Georgia, serif;
--radius: 0px;
--radius-sm: 0px;
--shadow: 4px 4px 0 oklch(50% 0.04 62), 8px 8px 0 oklch(40% 0.28 25 / 0.3);
--shadow-lg: 6px 6px 0 oklch(45% 0.04 60), 12px 12px 0 oklch(40% 0.28 25 / 0.4);
}Where it came from
Origin: Dada and Surrealist art, magazine cut-and-paste, zine culture
Collage as an art form was pioneered by Dadaist and Cubist artists in the early twentieth century. Punk zines, ransom-note typography, and DIY music flyers kept the technique alive through the twentieth century. Digital tools made collage easy — stock photos, scan textures, and blend modes replaced scissors and glue — and it resurged as an editorial and brand aesthetic in the 2010s and 2020s.
How to spot it
- Layered photographic fragments with blend modes
- Torn, cut, or photocopied paper texture edges
- Mixed media — ink, photo, type, illustration
- Non-rectangular placements, overlapping layers
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Rich visual depth with strong personality | Hard to maintain consistency across components |
| Extremely flexible — no fixed colour or grid | Photo rights and sourcing are a practical constraint |
| Strong editorial and cultural associations | Can overwhelm functional UI elements |
In the wild
- Dadaist photo-collage posters
- Vice and Dazed editorial layouts
- Nike and Adidas campaign collage work
Use it when
Editorial, culture, fashion, or music brands where layered richness is the visual goal.