---
title: "Too many distinct colors (design/palette-sprawl)"
description: "design/palette-sprawl: Dozens of near-identical grays and tints mean colors were picked ad hoc instead of from a scale; the UI looks noisy and dark mode…"
canonical: https://void-design.vercel.app/rules/design/palette-sprawl
lastModified: 2026-09-16
---

# Too many distinct colors

`design/palette-sprawl` · severity **warn** · category Design · detected by `void design` and `void audit`

## Why it matters

Dozens of near-identical grays and tints mean colors were picked ad hoc instead of from a scale; the UI looks noisy and dark mode becomes impossible to maintain.

## How to fix it

Use a 12-step neutral scale plus one accent scale exposed as semantic tokens (--bg, --surface, --fg, --fg-muted, --line, --brand…).

## More design rules

`void design` reports 19 rules in this category. Measured design heuristics from computed styles: font families, type scale, line length, palette and accent sprawl, spacing grid, radius sprawl, dark mode and the tells of generated UI.

- `body-text-small` Body text is smaller than 15px on mobile — [design/body-text-small](https://void-design.vercel.app/rules/design/body-text-small)
- `body-line-height-tight` Body line-height is too tight — [design/body-line-height-tight](https://void-design.vercel.app/rules/design/body-line-height-tight)
- `heading-tracking` Large headings use default letter-spacing — [design/heading-tracking](https://void-design.vercel.app/rules/design/heading-tracking)
- `heading-no-balance` Headings do not use text-wrap: balance — [design/heading-no-balance](https://void-design.vercel.app/rules/design/heading-no-balance)
- `multiple-accents` More than one accent hue — [design/multiple-accents](https://void-design.vercel.app/rules/design/multiple-accents)
- `gradient-text` Gradient-filled heading text — [design/gradient-text](https://void-design.vercel.app/rules/design/gradient-text)
- `purple-gradient` Purple/indigo gradient background — [design/purple-gradient](https://void-design.vercel.app/rules/design/purple-gradient)
- `emoji-icons` Emoji used as icons — [design/emoji-icons](https://void-design.vercel.app/rules/design/emoji-icons)

Detected by `void design` and `void audit`. Explain it in a terminal: `void rules design/palette-sprawl`