Acid Graphics

Also called: Acid Design, Neo-Acid, Acid Rave

Rave-flyer energy on black: liquid chrome type, neon acid green, warped fisheye grids and spiky starbursts.

“Rave flyer”Bold & ExpressiveEra: 1988 rave → 2020s revivalEdgyTechyBoldNostalgicNew

acid-graphics / landingEN

acid-graphics / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm6pxRadius md12pxRadius lg18pxRadius xl28pxDensity×1Display size×1Latin headingLatin bodyThai headingThai body

Colours · Dark

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

liquid chrome typeneon acid green on blackwarped fisheye gridspiky starburstmolten chrome blobswide heavy display fontmonospace line-up labelsrave flyer

Acid Graphics revives late-80s/90s rave flyers through the 2020s “neo-acid” lens: a pure black ground, one toxic neon green, liquid-chrome lettering with a metallic horizon line, and decoration that looks bent through a lens — bulging fisheye grids, spiky starbursts and molten chrome blobs. Type is wide and heavy, labels are monospace like a club line-up. It is darker and more technical than Y2K and louder than cyberpunk: chrome and acid green do all the talking.

Best for

Music, festival and club event sites
Streaming, radio and culture media
Fashion drops and merch
Creative studios and type foundries

Avoid for

Banking, health or government
Text-heavy documentation
Brands that need warmth or softness

✓ Do

