The Dimensional Model
Every component is the product of up to five independent, orthogonal dimensions.
Developed by Pete and Daniel during BNY design system work. This is original work — not an established industry pattern — informed by practical experience building enterprise-scale token systems.
Core Principle
Every component's visual appearance is the product of up to five independent dimensions. Each dimension is orthogonal — it does not conflict with any other dimension. No two dimensions ever control the same CSS property simultaneously.
| Dimension | Controls | When decided |
|---|---|---|
| State | Interactive surface changes (hover, active, selected, disabled) | Runtime — user interaction only |
| Emphasis | How loudly the component communicates (high / medium / low) | Composition time |
| Sentiment | What the component communicates (neutral, warning, highlight, new, positive) | Composition time |
| Size | Component footprint — height, touch target, padding scale (xs / sm / md / lg / xl) | Composition time |
| Structure | Fixed anatomical dimensions — internal padding, gap, fixed heights | Build time |
Color vs Structural Dimensions
The five dimensions split into two groups:
Color Dimensions (Cascading) — each layer aliases the one below:
| Dimension | Controls |
|---|---|
| Sentiment | Communicative intent |
| Emphasis | Visual weight |
| State | Interactive condition (runtime only) |
Structural Dimensions (Independent) — no connection to the color cascade:
| Dimension | Controls |
|---|---|
| Size | Physical footprint |
| Structure | Fixed skeleton (radius, font-family, gaps) |
Design Decision Order
How a human or LLM should reason through a composition:
Sentiment → Emphasis → Size → Structure → State
Start with meaning, then volume, then scale, then skeleton. State is never a composition decision.
Coordinate Addressing
A specific component variant is addressed by its dimension coordinates:
Button[state=hover, emphasis=high, sentiment=highlight, theme=dark]Omitted dimensions use their defaults. The resolver handles fallback when an exact combination has no explicit token.
Quick Reference
Sentiments: neutral | warning | highlight | new | positive
Emphasis: high | medium | low
Sizes: xs | sm | md | lg | xl
Sentiment selection: What does this content need to signal?
- No signal needed →
neutral - Needs attention →
warning - Featured/recommended →
highlight - Recently added →
new - Resolved well →
positive
Emphasis selection: How urgently?
- Primary action / first thing to see →
high - Secondary action / supporting →
medium - Tertiary / ambient →
low