Manifesto Quad Grid Features Block for React

Edit PRINCIPLES at the top of the file: each has an instead (what other tools ask of you), a now (what you do instead), a title and a description. The numbers come from the order. Keep it to four: the quad is two by two, and the middle mark marks where the four meet.

The struck-through phrase is wrapped in <s> with a screen-reader-only "Instead of" before it, and the new phrase has "you get" before it, so a screen reader hears "Instead of 12 settings you get 3 defaults". The arrow between them is decoration and mirrors in right-to-left layouts.

The cells share one-pixel hairlines, so the vertical and the horizontal line cross at the exact middle of the two-by-two. The + is drawn there with the same stroke as the page's other marks. It's hidden below md, where the cells stack and there is no crossing.

Yes. Every colour is a theme token and there's no dark scope or primary surface, so the section follows light and dark and every preset. Emphasis is weight and the struck-through contrast, not colour.

The statement and the quad fade up once when the page loads, with a CSS transition. With reduced motion the transition is off and the section appears at once.

The statement stays centred, then the four principles stack one per row between hairlines, each starting with its number and its contrast. The long phrases wrap rather than overflow, so nothing scrolls sideways at 320 pixels.