A square sits a touch inside the circle, and the shape picker stands as tall as the colour well

[WaylandYang]

Two things the class editor's "Shape & color" row got wrong, both from the screenshot.

The two controls were different heights. The colour well is 32 px; the shape Segmented was 28, because Segmented is sized by its content and a bare 12 px icon does not reach a line of text. The icon now sits in a 16 px line box, so the Segmented comes out at 32 like everything else on the row.

A square with side = diameter looks bigger than the circle (area 4r² against πr²). The square's half-side is now 0.9 × the circle's radius (equal area would be 0.886) — in the WebGL program that both the /graph canvas and the ontology schema canvas use, and in every swatch that echoes it: legends, the class list, the panel header, the colour well, the shape picker.

Checked on 5199: both controls measure 32; Well switched to square renders smaller than the HorizontalWell circle on both canvases.

---

Second look at the same row and the tabs above it:

The colour well was wide for what it holds. 56 px around a 14 px swatch; it is 40 now, so the space from its edge to the swatch (13 px) matches the Segmented next to it (12 px from its edge to the icon).

A Segmented's labels were three colours. The selected one was ink, the others ink-3 (the faint level, meant for hints), and a count was always ink-3 even inside a selected tab. Unselected labels are now ink-2 and go to ink on hover — the same three-state rule the main nav already follows — and a count takes its label's colour. This is the component, so every Segmented (Classes/Properties, the review filters) moves together.

---

Third pass, the panels themselves — the class editor on /ontology and the entity panel on /graph — measured element by element. Labels came in five styles (text-small text-ink-2, text-small font-medium text-ink-3, text-small font-medium text-ink-2, text-fine font-medium text-ink-3, text-fine text-ink-3), hints in two sizes, and a fact's value was 13 px on the Timeline tab and 12 px on the History tab.

One rule now, in both panels:

• a label over a control, and a heading over a group of rows: text-small font-medium text-ink-2; a count beside it takes the same colour (Field, GroupLabel, the three form label constants in Ontology, the domain/range sub-labels, the "As" before Subject/Object, the Start/End/Why labels of the interval editor, the "Recorded" kicker of a history entry);
• the hint under a label: text-fine text-ink-3; an empty-state line stays text-small text-ink-3;
• a fact row: predicate text-small text-ink-3, value text-body text-ink, on Timeline and History alike.

Field and GroupLabel are shared, so the same rule reaches the other pages that use them.

---

Fourth: the class panel's left edge. Measured from the panel's border, the Definition tab sat at 17 px, but the Properties tab had text at 25 (headings, hints, the connect form — all carried a px-2 of their own), attribute rows at 17 (-mx-2), the two quiet "New …" buttons at 9, and the Instances tab had its dots at 25 and names at 41. Four edges in one panel.

The entity panel on /graph already has the rule: content starts at the 16 px gutter, and a hoverable row's box bleeds 8 px into it. The class panel follows it now — the stray px-2s are gone, and instance and relationship rows get the same -mx-2 the attribute rows had. Every heading, hint, input and row label in the panel now starts at 17; the search input is the same width as the Definition tab's.