Roles, not colors.

A component never binds a red. It binds the role that happens to be red today, whether that is a primary background, a muted foreground or a subtle border. Roles resolve through the brand tier, so the same binding is Macy's red in one house and near-black in the other. They resolve through the scheme too, so they answer to light and dark. Nothing rebinds when either changes.

Surface

8 roles

The planes a layout is built from, the page itself, the cards on it, and the overlays above them.

  • td.color.surface.pageApp canvas / page backdrop.L #ffffffD #000000
  • td.color.surface.subtleLightly toned section.L #f5f5f5D #1a1a1a
  • td.color.surface.mutedMore toned section.L #ececefD #302f37
  • td.color.surface.baseThe default toned container: the gray card. A card is just a box that holds other components; this is its fill. Quieter washes for page sections live in subtle and muted; an elevated white container is raised.L #dfdee3D #494753
  • td.color.surface.raisedElevated container above the page: popups, menus, dialogs, sheets. White in Light, lifted gray in Dark. Like every surface it is a plane, not a component - it holds things and has no states of its own.L #ffffffD #302f37
  • td.color.surface.inverseContrast section opposing the page.L #000000D #ffffff
  • td.color.surface.overlayBaseModal scrim.L #00000080D #00000080
  • td.color.surface.overlayStrongHeavy scrim.L #000000d9D #000000d9

Background

45 roles

