Skip to main content

Tokens Reference

A full reference of all core and semantic design tokens available in the Abyss Design System.

Token tables

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.

Tip

In the tables below, you can 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​

Tip

Click on the desired token to copy it to your clipboard.

Semantic Tokens

Semantic TokenReferenceValue
web.semantic.color.surface.interactive.standards.rest.default.primarycore.color.brand.100
#002677
web.semantic.color.surface.interactive.standards.rest.default.secondarycore.color.neutral.0
#FFFFFF
web.semantic.color.surface.interactive.standards.rest.default.tertiarycore.color.neutral.60
#7D7F81
web.semantic.color.surface.interactive.standards.rest.default.quaternarycore.color.neutral.10
#F3F3F3
web.semantic.color.surface.interactive.standards.rest.default.status.errorcore.color.red.120
#990000
web.semantic.color.surface.interactive.standards.rest.default.neutralcore.color.neutral.90
#323334
web.semantic.color.surface.interactive.standards.rest.selected.secondarycore.color.brand.5
#EDF3FB
web.semantic.color.surface.interactive.standards.rest.selected.tertiarycore.color.brand.60
#196ECF
web.semantic.color.surface.interactive.standards.rest.selected.quaternarycore.color.brand.5
#EDF3FB
web.semantic.color.surface.interactive.standards.hover.default.primarycore.color.brand.80
#004BA0
web.semantic.color.surface.interactive.standards.hover.default.secondarycore.color.neutral.10
#F3F3F3
web.semantic.color.surface.interactive.standards.hover.default.tertiarycore.color.neutral.80
#4B4D4F
web.semantic.color.surface.interactive.standards.hover.default.quaternarycore.color.neutral.20
#E5E5E6
web.semantic.color.surface.interactive.standards.hover.default.status.errorcore.color.red.110
#B20000
web.semantic.color.surface.interactive.standards.hover.default.neutralcore.color.neutral.95
#222324
web.semantic.color.surface.interactive.standards.hover.selected.secondarycore.color.brand.10
#E3EEFA
web.semantic.color.surface.interactive.standards.hover.selected.tertiarycore.color.brand.80
#004BA0
web.semantic.color.surface.interactive.standards.hover.selected.quaternarycore.color.brand.10
#E3EEFA
web.semantic.color.surface.interactive.standards.active.default.primarycore.color.brand.120
#00184D
web.semantic.color.surface.interactive.standards.active.default.secondarycore.color.neutral.20
#E5E5E6
web.semantic.color.surface.interactive.standards.active.default.tertiarycore.color.neutral.90
#323334
web.semantic.color.surface.interactive.standards.active.default.quaternarycore.color.neutral.30
#CBCCCD
web.semantic.color.surface.interactive.standards.active.default.status.errorcore.color.red.120
#990000
web.semantic.color.surface.interactive.standards.active.default.neutralcore.color.neutral.100
#000000
web.semantic.color.surface.interactive.standards.active.selected.secondarycore.color.brand.20
#D9E9FA
web.semantic.color.surface.interactive.standards.active.selected.tertiarycore.color.brand.100
#002677
web.semantic.color.surface.interactive.standards.active.selected.quaternarycore.color.brand.20
#D9E9FA
web.semantic.color.surface.interactive.standards.disabled.default.primarycore.color.neutral.10
#F3F3F3
web.semantic.color.surface.interactive.standards.disabled.default.secondarycore.color.neutral.10
#F3F3F3
web.semantic.color.surface.interactive.standards.disabled.default.tertiarycore.color.neutral.30
#CBCCCD
web.semantic.color.surface.interactive.standards.disabled.default.quaternarycore.color.neutral.30
#CBCCCD
web.semantic.color.surface.interactive.standards.disabled.selected.tertiarycore.color.neutral.30
#CBCCCD
web.semantic.color.surface.interactive.standards.disabled.selected.quaternarycore.color.neutral.30
#CBCCCD
web.semantic.color.surface.interactive.buttons.rest.ctacore.color.neutral.0
#FFFFFF
web.semantic.color.surface.interactive.buttons.rest.pair-errorcore.color.neutral.0
#FFFFFF
web.semantic.color.surface.interactive.buttons.rest.neutralcore.color.neutral.0
#FFFFFF
web.semantic.color.surface.interactive.buttons.hover.ctacore.color.brand.5
#EDF3FB
web.semantic.color.surface.interactive.buttons.hover.pair-errorcore.color.red.10
#FCF0F0
web.semantic.color.surface.interactive.buttons.hover.neutralcore.color.warm-white.10
#FAF8F2
web.semantic.color.surface.interactive.buttons.active.ctacore.color.brand.10
#E3EEFA
web.semantic.color.surface.interactive.buttons.active.pair-errorcore.color.red.40
#F9D1D1
web.semantic.color.surface.interactive.buttons.active.neutralcore.color.warm-white.20
#F5F3ED
web.semantic.color.surface.interactive.controls.rest.default.choicecore.color.neutral.0
#FFFFFF
web.semantic.color.surface.interactive.controls.rest.default.pickerscore.color.neutral.0
#FFFFFF
web.semantic.color.surface.interactive.controls.rest.selected.choicecore.color.brand.60
#196ECF
web.semantic.color.surface.interactive.controls.rest.selected.pickerscore.color.brand.100
#002677
web.semantic.color.surface.interactive.controls.hover.default.choicecore.color.neutral.0
#FFFFFF
web.semantic.color.surface.interactive.controls.hover.default.pickerscore.color.neutral.10
#F3F3F3
web.semantic.color.surface.interactive.controls.hover.selected.choicecore.color.brand.80
#004BA0
web.semantic.color.surface.interactive.controls.hover.selected.pickerscore.color.brand.80
#004BA0
web.semantic.color.surface.interactive.controls.active.default.choicecore.color.neutral.0
#FFFFFF
web.semantic.color.surface.interactive.controls.active.default.pickerscore.color.neutral.20
#E5E5E6
web.semantic.color.surface.interactive.controls.active.selected.choicecore.color.brand.100
#002677
web.semantic.color.surface.interactive.controls.active.selected.pickerscore.color.brand.120
#00184D
web.semantic.color.surface.interactive.controls.disabled.default.choicecore.color.neutral.30
#CBCCCD
web.semantic.color.surface.interactive.controls.disabled.selected.choicecore.color.neutral.60
#7D7F81
web.semantic.color.surface.interactive.controls.selectioncore.color.brand.20
#D9E9FA
web.semantic.color.surface.interactive.nav-menu-item.rest.defaultcore.color.brand.100
#002677
web.semantic.color.surface.interactive.nav-menu-item.rest.selectedcore.color.brand.60
#196ECF
web.semantic.color.surface.interactive.nav-menu-item.hover.defaultcore.color.brand.80
#004BA0
web.semantic.color.surface.interactive.nav-menu-item.hover.selectedcore.color.brand.80
#004BA0
web.semantic.color.surface.interactive.nav-menu-item.active.defaultcore.color.brand.120
#00184D
web.semantic.color.surface.interactive.nav-menu-item.active.selectedcore.color.brand.120
#00184D
web.semantic.color.surface.backgrounds.primarycore.color.neutral.0
#FFFFFF
web.semantic.color.surface.backgrounds.secondarycore.color.neutral.10
#F3F3F3
web.semantic.color.surface.container.header.maincore.color.neutral.0
#FFFFFF
web.semantic.color.surface.container.header.topLevelNavcore.color.brand.100
#002677
web.semantic.color.surface.container.primarycore.color.brand.100
#002677
web.semantic.color.surface.container.secondarycore.color.neutral.0
#FFFFFF
web.semantic.color.surface.container.tertiarycore.color.neutral.10
#F3F3F3
web.semantic.color.surface.container.inversecore.color.neutral.80
#4B4D4F
web.semantic.color.surface.container.emphasis.1core.color.green.20
#F0F9ED
web.semantic.color.surface.container.emphasis.2core.color.warm-white.10
#FAF8F2
web.semantic.color.surface.container.emphasis.3core.color.sky-blue.0
#FAFCFF
web.semantic.color.surface.container.emphasis.4core.color.aqua.15
#E5F8FB
web.semantic.color.surface.container.status.info.saturatedcore.color.brand.60
#196ECF
web.semantic.color.surface.container.status.info.tintcore.color.blue.10
#EEF4FF
web.semantic.color.surface.container.status.success.saturatedcore.color.green.100
#007000
web.semantic.color.surface.container.status.success.tintcore.color.green.20
#F0F9ED
web.semantic.color.surface.container.status.warning.saturatedcore.color.orange.120
#C24E14
web.semantic.color.surface.container.status.warning.tintcore.color.orange.10
#FFFBEB
web.semantic.color.surface.container.status.error.saturatedcore.color.red.120
#990000
web.semantic.color.surface.container.status.error.tintcore.color.red.10
#FCF0F0
web.semantic.color.surface.container.status.neutral.saturatedcore.color.neutral.80
#4B4D4F
web.semantic.color.surface.container.status.neutral.tintcore.color.neutral.10
#F3F3F3
web.semantic.color.surface.container.overlayrgba(0,0,0,0.4)
web.semantic.color.surface.decorative.gold.1core.color.yellow.100
#F5B700
web.semantic.color.surface.decorative.gold.2core.color.yellow.120
#D2800F
web.semantic.color.surface.decorative.turquoise.1core.color.turquoise.100
#149E8F
web.semantic.color.border.interactive.focus.regularcore.color.brand.80
#004BA0
web.semantic.color.border.interactive.focus.altcore.color.neutral.0
#FFFFFF
web.semantic.color.border.interactive.buttons.rest.altcore.color.neutral.0
#FFFFFF
web.semantic.color.border.interactive.buttons.hover.altcore.color.neutral.10
#F3F3F3
web.semantic.color.border.interactive.buttons.active.altcore.color.neutral.20
#E5E5E6
web.semantic.color.border.interactive.controls.rest.defaultcore.color.neutral.60
#7D7F81
web.semantic.color.border.interactive.controls.rest.selectedcore.color.brand.60
#196ECF
web.semantic.color.border.interactive.controls.hover.defaultcore.color.neutral.80
#4B4D4F
web.semantic.color.border.interactive.controls.hover.selectedcore.color.brand.80
#004BA0
web.semantic.color.border.interactive.controls.active.defaultcore.color.neutral.90
#323334
web.semantic.color.border.interactive.controls.active.selectedcore.color.brand.100
#002677
web.semantic.color.border.interactive.controls.disabled.defaultcore.color.neutral.60
#7D7F81
web.semantic.color.border.interactive.controls.disabled.selectedcore.color.neutral.60
#7D7F81
web.semantic.color.border.interactive.state-affordance.defaultcore.color.neutral.30
#CBCCCD
web.semantic.color.border.interactive.state-affordance.selectedcore.color.brand.60
#196ECF
web.semantic.color.border.interactive.forms.restcore.color.neutral.80
#4B4D4F
web.semantic.color.border.interactive.forms.hovercore.color.brand.60
#196ECF
web.semantic.color.border.interactive.forms.disabledrgba(0,0,0,0)
web.semantic.color.border.content.primarycore.color.brand.100
#002677
web.semantic.color.border.content.secondarycore.color.neutral.30
#CBCCCD
web.semantic.color.border.content.tertiarycore.color.neutral.20
#E5E5E6
web.semantic.color.border.content.altcore.color.neutral.0
#FFFFFF
web.semantic.color.border.content.decorative.gold.1core.color.yellow.100
#F5B700
web.semantic.color.border.content.decorative.gold.2core.color.yellow.120
#D2800F
web.semantic.color.border.content.decorative.brandingcore.color.neutral.0
#FFFFFF
web.semantic.color.border.content.neutralcore.color.neutral.90
#323334
web.semantic.color.border.status.saturated.infocore.color.blue.80
#126ECF
web.semantic.color.border.status.saturated.successcore.color.green.100
#007000
web.semantic.color.border.status.saturated.warningcore.color.orange.120
#C24E14
web.semantic.color.border.status.saturated.errorcore.color.red.120
#990000
web.semantic.color.border.status.saturated.neutralcore.color.neutral.80
#4B4D4F
web.semantic.color.border.status.subtle.infocore.color.blue.60
#C3D8F2
web.semantic.color.border.status.subtle.successcore.color.green.50
#BFDBBF
web.semantic.color.border.status.subtle.warningcore.color.orange.50
#F3D8C0
web.semantic.color.border.status.subtle.errorcore.color.red.60
#E8C0C0
web.semantic.color.border.status.subtle.neutralcore.color.neutral.30
#CBCCCD
web.semantic.color.icon.interactive.rest.primarycore.color.brand.100
#002677
web.semantic.color.icon.interactive.rest.primary-altcore.color.neutral.0
#FFFFFF
web.semantic.color.icon.interactive.rest.secondarycore.color.neutral.80
#4B4D4F
web.semantic.color.icon.interactive.rest.tertiarycore.color.brand.60
#196ECF
web.semantic.color.icon.interactive.rest.neutralcore.color.neutral.90
#323334
web.semantic.color.icon.interactive.rest.status.errorcore.color.red.120
#990000
web.semantic.color.icon.interactive.hover.primarycore.color.brand.80
#004BA0
web.semantic.color.icon.interactive.hover.primary-altcore.color.neutral.10
#F3F3F3
web.semantic.color.icon.interactive.hover.secondarycore.color.neutral.90
#323334
web.semantic.color.icon.interactive.hover.tertiarycore.color.brand.80
#004BA0
web.semantic.color.icon.interactive.hover.neutralcore.color.neutral.95
#222324
web.semantic.color.icon.interactive.hover.status.errorcore.color.red.110
#B20000
web.semantic.color.icon.interactive.active.primarycore.color.brand.120
#00184D
web.semantic.color.icon.interactive.active.primary-altcore.color.neutral.20
#E5E5E6
web.semantic.color.icon.interactive.active.secondarycore.color.neutral.100
#000000
web.semantic.color.icon.interactive.active.tertiarycore.color.brand.100
#002677
web.semantic.color.icon.interactive.active.neutralcore.color.neutral.100
#000000
web.semantic.color.icon.interactive.active.status.errorcore.color.red.130
#890000
web.semantic.color.icon.interactive.disabled.primarycore.color.neutral.80
#4B4D4F
web.semantic.color.icon.interactive.disabled.secondarycore.color.neutral.60
#7D7F81
web.semantic.color.icon.interactive.decorative.restcore.color.yellow.120
#D2800F
web.semantic.color.icon.interactive.decorative.hovercore.color.yellow.120
#D2800F
web.semantic.color.icon.interactive.decorative.activecore.color.yellow.170
#ad6a08
web.semantic.color.icon.content.primarycore.color.brand.100
#002677
web.semantic.color.icon.content.primary-altcore.color.neutral.0
#FFFFFF
web.semantic.color.icon.content.secondarycore.color.neutral.90
#323334
web.semantic.color.icon.content.headercore.color.neutral.0
#FFFFFF
web.semantic.color.icon.content.decorative.1core.color.yellow.100
#F5B700
web.semantic.color.icon.status.infocore.color.blue.80
#126ECF
web.semantic.color.icon.status.successcore.color.green.100
#007000
web.semantic.color.icon.status.warningcore.color.orange.120
#C24E14
web.semantic.color.icon.status.errorcore.color.red.120
#990000
web.semantic.color.icon.status.neutralcore.color.neutral.80
#4B4D4F
web.semantic.color.text.interactive.rest.primarycore.color.brand.60
#196ECF
web.semantic.color.text.interactive.rest.secondarycore.color.neutral.80
#4B4D4F
web.semantic.color.text.interactive.rest.altcore.color.neutral.0
#FFFFFF
web.semantic.color.text.interactive.rest.neutralcore.color.neutral.90
#323334
web.semantic.color.text.interactive.rest.status.errorcore.color.red.120
#990000
web.semantic.color.text.interactive.hover.primarycore.color.brand.80
#004BA0
web.semantic.color.text.interactive.hover.secondarycore.color.neutral.90
#323334
web.semantic.color.text.interactive.hover.altcore.color.neutral.10
#F3F3F3
web.semantic.color.text.interactive.hover.neutralcore.color.neutral.95
#222324
web.semantic.color.text.interactive.hover.status.errorcore.color.red.110
#B20000
web.semantic.color.text.interactive.active.primarycore.color.brand.100
#002677
web.semantic.color.text.interactive.active.secondarycore.color.neutral.100
#000000
web.semantic.color.text.interactive.active.altcore.color.neutral.20
#E5E5E6
web.semantic.color.text.interactive.active.neutralcore.color.neutral.100
#000000
web.semantic.color.text.interactive.active.status.errorcore.color.red.130
#890000
web.semantic.color.text.interactive.disabled.primarycore.color.neutral.60
#7D7F81
web.semantic.color.text.label.cta.disabledcore.color.neutral.80
#4B4D4F
web.semantic.color.text.label.cta.primarycore.color.brand.100
#002677
web.semantic.color.text.label.cta.primary-altcore.color.neutral.0
#FFFFFF
web.semantic.color.text.label.cta.secondarycore.color.neutral.90
#323334
web.semantic.color.text.label.cta.header.defaultcore.color.neutral.0
#FFFFFF
web.semantic.color.text.label.cta.header.activecore.color.neutral.0
#FFFFFF
web.semantic.color.text.label.forms.primarycore.color.neutral.80
#4B4D4F
web.semantic.color.text.content.primarycore.color.brand.100
#002677
web.semantic.color.text.content.primary-altcore.color.neutral.0
#FFFFFF
web.semantic.color.text.content.secondarycore.color.neutral.90
#323334
web.semantic.color.text.content.tertiarycore.color.neutral.80
#4B4D4F
web.semantic.color.text.status.infocore.color.blue.80
#126ECF
web.semantic.color.text.status.successcore.color.green.100
#007000
web.semantic.color.text.status.warningcore.color.orange.120
#C24E14
web.semantic.color.text.status.errorcore.color.red.120
#990000
web.semantic.color.text.status.neutralcore.color.neutral.80
#4B4D4F
web.semantic.color.text.footer.restcore.color.neutral.80
#4B4D4F
web.semantic.color.text.footer.hovercore.color.neutral.90
#323334
web.semantic.color.text.footer.activecore.color.neutral.100
#000000
web.semantic.border-radius.controls.fillcore.border-radius.none
0px
web.semantic.border-radius.controls.softcore.border-radius.xs
4px
web.semantic.border-radius.controls.fieldscore.border-radius.xs
4px
web.semantic.border-radius.controls.mediumcore.border-radius.sm
8px
web.semantic.border-radius.controls.roundcore.border-radius.full
500px
web.semantic.border-radius.controls.ctacore.border-radius.full
500px
web.semantic.border-radius.container.fullcore.border-radius.none
0px
web.semantic.border-radius.container.smallcore.border-radius.xs
4px
web.semantic.border-radius.container.menucore.border-radius.xs
4px
web.semantic.border-radius.container.largecore.border-radius.sm
8px
web.semantic.border-radius.container.emphasiscore.border-radius.md
12px
web.semantic.border-radius.container.roundcore.border-radius.full
500px
web.semantic.border-width.ctacore.border-width.sm
1px
web.semantic.border-width.iconscore.border-width.sm
1px
web.semantic.border-width.containercore.border-width.sm
1px
web.semantic.border-width.separatorcore.border-width.sm
1px
web.semantic.border-width.controlscore.border-width.md
2px
web.semantic.border-width.focuscore.border-width.lg
3px
web.semantic.border-width.double-focuscore.border-width.md
2px
web.semantic.border-width.fields.defaultcore.border-width.sm
1px
web.semantic.border-width.fields.activecore.border-width.lg
3px
web.semantic.border-width.indicator.defaultcore.border-width.sm
1px
web.semantic.border-width.indicator.thickcore.border-width.md
2px
web.semantic.border-width.indicator.dashedcore.border-width.md
2px
web.semantic.border-width.indicator.subtlecore.border-width.xs
0.5px
web.semantic.sizing.all.smcore.sizing.400
32px
web.semantic.sizing.all.mdcore.sizing.500
40px
web.semantic.sizing.all.lgcore.sizing.600
48px
web.semantic.sizing.all.xxscore.sizing.250
20px
web.semantic.sizing.all.xxlcore.sizing.900
80px
web.semantic.sizing.width.smcore.sizing.400
32px
web.semantic.sizing.width.mdcore.sizing.500
40px
web.semantic.sizing.width.lgcore.sizing.600
48px
web.semantic.sizing.width.fullcore.sizing.full
100%
web.semantic.sizing.width.min.smcore.sizing.400
32px
web.semantic.sizing.width.min.mdcore.sizing.500
40px
web.semantic.sizing.width.min.lgcore.sizing.600
48px
web.semantic.sizing.height.smcore.sizing.400
32px
web.semantic.sizing.height.mdcore.sizing.500
40px
web.semantic.sizing.height.lgcore.sizing.600
48px
web.semantic.sizing.height.fullcore.sizing.full
100%
web.semantic.sizing.height.min.smcore.sizing.400
32px
web.semantic.sizing.height.min.mdcore.sizing.500
40px
web.semantic.sizing.height.min.lgcore.sizing.600
48px
web.semantic.sizing.icon.utility.xscore.sizing.100
16px
web.semantic.sizing.icon.utility.smcore.sizing.250
20px
web.semantic.sizing.icon.utility.mdcore.sizing.300
24px
web.semantic.sizing.icon.illustrative.xscore.sizing.500
40px
web.semantic.sizing.icon.illustrative.smcore.sizing.600
48px
web.semantic.sizing.icon.illustrative.mdcore.sizing.700
64px
web.semantic.sizing.icon.illustrative.lgcore.sizing.900
80px
web.semantic.sizing.icon.illustrative.xlcore.sizing.1000
120px
web.semantic.max-width1088px
web.semantic.spacing.scale.xxscore.spacing.25
2px
web.semantic.spacing.scale.xscore.spacing.50
4px
web.semantic.spacing.scale.smcore.spacing.100
8px
web.semantic.spacing.scale.mdcore.spacing.150
12px
web.semantic.spacing.scale.lgcore.spacing.200
16px
web.semantic.spacing.scale.xlcore.spacing.300
24px
web.semantic.spacing.scale.2xlcore.spacing.400
32px
web.semantic.spacing.scale.3xlcore.spacing.500
40px
web.semantic.spacing.scale.4xlcore.spacing.600
48px
web.semantic.spacing.scale.5xlcore.spacing.700
64px
web.semantic.spacing.scale.6xlcore.spacing.800
80px
web.semantic.spacing.scale.7xlcore.spacing.1000
144px
web.semantic.spacing.standards.sectionPaddingTopBottomcore.spacing.600
48px
web.semantic.spacing.standards.subSectionscore.spacing.400
32px
web.semantic.spacing.standards.hXXL-MD:pcore.spacing.100
8px
web.semantic.spacing.standards.hMD-XS:pcore.spacing.50
4px
web.semantic.spacing.focuscore.spacing.25
2px
web.semantic.opacity.overlaycore.opacity.lg
0.40
web.semantic.opacity.skeleton-lightcore.opacity.xxs
0.08
web.semantic.opacity.skeleton-darkcore.opacity.md
0.32
web.semantic.box-shadow.l1core.box-shadow.70
0px 2px 4px -2px rgba(0,0,0,0.16)
web.semantic.box-shadow.l2core.box-shadow.100
0px 6px 8px -2px rgba(0,0,0,0.16)
web.semantic.box-shadow.l3core.box-shadow.120
0px 8px 24px -2px rgba(0,0,0,0.16)
web.semantic.box-shadow.leftcore.box-shadow.130.left
-6px 0px 8px -2px rgba(0,0,0,0.16)
web.semantic.box-shadow.rightcore.box-shadow.130.right
6px 0px 8px -2px rgba(0,0,0,0.16)
web.semantic.box-shadow.focus.default0px 0px 4px 0px $core.color.brand.60
0px 0px 4px 0px #196ECF
web.semantic.box-shadow.focus.success0px 0px 4px 0px $core.color.green.100
0px 0px 4px 0px #007000
web.semantic.box-shadow.focus.error0px 0px 4px 0px $core.color.red.120
0px 0px 4px 0px #990000
web.semantic.font-family.h-serifweb.core.font-family.uhc-serif-headline
AbyssUHCSerif
web.semantic.font-family.h-sansweb.core.font-family.uhc2020-sans
AbyssUHCSans
web.semantic.font-family.pweb.core.font-family.uhc2020-sans
AbyssUHCSans