v6 to v7 Migration

The American Express Design System provides a unified language for designing American Express websites and experiences. The design system provides design resources that match our coded components and are aligned with the American Express brand. Included are colors, components, icons and glyphs, type styles, and graphic assets to get you up and running quickly.

On this page

Color Utility Classes

In DLS v6, there were a number of color utility classes that could be used to apply hardcoded colors to text, graphics, and backgrounds.

In DLS v7, those utility classes have been deprecated in favor of new utility classes which are mode/surface aware. The new utility classes will automatically adjust based on the Mode and Surface. In addition, the Surface component can be used to create a visual layer.

The below v6 utility classes have been deprecated. They are still available in the v7 stylesheet for backwards compatibility, but should be replaced with the v7 recommended solution. They will be removed entirely in the next major version of DLS.

v6 Utility Classv7 Recommended Solution
dls-bright-blueIf text, use color-text-brand
If graphic, use color-graphic-brand
dls-bright-blue-bgUse Surface variant='fg-brand'>
dls-bright-blue-bg-hvr:hoverDeprecated
If building custom components which require interactive states, reach out to DLS team on guidance
dls-deep-blueIf text, use color-text-brand-alt
If graphic, use color-graphic-brand-alt
dls-deep-blue-bgUse Surface variant='fg-brand-alt'>
dls-deep-blue-bg-hvr:hoverDeprecated
If building custom components which require interactive states, reach out to DLS team on guidance
dls-light-blueDeprecated
dls-light-blue-bgDeprecated
dls-light-blue-bg-hvr:hoverDeprecated
dls-bright-blue-hoverDeprecated
If building custom components which require interactive states, reach out to DLS team on guidance
dls-bright-blue-hover-bgDeprecated
If building custom components which require interactive states, reach out to DLS team on guidance
dls-bright-blue-hover-bg-hvr:hoverDeprecated
If building custom components which require interactive states, reach out to DLS team on guidance
dls-bright-blue-activeDeprecated
If building custom components which require interactive states, reach out to DLS team on guidance
dls-bright-blue-active-bgDeprecated
If building custom components which require interactive states, reach out to DLS team on guidance
dls-bright-blue-active-bg-hvr:hoverDeprecated
If building custom components which require interactive states, reach out to DLS team on guidance
dls-whiteAdd text context within Surface variant='fg-brand'> or Surface variant='fg-brand-alt'>
dls-white-bgUse Surface variant='foreground'>
dls-white-bg-hvr:hoverDeprecated
If building custom components which require interactive states, reach out to DLS team on guidance
dls-blackIf text, use color-text-emphasis
If graphic, use color-graphic-emphasis
dls-black-bgDeprecated
dls-black-bg-hvr:hoverDeprecated
dls-gray-01If text, use color-text-subtle or color-text-regular
If graphic, use color-graphic-subtle or color-graphic-regular
dls-gray-01-bgUse Surface variant='fg-subtle'> or Surface variant='base'>
dls-gray-01-bg-hvr:hoverDeprecated
dls-gray-02If text, use color-text-subtle or color-text-regular
If graphic, use color-graphic-subtle or color-graphic-regular
dls-gray-02-bgUse Surface variant='fg-subtle'> or Surface variant='base'>
dls-gray-02-bg-hvr:hoverDeprecated
dls-gray-03If text, use color-text-subtle or color-text-regular
If graphic, use color-graphic-subtle or color-graphic-regular
dls-gray-03-bgUse Surface variant='fg-subtle'> or Surface variant='base'>
dls-gray-03-bg-hvr:hoverDeprecated
dls-gray-04If text, use color-text-subtle or color-text-regular
If graphic, use color-graphic-subtle or color-graphic-regular
dls-gray-04-bgUse Surface variant='fg-subtle'> or Surface variant='base'>
dls-gray-04-bg-hvr:hoverDeprecated
dls-gray-05If text, use color-text-subtle or color-text-regular
If graphic, use color-graphic-subtle or color-graphic-regular
dls-gray-05-bgUse Surface variant='fg-subtle'> or Surface variant='base'>
dls-gray-05-bg-hvr:hoverDeprecated
dls-gray-06If text, use color-text-subtle or color-text-regular
If graphic, use color-graphic-subtle or color-graphic-regular
dls-gray-06-bgUse Surface variant='fg-subtle'> or Surface variant='base'>
dls-gray-06-bg-hvr:hoverDeprecated
dls-greenIf text, use color-status-text-success
If graphic, use color-status-graphic-success
dls-green-bgDeprecated
dls-green-bg-hvr:hoverDeprecated
dls-redIf text, use color-status-text-critical
If graphic, use color-status-graphic-critical
dls-red-bgDeprecated
dls-red-bg-hvr:hoverDeprecated
dls-orangeIf text, use color-status-text-caution
If graphic, use color-status-graphic-caution
dls-orange-bgDeprecated
dls-orange-bg-hvr:hoverDeprecated
dls-color-warningIf text, use color-status-text-critical
If graphic, use color-status-graphic-critical
dls-color-warning-bgDeprecated
dls-color-warning-bg-hvr:hoverDeprecated
dls-color-successIf text, use color-status-text-success
If graphic, use color-status-graphic-success
dls-color-success-bgDeprecated
dls-color-success-bg-hvr:hoverDeprecated
dls-color-neutralIf text, use color-status-text-neutral
If graphic, use color-status-graphic-neutral
dls-color-neutral-bgDeprecated
dls-color-neutral-bg-hvr:hoverDeprecated
dls-color-moderateIf text, use color-status-text-caution
If graphic, use `color-status-graphic-caution
dls-color-moderate-bgDeprecated
dls-color-moderate-bg-hvr:hoverDeprecated
dls-color-attentionIf text, use color-status-text-caution
If graphic, use color-status-graphic-caution
dls-color-attention-bgDeprecated
dls-color-attention-bg-hvr:hoverDeprecated
dls-card-blueDeprecated
dls-card-blue-bgDeprecated
dls-card-blue-bg-hvr:hoverDeprecated
dls-card-everydayDeprecated
dls-card-everyday-bgDeprecated
dls-card-everyday-bg-hvr:hoverDeprecated
dls-card-cobrandDeprecated
dls-card-cobrand-bgDeprecated
dls-card-cobrand-bg-hvr:hoverDeprecated
dls-card-spgDeprecated
dls-card-spg-bgDeprecated
dls-card-spg-bg-hvr:hoverDeprecated
dls-card-greenDeprecated
dls-card-green-bgDeprecated
dls-card-green-bg-hvr:hoverDeprecated
dls-card-goldDeprecated
dls-card-gold-bgDeprecated
dls-card-gold-bg-hvr:hoverDeprecated
dls-card-platinumSee @americanexpress/dls-themes package
dls-card-platinum-bgSee @americanexpress/dls-themes package
dls-card-platinum-bg-hvr:hoverSee @americanexpress/dls-themes package
dls-card-plumDeprecated
dls-card-plum-bgDeprecated
dls-card-plum-bg-hvr:hoverDeprecated
dls-card-generalDeprecated
dls-card-general-bgDeprecated
dls-card-general-bg-hvr:hoverDeprecated
dls-card-centurionDeprecated
dls-card-centurion-bgDeprecated
dls-card-centurion-bg-hvr:hoverDeprecated
dls-cobrand-defaultDeprecated
dls-cobrand-default-bgDeprecated
dls-cobrand-default-bg-hvr:hoverDeprecated
dls-offers-yellowDeprecated
dls-offers-yellow-bgDeprecated
dls-offers-yellow-bg-hvr:hoverDeprecated
dls-offers-dark-blueDeprecated
dls-offers-dark-blue-bgDeprecated
dls-offers-dark-blue-bg-hvr:hoverDeprecated
dls-offers-bright-blueDeprecated
dls-offers-bright-blue-bgDeprecated
dls-offers-bright-blue-bg-hvr:hoverDeprecated
dls-cobrand-deltaDeprecated
dls-cobrand-delta-bgDeprecated
dls-cobrand-delta-bg-hvr:hoverDeprecated
dls-cobrand-bonvoyDeprecated
dls-cobrand-bonvoy-bgDeprecated
dls-cobrand-bonvoy-bg-hvr:hoverDeprecated
dls-cobrand-blueskyDeprecated
dls-cobrand-bluesky-bgDeprecated
dls-cobrand-bluesky-bg-hvr:hoverDeprecated
dls-cobrand-hiltonDeprecated
dls-cobrand-hilton-bgDeprecated
dls-cobrand-hilton-bg-hvr:hoverDeprecated
dls-cobrand-lowesDeprecated
dls-cobrand-lowes-bgDeprecated
dls-cobrand-lowes-bg-hvr:hoverDeprecated
dls-cobrand-schwabDeprecated
dls-cobrand-schwab-bgDeprecated
dls-cobrand-schwab-bg-hvr:hoverDeprecated
dls-cobrand-plentiDeprecated
dls-cobrand-plenti-bgDeprecated
dls-cobrand-plenti-bg-hvr:hoverDeprecated
dls-cobrand-plumDeprecated
dls-cobrand-plum-bgDeprecated
dls-cobrand-plum-bg-hvr:hoverDeprecated
dls-cobrand-amazonDeprecated
dls-cobrand-amazon-bgDeprecated
dls-cobrand-amazon-bg-hvr:hoverDeprecated

Questions?

Connect with the DLS Team on Slack or by email.

Resources

Check out additional resources.