# Acid Graphics > Rave-flyer energy on black: liquid chrome type, neon acid green, warped fisheye grids and spiky starbursts. - Nickname: Rave flyer - Also called: Acid Design, Neo-Acid, Acid Rave - Category: Bold & Expressive - Moods: Edgy, Techy, Bold, Nostalgic - Industries: Media & Entertainment, Creative & Portfolio, Gaming, Web3 & Crypto - Style page: https://uilingo.dev/styles/acid-graphics/ 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 ## Audit Passed after 2 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, dark mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Acid Graphics" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: dark ## The style in one line Rave-flyer energy on black: liquid chrome type, neon acid green, warped fisheye grids and spiky starbursts. Design keywords: liquid chrome type, neon acid green on black, warped fisheye grid, spiky starburst, molten chrome blobs, wide heavy display font, monospace line-up labels, rave flyer. ## Visual language A rave flyer as a website: a pure black ground (#050505), one toxic neon acid green (#3CFF2E), and liquid-chrome lettering that looks like polished metal with a dark horizon line through each line of type. Decoration is bent and molten — a bulging fisheye grid of thin green lines, spiky 14-point starbursts, and chrome blobs like drops of mercury. Display type is wide and heavy (Unbounded), metadata is monospace like a club line-up. Light comes from neon glow, never from soft grey shadows. ## Signature details (must be visible) - Liquid chrome display text: background-clip:text with linear-gradient(180deg, #fff 0%, #e3e8ee 20%, #9aa3ae 42%, #353b44 49%, #f2f5f8 53%, #b9c1cb 68%, #fff 84%, #8b94a0 100%), box-decoration-break: clone so every line gets its own horizon, plus drop-shadow(0 0 22px rgba(60,255,46,.35)) - Thai chrome: the Thai display headline may be chrome at line-height 1.32, with the dark horizon stop moved to 53–56% (#9aa3ae 46%, #353b44 54.5%, #f2f5f8 57%) so it falls below the Thai x-height. Thai sub-headlines are solid #F1FFE9 with the green glow, never chrome - Single neon: #3CFF2E acid green for primary buttons, active states, eyebrows, chart lines and glows (0 0 22px -4px) on #050505 black. The accent token is chrome #C9CFD8 (black text). #F4FF3A yellow is the warning-badge colour only — never a button, fill or decoration. Chart series are green and chrome only: #3CFF2E, #C9CFD8, #1E9C10, #6B7480, #A6FF9E; purple and cyan never appear - Fisheye grid: inline SVG, viewBox 0 0 1200 1200, 13 vertical and 13 horizontal quadratic paths, each control point pushed outward from the centre by 0.35 x its distance from the centre. Stroke #3CFF2E 1px at 40% opacity, with a radial mask (opaque to 55%, transparent at 100%). Reuse the same SVG at 50% scale inside art panels. Not a flat perspective floor - Starbursts: a 14-point star via clip-path polygon in solid acid green behind the hero, inside art panels and on the CTA, slowly rotating (24s) - Chrome blobs and spheres: radial-gradient metal (white highlight -> steel -> dark band -> light rim) with an organic border-radius, used for icon wells, avatars, logo and decorative drops - Wide heavy display font (Unbounded 800) at up to 6–7rem; Space Mono uppercase 0.06–0.14em tracked for Latin labels, nav, badges, buttons and table headers. Space Mono has no Thai glyphs: Thai nav links, labels, badges and buttons use Bai Jamjuree 0.9–0.95rem with no uppercase or tracking (mono stack: 'Space Mono', 'Bai Jamjuree', ui-monospace, monospace) ## Design tokens — use these exact values Colours (dark mode): - background #050505 - surface #0E100D - surface-2 #161A14 - text #F1FFE9 - text-muted #9FB197 - primary #3CFF2E (text on it #050505) - secondary #C9CFD8 (text on it #050505) - accent #C9CFD8 - border #2A3326 - success #3CFF2E · warning #F4FF3A · danger #FF3D6E - chart series #3CFF2E, #C9CFD8, #1E9C10, #6B7480, #A6FF9E Radius: sm 6px, md 12px, lg 18px, xl 28px, pill 999px Border width: 1px Shadows: sm `0 0 0 1px rgba(60,255,46,0.12)`, md `0 0 24px -6px rgba(60,255,46,0.35)`, lg `0 0 60px -10px rgba(60,255,46,0.45)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1 density Motion: 220ms cubic-bezier(.2,.9,.1,1) ## Typography (Latin + Thai) - Headings: Unbounded 700/800 with Thai fallback K2D 600/800 - Body: Space Grotesk 400/500/700 with Thai fallback Bai Jamjuree 400/500/600 - Mono: Space Mono - Google Fonts URL: 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 - CSS stacks: heading `"Unbounded", "K2D", system-ui, sans-serif`; body `"Space Grotesk", "Bai Jamjuree", system-ui, sans-serif`; mono `"Space Mono", ui-monospace, "SFMono-Regular", Menlo, "Bai Jamjuree", monospace` (the mono font has no Thai glyphs, so Thai inside mono labels falls back to Bai Jamjuree — drop uppercase and tracking there) — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(3rem, 8vw, 7rem), heading weight 800, heading tracking -0.03em (Latin only), uppercase small labels (Latin only). - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: 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. ## Components - Primary button: acid green pill with black mono uppercase label and a green glow that intensifies on hover (no movement) - Secondary button: chrome pill, background linear-gradient(100deg, #9aa3ae 0%, #f2f5f8 25%, #c9cfd8 50%, #ffffff 72%, #7d8692 100%), box-shadow inset 0 1px 0 rgba(255,255,255,.8), text #050505. No dark band behind the label — the darkest stop is only at the far right edge - Split nav: chrome-sphere logo plus wide-caps wordmark on the left, mono links centred with the current one in #3CFF2E, sign-in plus an acid pill CTA on the right. Bar rgba(5,5,5,.82) with a 1px #2A3326 bottom border and no backdrop blur - Cards: #0E100D surface, 1px #2A3326 border, 18px radius; hover turns the border acid with a soft green glow; icon well is a chrome sphere - Highlighted card: solid acid green with black text and black inverted buttons - Inputs: near-black fill, 1px dark-green border, 12px radius; focus = acid border + 3px green ring + glow - Badges: mono uppercase 1px outline in the status colour (yellow only for warning); solid badge acid green with black text - Festival showcase: line-up / timetable cards with a mono time, a wide-caps artist name, a chrome stage pill and an acid 'live' dot - Dashboard: thin rail with icons; active item an acid green glowing circle; KPI numbers in a softer chrome; glowing neon chart lines, acid bars, green-mixed heatmap; top bar rgba(5,5,5,.9), no blur - Floating tab bar: black pill with a faint green glow; active icon inside an acid circle. Switch: dark track turning acid when on, with a chrome-sphere knob ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: full-viewport immersive hero with centred copy over the background effect. Navigation: split style. Sections in order: hero → logos → features → showcase → stats → testimonials → pricing → cta. Feature section as alternating. Immersive centred hero, min-height min(88vh, 920px) (never 100vh): an outlined acid eyebrow pill, a giant chrome headline glowing faintly green, a lead line and an acid + chrome button pair on one row, with a spinning acid starburst top-left and a molten chrome blob bleeding off the right edge — all over the fisheye grid. A mono logo strip, then alternating feature rows whose art panels hold a starburst and a chrome drop on the fisheye grid at 50% scale. The showcase is a festival line-up / timetable; stats and pricing stay dark with acid accents. The CTA is a full chrome panel in light chrome only (stops between #c9cfd8 and #ffffff, darkest #9aa3ae only at the panel edges) so #050505 text stays at least 7:1, with an acid starburst. Form footers keep the chrome and acid buttons on one row (gap 12px, wrapping only below 480px). Dashboards use a slim icon rail and neon charts on black. ## Content Use realistic product copy (fictional brand) suited to: Music, festival and club event sites. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## 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 - Pink, pastel or iridescent palettes (that becomes Y2K) - A sunset gradient or flat perspective grid floor (that becomes retro-futurism / vaporwave) - Chamfered HUD corners, glitch slices or magenta/yellow neon (that becomes cyberpunk) - Frosted glass panels, backdrop blur on nav or top bar, and heavy blur - Chrome on body text, small numbers or Thai sub-headlines, or a dark chrome band behind a button label, where the horizon line reads as a strikethrough - More than one neon colour competing with acid green: no yellow buttons or fills, no purple or cyan chart series ## Stack notes One self-contained HTML file with a