Get Started

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.