Spryker
Spryker

B2B Design System
Documentation

A token-based design system for Spryker B2B — colour scales, typography, spacing, and production-ready components with full Figma coverage.

Get started Browse components
700+
Component variants
7
Token collections
12
Components
100%
Token-bound

Explore the system

Everything you need to build consistent, accessible UIs.

color
spacing
typography

Getting Started

Introduction, design principles, and how to use tokens in your projects.

Explore
72 colour tokens

Foundations

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

Explore
Primary button
Email address
StableBeta576+

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

12 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

Badge

Feedback

40 variants

Alert

Feedback

8 variants

Tabs

Navigation

18 variants

Pagination

Navigation

24 variants

Product Card

E-commerce

16 variants

How we build

A layered architecture from raw values to finished product.

01
Tokens
Design decisions captured as named values — colours, spacing, radius, and more.
02
Components
Reusable UI building blocks built on top of tokens.
03
Patterns
Compositions of components that solve common UX problems.
04
Product
Consistent, accessible interfaces built at scale.

What's new

v1.5.0
Apr 2026

Product Card — vertical & horizontal orientations, 4 configurations (B2B Full, Standard, Sale, Guest), full usage guidelines.

stable
v1.4.0
Mar 2026

Tabs — 16 variants (SM/MD × 4 states × icon). Table — enterprise data grid with sorting, selection, Badge status, Pagination footer.

stable
v1.3.0
Mar 2026

Badge (40 variants), Alert (8 variants), Pagination, Checkbox, Radio Button, and Toggle components.

stable
v1.2.0
Feb 2026

Input & Textarea — 36 + 12 variants. Full semantic token coverage.

stable
v1.1.0
Jan 2026

Typography token system with 16 bound text styles. Button LG size.

stable
v1.0.0
Dec 2025

Initial release — colour primitives, semantic tokens, Button component (576 variants).

stable