---
kit: Riot Pop
version: 1.0.0
ambiance: Maximalist · Y2K · Anti-design · Culture
description: >
  Maximalist neo-retro design system for festivals, cultural events and brands
  that embrace joyful chaos. Light background, loud primary brights, big
  stickers, thick borders, offset hard shadows, random rotations and off-grid
  collage. Everything overflows, nothing is aligned by accident. Ships with a
  spec-compliant design.md.

axis: extreme-density
principle: >
  Beyond the edge. Geometric calm acts as the frame, the expressive spills out
  everywhere. Every element wants to break the frame: rotations, overflows,
  stuck-on stickers, hard drop shadows. Density is the aesthetic — but
  structured by an underlying brutalist grid.

colors:
  paper:        "#f4f0e6"   # Main background — cream paper, never pure white
  paper-deep:   "#e8e2d0"   # Secondary background / sections
  ink:          "#0a0a0a"   # Text + borders + hard shadows
  riot-red:     "#ff3b2f"   # Primary bright 1 — dominant accent
  riot-blue:    "#2b4cff"   # Primary bright 2 — electric
  riot-yellow:  "#ffd400"   # Primary bright 3 — sticker yellow
  riot-pink:    "#ff5cb8"   # Secondary bright — pop
  riot-green:   "#00d97e"   # Secondary bright — acid
  riot-violet:  "#8b3bff"   # Tertiary bright — clash

fonts:
  display: "'Archivo Black', sans-serif"        # Ultra-bold compressed headings
  accent:  "'Bricolage Grotesque', sans-serif"  # Subheads / expressive labels
  body:    "'Space Mono', monospace"            # Body — mono for the anti-design feel
  source:  "Google Fonts — no npm dependency"

type_rules:
  display: "font-weight 900, uppercase, letter-spacing -0.04em, line-height 0.85"
  accent:  "font-weight 700-800, may be tilted (rotate) or thick-underlined"
  body:    "font-weight 400, line-height 1.6, owned monospace"
  hero:    "clamp(3.5rem, 12vw, 9rem)"

geometry:
  border-width: "3px solid var(--ink)"        # Thick borders everywhere
  border-thick: "5px solid var(--ink)"        # Cards / major blocks
  radius: "0 | 4px | 999px"                    # Either square or pill — never in between
  shadow-hard: "6px 6px 0 var(--ink)"          # Offset hard shadow (signature)
  shadow-hard-lg: "10px 10px 0 var(--ink)"     # Large version for major blocks
  rotation: "-3deg to +3deg applied randomly on stickers/cards"

motion:
  load: "stickers drop / pivot into place, 60ms stagger"
  hover-card: "translate(-2px,-2px) + shadow grows (8px 8px)"
  hover-btn: "press effect — translate(2px,2px) + shadow shrinks to 2px"
  marquee: "infinite horizontal scroll, 25s speed, pause on hover"
  wobble: "subtle oscillating rotation on decorative elements"

layout_rules:
  - "Brutalist 12-column grid as an invisible frame, BUT deliberate overflow beyond the margins"
  - "Collage: stacked elements with z-index, rotations, intentional overlaps"
  - "No perfect alignment — deliberate 4 to 12px offsets"
  - "Stickers: small pill or square blocks placed absolute, rotated, on top of content"
  - "Sections separated by thick borders (5px ink) or full-width marquees"
  - "Density: fill the space, but each zone stays legible thanks to the black frame"

components:
  - sticker-badge: "Pill or square, bright fill, 3px ink border, hard shadow, rotated -3/+3deg"
  - riot-card: "Bright or paper block, 5px ink border, hard-lg shadow, hover lift"
  - chunky-button: "Pill or square, bright fill, 3px border, hard shadow, press effect on click"
  - marquee-bar: "Full-width band, bright fill, scrolling uppercase mono text"
  - tag-cloud: "Cloud of stickers in varied sizes/colors/rotations"
  - festival-tile: "Schedule tile: date + name + venue, alternating bright fill, thick border"
  - blob-sticker: "Bright organic SVG shape that overflows the frame (COLLINS energy)"

rules_for_agent:
  - "ALWAYS thick black border (3px min) + offset hard shadow on interactive elements"
  - "Cream paper background (#f4f0e6), NEVER pure white #ffffff"
  - "Max 2 radius levels: square (0) or pill (999px). Never a soft 8/12/16px radius"
  - "Apply slight rotations (-3 to +3deg) on stickers and cards to break the rigidity"
  - "Primary brights clash on purpose — no soft gradients, no pastels"
  - "Monospace (Space Mono) in body is intentional: do not swap it for a smooth sans-serif"
  - "Encourage overflow: let elements spill past margins / out of sections"
  - "Display text in compressed uppercase, never soft title case"
---