UI Grammar
UI Grammar is the structural rule system governing how interface elements combine to produce meaning. It is not a visual grammar — visual grammar governs what elements look like. UI grammar governs how elements relate, sequence, and compose. The distinction is not a technicality: element form and element combination are two different structural layers.
Without a grammar, element combination produces layout, not meaning. UI Grammar is the constraint system that makes combination semantically productive — that ensures element arrangements carry epistemic content rather than simply occupying visual space.
Visual grammar defines the structural rules that govern what interface elements look like — how they appear in the visual domain. It is a grammar of form: contrast, hierarchy, density, spatial logic, visual ambiguity. Form follows epistemic function.
Visual grammar governs what elements look like. UI grammar governs how they combine. These are separate structural layers — neither subsumes the other.
UI Grammar operates one layer above visual grammar. Where visual grammar specifies the form of an individual element — its contrast, weight, density — UI grammar specifies how elements in combination produce structural meaning. A correctly formed element placed in an incorrect combination still violates the grammar. The two layers are necessary and distinct.
This distinction matters because combination errors are invisible if you are only reading form. Two correctly formed elements placed in structural proximity without a proximity rationale — a claim about their conceptual relatedness — produce noise that reads as layout. The grammar failure is in the combination, not in the elements.
Spatial proximity between elements is a claim about their conceptual relatedness. Elements placed close to one another are interpreted as belonging to the same epistemic domain — they share reasoning context. Elements placed far apart are interpreted as structurally independent. Proximity is not a layout preference; it is a structural assertion about conceptual relation.
Ordered sequences of elements encode epistemic progression — what comes before what is a claim about reasoning order. In a sequence, the earlier element is epistemically prior: it provides the context in which the later element is interpreted. Sequence is not a reading order convention; it is a claim about the structure of the reasoning the interface is rendering.
When one element contains another, the containing element establishes the epistemic scope within which the contained element is interpreted. Containment encodes dependency or subordination: the contained element derives its meaning from, or is constrained by, the containing element. A container is not a visual group; it is a scoping claim.
Elements that are structurally contrasted are interpreted as epistemically opposed or differentiated — they must be read as genuinely different, not merely visually different. Contrast that is not grounded in a structural difference between the elements is noise, not syntax. Contrast marks where the grammar requires distinction to be load-bearing.
A balanced arrangement claims structural equivalence between its elements — they carry equal epistemic weight. An imbalanced arrangement claims asymmetry — one element is structurally dominant. Imbalance is not a failure of composition; it is a claim about the epistemic asymmetry of the content. The grammar uses structural tension as a communicative resource.
The syntax rules apply differently depending on the composition mode. The grammar has two modes that correspond to the reasoning phases of Divergent-Convergent Reasoning. Switching modes is a semantically significant act — it signals a structural shift in the reasoning the interface is rendering. Both modes are valid; neither is aesthetically preferable to the other.
Multiple elements are held in open relation — no single element claims structural priority. The field is spread, not centred.
Sequence is non-linear or branching — multiple reading paths are available simultaneously. The grammar does not enforce a single traversal order.
Structural tension is preserved and visible. Contrast marks real differences that must be held simultaneously, not resolved to a single reading.
Containers are porous or provisional — they suggest grouping without enforcing it. Scope is held loosely.
Elements are oriented toward a structural centre — a primary claim that all others support or qualify. The field narrows toward resolution.
Sequence is linear and directed — a single traversal path is indicated. The grammar enforces a reading order that mirrors the reasoning order.
Structural tension has collapsed into a resolved reading. Contrast marks distinctions that have been evaluated, not merely observed.
Containers are firm — scope is clearly bounded. Each element knows its epistemic domain and does not bleed beyond it.
When a reasoning thread is displayed — a sequence of positions taken through an argument — the sequence rule requires that the temporal order of the positions encodes their reasoning order. Earlier positions provide context for later ones. A display that orders positions by visual weight or aesthetic balance rather than reasoning order has violated the sequence rule: it has introduced a structural claim about reasoning order that is false.
When two competing interpretations of evidence are presented, the grammar requires contrast to mark the structural opposition — and balance to preserve their epistemic equivalence before one is adjudicated. Displaying them with different visual weights before the contrast has been evaluated is a grammar violation: it uses the balance rule to make a claim about their relative importance that has not been established.
The grammar operates in these terms throughout: it governs what structural claims the combination of elements makes, and it requires that those claims be accurate representations of the epistemic content. A layout that is visually coherent but structurally inaccurate is a grammar violation. The grammar's concern is accuracy, not appearance.