Anti-slop
The habits of generated UI to avoid, and what to do instead.
Layout
| Avoid | Instead |
|---|---|
| A small label or number above a title | The heading alone |
| A row of equal stat cards | One Balance, a List or a sentence |
| A Card around everything, or a Card in a Card | Space between groups; a Card for one thing acted on |
| Icons in tinted tiles, icons as decoration | ListIcon in a List row, words elsewhere |
| A colored bar on one edge | --accent-wash on the chosen row |
| Gradients, blobs, grids, glass, extra glow | The white page and one glowing action |
| A sticky header with no edge | A --line edge once content scrolls under |
| An icon centered on wrapping text | The icon on the first line |
Type
| Avoid | Instead |
|---|---|
| Sentences in text-xs or --fg-3 | text-sm in --fg or --fg-2 |
| Peer amounts in different sizes | One size and weight for the set |
| Capitals and spaced-out letters | Sentence case |
| Instant, secure, effortless, invented urgency | What happens and when |
| Emoji | Words and the Icon set |
| John Doe and $1,234.56 | Believable names and amounts |
Behaviour
| Avoid | Instead |
|---|---|
| A blinking cursor or shimmer on streamed text | The text, as it arrives |
| Content that fades in on scroll | Content that is there |
| A dialog mounted only while open | open and onOpenChange |
| Every action flattened to grey | One glowing primary per view |