Model Convergence, Framework
Vodafone
I.
Context
A request to push the visual direction exposed limits in the existing system.
What looked like a UI refinement was a structural problem: the system needed one thematic model for brand, neutrals, accents, states, accessibility, motion, and responsive behaviour.
That exploration became the start of the architecture — detailed enough to hold complexity, structured enough to reduce it later.
II.
Landscape
Two early design systems existed in parallel.
Each used a different architecture, with no shared thematic model and no path to converge.
Unity was used by a small number of products. Its visual language was distinct, but its structure was shaped around isolated use cases, which limited reuse at scale.
Aurora stayed closer to WS10. It offered less visual separation, and structurally it did not break from earlier patterns.
Both evolved independently.
Variables, themes, and modes kept growing — but without a unifying axis, the systems moved further apart.
III.
A single structural model was defined to reduce cognitive load, collapse duplicated axes, and make spacing, color, and semantics computable instead of descriptive.
IV.
The model separates semantics from projection.
Core defines meaning: Brand, Theme, NeutralFamily, Accent, and Schema.
This is the semantic contract.
Inheritance is explicit. Accent.Neutral inherits from NeutralFamily.
Schema.Neutral resolves from the active NeutralFamily.
Axes define projection, not meaning. They never add semantics.
Size acts as a global multiplier.
Scale consumes Size and sets density and type proportion.
Spacing is computed from Size × Scale.
Density stays independent from Breakpoint.
Breakpoint only constrains layout.
Contextual is not a semantic mode.
It works as a background modifier, shifting the neutral reference used by Schema.Neutral without changing Schema, Theme, or NeutralFamily.
V.
Refinements
Once the structural model was defined, complexity was reduced by removing implicit coupling.
Spacing was detached from Breakpoint and derived exclusively from Size and Scale, eliminating duplicated tables and breakpoint-specific variants.
Schema was narrowed to stable semantic roles.
Contextual responsibilities were reduced to background modulation only, preventing overlap with Schema and avoiding secondary semantic layers.
The result is a model with fewer degrees of freedom, but clearer responsibility per axis.
VI.
Standards
Semantic meaning is declared once and reused everywhere.
The same role names, inheritance paths and thresholds apply across brands, platforms and markets.
Relationships are explicit.
No value is inferred from proximity, naming convention, or visual similarity.
Computation replaces enumeration.
Derived values are not duplicated as static variants.
Modifiers are bounded by scope.
Each modifier affects only the layer it belongs to and cannot leak responsibility upward or sideways.
Parity between design and code is mandatory.
A concept that cannot be expressed identically in both does not enter the system.
VII.
Form
The architecture extends through brands, themes, platforms, breakpoints and markets via inheritance, not specialization.
Variation is absorbed by the model itself, without increasing component-level complexity.
All modes operate together inside a single system.
Their interaction — Brand, Theme, Schema, Scale, Density, Contextual and Market — is demonstrated directly in Figma through a recorded walkthrough, showing how changes propagate without breaking structure.
VIII.
Notes
This work reframes system complexity as a modelling problem, not a coordination problem.
By defining fewer, clearer axes and enforcing explicit inheritance, the system absorbs variation without multiplying rules.
The outcome is not a new visual language, but a stable internal contract.
One that allows different brands, markets and contexts to coexist without divergence.