Do and Don't Design Principles Block for React

Each sketch is a few span elements in the cell's own file: bars for text, outlined boxes for fields, filled boxes for buttons. They sit in a small SketchWindow helper and use only your theme's tokens, so they follow it in light and dark. To redraw one, edit the markup inside its Do or Dont; to add a principle, add a PrincipleCell with its own pair.

The drawings are hidden from assistive technology, and the words under each one say the same thing: a tick or cross icon, then "Do:" or "Don't:" and a sentence. Each pair is two figures, each with a caption. So the facts are in text, and the sketch only shows them.

A principle people can't check is a slogan. The italic test under the title is what a reviewer asks of a screen: "Would they know what changed without opening anything?" The two sketches are the answer, yes and no, drawn.

Overshoot lines read as cells with space between them. On a phone, two cells one above the other would put two long lines close together, so below lg each cell becomes a band ruled from rail to rail. The pair of sketches stays side by side at every width.

No. A sketch is a picture of a screen, not text, so it keeps its own direction and doesn't flip. The words around it do follow the page: the tick or cross sits at the start of its caption, and the link's arrow mirrors.

The header and the cells fade up once when the page loads, and the link's arrow nudges on hover. With reduced motion both are off. The sketches are still.