name: neo-brutalist-design
version: alpha
description: >
  A loud, anti-establishment neo-brutalist art-gallery canvas on pure white with
  pure-black 3px borders and oversized hard offset shadows (10px 10px 0 black).
  There is no single voltage; instead a deliberately clashing acid trio —
  bright-lemon (#FDEE00), mauve (#E0B0FF) and cyan (#00FFFF) — tags blocks,
  buttons and hovers, plus pure black for inverted sections. Type is a massive
  Anton condensed display (clamp up to 180px, uppercase) over Space Grotesk
  body. Signatures: full-bleed split color panels, overlapping floating
  brutalist image cards, dual rotated scrolling tickers, a glitch RGB-split
  hover, a masonry exhibition grid and a terminal-style newsletter input.
colors:
  # Brand spectrum (clashing accents, one per role/hover)
  lemon: '#FDEE00'            # primary block/button accent, search btn
  mauve: '#E0B0FF'            # secondary panel, "UPCOMING" tags, underlines
  cyan: '#00FFFF'             # "Join Club" / live tags / glitch + terminal text
  ink: '#000000'             # borders, shadows, inverted sections (pure black)
  on-ink: '#FFFFFF'
  # Surface
  surface: '#FFFFFF'         # white canvas
  surface-invert: '#000000'  # footer, ticker, dark cards
  surface-zinc: '#18181B'    # zinc-900 terminal block
  # Text
  on-surface: '#000000'
  on-surface-muted: '#6B7280' # gray-500 dates
  on-invert-muted: '#71717A'  # zinc-500 footer fine print
typography:
  display:
    fontFamily: '"Anton", sans-serif'
    fontSize: clamp(80px, 12vw, 180px) # hero (uppercase, condensed)
    fontWeight: 400
    lineHeight: 0.85
    textTransform: uppercase
  headline:
    fontFamily: '"Anton", sans-serif'
    fontSize: clamp(60px, 8vw, 120px)  # section h2
    fontWeight: 400
    lineHeight: 1
  title:
    fontFamily: '"Anton", sans-serif'
    fontSize: 36px           # card h3 (text-4xl)
    fontWeight: 400
    textTransform: uppercase
  body:
    fontFamily: '"Space Grotesk", sans-serif'
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.4
  mono:
    fontFamily: '"Space Grotesk", monospace stack'  # terminal newsletter
    fontSize: 18px
    fontWeight: 700
rounded:
  none: 0px                  # everything is square / brutalist
  full: 9999px               # play-button circle, color dots only
spacing:
  # base unit = 4px; heavy padding p-12 → p-32
  sm: 16px
  md: 32px
  lg: 48px
  xl: 96px
components:
  card-brutalist:
    background: '{colors.surface}'   # or lemon/cyan/mauve variants
    border: '3px solid {colors.ink}'
    rounded: '{rounded.none}'
    boxShadow: '10px 10px 0px {colors.ink}'         # hard-offset
  button-hard:
    border: '3px solid {colors.ink}'
    boxShadow: '5px 5px 0px {colors.ink}'           # or 10px on large
    hover: 'translate(2-4px,2-4px), shadow none'    # press into shadow
    variants: 'lemon / cyan / black-fill'
  glitch-hover:
    boxShadow: '4px -4px 0 {colors.cyan}, -4px 4px 0 {colors.mauve}, 8px 8px 0 {colors.ink}'
  ticker:
    background: '{colors.ink} (lemon text) + {colors.cyan} (black text)'
    transform: 'rotate ±1-2deg, overlapped pair'
    animation: 'scroll-left / scroll-right 30s linear'
  image-card-floating:
    border: '3px solid {colors.ink}'
    boxShadow: '10px 10px 0 {colors.ink}'
    label: 'colored caption bar (lemon/cyan)'
    animation: 'float 6-8s ease-in-out (gentle tilt)'
  terminal-input:
    background: '{colors.surface-zinc}'
    border: '3px solid {colors.on-ink}'
    textColor: '{colors.cyan}'
    cursor: 'blinking cyan block'
motion:
  ticker: 'scroll-left/right 30s linear infinite'
  float: 'float 6-8s ease-in-out infinite (image cards)'
  blink: 'blink 1s step-end (terminal cursor)'
  hover: 'press-into-shadow (translate + shadow removal)'
icons:
  library: game-icons + tabler   # star-swirl, rainbow-star, burst-blob; ti brand/arrow
  style: solid decorative svgs + line UI icons
  colorRule: 'black/inverted; decorative glyphs at low opacity'

Neo-Brutalist — "Acid Gallery"

Design spec — version alpha. Source: static HTML (neo-brutalist.html); tokens read from :root and component CSS. Fictional experimental art gallery; described factually.

Overview

A loud, anti-establishment neo-brutalism for an experimental art gallery ("Art is an error"). The canvas is pure white; structure is drawn in pure-black 3px borders with oversized hard offset shadows (10px 10px 0 #000). There is no single brand color — instead a deliberately clashing acid trio: bright-lemon {colors.lemon} #FDEE00, mauve {colors.mauve} #E0B0FF and cyan {colors.cyan} #00FFFF, used to fill split panels, tag buttons/cards and drive hovers, with pure black for inverted sections. Type is dominated by Anton — a massive condensed uppercase display that runs up to clamp(...180px) — over Space Grotesk bold body. Signatures: a full-bleed split color hero (lemon text panel / mauve image panel with overlapping floating cards), dual rotated scrolling tickers, a glitch RGB-split hover shadow, a masonry exhibition grid, a manifesto block with highlighter spans, and a terminal-style newsletter input.

Colors

Spectrum accents. Rather than one voltage, the system rations a clashing trio: {colors.lemon} #FDEE00 (primary blocks, search button, hover), {colors.mauve} #E0B0FF (secondary panel, "UPCOMING" tags, heading underlines), {colors.cyan} #00FFFF ("Join Club", "LIVE NOW" tags, terminal text, glitch). Black {colors.ink} #000000 is deliberate — every border, shadow and the inverted footer/ticker/cards.

Surfaces. White {colors.surface}, inverted black {colors.surface-invert}, zinc-900 {colors.surface-zinc} for the terminal block.

Text. Black {colors.on-surface}; muted gray-500 dates; zinc footer fine print.

Typography

Anton (condensed, 400, uppercase) for all display/headlines/titles at huge sizes with 0.85 line-height; Space Grotesk (700) for body.

Token	Family	Size	Weight	Usage
display	Anton	clamp 80–180px	400	Hero ("ART IS AN ERROR")
headline	Anton	clamp 60–120px	400	Section titles (uppercase)
title	Anton	36px	400	Card titles (uppercase)
body	Space Grotesk	20px	700	Body copy
mono	Space Grotesk	18px	700	Terminal newsletter input

Layout

Base 4px with heavy padding (p-12→p-32). A bordered sticky nav; a full-bleed 50/50 split hero (lemon panel with huge headline + black/white CTAs, mauve panel with three overlapping floating image cards); an overlapped pair of rotated tickers; a 12-col masonry exhibition grid (cards offset vertically, mixed accent fills, plus an "open call" cyan card); a centered manifesto with a faint grid and highlighter spans; a cyan video/installation section; and a black multi-column footer with a terminal newsletter.

Elevation & Depth

Pure hard-shadow brutalism — 10px 10px 0 #000 on cards, 5px 5px 0 on buttons, with no blur. Buttons press into their shadow on hover (translate + shadow none). The glitch-hover stacks cyan/mauve/black offset shadows for an RGB-split effect. Floating image cards drift gently and raise z-index on hover.

Shapes

Square by default — 3px-bordered cards/buttons/panels are sharp-cornered. The only round elements are the play-button circle and small color/window dots ({rounded.full}).

Components

• card-brutalist — white or accent fill, 3px border, 10px hard shadow.
• button-hard — 3px border + 5–10px shadow; presses into shadow on hover; lemon/cyan/black variants.
• glitch-hover — RGB-split triple shadow (cyan + mauve + black) on exhibition cards.
• ticker — overlapped rotated bars (black/lemon + cyan/black) scrolling opposite directions.
• image-card-floating — bordered photo with a colored caption bar, gentle float animation.
• terminal-input — zinc-900 block, white border, cyan monospace text + blinking cursor.

Motion

Continuous and playful: dual tickers (scroll-left/scroll-right 30s linear), floating image cards (6–8s ease-in-out), a blinking terminal cursor (blink 1s step-end), and the press-into-shadow hover. Grayscale-to-color and z-lift on image hovers.

Iconography

Decorative game-icons SVGs (star-swirl, rainbow-star, burst-blob, surrounded-eye) used as large low-opacity motifs, plus Tabler line/brand icons for UI and socials. Black or inverted; decorative glyphs at 5–30% opacity.

Do's and Don'ts

• Do keep pure-white canvas with pure-black 3px borders and 10px hard shadows.
• Do clash the acid trio (lemon/mauve/cyan) as block fills, tags and hovers — one per element.
• Do set display in huge uppercase Anton; keep body bold Space Grotesk.
• Do use press-into-shadow buttons, rotated tickers and floating bordered cards.
• Don't soften with rounded corners, blur or gradients (square + hard only).
• Don't harmonize the palette into one calm accent — the clash is intentional.
• Don't shrink the display type; oversized Anton is the personality.

Known Gaps

• Values read from the implementation's resolved :root. Copy/imagery are sample content; the source disables transitions globally so timings reflect authored CSS intent.