Core tokens
Below is a list of core tokens used throughout Abyss. These are split into the categories color, border-width, border-radius, opacity, spacing, and sizing.
Note: Click on a token row to copy the token to your clipboard.
Border width tokens
border-width tokens are used to define the borderWidth on components.
const Example = styled('div', { borderWidth: '$core.border-width.md',});core.border-width.none0px
core.border-width.xs0.5px
core.border-width.sm1px
core.border-width.md2px
core.border-width.lg3px
Border radius tokens
border-radius tokens are used to define the borderRadius on components.
const Example = styled('div', { borderRadius: '$core.border-radius.md',});core.border-radius.none0px
core.border-radius.xs4px
core.border-radius.sm8px
core.border-radius.md12px
core.border-radius.lg16px
core.border-radius.xl20px
core.border-radius.xxl24px
core.border-radius.full500px
Opacity tokens
opacity tokens are used to define the opacity of a component.
const Example = styled('div', { opacity: '$core.opacity.md',});core.opacity.xxs0.08
core.opacity.md0.32
core.opacity.lg0.40
core.opacity.xl0.80
core.opacity.full1
Spacing tokens
spacing tokens define the space between components. Generally, these are used for the padding, margin, or gap of components.
const Example = styled('div', { padding: '$core.spacing.200',});core.spacing.252px
core.spacing.504px
core.spacing.1008px
core.spacing.15012px
core.spacing.20016px
core.spacing.30024px
core.spacing.40032px
core.spacing.50040px
core.spacing.55044px
core.spacing.60048px
core.spacing.70064px
core.spacing.80080px
core.spacing.1000144px
core.spacing.none0px
Sizing tokens
sizing tokens define the size of components. Generally, these will be used to define the width or height.
const Example = styled('div', { width: '$core.sizing.600', height: '$core.sizing.600',});core.sizing.10016px
core.sizing.25020px
core.sizing.30024px
core.sizing.40032px
core.sizing.50040px
core.sizing.60048px
core.sizing.70064px
core.sizing.90080px
core.sizing.1000120px
core.sizing.full100%
Color tokens
color tokens are used to define the color of components.
const Example = styled('div', { backgroundColor: '$core.color.brand.100',});Brand
core.color.brand.0#EEFFFE
core.color.brand.15#E4FBFD
core.color.brand.30#C6F0F3
core.color.brand.50#05A4B0
core.color.brand.75#088C95
core.color.brand.85#00838F
core.color.brand.95#007587
core.color.brand.105#006177
core.color.brand.130#00475B
core.color.brand.140#01273B
core.color.brand.5#EDF3FB
core.color.brand.10#E3EEFA
core.color.brand.20#D9E9FA
core.color.brand.60#196ECF
core.color.brand.80#004BA0
core.color.brand.100#002677
core.color.brand.120#00184D
Neutral
core.color.neutral.1#FCFEFF
core.color.neutral.5#FAFBFF
core.color.neutral.10#F3F3F3
core.color.neutral.15#EFF4F3
core.color.neutral.20#E5E5E6
core.color.neutral.25#E5E8F0
core.color.neutral.30#CBCCCD
core.color.neutral.35#D6DFDE
core.color.neutral.40#CBCFDB
core.color.neutral.45#C4CDCC
core.color.neutral.50#8A96A0
core.color.neutral.60#7D7F81
core.color.neutral.70#626974
core.color.neutral.80#4B4D4F
core.color.neutral.90#323334
core.color.neutral.100#000000
core.color.neutral.0#FFFFFF
core.color.neutral.95#222324
Red
core.color.red.5#FFDDE5
core.color.red.55#F9D1DA
core.color.red.70#E9BDC9
core.color.red.140#99002B
core.color.red.10#FCF0F0
core.color.red.40#F9D1D1
core.color.red.60#E8C0C0
core.color.red.110#B20000
core.color.red.120#990000
core.color.red.130#890000
Orange
core.color.orange.5#FFF2EB
core.color.orange.30#F6D1B7
core.color.orange.140#C25D14
core.color.orange.10#FFFBEB
core.color.orange.50#F3D8C0
core.color.orange.120#C24E14
Yellow
core.color.yellow.5#FEFEEA
core.color.yellow.90#E3B128
core.color.yellow.110#D29E0F
core.color.yellow.150#826C00
core.color.yellow.100#F5B700
core.color.yellow.120#D2800F
core.color.yellow.170#AD6A08
Green
core.color.green.5#F8FFF1
core.color.green.15#ECF6E1
core.color.green.40#E3EED7
core.color.green.20#F0F9ED
core.color.green.50#BFDBBF
core.color.green.100#007000
Blue
core.color.blue.0#F4F3FF
core.color.blue.1#EDECFC
core.color.blue.20#D9DFFA
core.color.blue.50#B5D0F7
core.color.blue.90#0055D5
core.color.blue.10#EEF4FF
core.color.blue.60#C3D8F2
core.color.blue.80#126ECF
Warm White
core.color.warm-white.10#FAF8F2
core.color.warm-white.20#F5F3ED
Aqua
core.color.aqua.15#E5F8FB
Sky Blue
core.color.sky-blue.0#FAFCFF
Turquoise
core.color.turquoise.80#15A796
core.color.turquoise.100#149E8F
Semantic tokens
Note: Click on the desired token to copy it to your clipboard.
| Semantic Token | Reference | Value |
|---|---|---|
| web.semantic.color.surface.interactive.standards.rest.default.primary | core.color.brand.100 | #002677 |
| web.semantic.color.surface.interactive.standards.rest.default.secondary | core.color.neutral.0 | #FFFFFF |
| web.semantic.color.surface.interactive.standards.rest.default.tertiary | core.color.neutral.60 | #7D7F81 |
| web.semantic.color.surface.interactive.standards.rest.default.quaternary | core.color.neutral.10 | #F3F3F3 |
| web.semantic.color.surface.interactive.standards.rest.default.status.error | core.color.red.120 | #990000 |
| web.semantic.color.surface.interactive.standards.rest.default.neutral | core.color.neutral.90 | #323334 |
| web.semantic.color.surface.interactive.standards.rest.selected.secondary | core.color.brand.5 | #EDF3FB |
| web.semantic.color.surface.interactive.standards.rest.selected.tertiary | core.color.brand.60 | #196ECF |
| web.semantic.color.surface.interactive.standards.rest.selected.quaternary | core.color.brand.5 | #EDF3FB |
| web.semantic.color.surface.interactive.standards.hover.default.primary | core.color.brand.80 | #004BA0 |
| web.semantic.color.surface.interactive.standards.hover.default.secondary | core.color.neutral.10 | #F3F3F3 |
| web.semantic.color.surface.interactive.standards.hover.default.tertiary | core.color.neutral.80 | #4B4D4F |
| web.semantic.color.surface.interactive.standards.hover.default.quaternary | core.color.neutral.20 | #E5E5E6 |
| web.semantic.color.surface.interactive.standards.hover.default.status.error | core.color.red.110 | #B20000 |
| web.semantic.color.surface.interactive.standards.hover.default.neutral | core.color.neutral.95 | #222324 |
| web.semantic.color.surface.interactive.standards.hover.selected.secondary | core.color.brand.10 | #E3EEFA |
| web.semantic.color.surface.interactive.standards.hover.selected.tertiary | core.color.brand.80 | #004BA0 |
| web.semantic.color.surface.interactive.standards.hover.selected.quaternary | core.color.brand.10 | #E3EEFA |
| web.semantic.color.surface.interactive.standards.active.default.primary | core.color.brand.120 | #00184D |
| web.semantic.color.surface.interactive.standards.active.default.secondary | core.color.neutral.20 | #E5E5E6 |
| web.semantic.color.surface.interactive.standards.active.default.tertiary | core.color.neutral.90 | #323334 |
| web.semantic.color.surface.interactive.standards.active.default.quaternary | core.color.neutral.30 | #CBCCCD |
| web.semantic.color.surface.interactive.standards.active.default.status.error | core.color.red.120 | #990000 |
| web.semantic.color.surface.interactive.standards.active.default.neutral | core.color.neutral.100 | #000000 |
| web.semantic.color.surface.interactive.standards.active.selected.secondary | core.color.brand.20 | #D9E9FA |
| web.semantic.color.surface.interactive.standards.active.selected.tertiary | core.color.brand.100 | #002677 |
| web.semantic.color.surface.interactive.standards.active.selected.quaternary | core.color.brand.20 | #D9E9FA |
| web.semantic.color.surface.interactive.standards.disabled.default.primary | core.color.neutral.10 | #F3F3F3 |
| web.semantic.color.surface.interactive.standards.disabled.default.secondary | core.color.neutral.10 | #F3F3F3 |
| web.semantic.color.surface.interactive.standards.disabled.default.tertiary | core.color.neutral.30 | #CBCCCD |
| web.semantic.color.surface.interactive.standards.disabled.default.quaternary | core.color.neutral.30 | #CBCCCD |
| web.semantic.color.surface.interactive.standards.disabled.selected.tertiary | core.color.neutral.30 | #CBCCCD |
| web.semantic.color.surface.interactive.standards.disabled.selected.quaternary | core.color.neutral.30 | #CBCCCD |
| web.semantic.color.surface.interactive.buttons.rest.cta | core.color.neutral.0 | #FFFFFF |
| web.semantic.color.surface.interactive.buttons.rest.pair-error | core.color.neutral.0 | #FFFFFF |
| web.semantic.color.surface.interactive.buttons.rest.neutral | core.color.neutral.0 | #FFFFFF |
| web.semantic.color.surface.interactive.buttons.hover.cta | core.color.brand.5 | #EDF3FB |
| web.semantic.color.surface.interactive.buttons.hover.pair-error | core.color.red.10 | #FCF0F0 |
| web.semantic.color.surface.interactive.buttons.hover.neutral | core.color.warm-white.10 | #FAF8F2 |
| web.semantic.color.surface.interactive.buttons.active.cta | core.color.brand.10 | #E3EEFA |
| web.semantic.color.surface.interactive.buttons.active.pair-error | core.color.red.40 | #F9D1D1 |
| web.semantic.color.surface.interactive.buttons.active.neutral | core.color.warm-white.20 | #F5F3ED |
| web.semantic.color.surface.interactive.controls.rest.default.choice | core.color.neutral.0 | #FFFFFF |
| web.semantic.color.surface.interactive.controls.rest.default.pickers | core.color.neutral.0 | #FFFFFF |
| web.semantic.color.surface.interactive.controls.rest.selected.choice | core.color.brand.60 | #196ECF |
| web.semantic.color.surface.interactive.controls.rest.selected.pickers | core.color.brand.100 | #002677 |
| web.semantic.color.surface.interactive.controls.hover.default.choice | core.color.neutral.0 | #FFFFFF |
| web.semantic.color.surface.interactive.controls.hover.default.pickers | core.color.neutral.10 | #F3F3F3 |
| web.semantic.color.surface.interactive.controls.hover.selected.choice | core.color.brand.80 | #004BA0 |
| web.semantic.color.surface.interactive.controls.hover.selected.pickers | core.color.brand.80 | #004BA0 |
| web.semantic.color.surface.interactive.controls.active.default.choice | core.color.neutral.0 | #FFFFFF |
| web.semantic.color.surface.interactive.controls.active.default.pickers | core.color.neutral.20 | #E5E5E6 |
| web.semantic.color.surface.interactive.controls.active.selected.choice | core.color.brand.100 | #002677 |
| web.semantic.color.surface.interactive.controls.active.selected.pickers | core.color.brand.120 | #00184D |
| web.semantic.color.surface.interactive.controls.disabled.default.choice | core.color.neutral.30 | #CBCCCD |
| web.semantic.color.surface.interactive.controls.disabled.selected.choice | core.color.neutral.60 | #7D7F81 |
| web.semantic.color.surface.interactive.controls.selection | core.color.brand.20 | #D9E9FA |
| web.semantic.color.surface.interactive.nav-menu-item.rest.default | core.color.brand.100 | #002677 |
| web.semantic.color.surface.interactive.nav-menu-item.rest.selected | core.color.brand.60 | #196ECF |
| web.semantic.color.surface.interactive.nav-menu-item.hover.default | core.color.brand.80 | #004BA0 |
| web.semantic.color.surface.interactive.nav-menu-item.hover.selected | core.color.brand.80 | #004BA0 |
| web.semantic.color.surface.interactive.nav-menu-item.active.default | core.color.brand.120 | #00184D |
| web.semantic.color.surface.interactive.nav-menu-item.active.selected | core.color.brand.120 | #00184D |
| web.semantic.color.surface.backgrounds.primary | core.color.neutral.0 | #FFFFFF |
| web.semantic.color.surface.backgrounds.secondary | core.color.neutral.10 | #F3F3F3 |
| web.semantic.color.surface.container.header.main | core.color.neutral.0 | #FFFFFF |
| web.semantic.color.surface.container.header.topLevelNav | core.color.brand.100 | #002677 |
| web.semantic.color.surface.container.primary | core.color.brand.100 | #002677 |
| web.semantic.color.surface.container.secondary | core.color.neutral.0 | #FFFFFF |
| web.semantic.color.surface.container.tertiary | core.color.neutral.10 | #F3F3F3 |
| web.semantic.color.surface.container.inverse | core.color.neutral.80 | #4B4D4F |
| web.semantic.color.surface.container.emphasis.1 | core.color.green.20 | #F0F9ED |
| web.semantic.color.surface.container.emphasis.2 | core.color.warm-white.10 | #FAF8F2 |
| web.semantic.color.surface.container.emphasis.3 | core.color.sky-blue.0 | #FAFCFF |
| web.semantic.color.surface.container.emphasis.4 | core.color.aqua.15 | #E5F8FB |
| web.semantic.color.surface.container.status.info.saturated | core.color.brand.60 | #196ECF |
| web.semantic.color.surface.container.status.info.tint | core.color.blue.10 | #EEF4FF |
| web.semantic.color.surface.container.status.success.saturated | core.color.green.100 | #007000 |
| web.semantic.color.surface.container.status.success.tint | core.color.green.20 | #F0F9ED |
| web.semantic.color.surface.container.status.warning.saturated | core.color.orange.120 | #C24E14 |
| web.semantic.color.surface.container.status.warning.tint | core.color.orange.10 | #FFFBEB |
| web.semantic.color.surface.container.status.error.saturated | core.color.red.120 | #990000 |
| web.semantic.color.surface.container.status.error.tint | core.color.red.10 | #FCF0F0 |
| web.semantic.color.surface.container.status.neutral.saturated | core.color.neutral.80 | #4B4D4F |
| web.semantic.color.surface.container.status.neutral.tint | core.color.neutral.10 | #F3F3F3 |
| web.semantic.color.surface.container.overlay | rgba(0,0,0,0.4) | |
| web.semantic.color.surface.decorative.gold.1 | core.color.yellow.100 | #F5B700 |
| web.semantic.color.surface.decorative.gold.2 | core.color.yellow.120 | #D2800F |
| web.semantic.color.surface.decorative.turquoise.1 | core.color.turquoise.100 | #149E8F |
| web.semantic.color.border.interactive.focus.regular | core.color.brand.80 | #004BA0 |
| web.semantic.color.border.interactive.focus.alt | core.color.neutral.0 | #FFFFFF |
| web.semantic.color.border.interactive.buttons.rest.alt | core.color.neutral.0 | #FFFFFF |
| web.semantic.color.border.interactive.buttons.hover.alt | core.color.neutral.10 | #F3F3F3 |
| web.semantic.color.border.interactive.buttons.active.alt | core.color.neutral.20 | #E5E5E6 |
| web.semantic.color.border.interactive.controls.rest.default | core.color.neutral.60 | #7D7F81 |
| web.semantic.color.border.interactive.controls.rest.selected | core.color.brand.60 | #196ECF |
| web.semantic.color.border.interactive.controls.hover.default | core.color.neutral.80 | #4B4D4F |
| web.semantic.color.border.interactive.controls.hover.selected | core.color.brand.80 | #004BA0 |
| web.semantic.color.border.interactive.controls.active.default | core.color.neutral.90 | #323334 |
| web.semantic.color.border.interactive.controls.active.selected | core.color.brand.100 | #002677 |
| web.semantic.color.border.interactive.controls.disabled.default | core.color.neutral.60 | #7D7F81 |
| web.semantic.color.border.interactive.controls.disabled.selected | core.color.neutral.60 | #7D7F81 |
| web.semantic.color.border.interactive.state-affordance.default | core.color.neutral.30 | #CBCCCD |
| web.semantic.color.border.interactive.state-affordance.selected | core.color.brand.60 | #196ECF |
| web.semantic.color.border.interactive.forms.rest | core.color.neutral.80 | #4B4D4F |
| web.semantic.color.border.interactive.forms.hover | core.color.brand.60 | #196ECF |
| web.semantic.color.border.interactive.forms.disabled | rgba(0,0,0,0) | |
| web.semantic.color.border.content.primary | core.color.brand.100 | #002677 |
| web.semantic.color.border.content.secondary | core.color.neutral.30 | #CBCCCD |
| web.semantic.color.border.content.tertiary | core.color.neutral.20 | #E5E5E6 |
| web.semantic.color.border.content.alt | core.color.neutral.0 | #FFFFFF |
| web.semantic.color.border.content.decorative.gold.1 | core.color.yellow.100 | #F5B700 |
| web.semantic.color.border.content.decorative.gold.2 | core.color.yellow.120 | #D2800F |
| web.semantic.color.border.content.decorative.branding | core.color.neutral.0 | #FFFFFF |
| web.semantic.color.border.content.neutral | core.color.neutral.90 | #323334 |
| web.semantic.color.border.status.saturated.info | core.color.blue.80 | #126ECF |
| web.semantic.color.border.status.saturated.success | core.color.green.100 | #007000 |
| web.semantic.color.border.status.saturated.warning | core.color.orange.120 | #C24E14 |
| web.semantic.color.border.status.saturated.error | core.color.red.120 | #990000 |
| web.semantic.color.border.status.saturated.neutral | core.color.neutral.80 | #4B4D4F |
| web.semantic.color.border.status.subtle.info | core.color.blue.60 | #C3D8F2 |
| web.semantic.color.border.status.subtle.success | core.color.green.50 | #BFDBBF |
| web.semantic.color.border.status.subtle.warning | core.color.orange.50 | #F3D8C0 |
| web.semantic.color.border.status.subtle.error | core.color.red.60 | #E8C0C0 |
| web.semantic.color.border.status.subtle.neutral | core.color.neutral.30 | #CBCCCD |
| web.semantic.color.icon.interactive.rest.primary | core.color.brand.100 | #002677 |
| web.semantic.color.icon.interactive.rest.primary-alt | core.color.neutral.0 | #FFFFFF |
| web.semantic.color.icon.interactive.rest.secondary | core.color.neutral.80 | #4B4D4F |
| web.semantic.color.icon.interactive.rest.tertiary | core.color.brand.60 | #196ECF |
| web.semantic.color.icon.interactive.rest.neutral | core.color.neutral.90 | #323334 |
| web.semantic.color.icon.interactive.rest.status.error | core.color.red.120 | #990000 |
| web.semantic.color.icon.interactive.hover.primary | core.color.brand.80 | #004BA0 |
| web.semantic.color.icon.interactive.hover.primary-alt | core.color.neutral.10 | #F3F3F3 |
| web.semantic.color.icon.interactive.hover.secondary | core.color.neutral.90 | #323334 |
| web.semantic.color.icon.interactive.hover.tertiary | core.color.brand.80 | #004BA0 |
| web.semantic.color.icon.interactive.hover.neutral | core.color.neutral.95 | #222324 |
| web.semantic.color.icon.interactive.hover.status.error | core.color.red.110 | #B20000 |
| web.semantic.color.icon.interactive.active.primary | core.color.brand.120 | #00184D |
| web.semantic.color.icon.interactive.active.primary-alt | core.color.neutral.20 | #E5E5E6 |
| web.semantic.color.icon.interactive.active.secondary | core.color.neutral.100 | #000000 |
| web.semantic.color.icon.interactive.active.tertiary | core.color.brand.100 | #002677 |
| web.semantic.color.icon.interactive.active.neutral | core.color.neutral.100 | #000000 |
| web.semantic.color.icon.interactive.active.status.error | core.color.red.130 | #890000 |
| web.semantic.color.icon.interactive.disabled.primary | core.color.neutral.80 | #4B4D4F |
| web.semantic.color.icon.interactive.disabled.secondary | core.color.neutral.60 | #7D7F81 |
| web.semantic.color.icon.interactive.decorative.rest | core.color.yellow.120 | #D2800F |
| web.semantic.color.icon.interactive.decorative.hover | core.color.yellow.120 | #D2800F |
| web.semantic.color.icon.interactive.decorative.active | core.color.yellow.170 | #ad6a08 |
| web.semantic.color.icon.content.primary | core.color.brand.100 | #002677 |
| web.semantic.color.icon.content.primary-alt | core.color.neutral.0 | #FFFFFF |
| web.semantic.color.icon.content.secondary | core.color.neutral.90 | #323334 |
| web.semantic.color.icon.content.header | core.color.neutral.0 | #FFFFFF |
| web.semantic.color.icon.content.decorative.1 | core.color.yellow.100 | #F5B700 |
| web.semantic.color.icon.status.info | core.color.blue.80 | #126ECF |
| web.semantic.color.icon.status.success | core.color.green.100 | #007000 |
| web.semantic.color.icon.status.warning | core.color.orange.120 | #C24E14 |
| web.semantic.color.icon.status.error | core.color.red.120 | #990000 |
| web.semantic.color.icon.status.neutral | core.color.neutral.80 | #4B4D4F |
| web.semantic.color.text.interactive.rest.primary | core.color.brand.60 | #196ECF |
| web.semantic.color.text.interactive.rest.secondary | core.color.neutral.80 | #4B4D4F |
| web.semantic.color.text.interactive.rest.alt | core.color.neutral.0 | #FFFFFF |
| web.semantic.color.text.interactive.rest.neutral | core.color.neutral.90 | #323334 |
| web.semantic.color.text.interactive.rest.status.error | core.color.red.120 | #990000 |
| web.semantic.color.text.interactive.hover.primary | core.color.brand.80 | #004BA0 |
| web.semantic.color.text.interactive.hover.secondary | core.color.neutral.90 | #323334 |
| web.semantic.color.text.interactive.hover.alt | core.color.neutral.10 | #F3F3F3 |
| web.semantic.color.text.interactive.hover.neutral | core.color.neutral.95 | #222324 |
| web.semantic.color.text.interactive.hover.status.error | core.color.red.110 | #B20000 |
| web.semantic.color.text.interactive.active.primary | core.color.brand.100 | #002677 |
| web.semantic.color.text.interactive.active.secondary | core.color.neutral.100 | #000000 |
| web.semantic.color.text.interactive.active.alt | core.color.neutral.20 | #E5E5E6 |
| web.semantic.color.text.interactive.active.neutral | core.color.neutral.100 | #000000 |
| web.semantic.color.text.interactive.active.status.error | core.color.red.130 | #890000 |
| web.semantic.color.text.interactive.disabled.primary | core.color.neutral.60 | #7D7F81 |
| web.semantic.color.text.label.cta.disabled | core.color.neutral.80 | #4B4D4F |
| web.semantic.color.text.label.cta.primary | core.color.brand.100 | #002677 |
| web.semantic.color.text.label.cta.primary-alt | core.color.neutral.0 | #FFFFFF |
| web.semantic.color.text.label.cta.secondary | core.color.neutral.90 | #323334 |
| web.semantic.color.text.label.cta.header.default | core.color.neutral.0 | #FFFFFF |
| web.semantic.color.text.label.cta.header.active | core.color.neutral.0 | #FFFFFF |
| web.semantic.color.text.label.forms.primary | core.color.neutral.80 | #4B4D4F |
| web.semantic.color.text.content.primary | core.color.brand.100 | #002677 |
| web.semantic.color.text.content.primary-alt | core.color.neutral.0 | #FFFFFF |
| web.semantic.color.text.content.secondary | core.color.neutral.90 | #323334 |
| web.semantic.color.text.content.tertiary | core.color.neutral.80 | #4B4D4F |
| web.semantic.color.text.status.info | core.color.blue.80 | #126ECF |
| web.semantic.color.text.status.success | core.color.green.100 | #007000 |
| web.semantic.color.text.status.warning | core.color.orange.120 | #C24E14 |
| web.semantic.color.text.status.error | core.color.red.120 | #990000 |
| web.semantic.color.text.status.neutral | core.color.neutral.80 | #4B4D4F |
| web.semantic.color.text.footer.rest | core.color.neutral.80 | #4B4D4F |
| web.semantic.color.text.footer.hover | core.color.neutral.90 | #323334 |
| web.semantic.color.text.footer.active | core.color.neutral.100 | #000000 |
| web.semantic.border-radius.controls.fill | core.border-radius.none | 0px |
| web.semantic.border-radius.controls.soft | core.border-radius.xs | 4px |
| web.semantic.border-radius.controls.fields | core.border-radius.xs | 4px |
| web.semantic.border-radius.controls.medium | core.border-radius.sm | 8px |
| web.semantic.border-radius.controls.round | core.border-radius.full | 500px |
| web.semantic.border-radius.controls.cta | core.border-radius.full | 500px |
| web.semantic.border-radius.container.full | core.border-radius.none | 0px |
| web.semantic.border-radius.container.small | core.border-radius.xs | 4px |
| web.semantic.border-radius.container.menu | core.border-radius.xs | 4px |
| web.semantic.border-radius.container.large | core.border-radius.sm | 8px |
| web.semantic.border-radius.container.emphasis | core.border-radius.md | 12px |
| web.semantic.border-radius.container.round | core.border-radius.full | 500px |
| web.semantic.border-width.cta | core.border-width.sm | 1px |
| web.semantic.border-width.icons | core.border-width.sm | 1px |
| web.semantic.border-width.container | core.border-width.sm | 1px |
| web.semantic.border-width.separator | core.border-width.sm | 1px |
| web.semantic.border-width.controls | core.border-width.md | 2px |
| web.semantic.border-width.focus | core.border-width.lg | 3px |
| web.semantic.border-width.double-focus | core.border-width.md | 2px |
| web.semantic.border-width.fields.default | core.border-width.sm | 1px |
| web.semantic.border-width.fields.active | core.border-width.lg | 3px |
| web.semantic.border-width.indicator.default | core.border-width.sm | 1px |
| web.semantic.border-width.indicator.thick | core.border-width.md | 2px |
| web.semantic.border-width.indicator.dashed | core.border-width.md | 2px |
| web.semantic.border-width.indicator.subtle | core.border-width.xs | 0.5px |
| web.semantic.sizing.all.sm | core.sizing.400 | 32px |
| web.semantic.sizing.all.md | core.sizing.500 | 40px |
| web.semantic.sizing.all.lg | core.sizing.600 | 48px |
| web.semantic.sizing.all.xxs | core.sizing.250 | 20px |
| web.semantic.sizing.all.xxl | core.sizing.900 | 80px |
| web.semantic.sizing.width.sm | core.sizing.400 | 32px |
| web.semantic.sizing.width.md | core.sizing.500 | 40px |
| web.semantic.sizing.width.lg | core.sizing.600 | 48px |
| web.semantic.sizing.width.full | core.sizing.full | 100% |
| web.semantic.sizing.width.min.sm | core.sizing.400 | 32px |
| web.semantic.sizing.width.min.md | core.sizing.500 | 40px |
| web.semantic.sizing.width.min.lg | core.sizing.600 | 48px |
| web.semantic.sizing.height.sm | core.sizing.400 | 32px |
| web.semantic.sizing.height.md | core.sizing.500 | 40px |
| web.semantic.sizing.height.lg | core.sizing.600 | 48px |
| web.semantic.sizing.height.full | core.sizing.full | 100% |
| web.semantic.sizing.height.min.sm | core.sizing.400 | 32px |
| web.semantic.sizing.height.min.md | core.sizing.500 | 40px |
| web.semantic.sizing.height.min.lg | core.sizing.600 | 48px |
| web.semantic.sizing.icon.utility.xs | core.sizing.100 | 16px |
| web.semantic.sizing.icon.utility.sm | core.sizing.250 | 20px |
| web.semantic.sizing.icon.utility.md | core.sizing.300 | 24px |
| web.semantic.sizing.icon.illustrative.xs | core.sizing.500 | 40px |
| web.semantic.sizing.icon.illustrative.sm | core.sizing.600 | 48px |
| web.semantic.sizing.icon.illustrative.md | core.sizing.700 | 64px |
| web.semantic.sizing.icon.illustrative.lg | core.sizing.900 | 80px |
| web.semantic.sizing.icon.illustrative.xl | core.sizing.1000 | 120px |
| web.semantic.max-width | 1088px | |
| web.semantic.spacing.scale.xxs | core.spacing.25 | 2px |
| web.semantic.spacing.scale.xs | core.spacing.50 | 4px |
| web.semantic.spacing.scale.sm | core.spacing.100 | 8px |
| web.semantic.spacing.scale.md | core.spacing.150 | 12px |
| web.semantic.spacing.scale.lg | core.spacing.200 | 16px |
| web.semantic.spacing.scale.xl | core.spacing.300 | 24px |
| web.semantic.spacing.scale.2xl | core.spacing.400 | 32px |
| web.semantic.spacing.scale.3xl | core.spacing.500 | 40px |
| web.semantic.spacing.scale.4xl | core.spacing.600 | 48px |
| web.semantic.spacing.scale.5xl | core.spacing.700 | 64px |
| web.semantic.spacing.scale.6xl | core.spacing.800 | 80px |
| web.semantic.spacing.scale.7xl | core.spacing.1000 | 144px |
| web.semantic.spacing.standards.sectionPaddingTopBottom | core.spacing.600 | 48px |
| web.semantic.spacing.standards.subSections | core.spacing.400 | 32px |
| web.semantic.spacing.standards.hXXL-MD:p | core.spacing.100 | 8px |
| web.semantic.spacing.standards.hMD-XS:p | core.spacing.50 | 4px |
| web.semantic.spacing.focus | core.spacing.25 | 2px |
| web.semantic.opacity.overlay | core.opacity.lg | 0.40 |
| web.semantic.opacity.skeleton-light | core.opacity.xxs | 0.08 |
| web.semantic.opacity.skeleton-dark | core.opacity.md | 0.32 |
| web.semantic.box-shadow.l1 | core.box-shadow.70 | 0px 2px 4px -2px rgba(0,0,0,0.16) |
| web.semantic.box-shadow.l2 | core.box-shadow.100 | 0px 6px 8px -2px rgba(0,0,0,0.16) |
| web.semantic.box-shadow.l3 | core.box-shadow.120 | 0px 8px 24px -2px rgba(0,0,0,0.16) |
| web.semantic.box-shadow.left | core.box-shadow.130.left | -6px 0px 8px -2px rgba(0,0,0,0.16) |
| web.semantic.box-shadow.right | core.box-shadow.130.right | 6px 0px 8px -2px rgba(0,0,0,0.16) |
| web.semantic.box-shadow.focus.default | 0px 0px 4px 0px $core.color.brand.60 | 0px 0px 4px 0px #196ECF |
| web.semantic.box-shadow.focus.success | 0px 0px 4px 0px $core.color.green.100 | 0px 0px 4px 0px #007000 |
| web.semantic.box-shadow.focus.error | 0px 0px 4px 0px $core.color.red.120 | 0px 0px 4px 0px #990000 |
| web.semantic.font-family.h-serif | web.core.font-family.uhc-serif-headline | AbyssUHCSerif |
| web.semantic.font-family.h-sans | web.core.font-family.uhc2020-sans | AbyssUHCSans |
| web.semantic.font-family.p | web.core.font-family.uhc2020-sans | AbyssUHCSans |
| web-semantic-fontFamily-hSerif | web.core.font-family.enterprise-sans-vf | AbyssEnterpriseSansVF |
| web-semantic-fontFamily-hSans | web.core.font-family.enterprise-sans-vf | AbyssEnterpriseSansVF |
| web-semantic-fontFamily-p | web.core.font-family.enterprise-sans-vf | AbyssEnterpriseSansVF |