All tokens

color

• Use for resting primary interactive elements.
  color/brand/500

  color/brand/500
• Use for hovered primary interactive elements.
  color/brand/600

  color/brand/600
• Use for pressed (active) primary interactive elements.
  color/brand/700

  color/brand/700
• Use for disabled primary interactive elements.
  color/brand/300

  color/brand/300
• Use for resting secondary interactive elements.
  color/zinc/0

  color/zinc/0
• Use for hovered secondary interactive elements.
  color/zinc/75

  color/zinc/75
• Use for pressed (active) secondary interactive elements.
  color/zinc/100

  color/zinc/100
• Use for disabled secondary interactive elements.
  color/zinc/100

  color/zinc/100
• Deprecated: Please use `color/interaction/secondary/default` for interactive elements and `color/background/tertiary/default` for non-interactive elements instead.
  color/zinc/75

  color/zinc/75
• Use for resting critical interactive elements.
  color/red/500

  color/red/500
• Use for hovered critical interactive elements.
  color/red/600

  color/red/600
• Use for pressed (active) critical interactive elements.
  color/red/700

  color/red/700
• Use for disabled critical interactive elements.
  color/red/200

  color/red/200
• Use for surfaces of visually sunken elements like highlighted or separated areas within other surfaces.
  color/zinc/50

  color/zinc/50
• Use for main application or page backgrounds.
  color/zinc/0

  color/zinc/0
• Deprecated: There is no direct replacement.
  color/zinc/200

  color/zinc/200
• Deprecated: There is no direct replacement.
  color/zinc/100

  color/zinc/100
• Use for surfaces of visually raised elements like cards or similar.
  color/zinc/0

  color/zinc/0
• Deprecated: Please use `color/elevation/surface/raised` for large elements and `color/background/primary/default` for small and form elements instead.
  color/zinc/0

  color/zinc/0
• Deprecated: There is no direct replacement.
  color/zinc/50

  color/zinc/50
• Deprecated: Please use `color/elevation/backdrop/default` instead.
  color/zinc/975

  color/zinc/975
• Deprecated: Please use `color/elevation/floating/default` instead.
  color/elevation/floating/default

  color/elevation/floating/default
• Use for elements that overlay large portions of the application while a modal or similar is open.
  #10101399

  #10101399
• Use for floating elements such as tooltips that require high emphasis against the application colors.
  color/zinc/850

  color/zinc/850
• Use for shadow of elevated elements like modals, popovers or similar.
  #1010131a

  #1010131a
• Use for background of neutral elements.
  color/zinc/0

  color/zinc/0
• Deprecated: Please use `color/background/tertiary/default` instead.
  color/background/tertiary/default

  color/background/tertiary/default
• Use for background of neutral elements.
  color/zinc/50

  color/zinc/50
• Use for background of neutral elements or for elements in a disabled state.
  color/zinc/75

  color/zinc/75
• Use for background of elements in an information state.
  color/brand/50

  color/brand/50
• Use for background of elements in critical or error states.
  color/red/50

  color/red/50
• Deprecated: Please use `color/background/critical/default` instead.
  color/background/critical/default

  color/background/critical/default
• Use for background of elements in attention or warning states.
  color/orange/50

  color/orange/50
• Use for background of elements in positive or success states.
  color/green/50

  color/green/50
• Use for background of elements indicating Shopware’s inheritance behavior.
  color/purple/100

  color/purple/100
• Use for icons.
  color/zinc/900

  color/zinc/900
• Use for disabled icons.
  color/zinc/300

  color/zinc/300
• Use for icons on inverse backgrounds.
  color/zinc/50

  color/zinc/50
• Use for secondary icons.
  color/zinc/600

  color/zinc/600
• Use for disabled secondary icons.
  color/zinc/300

  color/zinc/300
• Use for secondary icons on inverse backgrounds.
  color/zinc/400

  color/zinc/400
• Use for icons indicating an information state.
  color/brand/500

  color/brand/500
