Composition
Composition
The checklist and rules for composing components with the dimensional model.
The Composition Checklist
Answer these questions in order before composing any component:
- What does this communicate? → Assign
sentiment - How urgently must the user receive this? → Assign
emphasis - Is this combination semantically coherent? → Validate against the sentiment-emphasis relationship
- What physical scale is appropriate? → Assign
size - What spacing tier separates this from adjacent elements? → Apply spacing tiers
- Does the overall composition read as a coherent hierarchy? → Validate the postmodern balance
State is never answered here. It is always runtime.
Composition Guardrails
These rules must be validated at composition time. The resolver does not enforce them.
- Sentiment is content-driven. Confirm the content's intent before assigning sentiment.
- Emphasis reflects criticality. Do not reduce emphasis for aesthetic reasons alone.
- Only declared sentiments are valid. Do not improvise sentiments outside the manifest.
- State is never set manually. State is always runtime. Never pass a static state prop.
- Sentiment flows down; emphasis does not. A container's sentiment may influence its children, but emphasis is always set per-component.
- Never set emphasis on a container. Containers provide context (sentiment); emphasis belongs on the action or content elements within.
The Postmodern Balance
No single rule — proximity, dominance, separation — applies universally. Reading a composed layout requires evaluating the whole structure, not applying rules element by element. A correct composition satisfies all three simultaneously:
- Visual hierarchy — the eye knows where to go first
- Information sentiment — the right things feel important, cautionary, or ambient
- Action/data emphasis — interactive elements are appropriately weighted relative to content