Design Tokens

Shopware Composable Frontends provides a curated set of color design tokens defined as UnoCSS theme colors. They follow a Material-style naming scheme and serve as the foundation for consistent color usage across all Frontends projects and templates.

Templates like the Vue Starter Template and its extended variant consume these tokens out of the box.

Naming convention

Every token name follows the pattern <category>-<role>[-<variant>].

Category	Purpose	Examples
brand	Primary, secondary, and tertiary brand colours with hover/pressed states	brand-primary, brand-on-secondary
surface	Backgrounds, containers, and their foreground (on-*) counterparts	surface-surface-container-high, surface-on-surface
outline	Borders and dividers	outline-outline, outline-outline-focus
states	Semantic feedback colours — info, success, warning, error	states-error, states-on-warning-container
fixed	Colours that do not change between themes	fixed-fixed-on-image
other	Miscellaneous — sale badges, shadows	other-sale, other-shadow
overlay	Semi-transparent dark/light overlays	overlay-dark-high, overlay-light-low

Usage

Because the tokens are registered as Uno theme.colors, they work with every color utility:

<div class="bg-brand-primary text-brand-on-primary">
  Primary button
</div>

<p class="text-states-error">Something went wrong.</p>

<div class="border border-outline-outline rounded-md">
  Card with outline border
</div>

<div class="bg-overlay-dark-high">
  Dark overlay at 50 % opacity
</div>

Customising tokens

Override or extend tokens in your project's uno.config.ts:

theme: {
  colors: {
    "brand-primary": "#123456",   // overwrite an existing token
    "custom-accent": "#FF00FF",   // add a new token
  },
}

The documentation keeps a copy of the token map in apps/docs/.vitepress/data/design-tokens-colors.ts (aligned with templates/vue-starter-template/uno.config.ts theme.colors). Use the export button below to grab the full snippet ready to paste into your Uno config.

Token reference

Click a swatch to change its color. Copy or download includes your edits.

Brand

Aa

brand-on-primary#FFFFFFbg-brand-on-primary

Aa

brand-on-secondary#3A276Abg-brand-on-secondary

Aa

brand-on-tertiary#1D1B20bg-brand-on-tertiary

Aa

brand-primary#543B95bg-brand-primary

Aa

brand-primary-hover#45317Abg-brand-primary-hover

Aa

brand-primary-pressed#45317Abg-brand-primary-pressed

Aa

brand-secondary#E1D5FFbg-brand-secondary

Aa

brand-secondary-hover#D0BCFCbg-brand-secondary-hover

Aa

brand-secondary-pressed#D0BCFCbg-brand-secondary-pressed

Aa

brand-tertiary#F1F1F1bg-brand-tertiary

Aa

brand-tertiary-hover#E3E3E3bg-brand-tertiary-hover

Aa

brand-tertiary-pressed#E3E3E3bg-brand-tertiary-pressed

Surface

Aa

surface-background#FFFFFFbg-surface-background

Aa

surface-inverse-on-surface#FFFFFFbg-surface-inverse-on-surface

Aa

surface-inverse-surface#322F35bg-surface-inverse-surface

Aa

surface-on-background#1D1B20bg-surface-on-background

Aa

surface-on-surface#1D1B20bg-surface-on-surface

Aa

surface-on-surface-disabled#9893A6bg-surface-on-surface-disabled

Aa

surface-on-surface-primary#3A276Abg-surface-on-surface-primary

Aa

surface-on-surface-variant#696470bg-surface-on-surface-variant

Aa

surface-surface#FFFFFFbg-surface-surface

Aa

surface-surface-container#F3EDF7bg-surface-surface-container

Aa

surface-surface-container-high#ECE6F0bg-surface-surface-container-high

Aa

surface-surface-container-highest#E6E0E9bg-surface-surface-container-highest

Aa

surface-surface-container-low#F7F2FAbg-surface-surface-container-low

Aa

surface-surface-container-lowest#FFFFFFbg-surface-surface-container-lowest

Aa

surface-surface-disabled#E8E8E8bg-surface-surface-disabled

Aa

surface-surface-primary#D0BCFFbg-surface-surface-primary

Aa

surface-surface-variant#FBF6FFbg-surface-surface-variant

Outline

Aa

outline-outline#79747Ebg-outline-outline

Aa

outline-outline-disabled#9893A6bg-outline-outline-disabled

Aa

outline-outline-focus#1722F9bg-outline-outline-focus

Aa

outline-outline-primary#543B95bg-outline-outline-primary

Aa

outline-outline-variant#CAC4D0bg-outline-outline-variant

States

Aa

states-error#D12D24bg-states-error

Aa

states-error-container#F9DEDCbg-states-error-container

Aa

states-error-hover#AB251Dbg-states-error-hover

Aa

states-error-pressed#AB251Dbg-states-error-pressed

Aa

states-info#0288D1bg-states-info

Aa

states-info-container#BBE7FFbg-states-info-container

Aa

states-info-hover#0275B4bg-states-info-hover

Aa

states-info-pressed#0275B4bg-states-info-pressed

Aa

states-on-error#FFFFFFbg-states-on-error

Aa

states-on-error-container#852221bg-states-on-error-container

Aa

states-on-info#FFFFFFbg-states-on-info

Aa

states-on-info-container#013957bg-states-on-info-container

Aa

states-on-success#FFFFFFbg-states-on-success

Aa

states-on-success-container#09480Cbg-states-on-success-container

Aa

states-on-warning#FFFFFFbg-states-on-warning

Aa

states-on-warning-container#874400bg-states-on-warning-container

Aa

states-success#15B31Cbg-states-success

Aa

states-success-container#C9FFCBbg-states-success-container

Aa

states-success-hover#108C16bg-states-success-hover

Aa

states-success-pressed#108C16bg-states-success-pressed

Aa

states-warning#F57C00bg-states-warning

Aa

states-warning-container#FFE1C2bg-states-warning-container

Aa

states-warning-hover#C26200bg-states-warning-hover

Aa

states-warning-pressed#C26200bg-states-warning-pressed

Fixed

Aa

fixed-fixed-on-image#FFFFFFbg-fixed-fixed-on-image

Other

Aa

other-sale#D12D24bg-other-sale

Aa

other-shadow#000000bg-other-shadow

Overlay

Aa

overlay-darkrgba(0, 0, 0, 0.30000001192092896)bg-overlay-dark

Aa

overlay-dark-highrgba(0, 0, 0, 0.5)bg-overlay-dark-high

Aa

overlay-dark-highestrgba(0, 0, 0, 0.75)bg-overlay-dark-highest

Aa

overlay-dark-lowrgba(0, 0, 0, 0.11999999731779099)bg-overlay-dark-low

Aa

overlay-dark-lowestrgba(0, 0, 0, 0.07999999821186066)bg-overlay-dark-lowest

Aa

overlay-lightrgba(255, 255, 255, 0.25)bg-overlay-light

Aa

overlay-light-highrgba(255, 255, 255, 0.5)bg-overlay-light-high

Aa

overlay-light-highestrgba(255, 255, 255, 0.75)bg-overlay-light-highest

Aa

overlay-light-lowrgba(255, 255, 255, 0.11999999731779099)bg-overlay-light-low

Aa

overlay-light-lowestrgba(255, 255, 255, 0.07999999821186066)bg-overlay-light-lowest