[email protected]

Changes

There are no breaking API changes from v0.9.0. The below changes are updates to design token values to reflect a major visual update to the HPE theme.

Colors

• color.background.screenOverlay updated from base.color.black.opacity50 to base.color.black.opacity12.
• color.background.info updated from color.background.contrast to base.color.blue.400-opacity12.
• color.background.warning light mode value updated from base.color.yellow.400-opacity24 to base.color.yellow.400-opacity12.
• color.background.critical light mode value updated from base.color.red.500-opacity24 to base.color.red.500-opacity12.
• color.background.ok light mode value updated from base.color.green.400-opacity24 to base.color.green.400-opacity12.
• color.background.primary.strong updated from base.color.green.600 to base.color.green.700 in light mode and base.color.green.600 to #007C60 in dark mode.
• color.background.primary.strong.hover updated from base.color.green.700 to base.color.green.800 in light mode and base.color.green.600 to #00513F in dark mode.
• color.background.selected.primary.strong updated from base.color.brand to color.background.primary.strong.
• color.background.selected.primary.strong.hover updated from base.color.brand to color.background.primary.strong.hover.
• color.border.selected updated from base.color.green.600 to base.color.green.700 in light mode.
• color.border.critical updated from color.border.default to base.color.red.800 in light mode and color.border.default to color.foreground.critical in dark mode.
• color.text.critical updated from color.text.default to base.color.red.800 in light mode and color.foreground.critical in dark mode.
• color.text.anchor updated from color.text.strong to color.text.primary.
• color.text.anchor.hover updated from color.text.strong to color.text.primary-hover.
• color.icon.info updated from color.icon.default to base.color.blue.900 in light mode and color.icon.default to base.color.blue.700 in dark mode.
• color.icon.primary updated from base.color.green.600 to base.color.green.800 in light mode and base.color.green.600 to base.color.green.500 in dark mode.

Typography

Heading

Heading sizes, line-heights, and font-weights have been adjusted to improve legibility and page hierarchy.

heading.xlarge

• lineHeight updated from 36px to 40px (exported as rem)
• fontWeight updated from medium to regular

heading.large

• fontSize updated from 24px to 28px (exported as rem)
• lineHeight updated from 24px to 32px (exported as rem)
• fontWeight updated from medium to regular

heading.medium

• fontSize updated from 20px to 24px (exported as rem)
• lineHeight updated from 20px to 28px (exported as rem)
• fontWeight updated from medium to regular

heading.small

• fontSize updated from 16px to 20px (exported as rem)
• lineHeight updated from 20px to 24px (exported as rem)
• fontWeight updated from medium to regular

heading.xsmall

• fontSize updated from 12px to 18px (exported as rem)
• lineHeight updated from 12px to 20px (exported as rem)

heading.xxsmall

• fontSize updated from 12px to 16px (exported as rem)
• lineHeight updated from 12px to 18px (exported as rem)

Text

Text font-weights have been updated to use fontWeight.regular across all text sizes by default.

Anchor

• Anchor color has been updated from color.text.strong to color.text.primary.

Buttons

Because of improved color contrast ratios in the updated color palette, all medium buttons have been updated to use 18px (exported as rem) as opposed to 19px which was previously required on color.background.primary.strong.

Primary

button.primary.rest

• background pulls in updated value from color.background.primary.strong.
• fontWeight updated from bold to semibold.

button.primary.hover

• background pulls in updated value from color.background.primary.strong.hover.
• fontWeight updated from bold to semibold.

button.primary.selected.rest

• background updated from color.background.contrast to color.background.primary.xstrong.
• fontWeight updated from bold to semibold.

button.primary.selected.hover

• background updated from color.background.contrast to color.background.primary.xstrong.
• fontWeight updated from bold to semibold.

Secondary

button.secondary.rest

• background updated from color.transparent to color.background.contrast.
• borderColor updated from brand to color.transparent
• textColor updated from color.text.strong to color.text.primary
• iconColor updated from color.icon.strong to color.icon.primary.

button.secondary.hover

• background updated from color.transparent to color.background.contrast.
• borderColor updated from brand to color.transparent
• textColor updated from color.text.strong to color.text.primary
• iconColor updated from color.icon.strong to color.icon.primary.

button.secondary.disabled.rest

• borderColor updated from color.border.disabled to color.transparent

button.secondary.selected.rest

