Anti-slop
The habits of generated UI to avoid, and what to do instead.
Look
| Avoid | Instead |
|---|---|
| A cell grid or dot field behind the page | Rules between content; dots only in an empty gutter |
| Green on black, scanlines, a > prompt | Ink on white, warm near-black in dark, plain headlines |
| Gradients, blobs, glow, blur | Flat fills and 1px rules; only a button is lit from below |
| Rounded corners | Square, everywhere |
| Yellow headers, borders, icons, badges | One yellow primary, the selection wash |
| A row of equal stat cards | A status strip |
| A box inside a frame | A rule |
| A coloured bar on one edge | The selection wash |
| A round dot for a status | A square mark and a word |
Words
| Avoid | Instead |
|---|---|
| A small label above a headline | The name in the panel header row |
| Sentences in mono capitals | Sentences in the sans |
| Emoji | Words and the icon set |
| Blazing, seamless, supercharge | What happens and when |
| Brackets on every label | Brackets on machine actions only |
| John Doe and 1,234 | Believable names and figures |
Behaviour
| Avoid | Instead |
|---|---|
| A caret blinking at rest | A caret only while text types |
| Content that fades in on scroll | Content that is there |
| A dialog mounted only while open | open and onOpenChange |