<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5HGSQD2L" height="0" width="0" style="display:none;visibility:hidden" title="GTM"></iframe>

All Tokens

A list of all public-facing SWAN 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.

Info:

For more detailed information on the new token architecture, see: Tokens

Info:

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

TokenStandard ModeCompact 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

TokenStandard 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

TokenStandard 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

TokenStandard 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

#bcbcbc

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

#FFA497

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

#B64B05

base.color.yellow.800

#86390C

base.color.yellow.900

#602B0D

base.color.green.100

#E2F8E7

base.color.green.200

#FFE2BD

base.color.green.300

#A2E2B3

base.color.green.400

#77CE97

base.color.green.500

#E58325

base.color.green.600

#D4620B

base.color.green.700

#117A5E

base.color.green.800

#86390C

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

#B9BCC5

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

TokenStandard ModeDark 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.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

TokenStandard ModeDark 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

{base.color.blue.400}

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

TokenStandard Mode

sem.color.brand.vista-blue

#6FD0F5

sem.color.brand.midnight

#2F3A53

sem.color.brand.warm-white

#F6F6EC

Color - Icon

TokenStandard ModeDark 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

TokenStandard ModeDark 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.300}

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

TokenStandard ModeDark 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
0 0 12px 12px {sem.color.bg.page}

Focus

TokenStandard ModeDark Mode

sem.focus.color.inner

Focus ring inner color
{sem.color.bg.page}

sem.focus.color.outer

Focus ring outer color
{base.color.blue.700}{base.color.blue.300}

sem.focus.standard

Default focus ring styling
0 0 0 2px {sem.focus.color.inner}, 0 0 0 4px {sem.focus.color.outer}

sem.focus.inset

An inset variant of focus ring for use in specialised cases
inset 0 0 0 2px {sem.focus.color.inner}, inset 0 0 0 4px {sem.focus.color.outer}

sem.focus.tight

Removes the inner white ring for use in specialised cases
0 0 0 2px {sem.focus.color.outer}

Font

TokenStandard ModeCompact Mode

base.font.family.primary

Graphik, sans-serif

base.font.family.secondary

Tiempos, Georgia, times, serif

base.font.size.100

16px

base.font.size.200

18px

base.font.size.300

20px

base.font.size.400

24px

base.font.size.500

28px

base.font.size.600

32px

base.font.size.700

36px

base.font.size.800

42px

base.font.size.900

48px

base.font.size.050

12px

base.font.size.075

14px

base.font.weight.normal

400

base.font.weight.bold

700

base.font.letter-spacing.100

0em

base.font.letter-spacing.200

0.005em

base.font.letter-spacing.300

0.01em

base.font.letter-spacing.025

-0.03em

base.font.letter-spacing.050

-0.02em

base.font.letter-spacing.075

-0.01em

base.font.line-height.100

1.1

base.font.line-height.200

1.2

base.font.line-height.300

1.3

base.font.line-height.400

1.4

base.font.line-height.500

1.5

base.font.line-height.075

0.9

sem.font.size.x4large

{base.font.size.900}
md:{base.font.size.800}, xs:{base.font.size.700}
{base.font.size.700}
md:{base.font.size.800}, xs:{base.font.size.700}

sem.font.size.x3large

{base.font.size.700}
md:{base.font.size.600}, xs:{base.font.size.500}
{base.font.size.500}
md:{base.font.size.600}, xs:{base.font.size.500}

sem.font.size.x2large

{base.font.size.500}
md:{base.font.size.400}, xs:{base.font.size.300}
{base.font.size.300}
md:{base.font.size.400}, xs:{base.font.size.300}

sem.font.size.xlarge

{base.font.size.400}
md:{base.font.size.300}, xs:{base.font.size.200}
{base.font.size.200}
md:{base.font.size.300}, xs:{base.font.size.200}

sem.font.size.large

{base.font.size.300}
md:{base.font.size.200}, xs:{base.font.size.100}
{base.font.size.100}
md:{base.font.size.200}, xs:{base.font.size.100}

sem.font.size.standard

{base.font.size.100}
xs:{base.font.size.075}
{base.font.size.075}
xs:{base.font.size.075}

sem.font.size.small

{base.font.size.075}
xs:{base.font.size.050}
{base.font.size.050}
xs:{base.font.size.050}

sem.font.size.xsmall

{base.font.size.050}

Media query

TokenStandard Mode

sem.mq.eq.xl

{sem.mq.gte.xl}

sem.mq.eq.lg

'only screen and (min-width: {base.breakpoint.lg.start}) and (max-width: {base.breakpoint.lg.end})'

sem.mq.eq.md