Keep the ground near-black (#050505) and let #3CFF2E acid green be the single neon
Use a chrome gradient (white → steel → dark horizon line → white) on display type, KPI numbers and secondary buttons
Warp the background grid like a fisheye lens rather than a flat perspective floor
Use monospace uppercase for labels, dates and metadata
Yellow #F4FF3A only for warning state; Thai labels in Bai Jamjuree — Space Mono has no Thai glyphs

✕ Don't

No pastel or rainbow palettes
Don’t add a sunset horizon grid (that is retro-futurism / vaporwave)
Don’t blur panels into glass
Don’t use chrome for body text — display sizes only

Not to be confused with

Y2K Aesthetic →Y2K is bubblegum pink, iridescent and glossy-cute; Acid Graphics is black, neon green and molten chrome with a harder club-flyer edge.Cyberpunk UI →Cyberpunk uses neon yellow/magenta, chamfered HUD corners and glitch; Acid uses only acid green plus chrome, with warped organic shapes instead of hard-edged panels.Retro-Futurism →Retro-futurism sets chrome against a sunset gradient and a flat perspective grid floor; Acid has no sunset — a bulging fisheye grid and starbursts on pure black.

On mobile

Keep pure black, one chrome headline per screen and neon green for the active state only. The warped grid becomes a static background image; drop the glow on lists and keep it for the primary button and the active tab.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinUnbounded · 700/800

The quick brown fox

Heading · ThaiK2D · 600/800

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinSpace Grotesk · 400/500/700

Clear words make shared decisions.

Body · ThaiBai Jamjuree · 400/500/600

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

K2D’s wide, geometric loopless strokes with a techno twist match Unbounded’s stretched heavy forms; Bai Jamjuree’s squarish engineered shapes sit naturally beside Space Grotesk.

Colour palette

Light

Dark

Design tokens

Radius	`sm 6px · md 12px · lg 18px · xl 28px · pill 999px`
Border	`1px`
Shadow	`0 0 24px -6px rgba(60,255,46,0.35)`
Display	`clamp(3rem, 8vw, 7rem)`
Motion	`220ms cubic-bezier(.2,.9,.1,1)`
Density	`×1`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Acid Graphics (acid-graphics) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Default mode is dark: add class="dark" to <html>.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: https://fonts.googleapis.com/css2?family=Unbounded:wght@700;800&family=Space+Grotesk:wght@400;500;700&family=Space+Mono:wght@400;700&family=K2D:wght@600;800&family=Bai+Jamjuree:wght@400;500;600&display=swap
 */
:root {
  --radius: 18px;
  --background: #ECEFEA;
  --foreground: #070907;
  --card: #FFFFFF;
  --card-foreground: #070907;
  --popover: #FFFFFF;
  --popover-foreground: #070907;
  --primary: #0A0C0A;
  --primary-foreground: #3CFF2E;
  --secondary: #5A6370;
  --secondary-foreground: #FFFFFF;
  --muted: #DFE4DC;
  --muted-foreground: #4A5446;
  --accent: #DFE4DC;
  --accent-foreground: #070907;
  --destructive: #D3164A;
  --border: #0A0C0A;
  --input: #0A0C0A;
  --ring: #0A0C0A;
  --chart-1: #0A0C0A;
  --chart-2: #1E9C10;
  --chart-3: #5A6370;
  --chart-4: #8C95A0;
  --chart-5: #0E5C05;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #070907;
  --sidebar-primary: #0A0C0A;
  --sidebar-primary-foreground: #3CFF2E;
  --sidebar-accent: #DFE4DC;
  --sidebar-accent-foreground: #070907;
  --sidebar-border: #0A0C0A;
  --sidebar-ring: #0A0C0A;
}

.dark {
  --background: #050505;
  --foreground: #F1FFE9;
  --card: #0E100D;
  --card-foreground: #F1FFE9;
  --popover: #0E100D;
  --popover-foreground: #F1FFE9;
  --primary: #3CFF2E;
  --primary-foreground: #050505;
  --secondary: #C9CFD8;
  --secondary-foreground: #050505;
  --muted: #161A14;
  --muted-foreground: #9FB197;
  --accent: #161A14;
  --accent-foreground: #F1FFE9;
  --destructive: #FF3D6E;
  --border: #2A3326;
  --input: #2A3326;
  --ring: #3CFF2E;
  --chart-1: #3CFF2E;
  --chart-2: #C9CFD8;
  --chart-3: #1E9C10;
  --chart-4: #6B7480;
  --chart-5: #A6FF9E;
  --sidebar: #0E100D;
  --sidebar-foreground: #F1FFE9;
  --sidebar-primary: #3CFF2E;
  --sidebar-primary-foreground: #050505;
  --sidebar-accent: #161A14;
  --sidebar-accent-foreground: #F1FFE9;
  --sidebar-border: #2A3326;
  --sidebar-ring: #3CFF2E;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Acid Graphics (acid-graphics) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Default mode is dark: add class="dark" to <html>.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: https://fonts.googleapis.com/css2?family=Unbounded:wght@700;800&family=Space+Grotesk:wght@400;500;700&family=Space+Mono:wght@400;700&family=K2D:wght@600;800&family=Bai+Jamjuree:wght@400;500;600&display=swap
 */
@theme {
  --color-bg: #ECEFEA;
  --color-surface: #FFFFFF;
  --color-surface-2: #DFE4DC;
  --color-text: #070907;
  --color-text-muted: #4A5446;
  --color-primary: #0A0C0A;
  --color-on-primary: #3CFF2E;
  --color-secondary: #5A6370;
  --color-on-secondary: #FFFFFF;
  --color-accent: #3CFF2E;
  --color-border: #0A0C0A;
  --color-success: #137A00;
  --color-warning: #8A7A00;
  --color-danger: #D3164A;
  --color-chart-1: #0A0C0A;
  --color-chart-2: #1E9C10;
  --color-chart-3: #5A6370;
  --color-chart-4: #8C95A0;
  --color-chart-5: #0E5C05;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --shadow-sm: 0 0 0 1px rgba(60,255,46,0.12);
  --shadow-md: 0 0 24px -6px rgba(60,255,46,0.35);
  --shadow-lg: 0 0 60px -10px rgba(60,255,46,0.45);
  --font-heading: "Unbounded", "K2D", system-ui, sans-serif;
  --font-body: "Space Grotesk", "Bai Jamjuree", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, "Bai Jamjuree", monospace;
}

.dark {
  --color-bg: #050505;
  --color-surface: #0E100D;
  --color-surface-2: #161A14;
  --color-text: #F1FFE9;
  --color-text-muted: #9FB197;
  --color-primary: #3CFF2E;
  --color-on-primary: #050505;
  --color-secondary: #C9CFD8;
  --color-on-secondary: #050505;
  --color-accent: #C9CFD8;
  --color-border: #2A3326;
  --color-success: #3CFF2E;
  --color-warning: #F4FF3A;
  --color-danger: #FF3D6E;
  --color-chart-1: #3CFF2E;
  --color-chart-2: #C9CFD8;
  --color-chart-3: #1E9C10;
  --color-chart-4: #6B7480;
  --color-chart-5: #A6FF9E;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Acid Graphics (acid-graphics). Default mode: dark. Fonts: https://fonts.googleapis.com/css2?family=Unbounded:wght@700;800&family=Space+Grotesk:wght@400;500;700&family=Space+Mono:wght@400;700&family=K2D:wght@600;800&family=Bai+Jamjuree:wght@400;500;600&display=swap",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9255,
            0.9373,
            0.9176
          ],
          "hex": "#ecefea"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8745,
            0.8941,
            0.8627
          ],
          "hex": "#dfe4dc"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0275,
            0.0353,
            0.0275
          ],
          "hex": "#070907"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2902,
            0.3294,
            0.2745
          ],
          "hex": "#4a5446"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0392,
            0.0471,
            0.0392
          ],
          "hex": "#0a0c0a"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2353,
            1,
            0.1804
          ],
          "hex": "#3cff2e"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3529,
            0.3882,
            0.4392
          ],
          "hex": "#5a6370"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2353,
            1,
            0.1804
          ],
          "hex": "#3cff2e"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0392,
            0.0471,
            0.0392
          ],
          "hex": "#0a0c0a"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0745,
            0.4784,
            0
          ],
          "hex": "#137a00"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5412,
            0.4784,
            0
          ],
          "hex": "#8a7a00"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8275,
            0.0863,
            0.2902
          ],
          "hex": "#d3164a"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0392,
            0.0471,
            0.0392
          ],
          "hex": "#0a0c0a"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1176,
            0.6118,
            0.0627
          ],
          "hex": "#1e9c10"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3529,
            0.3882,
            0.4392
          ],
          "hex": "#5a6370"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.549,
            0.5843,
            0.6275
          ],
          "hex": "#8c95a0"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0549,
            0.3608,
            0.0196
          ],
          "hex": "#0e5c05"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0196,
            0.0196,
            0.0196
          ],
          "hex": "#050505"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0549,
            0.0627,
            0.051
          ],
          "hex": "#0e100d"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0863,
            0.102,
            0.0784
          ],
          "hex": "#161a14"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9451,
            1,
            0.9137
          ],
          "hex": "#f1ffe9"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6235,
            0.6941,
            0.5922
          ],
          "hex": "#9fb197"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2353,
            1,
            0.1804
          ],
          "hex": "#3cff2e"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0196,
            0.0196,
            0.0196
          ],
          "hex": "#050505"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7882,
            0.8118,
            0.8471
          ],
          "hex": "#c9cfd8"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0196,
            0.0196,
            0.0196
          ],
          "hex": "#050505"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7882,
            0.8118,
            0.8471
          ],
          "hex": "#c9cfd8"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1647,
            0.2,
            0.149
          ],
          "hex": "#2a3326"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2353,
            1,
            0.1804
          ],
          "hex": "#3cff2e"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9569,
            1,
            0.2275
          ],
          "hex": "#f4ff3a"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.2392,
            0.4314
          ],
          "hex": "#ff3d6e"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2353,
            1,
            0.1804
          ],
          "hex": "#3cff2e"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7882,
            0.8118,
            0.8471
          ],
          "hex": "#c9cfd8"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1176,
            0.6118,
            0.0627
          ],
          "hex": "#1e9c10"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4196,
            0.4549,
            0.502
          ],
          "hex": "#6b7480"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.651,
            1,
            0.6196
          ],
          "hex": "#a6ff9e"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 6,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 12,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 18,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 28,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 1,
      "unit": "px"
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.2353,
              1,
              0.1804
            ],
            "hex": "#3cff2e",
            "alpha": 0.12
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 0,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 1,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.2353,
              1,
              0.1804
            ],
            "hex": "#3cff2e",
            "alpha": 0.35
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 0,
            "unit": "px"
          },
          "blur": {
            "value": 24,
            "unit": "px"
          },
          "spread": {
            "value": -6,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.2353,
              1,
              0.1804
            ],
            "hex": "#3cff2e",
            "alpha": 0.45
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 0,
            "unit": "px"
          },
          "blur": {
            "value": 60,
            "unit": "px"
          },
          "spread": {
            "value": -10,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Unbounded",
        "K2D",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Space Grotesk",
        "Bai Jamjuree",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "Space Mono",
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Bai Jamjuree",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 800
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 220,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.2,
      0.9,
      0.1,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 2
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!