Get Started: The Compositional Design System

Get Started

What Is a Compositional Design System?

A compositional design system is a next-generation design system built for AI.

Instead of static templates and predefined variants, it enables interfaces to be generated dynamically at runtime based on intent, context, and SAP design knowledge.

The system doesn't just provide components, it understands what a user is trying to do, reads the context they're working in, and composes the right interface automatically.

The output is a technology-agnostic composition blueprint that can be rendered across any UI technology, using the same design knowledge every time.

How Does It Work?

Instead of manually selecting and assembling components, the system takes a query and handles the rest.

It detects the intent behind the request, analyzes the context, role, task, environment, and searches SAP's design knowledge to find the best solution. It then selects the right components from the catalog, composes them into a blueprint, and renders the result in the target technology.

The same logic and the same design quality are applied consistently across every surface.

Composition Steps

<div> <div>Step</div> <div>Activity</div> </div> <div> <div>1. Input</div> <div>A user (or system/agent) submits a query or describes a task.</div> </div> <div> <div>2. Intent and context detection</div> <div>The agent identifies the goal and the situation.</div> </div> <div> <div>3. Design and knowledge search</div> <div>SAP design principles are used to find the optimal solution.</div> </div> <div> <div>4. Component selection</div> <div>The best-fit components are identified and composed.</div> </div> <div> <div>5. Blueprint output</div> <div>A technology-neutral JSON schema composition is produced.</div> </div> <div> <div>6. Rendering</div> <div>The blueprint renders in the target technology.</div> </div>

Benefits

Instead of maintaining dozens of hand-crafted layout variants, the system generates the right interface on demand, reducing design and engineering overhead while improving consistency.

Hyper-personalized experiences at scale

How do we generate the right experience at the right moment? Instead of designing for the average user, the compositional design system delivers interfaces that are composed dynamically for each individual, based on their intent, context, and patterns of use.

Personalization that used to require significant engineering effort happens automatically, at scale, across every surface.

Variant management

Variants are generated dynamically at runtime based on context, not maintained manually as static alternatives.

Complex information design

When information is dense or multi-layered, the system structures it correctly, applying hierarchy, grouping, and visual weight based on SAP design knowledge.

Dynamic hierarchy

Content priority adapts to what matters most in a given moment, not a fixed layout defined upfront.

Context-adaptive density

The same data looks different for a desktop analytics user and a field technician on mobile. The system resolves this automatically.

FAQs

What is the SAP Compositional Design System?

The SAP Compositional Design System is a next-generation design system built for AI-generated enterprise experiences.

Traditional design systems help people build interfaces.

The Compositional Design System helps AI build interfaces.

The SAP Design System provides reusable design assets such as components, patterns, tokens, and guidelines that designers and developers use to create interfaces and ultimately user experiences.

The Compositional Design System extends these foundations with machine-readable design knowledge and a design catalog that enables AI to understand, select, and assemble the right building blocks for a given situation.

It captures design principles, composition rules, semantic relationships, accessibility requirements, interaction logic, and other design knowledge in a format that AI can understand and apply.

Rather than assembling predefined screens, AI can use this knowledge to generate experiences dynamically based on user intent, context, and business data while remaining aligned with SAP's design principles, accessibility standards, and user experience guidelines.

The Compositional Design System does not replace the SAP Web Design System or the SAP Mobile Design System. It builds upon it by providing the design intelligence required for AI-driven composition and adaptive enterprise experiences.

Why do we need a Compositional Design System?

Traditional design systems continue to support how people design and assemble user interfaces.

However, the way enterprise experiences are created is beginning to change. AI is increasingly participating in the creation of user experiences. Instead of presenting predefined screens, AI can generate experiences dynamically based on user intent, context, and business data.

This fundamentally changes the role of the design system.

Reusable components alone are no longer sufficient. AI must understand not only what UI elements exist, but also how, when, and why they should be used.

The Compositional Design System provides the machine-readable design knowledge that enables AI to make these decisions while remaining aligned with SAP's design principles, standards, and accessibility requirements.

It helps AI:

Select appropriate structures and UI elements
Apply SAP design principles and standards
Follow accessibility and usability requirements
Respect semantic relationships and business context
Generate coherent, trustworthy, and adaptive experiences

Without this layer of design inteligence, AI-generated experiences risk becoming inconsistent, inaccessible, unpredictable, and disconnected from SAP's user experience standards.

Which teams / products should be using the Compositional Design System?

The Compositional Design System is intended for teams building AI-generated, adaptive, or dynamically composed user experiences.

Today, it is used within Joule Work, where it supports the composition of experiences within Spaces and is expanding into additional Joule Work areas like Conversations.

Over time, the Compositional Design System is intended to support SAP products where AI participates in the creation of the user experience. This includes experiences that are generated or adapted based on user intent, context, business data, workflow state, or AI reasoning.

Teams building traditional, predefined user interfaces should continue to use the SAP Design System.

Teams building experiences where AI helps compose, adapt, or generate the user interface should use the Compositional Design System in addition to the SAP Design System.

In simple terms:

The SAP Design System helps people build interfaces.

The Compositional Design System helps AI build interfaces.

The two systems are complementary and are designed to work together.

Is the Compositional Design System available to customers or partners?

Not yet.

The Compositional Design System is currently under active development and is being created in close collaboration with the Joule team and other SAP initiatives exploring AI-generated and adaptive enterprise experiences.

As the system matures, we will evaluate how the Compositional Design System can be made available to customers, partners, and the broader SAP ecosystem.

What’s the next planned release for the Compositional Design System?

The Compositional Design System is evolving through incremental milestones rather than traditional product releases.

Our current focus is on continuing to evolve the foundational architecture of the Compositional Design System, making it more future-proof, scalable, and capable of supporting increasingly sophisticated compositional user experiences across SAP.

In parallel, we are working closely with the Joule Work teams to expand the system's compositional capabilities, enabling increasingly intelligent, context-aware, and adaptive experiences beyond isolated UI generation scenarios.

style

internal-only