Three systems, identical except for how a selected control is made legible. Nothing here is wired to the product and no token has moved.
Ground
Block 1 — the panel test
S1 — graphite edge
graphite edge — 3.74:1 on white, 3.55:1 on ground
Untitled
Draft · On this device
8×10 · Portrait · DRAW
Book context
Field Guidep. 14Recto
Format
Border
Ground
S2 — bronze edge
bronze edge — 4.11:1 on white, 3.91:1 on ground
Untitled
Draft · On this device
8×10 · Portrait · DRAW
Book context
Field Guidep. 14Recto
Format
Border
Ground
S3 — recessed track
S3 depends on a second indicator to meet 3:1. S1 and S2 meet it on the edge alone.
Untitled
Draft · On this device
8×10 · Portrait · DRAW
Book context
Field Guidep. 14Recto
Format
Border
Ground
Block 2 — state matrix
S1 — graphite edge
graphite edge — 3.74:1 on white, 3.55:1 on ground
Rest
Hover
Pressed
Selected
Selected + hover
Focus
Disabled
Action button
Segment
Page Setup✓
Page Setup✓
Page Setup✓
Page Setup✓
Page Setup✓
Page Setup✓
Page Setup✓
Tile
8×10Classic✓
8×10Classic✓
8×10Classic✓
8×10Classic✓
8×10Classic✓
8×10Classic✓
8×10Classic✓
Pill
10✓
10✓
10✓
10✓
10✓
10✓
10✓
Swatch
White✓
White✓
White✓
White✓
White✓
White✓
White✓
S2 — bronze edge
bronze edge — 4.11:1 on white, 3.91:1 on ground
Rest
Hover
Pressed
Selected
Selected + hover
Focus
Disabled
Action button
Segment
Page Setup✓
Page Setup✓
Page Setup✓
Page Setup✓
Page Setup✓
Page Setup✓
Page Setup✓
Tile
8×10Classic✓
8×10Classic✓
8×10Classic✓
8×10Classic✓
8×10Classic✓
8×10Classic✓
8×10Classic✓
Pill
10✓
10✓
10✓
10✓
10✓
10✓
10✓
Swatch
White✓
White✓
White✓
White✓
White✓
White✓
White✓
S3 — recessed track
S3 depends on a second indicator to meet 3:1. S1 and S2 meet it on the edge alone.
Rest
Hover
Pressed
Selected
Selected + hover
Focus
Disabled
Action button
Segment
Page Setup✓
Page Setup✓
Page Setup✓
Page Setup✓
Page Setup✓
Page Setup✓
Page Setup✓
Tile
8×10Classic✓
8×10Classic✓
8×10Classic✓
8×10Classic✓
8×10Classic✓
8×10Classic✓
8×10Classic✓
Pill
10✓
10✓
10✓
10✓
10✓
10✓
10✓
Swatch
White✓
White✓
White✓
White✓
White✓
White✓
White✓
Block 3 — families
S1 — graphite edge
graphite edge — 3.74:1 on white, 3.55:1 on ground
1 · Actions
2 · Segmented switch
3 · Tile grid
4 · Value pills
5 · Swatch chips
6 · Switches
Fill Outer Edge Gaps
Trim Corner Cells
7 · Slider + numeric field
Area
20mm²
S2 — bronze edge
bronze edge — 4.11:1 on white, 3.91:1 on ground
1 · Actions
2 · Segmented switch
3 · Tile grid
4 · Value pills
5 · Swatch chips
6 · Switches
Fill Outer Edge Gaps
Trim Corner Cells
7 · Slider + numeric field
Area
20mm²
S3 — recessed track
S3 depends on a second indicator to meet 3:1. S1 and S2 meet it on the edge alone.
1 · Actions
2 · Segmented switch
3 · Tile grid
4 · Value pills
5 · Swatch chips
6 · Switches
Fill Outer Edge Gaps
Trim Corner Cells
7 · Slider + numeric field
Area
20mm²
Block 4 — imported product controls, on local example values
Blocks 1-3 are the three alternative systems, drawn in the study’s own CSS. This block imports real product controls and drives them from local example values. Each panel names its imported module. For the persistent page rename and the layer rows, open /dev/preface-next — they are not re-drawn here.
Imported · EnginePaletteSwatch
Active: 1 · Charcoal · Armed: none
Four example inks in 32 positions, with the gap at position 3 intact. Choosing an ink makes it active; choosing the active ink again arms and disarms it. Empty positions are passive capacity marks, not actions, and there is no Add here.
Imported · PanelSegmentedTabs
Style panel — example content for the selected tab.
One Tab stop, arrows inside. The labels here are example values; the Preface object sections ship as Style and Arrange, and the engines ship Process, Style and Export.
Imported · BookSequencePreview
S2iicontent
S3iiicontent
S41blank
S52content
S63content
Physical slot / effective printed label
Book Builder’s own preview component, given eight example rows with a deliberate blank at physical slot 4. Changing the blank rule changes the printed labels it resolves; no numbering rule is defined here.