# Acid Graphics — AI design spec

> High-saturation fills, warped type and anti-design energy.
>
> Style page: https://www.aiwebstyle.com/styles/acid-graphics.html · Live preview: https://www.aiwebstyle.com/previews/acid-graphics.html
>
> Drop this file at the root of a project and point your coding agent at it. Every value is copied from the working stylesheet, not estimated.

## 1. What this style is

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.

**Signature rules**

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

## 2. Tokens

### Page surface

| Token | Value | Purpose |
|---|---|---|
| `--page-bg` | `#0a0a0a` | Page background (solid fallback) |
| `--page-bg-gradient` | `none` | Page background gradient; overrides the solid unless `none` |

### Text

| Token | Value | Purpose |
|---|---|---|
| `--text-color` | `#f2f2f2` | Body text |
| `--heading-color` | `#c6ff00` | Headings |

### Links

| Token | Value | Purpose |
|---|---|---|
| `--link-color` | `#ff2bd1` | Link and inline accent |

### Borders

| Token | Value | Purpose |
|---|---|---|
| `--border-color` | `#2a2a2a` | Dividers and input borders |

### Cards

| Token | Value | Purpose |
|---|---|---|
| `--card-bg` | `#131313` | Card surface |
| `--card-border-radius` | `2px` | Card corner radius |
| `--card-shadow` | `4px 4px 0 #c6ff00` | Card at rest |
| `--card-hover-shadow` | `4px 4px 0 #ff2bd1` | Card on hover |

### Header

| Token | Value | Purpose |
|---|---|---|
| `--header-bg` | `#0a0a0a` | Sticky header surface |
| `--header-text-color` | `#c6ff00` | Header text and nav links |

### Buttons

| Token | Value | Purpose |
|---|---|---|
| `--button-bg` | `#c6ff00` | Primary button fill |
| `--button-text-color` | `#0a0a0a` | Primary button label |
| `--button-hover-bg` | `#ff2bd1` | Primary button hover fill |

### Code / prompt block

| Token | Value | Purpose |
|---|---|---|
| `--prompt-bg` | `#1c1c1c` | Code / prompt block surface |
| `--prompt-text-color` | `#eaeaea` | Code / prompt block text |

### Type

| Token | Value | Purpose |
|---|---|---|
| `--base-font` | `var(--font-space-mono)` | Body font stack |
| `--heading-font` | `var(--font-inter)` | Heading font stack |

## 3. Do

- Drive every color, radius and shadow from the tokens below. No literal hex values in component code.
- Reuse the `--card-*` tokens for any elevated surface (card, panel, modal, dropdown) so elevation stays consistent.
- Keep header and footer on `--header-*` / `--footer-*` even when the page background is a gradient.
- 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.

## 4. Don't

- Do not blend tokens from another style in this library — one page, one token set.
- Do not invent a hover state: every interactive element has a `*-hover-*` token above.
- 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.

## 5. Using this with a coding agent

Place this file at the project root as `DESIGN.md`, then instruct the agent:

> Follow `DESIGN.md` for all UI. Every color, radius and shadow comes from its token table. If you need a state that is not listed, derive it from the nearest listed token and add the new token to `DESIGN.md` instead of hard-coding a value.

If the project already has a token layer (Tailwind config, CSS custom properties, a theme file), map these tokens onto it one-to-one and keep the names unchanged.

## 6. Original prompt

```text
Design an acid-graphics landing page. Background near-black (#0a0a0a). Two accent fills only: acid green (#c6ff00) and electric magenta (#ff2bd1). Never blend them into a gradient.
```

---

*Generated from the `acid-graphics` theme in `style.css`. Token values are verbatim — regenerate rather than edit by hand.*