• background updated from color.background.contrast to color.background.selected.primary.
• textColor updated from color.text.strong to color.text.primary
• iconColor updated from color.icon.strong to color.icon.primary.

button.secondary.selected.hover

• background updated from color.background.contrast to color.background.selected.primary.hover.
• textColor updated from color.text.strong to color.text.primary.
• iconColor updated from color.icon.strong to color.icon.primary.

Default

button.default.rest

• fontWeight updated from semibold to medium.

button.default.hover

• fontWeight updated from semibold to medium.

button.default.selected.rest

• textColor updated from color.text.strong to color.text.primary.
• iconColor updated from color.icon.strong to color.icon.primary.

button.default.selected.hover

• textColor updated from color.text.strong to color.text.primary.
• iconColor updated from color.icon.strong to color.icon.primary.

Toolbar

button.toolbar.rest

• borderColor updated from color.border.default to color.transparent.
• textColor updated from color.text.strong to color.text.default.
• iconColor updated from color.icon.strong to color.icon.default.

button.toolbar.hover

• textColor updated from color.text.strong to color.text.default.
• iconColor updated from color.icon.strong to color.icon.default.

button.toolbar.disabled.rest

• borderColor updated from color.border.disabled to color.transparent.

button.toolbar.selected.rest

• background updated from color.background.contrast to color.background.selected.primary.
• textColor updated from color.text.strong to color.text.primary.
• iconColor updated from color.icon.strong to color.icon.primary.

button.toolbar.selected.hover

• background updated from color.background.contrast to color.background.selected.primary.hover.
• textColor updated from color.text.strong to color.text.primary.
• iconColor updated from color.icon.strong to color.icon.primary.

Inputs

Checkbox

checkbox.default.control.rest

• background updated from color.background.default to color.transparent.

checkbox.default.control.hover

• background updated from color.default to color.background.hover.

checkbox.default.control.selected.rest / checkbox.default.indeterminate.rest

• background pulls in updated color.background.primary.strong.

checkbox.default.control.selected.hover / checkbox.default.indeterminate.hover

• background pulls in updated color.background.primary.strong.hover.

checkbox.default.label

• fontWeight across all states updated from medium to regular.

checkbox.default.medium.control

• borderRadius updated from static.radius.xxsmall to static.radius.xsmall.

Switch

switch.default.control.track.rest

• background updated from color.background.default to color.decorative.neutral.
• borderColor updated from color.border.default to color.transparent.

switch.default.control.track.hover

