Vittorio Vittori

Design System Architect / Senior UX Designer

Modularity and Composability

Build complex interfaces by composing smaller, focused components that work together predictably.

Design Systems
Component Design

Design systems scale through composition, not complexity.

Modularity and composability mean designing components as small, focused units that can be combined in predictable ways.

A composable system enables teams to build diverse interfaces without introducing inconsistency or duplication.

Design components with a single responsibility

Each component should solve one problem well.

Single responsibility

Create components with a clear, narrow purpose. Bundle multiple responsibilities into a single component. Expose variation through composition, not branching logic. Add props to cover every possible layout scenario.
A list of tools and services related to this argument. Component architecture
Storybook logoStorybook
Documentation
Zeroheight logoZeroheight Supernova logoSupernova
it may be outdated

Prefer composition over configuration

Composable systems grow horizontally, not vertically.

allowed

Composition

html 
<mds-modal
  headline="Modal title"
  icon="mi/outline/info"
  tone="weak"
  variant="primary"
>
  <mds-text typography="caption">This is a modal text content.</mds-text>
  <mds-button
    icon="mi/outline/email"
    slot="action"
    tone="strong"
    variant="primary"
  >
    Send email
  </mds-button>
</mds-modal>
not allowed

Configuration

json 
{
  "layout": {
    "type": "grid",
    "columns": 3,
    "spacing": "md"
  }
}
Compose layouts by combining smaller primitives. Rely on deeply nested configuration objects. Use slots, children, or content injection patterns. Hardcode structure inside high-level components.
A list of tools and services related to this argument. Component frameworks
Storybook logoStorybook
Documentation
Zeroheight logoZeroheight
it may be outdated

Establish clear layering and abstraction levels

Not all components serve the same purpose.

Abstraction layers

Separate primitives, patterns, and compositions. Expose low-level details in high-level components. Document intended usage and composition boundaries. Let teams guess how components should be combined.
A list of tools and services related to this argument. Documentation platforms
Zeroheight logoZeroheight Supernova logoSupernova Knapsack logoKnapsack
it may be outdated

Design for reuse across contexts

A component should remain useful even when its context changes.

Context-agnostic design

Keep components context-agnostic where possible. Couple components to specific pages or flows. Use tokens and shared patterns for spacing and behavior. Bake layout assumptions into components.
A list of tools and services related to this argument. Tokens tools
Amazon logoStyle Dictionary
Component frameworks
Storybook logoStorybook
it may be outdated

Why this principle matters

Modularity reduces cognitive load, improves reuse, and makes systems easier to evolve.

Composable design systems scale because they allow new interfaces to emerge without rewriting existing foundations.

Modularity and Composability