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 SASS, 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).
Border - Radius
Token
Standard Mode
Compact Mode
base.border.radius.0
0px
base.border.radius.100
4px
base.border.radius.200
8px
base.border.radius.300
12px
base.border.radius.400
16px
base.border.radius.max
9999px
sem.border.radius.none
Removes existing border radii
{base.border.radius.0}
sem.border.radius.subtle
A smaller border radius than standard. Use to decrease emphasis relative to other UI
{base.border.radius.100}
sem.border.radius.standard
Default border radius
{base.border.radius.200}
sem.border.radius.strong
A larger border radius than standard. Use to increase emphasis relative to other UI
{base.border.radius.400}
{base.border.radius.300}
sem.border.radius.rounded
Maximum radius for fully rounded borders
{base.border.radius.max}
sem.border.radius.focus
Focus ring border radii
{sem.border.radius.subtle}
sem.border.radius.action
Border radius for UI that evokes an action, such as Button, Pagination, ZoomControls, etc
{sem.border.radius.standard}
sem.border.radius.input
Border radius for text input UI, such as Combobox, Dropdown, TextInput, etc
{sem.border.radius.standard}
sem.border.radius.container
Border radius for UI that contains content or other components, such as Accordion, Card, Popover, etc
{sem.border.radius.strong}
Border - Width
Token
Standard Mode
base.border.width.0
0px
base.border.width.100
1px
base.border.width.200
2px
base.border.width.300
3px
sem.border.width.none
Removes existing border width
{base.border.width.0}
sem.border.width.standard
Default border width
{base.border.width.100}
sem.border.width.strong
A larger border width than standard. Use to increase emphasis relative to other UI
{base.border.width.200}
sem.border.width.stronger
A larger border width than strong. Use to increase emphasis relative to other UI
{base.border.width.300}
sem.border.width.input
Border width for text input UI, such as Combobox, Dropdown, TextInput, etc
{sem.border.width.standard}
sem.border.width.action
Border width for UI that evokes an action, such as Button, Pagination, ZoomControls, etc
{sem.border.width.standard}
sem.border.width.partition
Border width for UI that separates elements, such as Divider, Table, etc
{sem.border.width.standard}
sem.border.width.floating
Border width for UI that overlays content, such as Menu, Popover, etc
{sem.border.width.standard}
sem.border.width.selected
Border width for UI that is selected
{sem.border.width.strong}
Breakpoint
Token
Standard Mode
base.breakpoint.xs.start
0px
base.breakpoint.xs.end
767px
base.breakpoint.sm.start
768px
base.breakpoint.sm.end
1023px
base.breakpoint.md.start
1024px
base.breakpoint.md.end
1439px
base.breakpoint.lg.start
1440px
base.breakpoint.lg.end
1919px
base.breakpoint.xl.start
1920px
Color
Token
Standard Mode
base.color.transparent
transparent
base.color.black
#000000
base.color.black-opacity-90
rgba(0,0,0,0.77)
base.color.black-opacity-80
rgba(0,0,0,0.69)
base.color.black-opacity-70
rgba(0,0,0,0.58)
base.color.black-opacity-60
rgba(0,0,0,0.49)
base.color.black-opacity-50
rgba(0,0,0,0.39)
base.color.black-opacity-40
rgba(0,0,0,0.26)
base.color.black-opacity-30
rgba(0,0,0,0.17)
base.color.black-opacity-20
rgba(0,0,0,0.09)
base.color.black-opacity-10
rgba(0,0,0,0.05)
base.color.grey.100
#f3f3f3
base.color.grey.200
#e6e6e6
base.color.grey.300
#d3d3d3
base.color.grey.400
#c4c4c4
base.color.grey.500
#9c9c9c
base.color.grey.600
#838383
base.color.grey.700
#6c6c6c
base.color.grey.800
#505050
base.color.grey.900
#3a3a3a
base.color.grey.950
#1d1d1d
base.color.white
#ffffff
base.color.white-opacity-90
rgba(255,255,255,0.95)
base.color.white-opacity-80
rgba(255,255,255,0.89)
base.color.white-opacity-70
rgba(255,255,255,0.81)
base.color.white-opacity-60
rgba(255,255,255,0.71)
base.color.white-opacity-50
rgba(255,255,255,0.56)
base.color.white-opacity-40
rgba(255,255,255,0.45)
base.color.white-opacity-30
rgba(255,255,255,0.35)
base.color.white-opacity-20
rgba(255,255,255,0.22)
base.color.white-opacity-10
rgba(255,255,255,0.13)
base.color.red.100
#FFEEEB
base.color.red.200
#FFDFDB
base.color.red.300
#FFC6BF
base.color.red.400
#FFB1A5
base.color.red.500
#F5765F
base.color.red.600
#E84D2F
base.color.red.700
#CC3011
base.color.red.800
#952911
base.color.red.900
#6B2110
base.color.yellow.100
#FFF1DE
base.color.yellow.200
#FFE2BD
base.color.yellow.300
#FFCA87
base.color.yellow.400
#FAA837
base.color.yellow.500
#E58325
base.color.yellow.600
#D4620B
base.color.yellow.700
#A94505
base.color.yellow.800
#86390C
base.color.yellow.900
#602B0D
base.color.green.100
#E2F8E7
base.color.green.200
#C8F0D1
base.color.green.300
#A2E2B3
base.color.green.400
#85D5A0
base.color.green.500
#3EAF79
base.color.green.600
#1B956B
base.color.green.700
#117A5E
base.color.green.800
#065B45
base.color.green.900
#044232
base.color.blue.100
#E5F5FD
base.color.blue.200
#C8EBFB
base.color.blue.300
#9BDCF8
base.color.blue.400
{sem.color.brand.vista-blue}
base.color.blue.500
#2BA8E0
base.color.blue.600
#1C8BC3
base.color.blue.700
#0C72A9
base.color.blue.800
#005484
base.color.blue.900
#003D62
base.color.navy.100
#F2F3F4
base.color.navy.200
#E5E6EA
base.color.navy.300
#D2D3DA
base.color.navy.400
#C1C3CC
base.color.navy.500
#979CAA
base.color.navy.600
#7D8394
base.color.navy.700
#656B80
base.color.navy.800
#474F67
base.color.navy.900
{sem.color.brand.midnight}
Color - Background
Token
Standard Mode
Dark Mode
sem.color.bg.none
Removes existing background color. Can be paired with hover and active interaction states
{base.color.transparent}
sem.color.bg.none-hover
Hover state paired with sem.color.bg.none
{base.color.black-opacity-10}
Dark Mode
{base.color.white-opacity-10}
sem.color.bg.none-active
Active state paired with sem.color.bg.none
{base.color.black-opacity-20}
Dark Mode
{base.color.white-opacity-20}
sem.color.bg.standard
Default background color
{base.color.white}
Dark Mode
{base.color.grey.950}
sem.color.bg.hover
Hover state paired with sem.color.bg.standard
{base.color.grey.100}
Dark Mode
{base.color.grey.900}
sem.color.bg.active
Active state paired with sem.color.bg.standard
{base.color.grey.200}
Dark Mode
{base.color.grey.800}
sem.color.bg.strong
A darker background color than standard. Use to increase emphasis relative to other UI
{base.color.grey.100}
Dark Mode
{base.color.grey.900}
sem.color.bg.strong-hover
Hover state paired with sem.color.bg.strong
{base.color.grey.200}
Dark Mode
{base.color.grey.800}
sem.color.bg.strong-active
Active state paired with sem.color.bg.strong
{base.color.grey.300}
Dark Mode
{base.color.grey.700}
sem.color.bg.disabled
Disabled background color
{base.color.grey.200}
Dark Mode
{base.color.grey.800}
sem.color.bg.selected
Selected background color
{base.color.black}
Dark Mode
{base.color.white}
sem.color.bg.selected-hover
Hover state paired with sem.color.bg.selected
{base.color.grey.900}
Dark Mode
{base.color.grey.100}
sem.color.bg.selected-active
Active state paired with sem.color.bg.selected
{base.color.grey.800}
Dark Mode
{base.color.grey.200}
sem.color.bg.selected-accent
Selected accent background color
{base.color.blue.400}
Dark Mode
{base.color.blue.600}
sem.color.bg.selected-accent-hover
Accent hover state paired with sem.color.bg.selected-accent
{base.color.blue.500}
Dark Mode
{base.color.blue.500}
sem.color.bg.selected-accent-active
Accent active state paired with sem.color.bg.selected-accent
{base.color.blue.600}
Dark Mode
{base.color.blue.400}
sem.color.bg.accent
Background color to signify a standout area or a brand moment
{base.color.blue.100}
Dark Mode
{base.color.blue.900}
sem.color.bg.accent-strong-paired
Background color to signify a standout area or a brand moment
{base.color.blue.400}
sem.color.bg.accent-strong-hover-paired
Hover state paired with sem.color.bg.accent-strong-paired
#48BBEB
sem.color.bg.accent-strong-active-paired
Active state paired with sem.color.bg.accent-strong-paired
{base.color.blue.500}
sem.color.bg.error
Background color to signify a negative outcome, e.g. user data cannot be submitted
{base.color.red.100}
Dark Mode
{base.color.red.900}
sem.color.bg.error-strong-paired
Background color to signify a negative outcome, e.g. user data cannot be submitted
{base.color.red.700}
Dark Mode
{base.color.red.400}
sem.color.bg.warning
Background color to signify caution of a possible action
{base.color.yellow.100}
Dark Mode
{base.color.yellow.900}
sem.color.bg.warning-strong-paired
{base.color.yellow.400}
sem.color.bg.success
Background color to signify a positive outcome, e.g. user data successfully submitted
{base.color.green.100}
Dark Mode
{base.color.green.900}
sem.color.bg.success-strong-paired
{base.color.green.700}
Dark Mode
{base.color.green.400}
sem.color.bg.promo
Background color to signify promotional content, e.g. discounts
{base.color.green.100}
Dark Mode
{base.color.green.900}
sem.color.bg.promo-strong-paired
{base.color.green.700}
Dark Mode
{base.color.green.400}
sem.color.bg.help
Background color to signify content relating to user help, e.g. CARE
{base.color.yellow.100}
Dark Mode
{base.color.yellow.900}
sem.color.bg.help-strong-paired
{base.color.yellow.400}
sem.color.bg.info
Background color to signify neutral information
{base.color.navy.100}
Dark Mode
{base.color.navy.900}
sem.color.bg.info-strong-paired
{base.color.navy.900}
Dark Mode
{base.color.navy.400}
sem.color.bg.action
Background color for UI that evokes an action, such as Button, Pagination, ZoomControls, etc
{sem.color.bg.standard}
sem.color.bg.action-hover
Hover state paired with sem.color.bg.action
{sem.color.bg.hover}
sem.color.bg.action-active
Active state paired with sem.color.bg.action
{sem.color.bg.active}
sem.color.bg.control
Background color for non-text input UI, such as Checkbox, ColorSwatches, ToggleSwitch, etc
{sem.color.bg.standard}
sem.color.bg.control-hover
Hover state paired with sem.color.bg.control
{sem.color.bg.hover}
sem.color.bg.control-active
Active state paired with sem.color.bg.control
{sem.color.bg.active}
sem.color.bg.input
Background color for text input UI, such as Combobox, Dropdown, TextInput, etc
{sem.color.bg.standard}
sem.color.bg.container
Background color for UI that contains content or other components, such as Accordion, Card, Popover, etc
{sem.color.bg.standard}
sem.color.bg.page
Default background color for pages
{sem.color.bg.standard}
Color - Border
Token
Standard Mode
Dark Mode
sem.color.border.none
Removes existing border color. Can be paired with hover and active interaction states
{base.color.transparent}
sem.color.border.none-hover
Hover state paired with sem.color.border.none
{base.color.black-opacity-10}
Dark Mode
{base.color.white-opacity-10}
sem.color.border.none-active
Active state paired with sem.color.border.none
{base.color.black-opacity-20}
Dark Mode
{base.color.white-opacity-20}
sem.color.border.standard
Default border color
{base.color.grey.300}
Dark Mode
{base.color.grey.700}
sem.color.border.hover
Hover state paired with sem.color.border.standard
{base.color.grey.500}
sem.color.border.active
Active state paired with sem.color.border.standard
{base.color.grey.600}
Dark Mode
{base.color.grey.400}
sem.color.border.strong
A darker border color than standard. Use to increase emphasis relative to other UI
{base.color.grey.600}
Dark Mode
{base.color.grey.400}
sem.color.border.strong-hover
Hover state paired with sem.color.border.strong
{base.color.grey.700}
Dark Mode
{base.color.grey.500}
sem.color.border.strong-active
Active state paired with sem.color.border.strong
{base.color.grey.800}
Dark Mode
{base.color.grey.600}
sem.color.border.disabled
Disabled border color
{base.color.grey.300}
Dark Mode
{base.color.grey.700}
sem.color.border.selected
Selected border color
{base.color.black}
Dark Mode
{base.color.white}
sem.color.border.selected-hover
Hover state paired with sem.color.border.selected
{base.color.grey.800}
Dark Mode
{base.color.grey.200}
sem.color.border.selected-active
Active state paired with sem.color.border.selected
{base.color.grey.700}
Dark Mode
{base.color.grey.300}
sem.color.border.selected-accent
Selected accent border color
{base.color.blue.400}
Dark Mode
{base.color.blue.600}
sem.color.border.selected-accent-hover
Accent hover state paired with sem.color.border.selected-accent
{base.color.blue.500}
Dark Mode
{base.color.blue.500}
sem.color.border.selected-accent-active
Accent active state paired with sem.color.border.selected-accent
{base.color.blue.600}
Dark Mode
{base.color.blue.400}
sem.color.border.accent
Border color to signify a standout area or a brand moment
{base.color.blue.300}
Dark Mode
{base.color.blue.700}
sem.color.border.accent-strong-paired
Border color to signify a standout area or a brand moment
{base.color.blue.400}
sem.color.border.accent-strong-hover-paired
Hover state paired with sem.color.border.accent-strong-paired
#48BBEB
sem.color.border.accent-strong-active-paired
Active state paired with sem.color.border.accent-strong-paired
{base.color.blue.500}
sem.color.border.error
Border color to signify a negative outcome, e.g. user data cannot be submitted
{base.color.red.300}
Dark Mode
{base.color.red.700}
sem.color.border.error-strong-paired
{base.color.red.700}
Dark Mode
{base.color.red.400}
sem.color.border.warning
Border color to signify caution of a possible action
{base.color.yellow.300}
Dark Mode
{base.color.yellow.700}
sem.color.border.warning-strong-paired
{base.color.yellow.400}
sem.color.border.success
Border color to signify a positive outcome, e.g. user data successfully submitted
{base.color.green.300}
Dark Mode
{base.color.green.700}
sem.color.border.success-strong-paired
{base.color.green.700}
Dark Mode
{base.color.green.400}
sem.color.border.promo
Border color to signify promotional content, e.g. discounts
{base.color.green.300}
Dark Mode
{base.color.green.700}
sem.color.border.promo-strong-paired
{base.color.green.700}
Dark Mode
{base.color.green.400}
sem.color.border.help
Border color to signify content relating to user help, e.g. CARE
{base.color.yellow.300}
Dark Mode
{base.color.yellow.700}
sem.color.border.help-strong-paired
{base.color.yellow.400}
sem.color.border.info
Border color to signify neutral information
{base.color.navy.300}
Dark Mode
{base.color.navy.700}
sem.color.border.info-strong-paired
{base.color.navy.900}
Dark Mode
{base.color.navy.400}
sem.color.border.action
Border color for UI that evokes an action, such as Button, Pagination, ZoomControls, etc
{base.color.black-opacity-30}
Dark Mode
{base.color.white-opacity-30}
sem.color.border.action-hover
Hover state paired with sem.color.border.action
{base.color.black-opacity-30}
Dark Mode
{base.color.white-opacity-30}
sem.color.border.action-active
Active state paired with sem.color.border.action
{base.color.black-opacity-30}
Dark Mode
{base.color.white-opacity-30}
sem.color.border.control
Border color for non-text input UI, such as Checkbox, ColorSwatches, ToggleSwitch, etc
{sem.color.border.strong}
sem.color.border.control-hover
Hover state paired with sem.color.border.control
{sem.color.border.strong-hover}
sem.color.border.control-active
Active state paired with sem.color.border.control
{sem.color.border.strong-active}
sem.color.border.input
Border color for text input UI, such as Combobox, Dropdown, TextInput, etc
{sem.color.border.strong}
sem.color.border.input-hover
Hover state paired with sem.color.border.input
{sem.color.border.strong-hover}
sem.color.border.input-active
Active state paired with sem.color.border.input
{sem.color.border.strong-active}
sem.color.border.input-error
Error state paired with sem.color.border.input
{sem.color.border.error-strong-paired}
sem.color.border.container
Border color for UI that contains content or other components, such as Accordion, Card, Popover, etc
{sem.color.border.standard}
sem.color.border.partition
Border color for UI that separates elements, such as Divider, Table, etc
{sem.color.border.standard}
Color - Brand
Token
Standard Mode
sem.color.brand.vista-blue
#6FD0F5
sem.color.brand.midnight
#2F3A53
sem.color.brand.warm-white
#F6F6EC
Color - Icon
Token
Standard Mode
Dark Mode
sem.color.icon.standard
Default icon color
{base.color.black}
Dark Mode
{base.color.white}
sem.color.icon.disabled
Disabled icon color
{base.color.grey.500}
sem.color.icon.accent
Icon color to signify a standout area or a brand moment
{base.color.blue.700}
Dark Mode
{base.color.blue.300}
sem.color.icon.accent-strong-paired
{base.color.black}
sem.color.icon.error
Icon color to signify a negative outcome, e.g. user data cannot be submitted
{base.color.red.700}
Dark Mode
{base.color.red.300}
sem.color.icon.error-strong-paired
{base.color.red.400}
Dark Mode
{base.color.red.700}
sem.color.icon.warning
Icon color to signify caution of a possible action
{base.color.yellow.700}
Dark Mode
{base.color.yellow.300}
sem.color.icon.warning-strong-paired
{base.color.black}
sem.color.icon.success
Icon color to signify a positive outcome, e.g. user data successfully submitted
{base.color.green.700}
Dark Mode
{base.color.green.300}
sem.color.icon.success-strong-paired
{base.color.green.400}
Dark Mode
{base.color.green.700}
sem.color.icon.promo
Icon color to signify promotional content, e.g. discounts
{base.color.green.700}
Dark Mode
{base.color.green.300}
sem.color.icon.promo-strong-paired
{base.color.green.400}
Dark Mode
{base.color.green.700}
sem.color.icon.help
Icon color to signify content relating to user help, e.g. CARE
{base.color.yellow.700}
Dark Mode
{base.color.yellow.300}
sem.color.icon.help-strong-paired
{base.color.black}
sem.color.icon.info
Icon color to signify neutral information
{base.color.navy.700}
Dark Mode
{base.color.navy.300}
sem.color.icon.info-strong-paired
{base.color.navy.400}
Dark Mode
{base.color.navy.700}
Color - Text
Token
Standard Mode
Dark Mode
sem.color.text.standard
Default text color
{base.color.black}
Dark Mode
{base.color.white}
sem.color.text.subtle
A lighter text color than standard. Use to decrease emphasis relative to other UI
{base.color.grey.700}
Dark Mode
{base.color.grey.300}
sem.color.text.input
Text color for text input UI, such as Combobox, Dropdown, TextInput, etc
{sem.color.text.standard}
sem.color.text.placeholder
Placeholder text color
{base.color.grey.700}
Dark Mode
{base.color.grey.500}
sem.color.text.error
Text color to signify a negative outcome, e.g. user data cannot be submitted
{base.color.red.700}
Dark Mode
{base.color.red.300}
sem.color.text.error-alt
{sem.color.text.standard}
sem.color.text.error-strong-paired
{base.color.white}
Dark Mode
{base.color.black}
sem.color.text.warning
Text color to signify caution of a possible action
{base.color.yellow.700}
Dark Mode
{base.color.yellow.300}
sem.color.text.warning-alt
{sem.color.text.standard}
sem.color.text.warning-strong-paired
{base.color.black}
sem.color.text.disabled
Disabled text color
{base.color.grey.500}
sem.color.text.promo
Text color to signify promotional content, e.g. discounts
{base.color.green.700}
Dark Mode
{base.color.green.300}
sem.color.text.promo-alt
{sem.color.text.standard}
sem.color.text.promo-strong-paired
{base.color.white}
Dark Mode
{base.color.black}
sem.color.text.hover
Hover state paired with sem.color.text
{base.color.black-opacity-90}
Dark Mode
{base.color.white-opacity-90}
sem.color.text.active
Active state paired with sem.color.text
{base.color.black-opacity-80}
Dark Mode
{base.color.white-opacity-80}
sem.color.text.accent
Text color to signify a standout area or a brand moment
{base.color.blue.700}
Dark Mode
{base.color.blue.300}
sem.color.text.accent-alt
{sem.color.text.standard}
sem.color.text.accent-strong-paired
{base.color.black}
sem.color.text.help
Text color to signify content relating to user help, e.g. CARE
{base.color.yellow.700}
Dark Mode
{base.color.yellow.300}
sem.color.text.help-alt
{sem.color.text.standard}
sem.color.text.help-strong-paired
{base.color.black}
sem.color.text.success
Text color to signify a positive outcome, e.g. user data successfully submitted
{base.color.green.700}
Dark Mode
{base.color.green.300}
sem.color.text.success-alt
{sem.color.text.standard}
sem.color.text.success-strong-paired
{base.color.white}
Dark Mode
{base.color.black}
sem.color.text.info
Text color to signify neutral information
{base.color.navy.700}
Dark Mode
{base.color.navy.300}
sem.color.text.info-alt
{sem.color.text.standard}
sem.color.text.info-strong-paired
{base.color.white}
Dark Mode
{base.color.black}
sem.color.text.link
Link text color
inherit
sem.color.text.link-hover
Hover state paired with sem.color.text.link
{sem.color.text.hover}
sem.color.text.link-active
Active state paired with sem.color.text.link
{sem.color.text.active}
Elevation
Token
Standard Mode
Dark Mode
sem.elevation.none
Removes existing shadow
none
sem.elevation.subtle
A smaller shadow than standard. Use to decrease emphasis relative to other raised UI
0 2px 4px 0 {base.color.black-opacity-10}
Dark Mode
0 2px 4px 0 {base.color.black-opacity-40}
sem.elevation.standard
Default shadow for any object that is raised off the page
0 2px 6px 0 {base.color.black-opacity-10}
Dark Mode
0 2px 6px 0 {base.color.black-opacity-40}
sem.elevation.strong
A larger shadow than standard. Use to increase emphasis relative to other raised UI
0 2px 8px 0 {base.color.black-opacity-20}
Dark Mode
0 2px 8px 0 {base.color.black-opacity-50}
sem.elevation.floating
Shadow for UI that overlays content, such as Menu, Popover, etc
{sem.elevation.standard}
sem.elevation.overlay
Shadow for UI that overlays an entire page, such as ModalDialog, etc
{sem.elevation.strong}
sem.elevation.scroll.horizontal
Shadow for UI that indicates additional content when scrolled
