Design for AI

Maximalism: UI design prompt

Palette, type rules and a pasteable prompt for maximalism. Also called maximalist web, more is more, anti-minimalism, visual overload design. cyclical; web wave 2019-2023 (Gen Z brand sites, fashion, music).

Traits

  • layered everything: patterns over photos over type over colour blocks
  • clashing bright palettes, five or more colours at once
  • mixed typefaces (display serif + grotesk + script + mono) at extreme sizes
  • dense compositions, overlapping elements, rotated stickers, marquee text
  • textures: grain, halftone, scans, tape, hand-drawn scribbles
  • lots of motion: marquees, hover swaps, cursor followers, auto-scrolling strips
  • still needs an underlying grid, or it reads as broken

Palette

#ff3cac hot pink, #ffe600 yellow, #2b00ff electric blue, #00ff85 acid green, #1a1a1a ink, #fff5e6 cream base

Type

Anton or Bebas Neue for slabs of display, Instrument Serif italic for contrast, Space Mono for labels, Caveat for scribbles; sizes from 11px to 200px, weights extreme

Do

  • build on a real 12-column grid, then break it deliberately in three or four places
  • limit motion to elements that repeat (marquee, ticker) plus hover swaps
  • use texture overlays (grain, halftone) to glue clashing layers together

Don't

  • do not let colours drop to pastel; clash is the point
  • do not use a single typeface
  • do not forget a quiet zone for the actual action (form, buy button)

Known for it: Gucci (2019-2021 campaigns), Spotify Wrapped, Nike By You drops, Bratz relaunch

CSS seed
:root {
  --bg: #fff5e6;
   --fg: #1a1a1a;
   --accent: #ff3cac;
   --accent2: #ffe600;
   --accent3: #2b00ff;
   --radius: 0;
   --shadow: 8px 8px 0 #1a1a1a;
   --font: 'Anton',sans-serif
}
Prompt

Build the site in loud maximalist style. Base cream #fff5e6 with ink #1a1a1a, and at least five clashing fills used generously: #ff3cac, #ffe600, #2b00ff, #00ff85, #ff5c00. Typography mixes Anton at 160px uppercase for the hero, Instrument Serif italic at 40px for subheads, Space Mono 13px uppercase for labels and Caveat for hand-scribbled annotations. Layout on a 12-column grid, then overlap: a rotated (-6deg) sticker badge over the hero image, a photo bleeding under the headline, a full-width marquee strip in #ffe600 scrolling at 40s linear infinite. Add a grain overlay (SVG feTurbulence, opacity 0.12) across the page and a halftone pattern behind one section. Hard offset shadows 8px 8px 0 #1a1a1a, no radius. Hover swaps the image for a second image. Keep one calm block for the signup form: cream, one colour, big button.
For design.md, .cursorrules or AGENTS.md
## Design direction
Build the site in loud maximalist style. Base cream #fff5e6 with ink #1a1a1a, and at least five clashing fills used generously: #ff3cac, #ffe600, #2b00ff, #00ff85, #ff5c00. Typography mixes Anton at 160px uppercase for the hero, Instrument Serif italic at 40px for subheads, Space Mono 13px uppercase for labels and Caveat for hand-scribbled annotations. Layout on a 12-column grid, then overlap: a rotated (-6deg) sticker badge over the hero image, a photo bleeding under the headline, a full-width marquee strip in #ffe600 scrolling at 40s linear infinite. Add a grain overlay (SVG feTurbulence, opacity 0.12) across the page and a halftone pattern behind one section. Hard offset shadows 8px 8px 0 #1a1a1a, no radius. Hover swaps the image for a second image. Keep one calm block for the signup form: cream, one colour, big button.

## Tokens
:root { --bg:#fff5e6; --fg:#1a1a1a; --accent:#ff3cac; --accent2:#ffe600; --accent3:#2b00ff; --radius:0; --shadow:8px 8px 0 #1a1a1a; --font:'Anton',sans-serif }

Keep hover and focus-visible states on every interactive element. Do not add a CSS framework.