# Near-Black + Acid Accent Is a Default

**SHOULD** · **ID:** `aesthetics-dark-acid-default` · **Category:** aesthetics
**Source:** [Skills](https://skills.sh/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/aesthetics-dark-acid-default

> SHOULD: Treat near-black + one bright acid-green/vermilion accent as a reflex, not a choice — it is one of the looks AI-generated design clusters around, and its tell is interchangeability: the same surface and accent look equally plausible on a fintech dashboard, a wellness app and a dev tool, which means it was derived from none of them. Derive the dark surface instead: take the product's own hue, hold the hue angle and drop chroma, and pull the accent from the subject's material world rather than a neon swatch. (Distinct from `design-impeccable-dark-glow`, which is about glow SHADOWS, not the palette.)

The dark canvas with one bright acid-green or vermilion accent arrives regardless of subject — derive the dark surface instead

Look (2) is the "technical, serious, a bit dangerous" reflex, and its tell is interchangeability: paste the same near-black surface and the same acid-green accent onto a fintech dashboard, a wellness app, and a dev tool, and all three still look plausible — which is precisely the problem, because a palette that fits every subject was derived from none of them. Distinct from `design-impeccable-dark-glow`, which is about glow SHADOWS on dark surfaces, not the palette itself. The fix is derivation: take the product's own hue, hold the hue angle and drop chroma for the surface (see `design-impeccable-tinted-neutrals`), and pull the accent from the subject's material world rather than from a neon swatch.

## Bad — do not do this

`aesthetics-dark-acid-default-bad`

```tsx
import type { CSSProperties } from 'react';

// The offending color IS the anti-pattern, so it is pinned literally and confined to this pane.
const acid = { '--acid': '#c6f600' } as CSSProperties;

const products = [
  { name: 'Ledgerline', kind: 'fintech dashboard', stat: 'Runway', value: '14 mo' },
  { name: 'Stillwater', kind: 'wellness app', stat: 'Streak', value: '14 d' },
  { name: 'Forkbomb', kind: 'dev tool', stat: 'Builds', value: '14 k' },
];

export function DarkAcidDefaultBad() {
  return (
    <div className="w-full">
      <div className="grid grid-cols-3 gap-3">
        {products.map((p) => (
          <div
            key={p.name}
            style={acid}
            className="rounded-md border border-neutral-800 bg-neutral-950 p-3"
          >
            <p className="text-[10px] uppercase tracking-widest text-[var(--acid)]">{p.kind}</p>
            <p className="text-sm font-semibold text-neutral-100 mt-1 truncate">{p.name}</p>
            <p className="text-[10px] text-neutral-400 mt-3">{p.stat}</p>
            <p className="text-lg font-semibold text-neutral-100 tabular-nums">{p.value}</p>
            <span className="mt-3 block h-6 rounded bg-[var(--acid)]" />
          </div>
        ))}
      </div>

      <p className="text-xs text-error mt-4">
        A fintech dashboard, a wellness app and a dev tool, and you cannot tell which is which. The
        near-black canvas with one bright acid accent is reflexive AI look #2: it fits every subject
        because it was derived from none of them.
      </p>
    </div>
  );
}
```

## Good — do this

`aesthetics-dark-acid-default-good`

```tsx
import type { CSSProperties } from 'react';

/**
 * Each dark surface holds its subject's own hue angle and drops chroma to a tinted
 * neutral; each accent is pulled from that subject's material world, not from a neon
 * swatch. Same darkness, three unmistakable products.
 */
const products = [
  {
    name: 'Ledgerline',
    kind: 'fintech dashboard',
    stat: 'Runway',
    value: '14 mo',
    note: 'ink-blue surface, brass accent — ledger paper and stamped foil',
    vars: {
      '--surface': 'oklch(0.19 0.02 255)',
      '--edge': 'oklch(0.30 0.02 255)',
      '--ink': 'oklch(0.94 0.01 255)',
      '--dim': 'oklch(0.70 0.02 255)',
      '--accent': 'oklch(0.78 0.11 85)',
    } as CSSProperties,
  },
  {
    name: 'Stillwater',
    kind: 'wellness app',
    stat: 'Streak',
    value: '14 d',
    note: 'moss surface, clay accent — riverbed, not neon',
    vars: {
      '--surface': 'oklch(0.20 0.02 150)',
      '--edge': 'oklch(0.31 0.02 150)',
      '--ink': 'oklch(0.94 0.01 150)',
      '--dim': 'oklch(0.70 0.02 150)',
      '--accent': 'oklch(0.72 0.10 40)',
    } as CSSProperties,
  },
  {
    name: 'Forkbomb',
    kind: 'dev tool',
    stat: 'Builds',
    value: '14 k',
    note: 'warm graphite surface, phosphor-amber accent — the terminal it replaces',
    vars: {
      '--surface': 'oklch(0.19 0.01 60)',
      '--edge': 'oklch(0.30 0.01 60)',
      '--ink': 'oklch(0.94 0.01 60)',
      '--dim': 'oklch(0.70 0.01 60)',
      '--accent': 'oklch(0.80 0.14 70)',
    } as CSSProperties,
  },
];

export function DarkAcidDefaultGood() {
  return (
    <div className="w-full">
      <div className="grid grid-cols-3 gap-3">
        {products.map((p) => (
          <div
            key={p.name}
            style={p.vars}
            className="rounded-md border border-[var(--edge)] bg-[var(--surface)] p-3"
          >
            <p className="text-[10px] uppercase tracking-widest text-[var(--accent)]">{p.kind}</p>
            <p className="text-sm font-semibold text-[var(--ink)] mt-1 truncate">{p.name}</p>
            <p className="text-[10px] text-[var(--dim)] mt-3">{p.stat}</p>
            <p className="text-lg font-semibold text-[var(--ink)] tabular-nums">{p.value}</p>
            <span className="mt-3 block h-6 rounded bg-[var(--accent)]" />
            <p className="text-[10px] text-[var(--dim)] mt-2 leading-snug">{p.note}</p>
          </div>
        ))}
      </div>

      <p className="text-xs text-success mt-4">
        Still dark, still disciplined, but the surface holds each subject&rsquo;s hue at near-zero
        chroma and the accent comes from its material world. Swap the three and the mismatch is
        immediate &mdash; which is the proof the palette was derived, not defaulted.
      </p>
    </div>
  );
}
```

## References

- [Anthropic frontend-design skill](https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md)
- [OKLCH color picker](https://oklch.com/)