Design System

Pop Art

Bold. Loud. Unapologetic.
01

Color Palette

Straight from the screen printer's studio. Saturated, clashing, and electric -- these colors demand to be seen, not coordinated.

Primary Colors

Red #E2190C
Yellow #FFD819
Blue #0057B8
Hot Pink #FF1493
Orange #FF6B1A

Supporting Colors

Cyan #00C8FF
Green #39B54A
Purple #9B30FF
Black #1A1A1A
Cream #FFF8E7
02

Typography

Brash display type for maximum impact. Bangers brings the comic-book energy, Lilita One carries the headlines, and Roboto grounds the body text.

Display / H1 Bangers / clamp(4rem, 12vw, 8rem)
WHAAM!
Heading 2 Lilita One / 2.75rem
Heading Two
Heading 3 Lilita One / 1.5rem
Heading Three
Heading 4 Lilita One / 1.25rem
Heading Four
Heading 5 Lilita One / 1rem
Heading Five
Heading 6 Lilita One / 0.875rem / Uppercase
Heading Six
Body Roboto / 16px / 400
I was desperate. That painting had to be finished by tomorrow, and all I had was a canvas of Ben-Day dots and a very strong opinion about soup cans.
Caption Bangers / 0.85rem / Spaced
Labels, tags, and system text
03

Spacing

Even Pop Art needs structure beneath the chaos. A 4px base unit keeps everything snapping to a grid while the visuals run wild.

--space-1
4px
--space-2
8px
--space-3
12px
--space-4
16px
--space-5
24px
--space-6
32px
--space-7
48px
--space-8
64px
--space-9
96px
--space-10
128px
04

Buttons

Every click is an event. Thick borders, offset shadows, and snappy hover animations make interactions feel physical and satisfying.

Core Variants

Color Variants

Sizes

Special Effects

05

Forms

Data entry with personality. Heavy borders and punchy focus states turn mundane form-filling into a tactile experience.

Checkboxes

Radio Buttons

06

Cards

Content containers styled as comic panels, gallery prints, and screen-print multiples. Every card is a miniature work of pop art.

Standard Cards

Screen Printing

Warhol transformed commercial printing into fine art, repeating images until they became icons.

Comic Panels

Lichtenstein blew up comic strips to monumental scale, celebrating lowbrow culture as high art.

Street Art

Keith Haring brought bold lines and radiant energy from the subway to the gallery walls of SoHo.

Warhol Repeat Card

Meanwhile, at the gallery...

Comic Panel Card

This card style mimics the look of a comic book panel with a narrative caption bar and halftone dot overlay. Perfect for storytelling content.

Lichtenstein Card

I DON'T CARE!

I'D RATHER SINK THAN CALL BRAD FOR HELP! The dramatic tension of a Lichtenstein painting captured in a card component.

THAT'S THE WAY!

IT SHOULD HAVE BEGUN! Bold halftone headers with thick borders create instant visual drama for featured content.

07

Data Table

Even data can be pop. Bold header bars, alternating row tints, and chunky borders make tabular content feel gallery-worthy.

Artist Signature Work Year Status Auction ($M)
Andy Warhol Campbell's Soup Cans 1962 Iconic 195.0
Roy Lichtenstein Whaam! 1963 Iconic 165.0
Jasper Johns Flag 1955 Proto-Pop 110.0
Keith Haring Radiant Baby 1982 Iconic 6.5
Claes Oldenburg Floor Burger 1962 Rare 3.2
James Rosenquist F-111 1965 Collected 7.0
08

Badges & Tags

Small, punchy labels that categorize and classify. Like price tags in a pop art supermarket of content.

Filled Badges

Red Yellow Blue Pink Orange Default

Outline Badges

Red Blue Pink Default

Dot Indicators

Status indicators for quick visual reference
09

Alerts

Notifications that refuse to be ignored. Bold color fields, halftone textures, and thick borders make every message feel urgent and important.

Info!

Art is what you can get away with. This is an informational message about your gallery submission status.

Success!

Your screen print has been approved for exhibition. The Factory will begin production immediately.

Warning!

Your 15 minutes of fame are running low. Please update your portfolio before the timer expires.

Error!

The soup cans have been recalled. There was a critical issue with the silkscreen alignment process.

10

Design Principles

The philosophical underpinnings of Pop Art, translated into design system thinking.

!

Embrace the Everyday

Pop Art collapsed the boundary between high culture and mass culture. In design, this means celebrating the familiar -- consumer imagery, bold typography, and the visual language of advertising. Nothing is too mundane to become extraordinary.

x

Repetition Is Power

Warhol proved that repeating an image transforms its meaning. In design systems, consistent repetition of patterns, components, and visual language builds recognition and amplifies impact. The grid is your silkscreen.

*

Bold, Not Subtle

Pop Art never whispered. It used saturated color, thick outlines, and oversized scale to command attention. In interface design, this translates to clear visual hierarchy, high-contrast elements, and interactions that feel definitive, never ambiguous.

+

Blur the Boundaries

Lichtenstein erased the line between comic books and canvas. The best design systems blur boundaries too -- between functional and delightful, between serious content and playful presentation. Utility and personality are not opposites.