• background updated from color.default to color.decorative.neutral.hover.
• borderColor updated from color.border.strong to `colo...

[email protected]

This release provides production-ready support for HPE Design Tokens with styles in alignment with the existing HPE theme (grommet-theme-hpe v5).

hpe-design-tokens v1.0.0 applies the updated look and feel of the HPE theme. Therefore to ease adoption of design tokens, v0.9.0 allows teams with existing applications to adopt design tokens while maintaining styling that aligns with existing theming. There are no breaking API changes from v0.9.0 to v1.0.0. The only changes are value changes to reflect the updated HPE theme.

Breaking changes

• b87e080: - Renamed 3xl, 4xl, 5xl text and anchor sizes to 3xlarge, 4xlarge, and 5xlarge for consistency with other t-shirt size naming.
• 6df1814: - Updated anchor.disabled tokens to be structured as anchor.disabled.rest.
• 6df1814: - Updated dataCell.primary.disabled tokens to be structured as dataCell.primary.disabled.rest.
• 66ca9da:
  • Renamed exports from "base" to "primitives" (e.g., "base.css" --> "primitives.css").
  • Removed "default" from CJS/ESM component token exports (e.g., "components.default.cjs" --> "components.js"). No effect on import.
  • Removed light/dark, medium/small modes from ESM/CommonJS exports. Because these now return CSS variable refs, we don't need separate mode exports. (e.g., "color.light.js" --> "color.js").
• cb9764f: - Moved fontWeight tokens for checkbox, switch, and radiobutton label under each state.
• fc7ba24:
  • Renamed color.background.primary.default --> color.background.primary.strong.
  • Renamed color.background.selected.strong.enabled --> color.background.selected.primary.strong.
  • Renamed color.background.selected.strong.hover --> color.background.selected.primary.strong.hover.
  • Renamed color.background.selected.weak.enabled --> color.background.selected.primary.
  • Renamed color.background.selected.weak.hover --> color.background.selected.primary.hover.
  • Renamed color.text.onPrimary --> color.text.onPrimaryStrong.
  • Renamed color.text.heading.default --> color.text.heading.
  • Renamed color.text.onSelectedStrong --> color.text.onSelectedPrimaryStrong.
  • Renamed color.text.onSelected --> color.text.onSelectedPrimary.
  • Renamed color.text.onStrong.default --> color.text.onStrong.
  • Renamed color.text.onCritical.default --> color.text.onCritical.
  • Renamed color.text.onWarning.default --> color.text.onWarning.
  • Renamed color.text.onOk.default --> color.text.onOk.
  • Renamed color.text.onInfo.default --> color.text.onInfo.
  • Renamed color.text.onUnknown.default --> color.text.onUnknown.
  • Renamed color.icon.onPrimary --> color.icon.onPrimaryStrong.
  • Renamed color.icon.onSelectedStrong --> color.icon.onSelectedPrimaryStrong.
  • Renamed color.icon.onSelected --> color.icon.onSelectedPrimary.
• 6c11700:
  • Removed color.text.xweak, color.icon.xweak, color.text.brand, color.icon.brand.
  • Renamed enabled in component tokens to rest.
  • Removed checkbox.control.selected.disabled (use checkbox.control.disabled.rest).
  • Removed radiobutton.control.selected.disabled (use radiobutton.control.disabled.rest).
  • Removed dataCell.primary.disabled (use dataCell.disabled.rest).
  • Restructured Anchor token structure from anchor.[size].default to anchor.default.[size] in alignment with button token structure.
• f9c30cc:
  • Updated borderWidth scale values (and removed unused value of xlarge).
  • Removed incorrect dataCell.pinned.rest.backgroundColor in favor of existing dataCell.pinned.rest.background.
• 2b30ef4:
  • Changed ESM/CommonJS exports to resolve to CSS variables rather than raw values.
  • Changed structure of "color" exports to flatten color name after the category (e.g., hpe.color.background.selected.weak --> hpe.color.background['selected-weak']).
• a334ab2: - Removed "!" namespaced decorative colors (e.g., hpe.color.decorative.green!).
• 38aad17: - Removed component-specific focus tokens in favor of relying on global focusIndicator tokens.
• c376a85:
  • Removed fontStack.code.
  • Removed display.medium.
  • Removed text.6xl, anchor.6xl.
• 52674f0:
  • Removed formField.input.group.item.status.critical tokens.
  • Removed formField text "error" tokens for complex states, now only support error.rest, error.hover, error.focus.
  • Renamed formField "enabled" tokens to "rest".
  • Renamed formField "status.critical" tokens to "error.rest".
  • Renamed formField "disabled" tokens to "disabled.rest".
  • Renamed formField "readOnly" tokens to "readOnly.rest".
  • Renamed base.static tokens to static.
• c3982ea: - Renamed default dimension mode from "medium" to "default".
• dc6b0f3:
  • Renamed size.icon[t-shirt size] to icon[t-shirt size].size (e.g., size.icon.xsmall --> icon.xsmall.size).
  • Renamed size.container[t-shirt size] to container[t-shirt size] (e.g., size.container.medium --> container.medium).
  • Renamed all default component tokens to include "default" namespace (e.g., checkbox.control.rest.background --> checkbox.default.control.rest.background).

Added

• 6df1814: - Added color.text.anchor, color.text.anchor.hover.
• 083dab9:
  • Added anchor.default.xsmall tokens.
  • Added color.decorative.neutral, color.decorative.neutral.hover
• f9c30cc: - Added iconColor for select.option states.
• 2b30ef4: - Added new export hpe-design-tokens/grommet.
• 11926ea: - Added iconColor tokens to formField label.
• 38aad17: - Added drop.boxShadow.
• 52674f0: - Added formField.input.group.container.error.rest tokens.

Updated

• 6df1814: - Fixed color-background-screenOverlay.
• 38aad17: - Fixed icon.info and background.info to correct values.
• 78fb822: Fixed formField.input.group.container.enabled.background, formField.input.group.container.hover.background to color.transparent.
• 6700928: - Fixed container token values in "small" mode to remain the same as "default" mode, in alignment with current behavior.
• 1affdd5: - Fixed t-shirt scales and values for spacing and container tokens.
• 11926ea:
  • Fixed switch.medium.label.lineHeight.
  • Fixed formField.input.group.container.error.rest.borderColor.
  • Fixed formField.input.group.container.disabled.rest.background.
  • Fixed formField.help.disabled.rest.textColor.
  • Fixed base.color.grey.1000 which is used by light mode for color.text.strong.
• e3bf8e6: - Fixed shadow.small dimension and shadow.large dark mode color.

[email protected]

Breaking changes

• c682b78: Renamed color.text.onSelectedWeak to color.text.onSelected.

Updated

• c682b78: Added selected/hover states for buttons.
• c682b78: Added color.text.primary.
• c682b78: Added base.color.green.800.
• c682b78: Added base.color.grey.550.

[email protected]

Breaking changes

• #4447 e601f2a: Renamed size.content to size.container, base.static.content to base.static.container
• #4448 133aa8f: Removed paragraph tokens, moved paragraph.[size].maxWidth tokens text.[size].maxWidth

Updated

• #4469 1117f91: Updated dark and light mode of color.background.primary.hover, updated dark mode of color.decorative.brand

[email protected]

• Fixed CSS output for dimension.medium.css by removing incorrect media query introduced in v0.5.0.

[email protected]

Breaking changes

component.default.json

• Restructured button.[t-shirt size].[kind] to button.[kind].[t-shirt size] (e.g., button.medium.primary.paddingY —> button.primary.medium.paddingY)

The reason for this restructuring is for the token namespace/architecture to lead with “function” and follow with “form”:

• generic function = UI control (e.g., button)
• specific function = Variant of the control tailored to the use-case (e.g., button.primary)
• style = State context (e.g., button.primary.enabled.background) + dimension context (e.g., button.primary.medium.paddingY)

component.default.json

• Removed switch.medium.width (use switch.medium.control.track.width)
• Removed switch.medium.height (use switch.medium.control.track.height)
• Removed switch.medium.borderRadius (use switch.medium.control.track.borderRadius)
• Removed switch.medium.borderWidth (use switch.medium.control.track.borderWidth)

color.light.json, color.dark.json

• Removed color.shadow.weak (use shadow.small for full shadow style)
• Removed color.shadow.default (use shadow.medium for full shadow style)
• Removed color.shadow.strong (use shadow.large for full shadow style)

Added

color.light.json, color.dark.json

• color.decorative.brand

global.default.json

• focusIndicator.outlineOffset
• focusIndicator.boxShadow

Updated

color.light.json

• color.background.unknown from base.color.grey.50 to base.color.black.opacity4

color.dark.json

• color.background.unknown from base.color.grey.1200 to base.color.white.opacity6

[email protected]

Added

color.light.json, color.dark.json

• ec8f38d - color.border.critical, color.border.info, color.border.ok, color.border.warning, color.border.unknown
• 0bf081b - color.background.neutral.xstrong

component.default.json

• 96c0d71
  • formField.medium.input.group.item.textToIconX
  • formField.medium.input.group.item.textToElementX
  • formField.medium.input.container.textToIconX
  • formField.medium.input.container.textToElementX

Updated

component.default.json

• 740101a - Button tokens to use element tokens and static sizing
• 86db503 - Drop tokens to use static sizing
• 8526d51 - Menu tokens to use static sizing and color.transparent
• a898dec - Select tokens to use static sizing and color.transparent
• 74c508e - Checkbox and switch tokens to use base.dimension tokens instead of lineHeight, checkbox.enabled.background, and checkbox.hover.background
• 64b7fb9 - dataCell, headerCell, and footerCell tokens to use color.transparent, also fixed some incorrectly mapped textColor tokens
• 0c40456 - formField tokens to use color.transparent and formField.error.[state].textColor to use color.text.critical
• d171ce5 - radioButton tokens to use color.transparent and base.dimension tokens instead of lineHeight

[email protected]

Breaking changes

dimension.large.json has been renamed to dimension.medium.json, meaning large export is now medium.

For CSS:

- hpe-design-tokens/dist/css/dimension.large.css
+ hpe-design-tokens/dist/css/dimension.medium.css

For ESM:

- import { large } from 'hpe-design-tokens';
+ import { medium } from 'hpe-design-tokens';

...

- large.hpe.spacing.medium
+ medium.hpe.spacing.medium

For CJS:

- const { large } = require('hpe-design-tokens');
+ const { large } = require('hpe-design-tokens');

...

- large.hpe.spacing.medium
+ medium.hpe.spacing.medium

color.light.json, color.dark.json

• Renamed color.background.overlay to color.background.screenOverlay
• Renamed background.status.[statusKind] to background.[statusKind] (e.g., background.status.info —> background.info)
• Renamed color.icon.status.[statusKind] to color.icon.[statusKind] (e.g., color.icon.status.info —> color.icon.info)
• Renamed elevation tokens to shadow (e.g., elevation.small —> shadow.small)
• Removed color.text.inverse.default
• Removed Weak DataVis colors (e.g., color.dataVis.20Weak)

element.default.json

• Renamed component tokens to element tokens (eg., component.medium.fontSize —> element.medium.fontSize)

component.default.json

• Renamed formField valueText tokens to value (e.g., formField.valueText.enabled.textColor --> formField.value.enabled.textColor)
• Renamed formField placeholderText tokens to placeholder (e.g., formField.placeholderText.enabled.textColor --> formField.placeholder.enabled.textColor)
• Renamed formField errorText tokens to error (e.g., formField.errorText.enabled.textColor --> formField.error.enabled.textColor)
• Renamed formField labelText tokens to label (e.g., formField.labelText.enabled.textColor --> formField.label.enabled.textColor)
• Renamed formField infoText tokens to info (e.g., formField.infoText.enabled.textColor --> formField.info.enabled.textColor)
• Renamed formField helpText tokens to help (e.g., formField.helpText.enabled.textColor --> formField.help.enabled.textColor)
• Removed Anchor emphasized tokens

primitive.base.json

• Removed base.color.dataVis.green1000
• Removed base.color.dataVis.green325
• Removed base.color.dataVis.green3250opacity50
• Removed base.color.dataVis.pink1000
• Removed base.color.dataVis.pink325
• Removed base.color.dataVis.pink325-opacity50
• Removed base.color.dataVis.purple1000
• Removed base.color.dataVis.purple325
• Removed base.color.dataVis.purple325-opacity50
• Removed base.color.dataVis.blue1000
• Removed base.color.dataVis.blue325
• Removed base.color.dataVis.blue325-opacity50

Added

component.default.json

• button.[t-shirt size].[kind].iconOnly.minWidth (e.g., button.medium.primary.iconOnly.minWidth)
• formField.error.status.critical.iconColor

Updated

color.light.json

• color.dataVis.categorical.80 from base.color.dataVis.blue325 to base.color.dataVis.grape1

devDependencies

• style-dictionary from ^3.9.2 to ^4.2.0
• style-dictionary-utils from ^2.0.7 to ^3.0.0

[email protected]

Added

primitive.base.json

• base.static.radius.full
• base.dimensions.350
• color.dataVis.green1
• color.dataVis.darkblue1
• color.dataVis.purple1
• color.dataVis.gold1
• color.dataVis.lightblue1
• color.dataVis.pink1
• color.dataVis.blue1
• color.dataVis.grape1
• color.dataVis.darkblue2
• color.dataVis.purple2
• color.dataVis.gold2
• color.dataVis.lightblue2
• color.dataVis.pink2
• color.dataVis.blue2
• color.dataVis.purple3
• color.green.650
• color.grey.600
• color.orange.600
• color.red.600

color.light.json, color.dark.json

• color.background.selected.strong.hover
• color.foreground.primary
• color.foreground.critical
• color.foreground.warning
• color.foreground.unknown
• color.foreground.primary
• color.text.critical
• color.text.warning
• color.text.info
• color.text.ok
• color.text.unknown
• color.text.onCritical.default
• color.text.onCritical.strong
• color.text.onWarning.default
• color.text.onWarning.strong
• color.text.onOk.default
• color.text.onOk.strong
• color.text.onWarning.default
• color.text.onWarning.strong
• color.text.onInfo.default
• color.text.onInfo.strong
• color.text.onUnknown.default
• color.text.onUnknown.strong
• color.text.onStrong

component.default.json

• button.xsmall tokens
• component.xsmall.icon.size
• component.small.icon.size
• component.medium.icon.size
• component.large.icon.size
• component.xlarge.icon.size
• dataCell.enabled.iconColor
• dataCell.hover.iconColor
• dataCell.disabled.iconColor
• dataCell.pinned.iconColor
• dataCell.primary.enabled.iconColor
• dataCell.primary.hover.iconColor
• dataCell.primary.disabled.iconColor
• dataCell.primary.pinned.iconColor
• headerCell.enabled.iconColor
• headerCell.hover.iconColor
• headerCell.pinned.iconColor
• footerCell.enabled.iconColor
• footerCell.hover.iconColor
• footerCell.pinned.iconColor
• formField.errorText.enabled.iconColor
• formField.errorText.hover.iconColor
• formField.errorText.focus.iconColor
• formField.errorText.disabled.iconColor
• formField.errorText.readOnly.iconColor

Updated

dimension.large.json

• icon.xsmall from base.dimension.400 to base.dimension.350

dimension.small.json

• icon.xsmall from base.dimension.400 to base.dimension.350

color.light.json

• color.icon.status.critical from base.color.red.550 to base.color.red.600
• color.icon.status.warning from base.color.orange.400 to base.color.orange.600
• color.icon.status.ok from base.color.green.400 to base.color.green.650
• color.icon.status.unknown from base.color.grey.400 to base.color.grey.600
• color.dataVis.categorical.10. from base.color.dataVis.green1000 to base.color.dataVis.green1
• color.dataVis.categorical.20 from base.color.dataVis.green325 to base.color.dataVis.darkblue1
• color.dataVis.categorical.30 from base.color.dataVis.pink1000 to base.color.dataVis.purple1
• color.dataVis.categorical.40 from base.color.dataVis.pink325 to base.color.dataVis.purple1
• color.dataVis.categorical.50 from base.color.dataVis.purple1000 to base.color.dataVis.lightblue1
• color.dataVis.categorical.60 from base.color.dataVis.purple325 to base.color.dataVis.pink1
• color.dataVis.categorical.70 from base.color.dataVis.blue1000 to base.color.dataVis.blue1

color.dark.json

• color.icon.status.critical from base.color.red.750 to base.color.red.550
• color.icon.status.warning from base.color.orange.700 to base.color.orange.600
• color.icon.status.ok from base.color.green.700 to base.color.green.500
• color.dataVis.categorical.10. from TBD to base.color.dataVis.green1
• color.dataVis.categorical.20 from TBD to base.color.dataVis.darkblue2
• color.dataVis.categorical.30 from TBD to base.color.dataVis.gold2
• color.dataVis.categorical.40 from TBD to base.color.dataVis.purple2
• color.dataVis.categorical.50 from TBD to base.color.dataVis.lightblue2
• color.dataVis.categorical.60 from TBD to base.color.dataVis.pink2
• color.dataVis.categorical.70 from TBD to base.color.dataVis.blue2
• color.dataVis.categorical.80 from TBD to base.color.dataVis.purple3

component.default.json

• formField.label.disabled.textColor from color.text.strong to color.text.disabled
• component.xsmall.paddingX.wide from 9 to base.dimension.225 (equates to 9)
• component.small.paddingX.wide from 9 to base.static.spacing.small
• component.medium.paddingX.wide from 15 to base.dimension.450
• component.large.lineHeight from text.xlarge.lineHeight to text.large.lineHeight
• component.large.paddingY from 8 to 9
• component.large.paddingX.narrow from 9 to base.dimension.225 (equates to 9)
• component.large.paddingX.default from 18 to base.dimension.450 (equates to 18)
• component.large.paddingX.wide from 24 to base.dimension.600 (equates to 24)
• component.xlarge.fontSize from text.xlarge.lineHeight to text.xlarge.fontSize
• component.xlarge.paddingX.narrow from 16 to base.dimension.500
• component.xlarge.paddingX.default from 24 to base.dimension.600 (equates to 24)

[email protected]

We’re excited to announce the release of hpe-design-tokens v0.1.0, our first iteration of design tokens for HPE products. 🚀

Design tokens enable the delivery of a unified visual language for HPE, allowing HPE’s brand and expression to evolve and change overtime with ease and minimal impact to design and development teams.

Currently, this release is optional for all design system users. The purpose of this release is to test design tokens in preparation for the v1 release. So use them, break them, test them and let us know what works and what can be improved.

How to get started:

Read up and learn more about HPE design tokens. You’ll find an overview and docs for Using tokens in Figma and Using tokens in code. Also, you can use this handy All design tokens table to browse the HPE design token catalog.