Monochrome Card Lattice Features Block for React

Edit PRIMITIVES at the top of the file: each entry has an icon, a name, a sentence and a metric line. The first summary's figure is PRIMITIVES.length, so it follows the array. The cells are placed by index in the JSX, with the two summaries between them: to add an eighth primitive, add it to the array and place another Cell where you want it, and keep an even number of cells in the two-across phone layout.

They aren't features, so they read differently: a bg-muted fill, a large figure and a sentence in place of a glyph. The tint is a solid fill, so the hairlines stay crisp. Their sentence uses text-foreground/70 rather than the muted text colour, because muted text on the muted tint falls just short of AA contrast.

A short fact in the product's own vocabulary ("lag p99: under 2 s", "restore: under 90 s"), set in the mono font inside a bordered chip. They carry dir="ltr" so a right-to-left page keeps them in reading order. They are copy, not live data: replace them with figures you can stand behind.

Yes. Every colour is a token (background, card, muted, border, foreground), there is no dark scope, and nothing is a fixed colour, so the lattice is light on a light page and dark on a dark one in any preset. The one outer radius comes from the grid's rounded-2xl and overflow-hidden; the cells inside have no radius.

Below lg it is two cells across, with the first summary spanning both columns so every row is full: the order of the cells in the file keeps a summary beside a primitive on the other rows. Cell padding steps down from p-6 to p-4, and nothing scrolls sideways at 320 pixels.

Only the header and the lattice fade up once when the page loads, with a CSS transition. With reduced motion the transition is off and the section simply appears. There is no hover effect, because the cells aren't links.