Acid Graphics — Style Detail, Prompt and CSS

About This Style

Acid graphics is anti-design with a purpose: it looks wrong on purpose to signal that the product is not corporate. Neon on black, type that overlaps itself, gradients that clash, and a grid that is visibly broken rather than invisibly perfect.

It is the hardest style on this list to do well, because the difference between 'deliberately wrong' and 'actually broken' is entirely in whether the underlying structure is sound. Every chaotic placement still needs a readable path through the page.

bg: #0a0a0a accents: 2 max contrast: 7:1 type: 1 warped line offset: 16px body: conventional

Main Features:

Saturated extremes: Acid green, electric magenta and black. Mid-tones are what make a page look timid.
Warped type: Skew, tight negative tracking, or overlapping outlines. One headine per page does this, never the body.
Broken grid: Elements deliberately offset by 8–24px. The break must be visible as a choice, not as a missing margin.
Hard contrast only: Neon on black or black on neon. No pastels, no gradients between similar hues.
Readable core: One column of body text stays completely conventional — the chaos lives around it, not inside it.

Example AI Prompt

Design an acid-graphics landing page.

Colour:
- Background near-black (#0a0a0a). Two accent fills only: acid green (#c6ff00) and electric magenta (#ff2bd1). Never blend them into a gradient.
- Text is either pure white or the accent, never a mid-grey.

Type:
- One display line may be skewed (-6deg), tightly tracked (-0.06em) and set in uppercase. Everything else uses a plain grotesque at normal settings.
- Body copy stays at 16px, weight 400, high contrast, in a single readable column of max 56ch.

Layout:
- Deliberately offset blocks: shift one column by 16px, rotate a label by -3deg. Offset by a consistent amount so it reads as a system, not as breakage.

Constraints:
- Keep one uninterrupted reading path — chaos must never cross the paragraph column.
- No low-contrast pairs; every text colour must clear 7:1 against its background.
- Limit to two accents. A third turns the page into noise rather than a statement.

Theme CSS Snippets

Acid Graphics theme. The two accents are separated by role: green for headings, magenta for links and hover — using both on the same element is what makes this style unreadable.

body.theme-acid-graphics {
    --page-bg: #0a0a0a;
    --page-bg-gradient: none;
    --text-color: #f2f2f2;
    --heading-color: #c6ff00;
    --link-color: #ff2bd1;
    --border-color: #2a2a2a;
    --card-bg: #131313;
    --card-shadow: 4px 4px 0 #c6ff00;
    --card-hover-shadow: 4px 4px 0 #ff2bd1;
    --header-bg: #0a0a0a;
    --header-text-color: #c6ff00;
    --prompt-bg: #1c1c1c;
    --prompt-text-color: #eaeaea;
    --button-bg: #c6ff00;
    --button-text-color: #0a0a0a;
    --button-hover-bg: #ff2bd1;
    --card-border-radius: 2px;
    --base-font: var(--font-space-mono);
    --heading-font: var(--font-inter);
}

Where it fits

Use it when

Music, fashion, gaming and youth-culture products where defiance is the brand.
Event pages and drops with a short lifespan — the style ages fast by design.
Portfolios that want to be remembered rather than trusted.

Avoid it when

Anything involving money, health or personal data.
Long-form content; the colour load makes extended reading painful.
Brands that already have a restrained identity — the clash reads as an error, not an attitude.

Resource Download

A working single-page demo in this style — the HTML and one self-contained stylesheet, no build step.

Download acid-graphics.zip