Fills for interactive and status-bearing elements. Every intent carries its own rest, hover and pressed steps.

  • td.color.background.primary.basePrimary fill at rest.L #e01a2bD #e01a2b
  • td.color.background.primary.subtlePrimary fill tint for washes/selected states.L #fff2f0D #fff2f0
  • td.color.background.primary.strongPrimary fill at hover.L #be001dD #be001d
  • td.color.background.primary.strongerPrimary fill at active/pressed.L #8d0013D #8d0013
  • td.color.background.accent.baseAccent fill at rest.L #000000D #000000
  • td.color.background.accent.subtleAccent fill tint for washes/selected states.L #ececefD #ececef
  • td.color.background.accent.strongAccent fill at hover.L #1a1a1aD #1a1a1a
  • td.color.background.accent.strongerAccent fill at active/pressed.L #302f37D #302f37
  • td.color.background.highlight.baseHighlight fill at rest.L #2c70cfD #2c70cf
  • td.color.background.highlight.subtleHighlight fill tint for washes/selected states.L #e5f0ffD #e5f0ff
  • td.color.background.highlight.strongHighlight fill at hover.L #225aa8D #225aa8
  • td.color.background.highlight.strongerHighlight fill at active/pressed.L #1a447fD #1a447f
  • td.color.background.danger.baseDanger fill at rest - destructive actions and error states.L #e01a2bD #e01a2b
  • td.color.background.danger.subtleDanger fill tint for error banners, washes and selected states.L #fff2f0D #fff2f0
  • td.color.background.danger.strongDanger fill at hover.L #be001dD #be001d
  • td.color.background.danger.strongerDanger fill at active/pressed.L #8d0013D #8d0013
  • td.color.background.success.baseSuccess fill at rest.L #007149D #007149
  • td.color.background.success.subtleSuccess fill tint for washes/selected states.L #a3ffceD #a3ffce
  • td.color.background.success.strongSuccess fill at hover.L #015536D #015536
  • td.color.background.success.strongerSuccess fill at active/pressed.L #003a23D #003a23
  • td.color.background.alert.baseAlert fill at rest - caution and warning states.L #f5c810D #f5c810
  • td.color.background.alert.subtleAlert fill tint for caution banners, washes and selected states.L #fdf6deD #fdf6de
  • td.color.background.alert.strongAlert fill at hover.L #c09c00D #c09c00
  • td.color.background.alert.strongerAlert fill at active/pressed.L #856b01D #856b01
  • td.color.background.loyalty.bronze.baseLoyalty bronze tier - base. Fill (badge/chip).L #b95600D #b95600
  • td.color.background.loyalty.bronze.subtleLoyalty bronze tier - subtle. Fill (badge/chip).L #ffeadeD #ffeade
  • td.color.background.loyalty.bronze.strongLoyalty bronze tier - strong. Fill (badge/chip).L #783500D #783500
  • td.color.background.loyalty.bronze.mutedLoyalty bronze tier - muted. Fill (badge/chip).L #ffc8a9D #ffc8a9
  • td.color.background.loyalty.silver.baseLoyalty silver tier - base. Fill (badge/chip).L #8a8698D #8a8698
  • td.color.background.loyalty.silver.strongLoyalty silver tier - strong. Fill (badge/chip).L #615e6eD #615e6e
  • td.color.background.loyalty.silver.subtleLoyalty silver tier - subtle. Fill (badge/chip).L #ececefD #ececef
  • td.color.background.loyalty.silver.mutedLoyalty silver tier - muted. Fill (badge/chip).L #dfdee3D #dfdee3
  • td.color.background.loyalty.gold.baseLoyalty gold tier - base. Fill (badge/chip).L #94814dD #94814d
  • td.color.background.loyalty.gold.strongLoyalty gold tier - strong. Fill (badge/chip).L #7d6e40D #7d6e40
  • td.color.background.loyalty.gold.subtleLoyalty gold tier - subtle. Fill (badge/chip).L #f8eed1D #f8eed1
  • td.color.background.loyalty.gold.mutedLoyalty gold tier - muted. Fill (badge/chip).L #dac074D #dac074
  • td.color.background.loyalty.platinum.baseLoyalty platinum tier - base. Fill (badge/chip).L #302f37D #302f37
  • td.color.background.loyalty.platinum.strongLoyalty platinum tier - strong. Fill (badge/chip).L #000000D #000000
  • td.color.background.loyalty.platinum.subtleLoyalty platinum tier - subtle. Fill (badge/chip).L #dfdee3D #dfdee3
  • td.color.background.loyalty.platinum.mutedLoyalty platinum tier - muted. Fill (badge/chip).L #615e6eD #615e6e
  • td.color.background.primary.alpha.baseAlpha primary fill: the hover wash for outline/ghost primary elements. Blends with the plane beneath, so it works on any surface. 10%, provisional until Button tuning.L #e01a2b1aD #e01a2b1a
  • td.color.background.primary.alpha.strongAlpha primary fill: the pressed wash for outline/ghost primary elements. 15%, provisional until Button tuning.L #e01a2b26D #e01a2b26
  • td.color.background.accent.alpha.baseAlpha accent fill: the hover wash for outline/ghost accent elements. Blends with the plane beneath. 10%, provisional until Button tuning.L #0000001aD #0000001a
  • td.color.background.accent.alpha.strongAlpha accent fill: the pressed wash for outline/ghost accent elements. 15%, provisional until Button tuning.L #00000026D #00000026
  • td.color.background.disabledDisabled element fill. One of the three-token disabled kit (background/foreground/border.disabled). Disabled is a STATE, never a role: no brand fork, no emphasis ramp, and no role-colored variants - a disabled destructive button is just gray.L #dfdee3D #302f37

Foreground

50 roles

