Skip to main content

Tokens

Overview

Submit feedback
Edit this page

Overview​

Design tokens are the visual sub-atom variables of a design system. They contain UI data such as colors, border width, elevation, and even motion.

They are used in the place of hard-coded values such as hex codes or pixels to maintain scalability and consistency.

Think about them as recipe ingredients - you could add chocolate to a salad, but it won't be very tasty. You would only consider what is a standard salad ingredient - it's the same with tokens, they are a limited set of options that make sense for our product.

Further reading: Nathan Curtis on tokens in design systems

Token hierarchy​

Abyss uses a 3-tier token system:

  • Core tier - the WHAT or the OPTIONS: contains primitive values with no specific meaning—the name of the token and its raw value (RGB hex code for colors; numbers for border widths, spacing, opacity; etc.)
  • Semantic tier - the HOW or the DECISIONS: communicates design decisions on the exact usage of a Core token system-wide.
  • Component tier - the WHY or the IMPLEMENTATION: specific to individual components, these tokens define how a component should look in different states (hover, active, disabled, etc.) using Semantic tokens.

Using tokens​

Before you can consume Abyss tokens, your application must use our ThemeProvider. This will allow you to access the tokens throughout your project.

Tokens are used in place of hard-coded values such as RGB hex codes or pixel values. To use a token, you can reference it in your code using the $ symbol followed by the token name.

All Abyss components can accept tokens when they are used in the styled tool or the useToken hook. Non-Abyss components can use the styled tool to accept tokens.

Styled tool​

To create a div component with a background color of $core.color.brand.100, you can leverage our styled tool and do the following:

() => {
  const Example = styled('div', {
    backgroundColor: '$core.color.brand.100',
    height: 100,
    width: 100,
  });


  return <Example />;
};

useToken hook​

Alternatively, you can use our useToken Hook to directly access the value of a token. This is useful when you need the value of multiple tokens.

() => {
  const getColorToken = useToken('colors');
  const green = getColorToken('$core.color.green.100');
  const red = getColorToken('$core.color.red.120');
  const brand = getColorToken('$core.color.brand.100');


  return (
    <React.Fragment>
      <div style={{ backgroundColor: green, height: 50, width: 100 }} />
      <div style={{ backgroundColor: red, height: 50, width: 100 }} />
      <div style={{ backgroundColor: brand, height: 50, width: 100 }} />
    </React.Fragment>
  );
};
  • Custom theme tutorial: This tutorial will guide you through creating a custom Abyss theme for your project.
  • createTheme tool: This tool allows you to create and modify themes to fit your design needs.
  • ThemeProvider: Provider that passes the theme object down the component tree giving your project access to Abyss tokens.
  • styled tool: Tool that allows you to create styled components.
  • useToken hook: Hook that allows you to access the value of a token in your project.

Core tokens

Note: Click on the token row to copy the token to your clipboard.

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

Border width tokens

border-width tokens are used to define the borderWidth on components.

const Example = styled('div', {
  borderWidth: '$core.border-width.sm',
});
core.border-width.none0px
core.border-width.xs0.5px
core.border-width.sm1px
core.border-width.md2px
core.border-width.lg3px

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.50',
});
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. The examples below use the size tokens to define the width of the example box.

const Example = styled('div', {
  width: '$core.sizing.300',
  height: '$core.sizing.300',
});
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

Opacity tokens

opacity tokens are used to define the opacity of components.

const Example = styled('div', {
  opacity: '$core.opacity.lg',
});
core.opacity.xxs0.08
core.opacity.md0.32
core.opacity.lg0.40
core.opacity.xl0.80
core.opacity.full1

Box shadow tokens

boxShadow tokens are used to define the box shadow of components. In Abyss, box shadows are used to define elevation levels.

const Example = styled('div', {
  boxShadow: '$core.box-shadow.60',
});
core.box-shadow.600px 0px 4px 0px rgba(0,0,0,0.6)
core.box-shadow.700px 2px 4px -2px rgba(0,0,0,0.16)
core.box-shadow.800px 4px 4px -2px rgba(0,0,0,0.16)
core.box-shadow.1000px 6px 8px -2px rgba(0,0,0,0.16)
core.box-shadow.1200px 8px 24px -2px rgba(0,0,0,0.16)
core.box-shadow.130.left-6px 0px 8px -2px rgba(0,0,0,0.16)
core.box-shadow.130.right6px 0px 8px -2px rgba(0,0,0,0.16)

Semantic tokens

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

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
web-semantic-fontFamily-hSerifweb.core.font-family.enterprise-sans-vf
AbyssEnterpriseSansVF
web-semantic-fontFamily-hSansweb.core.font-family.enterprise-sans-vf
AbyssEnterpriseSansVF
web-semantic-fontFamily-pweb.core.font-family.enterprise-sans-vf
AbyssEnterpriseSansVF
Table of Contents