Introduction
The Spryker B2B Storefront Design System is a shared set of reusable components, patterns, guidance, and code that helps teams build consistent commerce experiences faster. By using common, production-ready assets, designers and developers can spend less time recreating the basics and more time solving real B2B commerce needs.
Core principles
- Token-driven: Every design decision is a named variable, not a hardcoded value.
- Accessible by default: Components meet WCAG 2.1 AA standards.
- Composable: Small, focused components combine into patterns.
- B2B focused: Designed for enterprise-grade, data-dense UIs.
How the system is organised
| Layer | Includes |
|---|---|
| Tokens | Primitive values and semantic aliases |
| Foundations | Color, typography, spacing, radius, elevation |
| Components | Reusable UI building blocks |
| Patterns | Common solutions for product flows |
Quick start
Using tokens
Start with semantic tokens. Use semantic tokens in components instead of raw values. They express intent and make the system easier to scale and maintain.
System layers
The design system follows a strict layering model:
- Primitives — Raw named values (e.g.
dark-cyan/80 = #315e59) - Semantic — Purpose aliases (e.g.
background/brand/primary = {dark-cyan/80}) - Components — UI building blocks that consume semantic tokens
- Patterns — Composed components solving specific UX problems
- Product — The final application, built from patterns