• Use for icons indicating a hovered information state.
  color/brand/600

  color/brand/600
• Use for icons indicating a pressed (active) information state.
  color/brand/700

  color/brand/700
• Use for icons indicating a disabled information state.
  color/brand/300

  color/brand/300
• Use for icons indicating critical or error states.
  color/red/500

  color/red/500
• Deprecated: There is no direct replacement. Icons in links should use the corresponding text color.
  color/red/600

  color/red/600
• Use for icons indicating disabled, critical or error states.
  color/red/300

  color/red/300
• Use for icons indicating attention or warning states.
  color/orange/500

  color/orange/500
• Use for icons indicating positive or success states.
  color/green/500

  color/green/500
• Use for icons indicating Shopware’s inheritance behavior.
  color/purple/700

  color/purple/700
• Deprecated: Please use `color/static/white` instead.
  color/static/white

  color/static/white
• Deprecated: Please use `color/static/black` instead.
  color/static/black

  color/static/black
• Deprecated: Please use `color/icon/primary/inverse` instead.
  color/icon/primary/inverse

  color/icon/primary/inverse
• Use for border of elements with high emphasis like secondary buttons, form fields or similar.
  color/zinc/200

  color/zinc/200
• Use for border of elements with low emphasis like sections dividers, cards, sidebars or similar.
  color/zinc/100

  color/zinc/100
• Deprecated: Please use `color/border/brand/default` instead.
  color/border/brand/default

  color/border/brand/default
• Use for border of focused, selected or brand-highlighted elements.
  color/brand/500

  color/brand/500
• Use for border of disabled brand-highlighted elements.
  color/brand/300

  color/brand/300
• Use for border of elements in critical or error states.
  color/red/500

  color/red/500
• Deprecated: Please use `color/border/critical/default` instead.
  color/red/800

  color/red/800
• Use for border of elements in disabled, critical or error states.
  color/red/300

  color/red/300
• Use for border of elements in attention or warning states.
  color/orange/500

  color/orange/500
• Use for border of elements in positive or success states.
  color/green/500

  color/green/500
• Use for border of elements indicating Shopware’s inheritance behavior.
  color/purple/500

  color/purple/500
• Use for high-emphasis text like body copy and headlines.
  color/zinc/900

  color/zinc/900
• Use for text indicating disabled states of parent elements.
  color/zinc/300

  color/zinc/300
• Use for text on inverse backgrounds.
  color/zinc/50

  color/zinc/50
• Use for supporting or secondary text content.
  color/zinc/600

  color/zinc/600
• Use for supporting or secondary text content in disabled parent elements.
  color/zinc/300

  color/zinc/300
• Use for secondary text on inverse backgrounds.
  color/zinc/400

  color/zinc/400
• Deprecated: Please use `color/text/secondary/default` instead.
  color/text/secondary/default

  color/text/secondary/default
• Use for text indicating a link or action.
  color/brand/500

  color/brand/500
• Use for hovered text indicating a link or action.
  color/brand/600

  color/brand/600
• Use for pressed (active) text indicating a link or action.
  color/brand/700

  color/brand/700
• Use for disabled text indicating a link or action.
  color/brand/300

  color/brand/300
• Use for text indicating a link or interaction on inverse backgrounds.
  color/brand/400

  color/brand/400
• Use for text indicating critical or error states or an action.
  color/red/500

  color/red/500
• Use for hovered text indicating critical or error states or an action.
  color/red/600

  color/red/600
• Use for pressed (active) text indicating critical or error states or an action.
  color/red/700

  color/red/700
• Use for disabled text indicating critical or error states or an action.
  color/red/300

  color/red/300
• Deprecated: Please use `color/text/critical/default` instead.
  color/text/critical/default

  color/text/critical/default
• Deprecated: There is no direct replacement.
  color/orange/800

  color/orange/800
• Deprecated: There is no direct replacement.
  color/green/800

  color/green/800
• Use for text indicating Shopware’s inheritance behavior.
  color/purple/700

  color/purple/700
