POP
ART
Bold primary colours, halftone Benday dots, speech bubbles, comic-book lettering, and zero subtlety. Pop Art took the imagery of mass consumer culture and celebrated it at maximum volume. This is that aesthetic - in UI.
-webkit-text-stroke
Always uppercase
1.7 line-height
Campbell's Soup Can
Andy Warhol took the most mundane object in American consumer culture and made it the most famous painting in the world. That's Pop.
Benday Dot Method
Roy Lichtenstein's blown-up comic-book dots made visible what commercial printing had always hidden - the mechanical grid beneath mass reproduction.
15 Minutes For Everyone
Warhol's prediction came true. Instagram is his factory. The internet is his silkscreen. The selfie is his portrait commission.
The Art of
Mass Culture
When Warhol silkscreened Marilyn 50 times in 50 colours, he was asking one question: what happens to meaning when you repeat it until it becomes pattern?
Halftone Is Mandatory
Every solid colour background should have a radial-gradient Benday dot overlay at 5–12% opacity. Without dots, it's just flat colour. With dots, it's Pop Art.
3px Minimum Border
Every button, input, card, and panel gets a 3px solid black border. 1px and 2px borders look weak. The comic-book line weight requires 3–4px to register as intentional.
Anton + Bangers Always
Anton for functional headings and UI. Bangers for expressive display text and speech bubbles. Space Mono for body. Never mix in a serif - Pop Art is American commercial type, not European elegance.
3D Shadow on Buttons
box-shadow: 4px 4px 0 #000 creates the comic-book 3D effect. On :active, translate(4px,4px) and remove the shadow - the button appears to press into the page.