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.
For more detailed information on the new token architecture, see: Tokens
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
