A list of all public-facing SWAN tokens. For more detailed information on the token architecture, see: Tokens.
The tokens listed below are language-agnostic, and must be prefixed with 'swan' appropriately. For example, base.color.transparent listed below is equivalent to $swan-base-color-transparent in SCSS, and SwanBaseColorTransparent in JS.
The default token value in the tokens table is set according to the large screen breakpoint (lg) in the range of 1440 pixels to 1919 pixels (inclusive).
Hide deprecated tokens
Border - Radius
Token
Standard Mode
Compact Mode
base.border.radius.0
base.border.radius.100
base.border.radius.200
base.border.radius.300
base.border.radius.400
base.border.radius.max
sem.border.radius.none
Removes existing border radii
sem.border.radius.subtle
A smaller border radius than standard. Use to decrease emphasis relative to other UI
sem.border.radius.standard
Default border radius
sem.border.radius.strong
A larger border radius than standard. Use to increase emphasis relative to other UI
sem.border.radius.rounded
Maximum radius for fully rounded borders
sem.border.radius.action
Border radius for UI that evokes an action, such as Button, Pagination, ZoomControls, etc
sem.border.radius.input
Border radius for text input UI, such as Combobox, Dropdown, TextInput, etc
sem.border.radius.container
Border radius for UI that contains content or other components, such as Accordion, Card, Popover, etc
Border - Width
Token
Standard Mode
base.border.width.0
base.border.width.100
base.border.width.200
sem.border.width.none
Removes existing border width
sem.border.width.standard
Default border width
sem.border.width.strong
A larger border width than standard. Use to increase emphasis relative to other UI
sem.border.width.input
Border width for text input UI, such as Combobox, Dropdown, TextInput, etc
sem.border.width.action
Border width for UI that evokes an action, such as Button, Pagination, ZoomControls, etc
sem.border.width.partition
Border width for UI that separates elements, such as Divider, Table, etc
sem.border.width.floating
Border width for UI that overlays content, such as Menu, Popover, etc
sem.border.width.selected
Border width for UI that is selected
Breakpoint
Token
Standard Mode
base.breakpoint.xs.start
base.breakpoint.xs.end
base.breakpoint.sm.start
base.breakpoint.sm.end
base.breakpoint.md.start
base.breakpoint.md.end
base.breakpoint.lg.start
base.breakpoint.lg.end
base.breakpoint.xl.start
Color
Token
Standard Mode
Dark Mode
base.color.transparent
base.color.black
base.color.white
base.color.neutral.1
Dark Mode
base.color.neutral.2
Dark Mode
base.color.neutral.3
Dark Mode
base.color.error.1
Dark Mode
base.color.error.2
Dark Mode
base.color.error.3
Dark Mode
base.color.destructive.1
Dark Mode
base.color.destructive.2
Dark Mode
base.color.destructive.3
Dark Mode
base.color.warning.1
Dark Mode
base.color.warning.2
Dark Mode
base.color.warning.3
Dark Mode
base.color.help.1
Dark Mode
base.color.help.2
Dark Mode
base.color.help.3
Dark Mode
base.color.success.1
Dark Mode
base.color.success.2
Dark Mode
base.color.success.3
Dark Mode
base.color.promo.1
Dark Mode
base.color.promo.2
Dark Mode
base.color.promo.3
Dark Mode
base.color.info.1
Dark Mode
base.color.info.2
Dark Mode
base.color.info.3
Dark Mode
Color - Background
Token
Standard Mode
Dark Mode
sem.color.bg.none
Removes existing background color. Can be paired with hover and active interaction states
sem.color.bg.standard
Default background color
Dark Mode
sem.color.bg.strong
A darker background color than standard. Use to increase emphasis relative to other UI
Dark Mode
sem.color.bg.disabled
Disabled background color
Dark Mode
sem.color.bg.selected-blue
Selected background color
sem.color.bg.selected-strong-paired
Selected background color. Role colors with "paired" in their name must be used together as they require specific color pairings to meet accessibility contrast requirements in both Standard and Dark modes.
sem.color.bg.accent
Background color to signify a standout area or a brand moment
sem.color.bg.accent-strong-paired
Background color to signify a standout area or a brand moment. Role colors with "paired" in their name must be used together as they require specific color pairings to meet accessibility contrast requirements in both Standard and Dark modes.
Dark Mode
sem.color.bg.error
Background color to signify a negative outcome, e.g. user data cannot be submitted
sem.color.bg.error-strong-paired
Background color to signify a negative outcome, e.g. user data cannot be submitted. Role colors with "paired" in their name must be used together as they require specific color pairings to meet accessibility contrast requirements in both Standard and Dark modes.
sem.color.bg.warning
Background color to signify caution of a possible action
sem.color.bg.warning-strong-paired
Background color to signify caution of a possible action. Role colors with "paired" in their name must be used together as they require specific color pairings to meet accessibility contrast requirements in both Standard and Dark modes.
Dark Mode
sem.color.bg.success
Background color to signify a positive outcome, e.g. user data successfully submitted
sem.color.bg.success-strong-paired
Background color to signify a positive outcome, e.g. user data successfully submitted. Role colors with "paired" in their name must be used together as they require specific color pairings to meet accessibility contrast requirements in both Standard and Dark modes.
sem.color.bg.promo
Background color to signify promotional content, e.g. discounts
sem.color.bg.promo-strong-paired
Background color to signify promotional content, e.g. discounts. Role colors with "paired" in their name must be used together as they require specific color pairings to meet accessibility contrast requirements in both Standard and Dark modes.
sem.color.bg.help
Background color to signify content relating to user help, e.g. CARE
sem.color.bg.help-strong-paired
Background color to signify content relating to user help, e.g. CARE. Role colors with "paired" in their name must be used together as they require specific color pairings to meet accessibility contrast requirements in both Standard and Dark modes.
Dark Mode
sem.color.bg.info
Background color to signify neutral information
sem.color.bg.info-strong-paired
Background color to signify neutral information. Role colors with "paired" in their name must be used together as they require specific color pairings to meet accessibility contrast requirements in both Standard and Dark modes.
sem.color.bg.destructive
Background color to signify that an action will destroy data
sem.color.bg.destructive-strong-paired
Background color to signify that an action will destroy data. Role colors with "paired" in their name must be used together as they require specific color pairings to meet accessibility contrast requirements in both Standard and Dark modes.
sem.color.bg.sustainability
Background color to signify sustainability-related content
Dark Mode
sem.color.bg.action
Background color for UI that evokes an action, such as Button, Pagination, ZoomControls, etc
sem.color.bg.control
Background color for non-text input UI, such as Checkbox, ColorSwatches, ToggleSwitch, etc
sem.color.bg.input
Background color for text input UI, such as Combobox, Dropdown, TextInput, etc
sem.color.bg.container
Background color for UI that contains content or other components, such as Accordion, Card, Popover, etc
sem.color.bg.page
Default background color for pages
sem.color.bg.none-hover
sem.color.bg.none-active
sem.color.bg.standard-hover
sem.color.bg.standard-active
sem.color.bg.strong-hover
sem.color.bg.strong-active
sem.color.bg.selected-hover
sem.color.bg.selected-active
sem.color.bg.selected-accent-hover
sem.color.bg.selected-accent-active
sem.color.bg.selected-blue-hover
sem.color.bg.selected-blue-active
sem.color.bg.selected-strong-hover-paired
sem.color.bg.selected-strong-active-paired
sem.color.bg.accent-strong-hover-paired
sem.color.bg.accent-strong-active-paired
sem.color.bg.destructive-strong-hover-paired
sem.color.bg.destructive-strong-active-paired
sem.color.bg.action-hover
sem.color.bg.action-active
sem.color.bg.control-hover
sem.color.bg.control-active
sem.color.bg.input-hover
sem.color.bg.input-active
Color - Border
Token
Standard Mode
sem.color.border.none
Removes existing border color. Can be paired with hover and active interaction states
sem.color.border.standard
Default border color
sem.color.border.strong
A darker border color than standard. Use to increase emphasis relative to other UI
sem.color.border.disabled
Disabled border color
sem.color.border.selected-blue
Selected border color
sem.color.border.selected-strong-paired
Selected border color. Role colors with "paired" in their name must be used together as they require specific color pairings to meet accessibility contrast requirements in both Standard and Dark modes.
sem.color.border.accent
Border color to signify a standout area or a brand moment
sem.color.border.accent-strong-paired
Border color to signify a standout area or a brand moment. Role colors with "paired" in their name must be used together as they require specific color pairings to meet accessibility contrast requirements in both Standard and Dark modes.
sem.color.border.error
Border color to signify a negative outcome, e.g. user data cannot be submitted
sem.color.border.error-strong-paired
Border color to signify a negative outcome, e.g. user data cannot be submitted. Role colors with "paired" in their name must be used together as they require specific color pairings to meet accessibility contrast requirements in both Standard and Dark modes.
sem.color.border.warning
Border color to signify caution of a possible action
sem.color.border.warning-strong-paired
Border color to signify caution of a possible action. Role colors with "paired" in their name must be used together as they require specific color pairings to meet accessibility contrast requirements in both Standard and Dark modes.
sem.color.border.success
Border color to signify a positive outcome, e.g. user data successfully submitted
sem.color.border.success-strong-paired
Border color to signify a positive outcome, e.g. user data successfully submitted. Role colors with "paired" in their name must be used together as they require specific color pairings to meet accessibility contrast requirements in both Standard and Dark modes.
sem.color.border.promo
Border color to signify promotional content, e.g. discounts
sem.color.border.promo-strong-paired
Border color to signify promotional content, e.g. discounts. Role colors with "paired" in their name must be used together as they require specific color pairings to meet accessibility contrast requirements in both Standard and Dark modes.
sem.color.border.help
Border color to signify content relating to user help, e.g. CARE
sem.color.border.help-strong-paired
Border color to signify content relating to user help, e.g. CARE. Role colors with "paired" in their name must be used together as they require specific color pairings to meet accessibility contrast requirements in both Standard and Dark modes.
sem.color.border.info
Border color to signify neutral information
sem.color.border.info-strong-paired
Border color to signify neutral information. Role colors with "paired" in their name must be used together as they require specific color pairings to meet accessibility contrast requirements in both Standard and Dark modes.
sem.color.border.destructive
Border color to signify that an action will destroy data
sem.color.border.destructive-strong-paired
Border color to signify that an action will destroy data. Role colors with "paired" in their name must be used together as they require specific color pairings to meet accessibility contrast requirements in both Standard and Dark modes.
sem.color.border.action
Border color for UI that evokes an action, such as Button, Pagination, ZoomControls, etc
sem.color.border.control
Border color for non-text input UI, such as Checkbox, ColorSwatches, ToggleSwitch, etc
sem.color.border.input
Border color for text input UI, such as Combobox, Dropdown, TextInput, etc
sem.color.border.input-error
Error state paired with sem.color.border.input
sem.color.border.container
Border color for UI that contains content or other components, such as Accordion, Card, Popover, etc
sem.color.border.partition
Border color for UI that separates elements, such as Divider, Table, etc
sem.color.border.none-hover
sem.color.border.none-active
sem.color.border.standard-hover
sem.color.border.standard-active
sem.color.border.strong-hover
sem.color.border.strong-active
sem.color.border.selected-hover
sem.color.border.selected-active
sem.color.border.selected-accent-hover
sem.color.border.selected-accent-active
sem.color.border.selected-blue-hover
sem.color.border.selected-blue-active
sem.color.border.selected-strong-hover-paired
sem.color.border.selected-strong-active-paired
sem.color.border.accent-strong-hover-paired
sem.color.border.accent-strong-active-paired
sem.color.border.destructive-strong-hover-paired
sem.color.border.destructive-strong-active-paired
sem.color.border.action-hover
sem.color.border.action-active
sem.color.border.control-hover
sem.color.border.control-active
sem.color.border.input-hover
sem.color.border.input-active
Color - Brand
Token
Standard Mode
Dark Mode
base.color.accent.1
Dark Mode
base.color.accent.2
Dark Mode
base.color.accent.3
Dark Mode
sem.color.bg.brand-paired
sem.color.bg.surface.light.1
Light surface background color
Dark Mode
sem.color.bg.surface.dark.1
Dark surface background color, level 1
Dark Mode
sem.color.bg.surface.dark.2
Dark surface background color, level 2
Dark Mode
sem.color.border.brand-paired
Border color for brand moments — matches the brand-paired background
sem.color.fg.brand-paired
Foreground color for use on brand-paired backgrounds
Color - Fg
Token
Standard Mode
Dark Mode
sem.color.fg.standard
Default foreground color for text and icons
Dark Mode
sem.color.fg.subtle
A lighter foreground color than standard. Use to decrease emphasis relative to other UI
sem.color.fg.inverse
Foreground color for use on strong-paired backgrounds (except warning)
Dark Mode
sem.color.fg.input
Foreground color for text input UI, such as Combobox, Dropdown, TextInput, etc
sem.color.fg.placeholder
Placeholder text color
sem.color.fg.selected
Selected foreground color
sem.color.fg.selected-strong-paired
Selected foreground color. Role colors with "paired" in their name must be used together as they require specific color pairings to meet accessibility contrast requirements in both Standard and Dark modes.
sem.color.fg.accent-strong-paired
Foreground color to signify a standout area or a brand moment. Role colors with "paired" in their name must be used together as they require specific color pairings to meet accessibility contrast requirements in both Standard and Dark modes.
sem.color.fg.error-strong-paired
Foreground color to signify a negative outcome, e.g. user data cannot be submitted. Role colors with "paired" in their name must be used together as they require specific color pairings to meet accessibility contrast requirements in both Standard and Dark modes.
sem.color.fg.warning-strong-paired
Foreground color to signify caution of a possible action. Role colors with "paired" in their name must be used together as they require specific color pairings to meet accessibility contrast requirements in both Standard and Dark modes.
sem.color.fg.success-strong-paired
Foreground color to signify a positive outcome, e.g. user data successfully submitted. Role colors with "paired" in their name must be used together as they require specific color pairings to meet accessibility contrast requirements in both Standard and Dark modes.
sem.color.fg.promo-strong-paired
Foreground color to signify promotional content, e.g. discounts. Role colors with "paired" in their name must be used together as they require specific color pairings to meet accessibility contrast requirements in both Standard and Dark modes.
sem.color.fg.help-strong-paired
Foreground color to signify content relating to user help, e.g. CARE. Role colors with "paired" in their name must be used together as they require specific color pairings to meet accessibility contrast requirements in both Standard and Dark modes.
sem.color.fg.info-strong-paired
Foreground color to signify neutral information. Role colors with "paired" in their name must be used together as they require specific color pairings to meet accessibility contrast requirements in both Standard and Dark modes.
sem.color.fg.destructive-strong-paired
Foreground color to signify that an action will destroy data. Role colors with "paired" in their name must be used together as they require specific color pairings to meet accessibility contrast requirements in both Standard and Dark modes.
sem.color.fg.accent
Foreground color to signify a standout area or a brand moment
sem.color.fg.error
Foreground color to signify a negative outcome, e.g. user data cannot be submitted
sem.color.fg.warning
Foreground color to signify caution of a possible action
sem.color.fg.success
Foreground color to signify a positive outcome, e.g. user data successfully submitted
sem.color.fg.promo
Foreground color to signify promotional content, e.g. discounts
sem.color.fg.help
Foreground color to signify content relating to user help, e.g. CARE
sem.color.fg.info
Foreground color to signify neutral information
sem.color.fg.destructive
Foreground color to signify that an action will destroy data
sem.color.fg.sustainability
Foreground color to signify sustainability-related information
Dark Mode
sem.color.fg.action
Foreground color for UI that evokes an action, such as Button, Pagination, ZoomControls, etc
sem.color.fg.disabled
Disabled foreground color
sem.color.fg.link
Link foreground color
sem.color.fg.link-hover
Hover state paired with sem.color.fg.link
sem.color.fg.link-active
Active state paired with sem.color.fg.link
sem.color.fg.standard-hover
sem.color.fg.standard-active
Elevation
Token
Standard Mode
Dark Mode
sem.elevation.none
Removes existing shadow
sem.elevation.subtle
A smaller shadow than standard. Use to decrease emphasis relative to other raised UI
Dark Mode
sem.elevation.standard
Default shadow for any object that is raised off the page
Dark Mode
sem.elevation.strong
A larger shadow than standard. Use to increase emphasis relative to other raised UI
Dark Mode
sem.elevation.floating
Shadow for UI that overlays content, such as Menu, Popover, etc
sem.elevation.overlay
Shadow for UI that overlays an entire page, such as ModalDialog, etc
sem.elevation.scroll.horizontal
Shadow for UI that indicates additional content when scrolled
Focus
Token
sem.focus.standard
Default focus ring styling
sem.focus.inset
An inset variant of focus ring for use in specialised cases
sem.focus.tight
Removes the inner white ring for use in specialised cases
Focus - Border
Token
sem.focus.border.radius
Focus ring border radius
sem.focus.border.width.inner
Inner focus ring border width. Use for focus padding calculations.
sem.focus.border.width.outer
Outer focus ring border width. Use for focus padding calculations.
Focus - Color
Token
sem.focus.color.inner
Focus ring inner color
sem.focus.color.outer
Focus ring outer color
Font - Family
Token
Standard Mode
base.font.family.primary
Aa
base.font.family.secondary
Aa
Font - LetterSpacing
Token
Standard Mode
base.font.letter-spacing.100
Aa
base.font.letter-spacing.200
Aa
base.font.letter-spacing.300
Aa
base.font.letter-spacing.025
Aa
base.font.letter-spacing.050
Aa
base.font.letter-spacing.075
Aa
Font - LineHeight
Token
Standard Mode
base.font.line-height.100
Aa
base.font.line-height.200
Aa
base.font.line-height.300
Aa
base.font.line-height.400
Aa
base.font.line-height.500
Aa
base.font.line-height.075
Aa
Font - Size
Token
Standard Mode
Compact Mode
base.font.size.100
Aa
base.font.size.200
Aa
base.font.size.300
Aa
base.font.size.400
Aa
base.font.size.500
Aa
base.font.size.600
Aa
base.font.size.700
Aa
base.font.size.800
Aa
base.font.size.900
Aa
base.font.size.1000
Aa
base.font.size.050
Aa
base.font.size.075
Aa
sem.font.size.x5large
Aa
Aa
sem.font.size.x4large
Aa
Aa
sem.font.size.x3large
Aa
Aa
sem.font.size.x2large
Aa
Aa
sem.font.size.xlarge
Aa
Aa
sem.font.size.large
Aa
Aa
sem.font.size.standard
Aa
Aa
sem.font.size.small
Aa
Aa
sem.font.size.xsmall
Aa
Font - Skin
Token
Standard Mode
sem.font.skin.title.hero.font-family
Aa
sem.font.skin.title.hero.font-size
Aa
sem.font.skin.title.hero.font-weight
Aa
sem.font.skin.title.hero.letter-spacing
Aa
sem.font.skin.title.hero.line-height
Aa
sem.font.skin.title.hero.case
Aa
sem.font.skin.title.display.font-family
Aa
sem.font.skin.title.display.font-size
Aa
sem.font.skin.title.display.font-weight
Aa
sem.font.skin.title.display.letter-spacing
Aa
sem.font.skin.title.display.line-height
Aa
sem.font.skin.title.display.case
Aa
sem.font.skin.title.headline.font-family
Aa
sem.font.skin.title.headline.font-size
Aa
sem.font.skin.title.headline.font-weight
Aa
sem.font.skin.title.headline.letter-spacing
Aa
sem.font.skin.title.headline.line-height
Aa
sem.font.skin.title.headline.case
Aa
sem.font.skin.title.section.font-family
Aa
sem.font.skin.title.section.font-size
Aa
sem.font.skin.title.section.font-weight
Aa
sem.font.skin.title.section.letter-spacing
Aa
sem.font.skin.title.section.line-height
Aa
sem.font.skin.title.section.case
Aa
sem.font.skin.title.subsection.font-family
Aa
sem.font.skin.title.subsection.font-size
Aa
sem.font.skin.title.subsection.font-weight
Aa
sem.font.skin.title.subsection.letter-spacing
Aa
sem.font.skin.title.subsection.line-height
Aa
sem.font.skin.title.subsection.case
Aa
sem.font.skin.title.item.font-family
Aa
sem.font.skin.title.item.font-size
Aa
sem.font.skin.title.item.font-weight
Aa
sem.font.skin.title.item.letter-spacing
Aa
sem.font.skin.title.item.line-height
Aa
sem.font.skin.title.item.case
Aa
sem.font.skin.body.standard.font-family
Aa
sem.font.skin.body.standard.font-size
Aa
sem.font.skin.body.standard.font-weight
Aa
sem.font.skin.body.standard.letter-spacing
Aa
sem.font.skin.body.standard.line-height
Aa
sem.font.skin.body.standard.case
Aa
sem.font.skin.body.standard-bold.font-family
Aa
sem.font.skin.body.standard-bold.font-size
Aa
sem.font.skin.body.standard-bold.font-weight
Aa
sem.font.skin.body.standard-bold.letter-spacing
Aa
sem.font.skin.body.standard-bold.line-height
Aa
sem.font.skin.body.standard-bold.case
Aa
sem.font.skin.body.small.font-family
Aa
sem.font.skin.body.small.font-size
Aa
sem.font.skin.body.small.font-weight
Aa
sem.font.skin.body.small.letter-spacing
Aa
sem.font.skin.body.small.line-height
Aa
sem.font.skin.body.small.case
Aa
sem.font.skin.body.small-bold.font-family
Aa
sem.font.skin.body.small-bold.font-size
Aa
sem.font.skin.body.small-bold.font-weight
Aa
sem.font.skin.body.small-bold.letter-spacing
Aa
sem.font.skin.body.small-bold.line-height
Aa
sem.font.skin.body.small-bold.case
Aa
sem.font.skin.footnote.font-family
Aa
sem.font.skin.footnote.font-size
Aa
sem.font.skin.footnote.font-weight
Aa
sem.font.skin.footnote.letter-spacing
Aa
sem.font.skin.footnote.line-height
Aa
sem.font.skin.footnote.case
Aa
sem.font.skin.footnote-bold.font-family
Aa
sem.font.skin.footnote-bold.font-size
Aa
sem.font.skin.footnote-bold.font-weight
Aa
sem.font.skin.footnote-bold.letter-spacing
Aa
sem.font.skin.footnote-bold.line-height
Aa
sem.font.skin.footnote-bold.case
Aa
Font - Weight
Token
Standard Mode
base.font.weight.normal
Aa
base.font.weight.bold
Aa
Media query
Token
sem.mq.eq.xl
sem.mq.eq.lg
sem.mq.eq.md
sem.mq.eq.sm
sem.mq.eq.xs
sem.mq.gt.xl
sem.mq.gt.lg
sem.mq.gt.md
sem.mq.gt.sm
sem.mq.gt.xs
sem.mq.gte.xl
sem.mq.gte.lg
sem.mq.gte.md
sem.mq.gte.sm
sem.mq.gte.xs
sem.mq.lt.xl
sem.mq.lt.lg
sem.mq.lt.md
sem.mq.lt.sm
sem.mq.lte.lg
sem.mq.lte.md
sem.mq.lte.sm
sem.mq.lte.xs
Size
Token
sem.size.icon.standard
Default icon size. Smaller on XS, SM, and Compact.
sem.size.icon.dynamic
Icon size based off the line-height of the parent element. Requires a fallback when used, due to browser support (Safari 16.4+).
sem.size.icon.stroke-width
sem.size.icon.small
Small icon size. Smaller on XS, SM, and Compact.
sem.size.illustration.standard
Standard illustration size. Smaller on XS, SM, and Compact.
sem.size.illustration.large
Large illustration size. Smaller on XS, SM, and Compact.
sem.size.control
Size for non-text input UI, such as Checkbox, ColorSwatches, ToggleSwitch, etc
sem.size.action.inner.height
Inner height for UI that evokes an action, such as Button, Pagination, ZoomControls, etc. Can also be used in a min-width calculation to enforce square minimum sizing
sem.size.input.inner.height
Inner height for text input UI, such as Combobox, Dropdown, TextInput, etc
sem.size.click-target.min-height
sem.size.click-target.min-width
Space
Token
Standard Mode
Compact Mode
base.space.0
base.space.100
base.space.150
base.space.200
base.space.300
base.space.400
base.space.550
base.space.700
base.space.900
base.space.1200
base.space.1600
base.space.025
base.space.050
base.space.075
sem.space.1
sem.space.2
sem.space.3
sem.space.4
sem.space.5
sem.space.6
sem.space.7
sem.space.8
sem.space.9
sem.space.10
sem.space.11
sem.space.12
sem.space.none
Removes existing spacing
sem.space.between.columns
sem.space.between.sections
sem.space.between.subsections
sem.space.between.actions
sem.space.between.icon-and-text
sem.space.to.actions
sem.space.inner.input.horizontal
sem.space.inner.input.vertical
sem.space.inner.action.horizontal
sem.space.inner.action.vertical
Z-index
Token
sem.z-index.raised
Stacking for UI that overlays the default stacking layer
sem.z-index.link-covering
Stacking for link covering
sem.z-index.overlay
Stacking for UI that overlays an entire page, such as ModalDialog, etc
sem.z-index.floating
Stacking for UI that overlays content, such as Menu, Popover, etc
