Spryker B2B design system

A shared system of tokens, components, and patterns for building consistent B2B experiences across design and code.

Get started Explore components

Explore the system

Everything you need to build consistent, accessible UIs.

color

spacing

typography

Getting Started

Introduction and design principles for the system.

Explore

72 colour tokens

Foundations

Colours, typography, spacing, radius, elevation, and motion tokens.

Components

13 production-ready components — buttons, forms, feedback, navigation, and data.

Explore

B2B patterns

Patterns

Reusable UI patterns: forms, filtering, empty states, and data tables.

Explore

Component library

All components

17 components — all token-bound, documented in Figma and code.

Button

Forms

576 variants

Input

Forms

36 variants

Textarea

Forms

12 variants

Select

Forms

24 variants

Checkbox

Forms

15 variants

Radio

Forms

10 variants

Toggle

Forms

8 variants

Forms

12 variants

Badge

Feedback

40 variants

Alert

Feedback

8 variants

Tooltip

Feedback

4 variants

Spinner

Feedback

12 variants

Tabs

Navigation

16 variants

Pagination

Navigation

22 variants

Breadcrumb

Navigation

20 variants

Avatar

Media

96 variants

Divider

Layout

4 variants

How we build

A layered architecture from raw values to finished product.

Tokens

Design decisions captured as named values — colours, spacing, radius, and more.

Components

Reusable UI building blocks built on top of tokens.

Patterns

Compositions of components that solve common UX problems.

Product

Consistent, accessible interfaces built at scale.