Acid Graphics Rave

---
name: acid-graphics-rave
description: Apply the Acid Graphics Rave visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Acid Graphics Rave, mentions acid design, acid graphics, rave flyer aesthetic, or describes liquid chrome blobs, acid green on black, warped and blur-stretched type — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Acid Graphics Rave Design System

Underground rave-flyer energy: liquid chrome blobs, acid green on near-black, warped and blur-stretched type, grain and scanline grit, and layouts that feel one export away from a club poster. Y2K hardware sheen crossed with anti-design attitude.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values follow the widely documented recipe for this style. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Acid Graphics Rave.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (acid design, acid graphics, rave flyer aesthetic, Y2K acid, chrome type aesthetic, new rave), or describes its traits: liquid chrome blobs; acid green on black; warped and blur-stretched type; grain and scanline grit; sticker and stamp chaos; gooey SVG filters.

## Design tokens

### Color palette

- Near-black club-dark ground: `#0c0c0e` (--color-bg)
- Panels and cards: `#17171b` (--color-surface)
- Primary text, off-white: `#f2f2ef` (--color-text)
- Secondary text and metadata: `#9b9ba0` (--color-text-muted)
- Acid green — links, highlights, marginalia, hover states: `#b6ff00` (--color-accent)
- Chrome base tone for metallic gradients and blob fills: `#d7d9e0` (--color-chrome)
- UV lilac for secondary highlights and gradients: `#b28cff` (--color-accent-2)
- Panel edges and dividers: `#2c2c33` (--color-border)

### Typography

- Display / headings: Unbounded (fallback: Arial Black, sans-serif) (ideal: PP Monument Extended, premium — use Unbounded as the free substitute)
- Body: Space Grotesk (fallback: Helvetica Neue, Arial, sans-serif)
- Mono / data: Space Mono (fallback: Courier New, monospace)
- Type scale: 1.414 ratio, base 16px — computed steps: 16px / 23px / 32px / 45px / 64px / 90px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 700, line-height 1, letter-spacing 0.02em, uppercase
- Body: line-height 1.55, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 16, 24, 40, 64, 96 — Volatile: cramped stamp-and-sticker clusters colliding with big empty black voids — flyer logic, not grid logic.
- Border radius: none 0px, blob 60% 40% 70% 30% / 40% 60% 30% 70%, pill 999px — Hard rectangles and organic blobs only; polite 8px rounding does not exist here.
- Border treatment: 1px solid #2c2c33 — Panels get thin dark edges; acid-green 1px outlines mark interactive or 'live' elements.

### Shadows

- glow-acid: `0 0 24px rgba(182, 255, 0, 0.35)` — Hover/active glow on acid-green elements
- glow-uv: `0 0 32px rgba(178, 140, 255, 0.30)` — UV lilac ambience behind chrome blobs
- pit: `0 16px 48px rgba(0, 0, 0, 0.6)` — Modals floating over the void

### Layout

- Max content width: 1440px
- Poster-like compositions: oversized warped headline, scattered metadata stamps, one chrome centerpiece
- Rotated and overlapping text blocks that violate the grid on purpose
- Mono metadata (dates, coordinates, BPM-style numbers) pinned to edges and corners
- Full-bleed chrome blob or 3D render as the hero backdrop

### Effects

- Chrome gradient text via background-clip with hard specular stops
- SVG gooey filter merging blob shapes
- Film grain and scanline overlays at low opacity
- Blur-stretched marquee text (skewX + blur) as section dividers
- Acid-green selection color and cursor accents

### Motion

- Easing: cubic-bezier(0.7, 0, 0.2, 1); durations 100ms / 250ms / 600ms
- Chrome blobs drift and morph slowly in the background
- Hover snaps text to acid green with a brief glow
- Marquees and tickers run fast; everything pauses under prefers-reduced-motion

## CSS variables (drop-in)

```css
:root {
  --color-bg: #0c0c0e;
  --color-surface: #17171b;
  --color-text: #f2f2ef;
  --color-text-muted: #9b9ba0;
  --color-accent: #b6ff00;
  --color-chrome: #d7d9e0;
  --color-accent-2: #b28cff;
  --color-border: #2c2c33;
  --radius-none: 0px;
  --radius-blob: 60% 40% 70% 30% / 40% 60% 30% 70%;
  --radius-pill: 999px;
  --shadow-glow-acid: 0 0 24px rgba(182, 255, 0, 0.35);
  --shadow-glow-uv: 0 0 32px rgba(178, 140, 255, 0.30);
  --shadow-pit: 0 16px 48px rgba(0, 0, 0, 0.6);
  --border-default: 1px solid #2c2c33;
  --font-display: Unbounded, "Arial Black", sans-serif;
  --font-body: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Space Mono", "Courier New", monospace;
  --text-base: 16px;
  --leading-heading: 1;
  --leading-body: 1.55;
  --tracking-heading: 0.02em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.7, 0, 0.2, 1);
  --duration-fast: 100ms;
  --duration-base: 250ms;
  --duration-slow: 600ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@400;700&family=Space+Grotesk:wght@400;500&family=Space+Mono:wght@400&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Thin bar with mono uppercase links, acid-green active state, and a wordmark set in warped Unbounded
- **Hero:** Warped uppercase Unbounded headline over a chrome blob, mono metadata stamps in the corners, acid-green CTA
- **Card:** Dark surface, 1px border, mono label strip on top, image treated with grain; hover adds acid outline and glow
- **Button (primary):** Acid-green fill, black text, square or pill, uppercase mono label; hover adds glow-acid
- **Button (secondary):** Transparent with 1px acid-green border and acid text
- **Form fields:** Black fill, 1px border, mono text; focus swaps border to acid green with a faint glow

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

Liquid chrome: metallic gradient blobs and chrome-filled display type (silver gradients with hard specular breaks) floating over near-black, cut with acid-green (#b6ff00) marginalia and warped, stretched letterforms. Spend boldness here; keep everything else quiet.

## Do

- Warp, stretch, or blur at least one big headline per view — clean type reads as timid here
- Keep chrome metallic: hard light-to-dark gradient breaks, not soft silver washes
- Scatter mono metadata stamps like flyer fine print
- Let black voids sit empty so the loud clusters hit harder

## Don't

- Don't use soft pastel gradients — this is acid, not vaporwave
- Don't align everything to a tidy grid; controlled collision is the composition
- Don't set body copy in the display face or in acid green
- Don't add friendly rounded cards and soft shadows

## Accessibility notes

- Acid green on near-black passes contrast easily, but black-on-acid button text must stay bold enough at small sizes; avoid acid-on-white anywhere (it fails badly)
- Warped and blur-stretched type is decorative — repeat the content in accessible plain text for screen readers
- Glow, morphing blobs, and fast marquees must be disabled under prefers-reduced-motion; avoid strobe-like flicker entirely

## Reference sites

- basement.studio: https://basement.studio
- CARI (Consumer Aesthetics Research Institute): https://cari.institute
- Httpster: https://httpster.net

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip acid-graphics-rave.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/acid-graphics-rave.json

Settings → Capabilities → Skills → Upload skill → acid-graphics-rave.zip