'only screen and (min-width: {base.breakpoint.md.start}) and (max-width: {base.breakpoint.md.end})'

sem.mq.eq.sm

'only screen and (min-width: {base.breakpoint.sm.start}) and (max-width: {base.breakpoint.sm.end})'

sem.mq.eq.xs

{sem.mq.lte.xs}

sem.mq.gt.xl

{sem.mq.gte.xl}

sem.mq.gt.lg

{sem.mq.eq.xl}

sem.mq.gt.md

{sem.mq.gte.lg}

sem.mq.gt.sm

{sem.mq.gte.md}

sem.mq.gt.xs

{sem.mq.gte.sm}

sem.mq.gte.xl

'only screen and (min-width: {base.breakpoint.xl.start})'

sem.mq.gte.lg

'only screen and (min-width: {base.breakpoint.lg.start})'

sem.mq.gte.md

'only screen and (min-width: {base.breakpoint.md.start})'

sem.mq.gte.sm

'only screen and (min-width: {base.breakpoint.sm.start})'

sem.mq.gte.xs

'only screen and (min-width: {base.breakpoint.xs.start})'

sem.mq.lt.xl

{sem.mq.lte.lg}

sem.mq.lt.lg

{sem.mq.lte.md}

sem.mq.lt.md

{sem.mq.lte.sm}

sem.mq.lt.sm

{sem.mq.lte.xs}

sem.mq.lte.lg

'only screen and (max-width: {base.breakpoint.lg.end})'

sem.mq.lte.md

'only screen and (max-width: {base.breakpoint.md.end})'

sem.mq.lte.sm

'only screen and (max-width: {base.breakpoint.sm.end})'

sem.mq.lte.xs

'only screen and (max-width: {base.breakpoint.xs.end})'

Size

TokenStandard ModeCompact Mode

sem.size.icon.standard

Default icon size. Smaller on XS, SM, and Compact.
24px
xs:20px
20px
xs:20px

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+).
1lh

sem.size.icon.stroke-width

2px

sem.size.action-and-input.inner.height

{sem.size.icon.standard}

sem.size.action-and-input.inner.min-width

{sem.size.action-and-input.inner.height}

sem.size.click-target.min-height

24px

sem.size.click-target.min-width

24px

Space

TokenStandard ModeCompact Mode

base.space.0

0px

base.space.100

8px

base.space.150

12px

base.space.200

16px

base.space.300

24px

base.space.400

32px

base.space.550

44px

base.space.700

56px

base.space.900

72px

base.space.1200

96px

base.space.1600

128px

base.space.025

2px

base.space.050

4px

base.space.075

6px

sem.space.1

{base.space.025}{base.space.025}

sem.space.2

{base.space.050}{base.space.050}

sem.space.3

{base.space.100}{base.space.075}

sem.space.4

{base.space.150}{base.space.100}

sem.space.5

{base.space.200}{base.space.150}

sem.space.6

{base.space.300}{base.space.200}

sem.space.7

{base.space.400}{base.space.300}

sem.space.8

{base.space.550}{base.space.400}

sem.space.9

{base.space.700}{base.space.550}

sem.space.10

{base.space.900}{base.space.700}

sem.space.11

{base.space.1200}{base.space.900}

sem.space.12

{base.space.1600}{base.space.1200}

sem.space.none

Removes existing spacing
{base.space.0}{base.space.0}

sem.space.gutter.standard

{sem.space.4}
xs:{sem.space.3}

sem.space.gutter.tight

{sem.space.1}

sem.space.between-sections

{base.space.700}
xs:{base.space.550}
{base.space.400}
xs:{base.space.550}

sem.space.between-subsections

{base.space.400}
xs:{base.space.300}
{base.space.300}
xs:{base.space.300}

sem.space.between-actions

{base.space.150}
xs:{base.space.100}
{base.space.100}
xs:{base.space.100}

sem.space.to-actions

{base.space.300}
xs:{base.space.200}
{base.space.200}
xs:{base.space.200}

Z - Index

TokenStandard Mode

sem.z-index.raised

Stacking for UI that overlays the default stacking layer
1

sem.z-index.link-covering

Stacking for link covering
5

sem.z-index.overlay

Stacking for UI that overlays an entire page, such as ModalDialog, etc
10

sem.z-index.floating

Stacking for UI that overlays content, such as Menu, Popover, etc
100000

sem.z-index.over-the-top

Stacking for UI that should overlay everything
1000000
Was this page useful?

Thanks for your feedback!

Feel free to include your name if you wish to have a follow up conversation.

Published: Jun 14, 2024Last updated: Sep 3, 2024
Previous
Accessibility
Accessibility
Next
Color
color