Colors
Primitive colour palettes and semantic state tokens for Spryker B2B.
Color palette
10 scales from lightest tint (25) to darkest shade (950). Switch to Semantic view to see which steps are assigned to tokens — never use primitive values directly in components.
Scale: 25 is the lightest tint · 950 is the darkest shade · click any swatch to copy its hex value.
States in practice
Each semantic state uses a coordinated set of background, text, and border tokens — always use them together.
Payment confirmed
Your transaction has been processed successfully.
Success tokens
background.state.success.subtletext.state.successborder.state.successSubscription expiring
Your plan expires in 3 days. Review your options.
Warning tokens
background.state.warning.subtletext.state.warningborder.state.warningAction failed
Unable to save changes. Check your connection.
Error tokens
background.state.error.subtletext.state.errorborder.state.errorMaintenance scheduled
System will be unavailable Sunday, 2–4 AM UTC.
Info tokens
background.state.info.subtletext.state.infoborder.state.info