Maximalist Pop

# Maximalist Pop

## Philosophy

Maximalist Pop translates pop art, editorial collage, and Memphis-era postmodern exuberance into interface design. It uses consumer-culture brightness, comic-style outlines, sticker layering, and deliberately theatrical hierarchy so the product feels collectible, loud, and joyfully commercial rather than neutral.

### Values

- graphic excess with legible structure
- consumer-culture brightness and immediacy
- playful irreverence
- editorial collage layering
- high-contrast hierarchy that reads instantly

### Anti-Values

- timid neutrality
- austere restraint
- quiet monochrome polish
- invisible hierarchy
- frictionless corporate sameness

### Visual Character

- Every major surface uses thick ink-like outlines with hard-edged offset shadows so cards read like cutout posters pasted on a wall rather than soft digital glass.
- Hero zones combine halftone dots, burst shapes, sticker badges, and rotated labels, creating a layered collage field with visible overlap and deliberate z-axis stacking.
- Display typography is oversized, compressed, and uppercase, while supporting labels use punchy monospace or compact grotesk text to mimic packaging callouts and magazine captions.
- Color blocking relies on hot pink, electric cyan, saturated yellow, acid lime, and black-on-white contrast arranged in adjacent slabs instead of subtle tonal gradients.
- Cards and callouts use asymmetric geometry such as clipped corners, circular badges, and skewed ribbons so the interface keeps a toy-shelf, collectible-object energy.

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#FF2D7A` |
| secondary | `#00C7F2` |
| accent | `#FFD84D` |
| background | `#FFF4F8` |
| surface | `#FFFFFF` |
| text | `#141414` |
| muted | `#6A5A66` |
| border | `#141414` |
| error | `#FF5A54` |
| success | `#28D17C` |
| warning | `#FF9F1C` |
| info | `#00C7F2` |

### Typography

- **Heading Font**: Bungee, sans-serif
- **Body Font**: Space Grotesk, sans-serif
- **Mono Font**: IBM Plex Mono, monospace
- **Base Size**: 17px
- **Scale Ratio**: 1.25
- **Line Height**: 1.5
- **Letter Spacing**: 0.01em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Bungee&family=IBM+Plex+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;500;700&display=swap

### Spacing

- **Base**: 8px
- **Scale**: [4,8,12,16,24,32,48,64]

### Radii

- **None**: 0px
- **Sm**: 12px
- **Md**: 20px
- **Lg**: 30px
- **Full**: 999px

### Shadows

- **Sm**: 4px 4px 0 0 rgba(20,20,20,0.18)
- **Md**: 8px 8px 0 0 rgba(20,20,20,0.22)
- **Lg**: 14px 14px 0 0 rgba(20,20,20,0.26)

### Surfaces

- **Treatment**: paper
- **Card Style**: Bright white cards over candy-color blocks with halftone dot textures, burst decals, and occasional clipped-corner stickers.
- **Bg Pattern**: dots

### Borders

- **Default Width**: 3px
- **Accent Width**: 5px
- **Style**: solid
- **Character**: Borders should feel like comic-book ink contours: dark, assertive, and always visible enough to separate overlapping layers.

### Motion

- **Duration**: 180ms
- **Easing**: cubic-bezier(0.2,0.9,0.2,1)
- **Philosophy**: snappy

## Rules

### Composition

Build screens as editorial collages: one dominant hero slab, several overlapping support cards, and a rhythm of badges, ribbons, and mini-panels that feel intentionally collected rather than uniformly tiled.

### Hierarchy

Use oversized display headlines, saturated section bands, circular KPI stickers, and black keylines to make primary actions and numbers readable from a distance before body copy resolves.

### Density

Keep density lively and high, but organize information into bold chunks with visible gutters so the eye gets punctuation between intense color and graphic moments.

### Signature Patterns

- Primary panels use clipped corners or skewed pseudo-elements with thick black outlines, so containers feel like die-cut packaging rather than standard rounded rectangles.
- Section headers sit on rotated ribbons or sticker strips with uppercase mono labels and offset shadows, making hierarchy read like pasted editorial annotations.
- Statistic callouts appear inside circular or pill-shaped badges that overlap adjacent cards and break the grid, preserving a collectible toy-package rhythm.
- Backgrounds and empty areas include halftone dot fields, burst rays, or checker accents applied with CSS gradients, ensuring the language is visibly pop-graphic even before content loads.
- Interactive controls translate by a few pixels on hover while their hard offset shadows collapse, creating a tactile pressed-print effect instead of soft elevation.

## Layout

### Grid

Use a 12-column desktop collage grid with one oversized primary column and one narrower utility column; allow intentional overlap, but anchor each cluster to shared baseline gutters so the chaos still scans cleanly.

### Breakpoints

Desktop keeps overlapping cards and floating stickers; tablet reduces overlap depth and moves to a 2-column stack; mobile becomes a single column with badges tucked inside cards and ribbons flattened to avoid overflow.

### Whitespace

Whitespace acts as a reset between bursts of color and type. Preserve breathing strips around major clusters so the composition feels curated rather than cluttered.

## Guidance

### Do

- Use black keylines and offset shadows on every important surface.
- Pair oversized display type with compact supporting labels and badges.
- Layer stickers, ribbons, and circular metrics so some elements intentionally break the grid.
- Use saturated adjacent color blocks instead of quiet tonal palettes.
- Keep forms fully styled so even utility controls participate in the graphic language.

### Don't

- Rely on subtle gray borders or invisible card edges.
- Center everything into a polite symmetrical dashboard.
- Mute the palette into corporate pastels or monochrome restraint.
- Use generic default form controls or browser-native selects.
- Fill every area with noise so thoroughly that hierarchy disappears.