• Deprecated: Please use `color/static/white` instead.
  color/static/white

  color/static/white
• Deprecated: Please use `color/static/black` instead.
  color/static/black

  color/static/black
• Deprecated: Please use `color/text/primary/inverse` instead.
  color/text/primary/inverse

  color/text/primary/inverse
• Use for elements unaffected by theme changes with white color.
  color/zinc/0

  color/zinc/0
• Use for elements unaffected by theme changes with almost black color.
  color/zinc/1000

  color/zinc/1000

font

• Use for headings.

  Aa

  Inter

  Aa

  Inter
• Use for body text.

  Aa

  Inter

  Aa

  Inter
• Use for supporting text content.

  Aa

  scale/size/12

  Aa

  scale/size/12
• Use for body copy.

  Aa

  scale/size/14

  Aa

  scale/size/14
• Use for slightly larger body copy or small headlines.

  Aa

  scale/size/16

  Aa

  scale/size/16
• Use for headlines separating content sections from each other like cards or similar.

  Aa

  scale/size/18

  Aa

  scale/size/18
• Use for headlines introducing pages or larger groups of content.

  Aa

  scale/size/20

  Aa

  scale/size/20
• Use for headlines in larger marketing elements.

  Aa

  scale/size/24

  Aa

  scale/size/24
• Use for headlines in larger marketing elements.

  Aa

  scale/size/28

  Aa

  scale/size/28
• Use for headlines in larger marketing elements.

  Aa

  scale/size/32

  Aa

  scale/size/32
• Use for text with default emphasis.

  Aa

  font/weight/400

  Aa

  font/weight/400
• Use for text with slightly higher emphasis.

  Aa

  font/weight/500

  Aa

  font/weight/500
• Use for text with high emphasis.

  Aa

  font/weight/600

  Aa

  font/weight/600
• Use for text with highest emphasis.

  Aa

  font/weight/700

  Aa

  font/weight/700
• Use for the line height for text size 2xs.

  Aa

  scale/size/18

  Aa

  scale/size/18
• Use for the line height for text size xs.

  Aa

  scale/size/22

  Aa

  scale/size/22
• Use for the line height for text size s.

  Aa

  scale/size/26

  Aa

  scale/size/26
• Use for the line height for text size m.

  Aa

  scale/size/28

  Aa

  scale/size/28
• Use for the line height for text size l.

  Aa

  scale/size/30

  Aa

  scale/size/30
• Use for the line height for text size xl.

  Aa

  scale/size/32

  Aa

  scale/size/32
• Use for the line height for text size 2xl.

  Aa

  scale/size/36

  Aa

  scale/size/36
• Use for the line height for text size 3xl.

  Aa

  scale/size/40

  Aa

  scale/size/40

border-radius

• Use for border radius of cards or similar.
  border-radius/m

  border-radius/m
• Deprecated: Please use `border radius/xs` instead.
  border-radius/xs

  border-radius/xs
• Use for border radius of buttons or similar.
  border-radius/xs

  border-radius/xs
• Use for border radius of checkboxes or similar.
  border-radius/xs

  border-radius/xs
• Use for elements that should not have a border radius applied.
  scale/size/0

  scale/size/0
• Use for border radius of extra small elements.
  scale/size/2

  scale/size/2
• Use for border radius of small elements.
  scale/size/4

  scale/size/4
• Use for border radius of larger elements.
  scale/size/6

  scale/size/6
• Use for border radius of medium sized elements.
  scale/size/8

  scale/size/8
• Use for border radius of large elements.
  scale/size/12

  scale/size/12
• Use for border radius of extra large elements.
  scale/size/16

  scale/size/16
• Use for border radius of extra large elements.
  scale/size/20

  scale/size/20
• Use for border radius of extra large elements.
  scale/size/24

  scale/size/24
• Use for border radius of extra large elements.
  scale/size/32

  scale/size/32
• Use for border radius of fully rounded elements like pills or similar.
  scale/size/9999

  scale/size/9999