Text and icon colors. Each one is paired with the background it is meant to sit on, so contrast holds in both schemes.

  • td.color.foreground.neutral.baseBase body text and icons.L #000000D #ffffff
  • td.color.foreground.neutral.mutedSupporting / caption text.L #494753D #cac8d0
  • td.color.foreground.disabledDisabled text and icons. One of the three-token disabled kit (background/foreground/border.disabled). Disabled is a STATE, never a role.L #8a8698D #615e6e
  • td.color.foreground.neutral.inverseText/icons on inverse surfaces.L #ffffffD #000000
  • td.color.foreground.on.primaryOn-primary: label/icon color that sits on background.primary (neutral/0).L #ffffffD #ffffff
  • td.color.foreground.on.accentOn-accent: label/icon color that sits on background.accent (neutral/0). KNOWN GAP: fails on Bloomingdales yellow accent fill (white on yellow, 1.6:1); accepted until the Bloom accent fill is retuned.L #ffffffD #ffffff
  • td.color.foreground.on.highlightOn-highlight: label/icon color that sits on background.highlight (neutral/0).L #ffffffD #ffffff
  • td.color.foreground.on.dangerOn-danger: label/icon color that sits on background.danger (neutral/0).L #ffffffD #ffffff
  • td.color.foreground.on.successOn-success: label/icon color that sits on background.success (neutral/0).L #ffffffD #ffffff
  • td.color.foreground.on.alertOn-alert: label/icon color that sits on background.alert. Near-black (neutral/900), because the alert fill is light.L #000000D #000000
  • td.color.foreground.loyalty.bronze.baseLoyalty bronze tier - base. Text/icon color.L #b95600D #b95600
  • td.color.foreground.loyalty.bronze.strongLoyalty bronze tier - strong. Text/icon color.L #783500D #783500
  • td.color.foreground.loyalty.bronze.subtleLoyalty bronze tier - subtle. Text/icon color.L #ffeadeD #ffeade
  • td.color.foreground.loyalty.bronze.mutedLoyalty bronze tier - muted. Text/icon color.L #ffc8a9D #ffc8a9
  • td.color.foreground.loyalty.silver.baseLoyalty silver tier - base. Text/icon color.L #8a8698D #8a8698
  • td.color.foreground.loyalty.silver.strongLoyalty silver tier - strong. Text/icon color.L #615e6eD #615e6e
  • td.color.foreground.loyalty.silver.subtleLoyalty silver tier - subtle. Text/icon color.L #ececefD #ececef
  • td.color.foreground.loyalty.silver.mutedLoyalty silver tier - muted. Text/icon color.L #dfdee3D #dfdee3
  • td.color.foreground.loyalty.gold.baseLoyalty gold tier - base. Text/icon color.L #94814dD #94814d
  • td.color.foreground.loyalty.gold.strongLoyalty gold tier - strong. Text/icon color.L #7d6e40D #7d6e40
  • td.color.foreground.loyalty.gold.subtleLoyalty gold tier - subtle. Text/icon color.L #f8eed1D #f8eed1
  • td.color.foreground.loyalty.gold.mutedLoyalty gold tier - muted. Text/icon color.L #dac074D #dac074
  • td.color.foreground.loyalty.platinum.baseLoyalty platinum tier - base. Text/icon color.L #302f37D #302f37
  • td.color.foreground.loyalty.platinum.strongLoyalty platinum tier - strong. Text/icon color.L #000000D #000000
  • td.color.foreground.loyalty.platinum.subtleLoyalty platinum tier - subtle. Text/icon color.L #dfdee3D #dfdee3
  • td.color.foreground.loyalty.platinum.mutedLoyalty platinum tier - muted. Text/icon color.L #615e6eD #615e6e
  • td.color.foreground.primary.basePrimary as text/icon on neutral surfaces. >=4.5:1 on surface/page. For text on a primary fill, use foreground.on.primary.L #e01a2bD #e01a2b
  • td.color.foreground.primary.subtleTinted primary wash for decorative shapes and icon accents. 50-tint: fails contrast as text, use base for readable primary text.L #fff2f0D #fff2f0
  • td.color.foreground.primary.strongHover emphasis for primary text/icon on neutral surfaces.L #be001dD #be001d
  • td.color.foreground.primary.strongerActive/pressed emphasis for primary text/icon on neutral surfaces.L #8d0013D #8d0013
  • td.color.foreground.accent.baseAccent as text/icon on neutral surfaces (base). Collapsed onto the stronger (700) fill step, the only one passing 4.5:1 as text; re-diverge if the ramp gains darker steps. On Macys this is gray/700, not black.L #302f37D #302f37
  • td.color.foreground.accent.subtleTinted accent wash for decorative shapes and icon accents. 50-tint: fails contrast as text, use base for readable accent text.L #ececefD #ececef
  • td.color.foreground.accent.strongAccent as text/icon on neutral surfaces (strong). Collapsed onto the stronger (700) fill step, the only one passing 4.5:1 as text; re-diverge if the ramp gains darker steps. On Macys this is gray/700, not black.L #302f37D #302f37
  • td.color.foreground.accent.strongerAccent as text/icon on neutral surfaces (stronger). Collapsed onto the stronger (700) fill step, the only one passing 4.5:1 as text; re-diverge if the ramp gains darker steps. On Macys this is gray/700, not black.L #302f37D #302f37
  • td.color.foreground.highlight.baseHighlight as text/icon on neutral surfaces. >=4.5:1 on surface/page. For text on a highlight fill, use foreground.on.highlight.L #2c70cfD #2c70cf
  • td.color.foreground.highlight.subtleTinted highlight wash for decorative shapes and icon accents. 50-tint: fails contrast as text, use base for readable highlight text.L #e5f0ffD #e5f0ff
  • td.color.foreground.highlight.strongHover emphasis for highlight text/icon on neutral surfaces.L #225aa8D #225aa8
  • td.color.foreground.highlight.strongerActive/pressed emphasis for highlight text/icon on neutral surfaces.L #1a447fD #1a447f
  • td.color.foreground.danger.baseDanger as text/icon on neutral surfaces. >=4.5:1 on surface/page. For text on a danger fill, use foreground.on.danger.L #e01a2bD #e01a2b
  • td.color.foreground.danger.subtleTinted danger wash for decorative shapes and icon accents. 50-tint: fails contrast as text, use base for readable danger text.L #fff2f0D #fff2f0
  • td.color.foreground.danger.strongHover emphasis for danger text/icon on neutral surfaces.L #be001dD #be001d
  • td.color.foreground.danger.strongerActive/pressed emphasis for danger text/icon on neutral surfaces.L #8d0013D #8d0013
  • td.color.foreground.success.baseSuccess as text/icon on neutral surfaces. >=4.5:1 on surface/page. For text on a success fill, use foreground.on.success.L #007149D #007149
  • td.color.foreground.success.subtleTinted success wash for decorative shapes and icon accents. 50-tint: fails contrast as text, use base for readable success text.L #a3ffceD #a3ffce
  • td.color.foreground.success.strongHover emphasis for success text/icon on neutral surfaces.L #015536D #015536
  • td.color.foreground.success.strongerActive/pressed emphasis for success text/icon on neutral surfaces.L #003a23D #003a23
  • td.color.foreground.alert.baseAlert as text/icon on neutral surfaces (base). Collapsed onto the stronger (700) fill step, the only one passing 4.5:1 as text; re-diverge if the ramp gains darker steps.L #856b01D #856b01
  • td.color.foreground.alert.subtleTinted alert wash for decorative shapes and icon accents. 50-tint: fails contrast as text, use base for readable alert text.L #fdf6deD #fdf6de
  • td.color.foreground.alert.strongAlert as text/icon on neutral surfaces (strong). Collapsed onto the stronger (700) fill step, the only one passing 4.5:1 as text; re-diverge if the ramp gains darker steps.L #856b01D #856b01
  • td.color.foreground.alert.strongerAlert as text/icon on neutral surfaces (stronger). Collapsed onto the stronger (700) fill step, the only one passing 4.5:1 as text; re-diverge if the ramp gains darker steps.L #856b01D #856b01

Border

5 roles

Stroke colors, from the quietest hairline to the strong outline that marks a selected surface.

  • td.color.border.cutoutSurface-matched stroke for overlap seams: avatar stacks, layered chips, anything that should read as cut out of the plane behind it. Matches surface.page; on a toned plane, stroke with that plane's surface color instead. Not a divider: use border.muted for the faintest visible line.L #ffffffD #1a1a1a
  • td.color.border.subtleThe faintest visible line: hairline dividers and quiet separation, one step off the page in each scheme. For the surface-matched overlap stroke use border.cutout; for disabled controls use border.disabled.L #dfdee3D #302f37
  • td.color.border.baseBase control/container border.L #8a8698D #615e6e
  • td.color.border.strongHigh-emphasis border / focus outline.L #000000D #ffffff
  • td.color.border.disabledDisabled control border. One of the three-token disabled kit (background/foreground/border.disabled). Disabled is a STATE, never a role.L #cac8d0D #302f37