Design Rationale: Visual Encoding in the Pie & Bézier Studies

Purpose and scope

The primary study focuses on geometric construction. This document exists to explain how that geometry is encoded visually so that the reader can reason about it without ambiguity.

The considerations outlined here address:

• hierarchy and legibility
• interaction without distraction
• separation of infrastructure from result
• consistency across multiple visualizations
• compatibility with accessibility and human ergonomics

These decisions are systemic. They are not tuned per-diagram.

Typography as the primary unit

Typography is treated as the root unit of the system.

• The base size (1rem) establishes the human reading scale.
• A stepped typographic scale (derived from ∛2) governs relative sizing.
• Node sizes, label spacing, and proportional reductions are derived from this scale.

If something must be read, it must submit to the typographic system. Geometry may exceed it; explanation may not.

Margins also follow this rule: the diagram’s bounding margin is exactly 1rem, tying spatial rhythm directly to reading rhythm.

Layered luminance scale

Luminance, not hue, is the primary carrier of hierarchy.

All elements are first designed to function correctly in grayscale. Color is added only after tonal relationships are stable.

The luminance scale progresses from darkest (semantic authority) to lightest (surface):

• Primary labels — darkest
• Secondary labels — next step lighter
• Results and material facts — darker than construction
• Construction geometry — mid-light
• Axes, ticks, scaffolding — light
• Surface — lightest

A strict rule is followed:

Adjacent luminance steps are never used in direct proximity.

When density requires visual softening (e.g., circle ticks), semi-tones are used deliberately as exceptions. These are documented exceptions, not ad-hoc tweaks.

Semi-tones as the interaction register

Human interaction elements live in the semi-tone band of the luminance scale.

They are intentionally placed:

• not at the darkest values (authority, result)
• not at the lightest values (surface, background)

This ensures interaction remains legible against all elements without overpowering them.

Interaction should be visible, not dominant.

This principle applies consistently to:

• draggable handles
• hover outlines
• active states

Interaction never re-encodes meaning; it merely exposes agency.

Hue as semantic identity

Hue is used strictly to encode what something represents, not to emphasize importance.

Examples:

• Green — radial construction and material distance (r)
• Blue / purple — angular rules (θ, φ)
• Gray — structural scaffolding
• Yellow — human agency (interaction)
• Red — reserved exclusively for error or danger

Hue never overrides luminance.

If converted to grayscale, the diagram must remain legible and hierarchical.

Stroke weight as epistemic distinction

Stroke weight distinguishes how a line exists, not what it represents.

• 1 px strokes
  Infrastructure: axes, grids, circles, construction guides, control lines.
• 2 px strokes
  Results: the slice, the constructed arc, the solution itself.

This rule applies everywhere, including later rotation visualizations.

No conditional emphasis is introduced.

The result is that the solution is visually prominent without requiring new rules or styling changes.

Human interaction vs the design system

The interactive touch target is governed by accessibility, not aesthetics.

• Minimum touch size: ≥ 44 px
• Chosen size: 45 px (odd value)

The odd diameter ensures:

• a single, exact center pixel
• perfect alignment with the data point
• no half-pixel ambiguity or anti-aliasing artifacts

This element is explicitly not derived from the typographic scale.

The interaction layer obeys the body; the diagram obeys the system.

These are separate authorities, and neither is allowed to compromise the other.

Node sizing and pixel alignment

Nodes derived from the typographic scale are rounded to the nearest odd diameter.

This ensures:

• exact centering on data points
• symmetrical stroke distribution
• consistent appearance across resolutions
• stable motion during interaction

This decision is not aesthetic; it is mechanical.

Regulating lines and spatial discipline

Grids, margins, and bounding frames function as regulating lines.

They are used to:

• verify proportional balance
• confirm spatial coherence
• ensure the diagram holds under constraint

When debug bounds are enabled, the composition should already feel resolved.

Regulating lines reveal structure; they do not impose it.

Deliberate non-optimization

Not every parameter is optimized to mathematical or visual extremes.

Precision stops where it no longer improves comprehension.

Examples:

• Coincidences that reinforce balance are allowed to remain coincidental.
• Expressive color is restrained once hierarchy is established.
• Interaction does not animate beyond necessity.

Restraint is treated as a design decision, not a limitation.

Diagrams as instruments

These diagrams are intended to behave like instruments rather than illustrations.

They must:

• remain truthful at rest
• remain legible in motion
• survive scaling, printing, and grayscale
• teach without narration

When the system no longer requires explanation, it can begin teaching.