Anti-slop
The habits of generated UI to avoid, and what to do instead.
Look
| Avoid | Instead |
|---|---|
| Glass on cards, headers, badges and fields | Glass on what is pressed, flat everywhere else |
| Gradients, blobs, grids, glow, blur | Ink and paper |
| A shadow to lift a card or a menu | The shell for a card, the overlay ring for a menu |
| A row of equal stat cards | A sentence or a table |
| Icons in tinted tiles | The heading alone |
| A coloured bar on one edge | A pressed wash on the chosen row |
| A small round dot for a status, a count or today | A glyph and a word, a number, a hairline underline |
| A card around everything, a card in a card | Space between groups, a card for one thing acted on |
Words
| Avoid | Instead |
|---|---|
| A small label above a title | The heading alone |
| Capitals and spaced letters | Sentence case |
| Emoji | Words and the icon set |
| Seamless, effortless, supercharge | What happens and when |
| Mono for labels and numbers | Mono for IDs, keys, paths and code, at 0.8 |
| John Doe and 1,234 | Believable names and figures |
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 |