Accessible pairing for accent.emphasis text and icons, use only on elevation.base
No usage example.
kelp.30
kelp.70
Accessible pairing for accent text and icons, use only on elevation.base
For example: dietary requirement labels (dairy free) and ratings information in partner cards.
kelp.40
kelp.60
Accessible pairing for accent text and icons, use only on accent.intense backgrounds.
For example: text on the promotional tag (accent).
kelp.100
kelp.0
Accessible pairing for accent text and icons, use only on accent.emphasis backgrounds.
For example: text and icons on the order status bar.
static.white
kelp.0
Accessible pairing for accent text and icons, use only on accent.normal backgrounds.
No usage example.
kelp.10
kelp.90
Accessible pairing for accent text and icons, use only on accent.subtle backgrounds.
No usage example.
kelp.20
kelp.80
Accessible pairing for accent text and icons, use only on accent.muted backgrounds.
No usage example.
kelp.20
kelp.80
Accessible pairing for accent text and icons, use only on neutral.intense backgrounds.
No usage example.
kelp.60
kelp.30
Accessible pairing for accent text and icons, use only on neutral.normal backgrounds.
No usage example.
kelp.20
kelp.20
Accessible pairing for accent text and icons, use only on neutral.subtle backgrounds.
No usage example.
kelp.40
kelp.70
Accessible pairing for accent text and icons, use only on neutral.muted backgrounds.
Used in the image placeholder at a reduced opacity.
kelp.40
kelp.70
Accessible pairing for accent text and icons, use only on background.app
Used in the image placeholder at a reduced opacity.
kelp.40
kelp.70
Accessible pairing for accent.subtle icons, use only on elevation.base
No usage example.
ℹ️ Don’t use on body text as it doesn’t meet the minimum contrast ratio (4.5:1). Can be used for large text (24 px and larger).
kelp.50
kelp.50
Accessible pairing for emphasis action text and icons, use only on action.intense backgrounds.
static.white
anchovy.0
Accessible pairing for action.emphasis text and icons, use only on elevation.base. Can be used as the hover state for foreground.action.normal.on.elevation.base.
For example: hover state of text links.
seaweed.30
seaweed.80
Accessible pairing for action text and icons, use only on elevation.base
For example: text links, action text in rows, pills and secondary buttons.
seaweed.40
seaweed.70
Accessible pairing for action text and icons, use only on action.intense backgrounds.
seaweed.100
seaweed.0
Accessible pairing for action text and icons, use only on action.emphasis backgrounds.
seaweed.0
seaweed.0
Accessible pairing for action text and icons, use only on action.normal backgrounds.
seaweed.10
seaweed.10
Accessible pairing for action text and icons, use only on action.subtle backgrounds.
seaweed.20
seaweed.80
Accessible pairing for action text and icons, use only on action.muted backgrounds.
seaweed.20
seaweed.80
Accessible pairing for action text and icons, use only on neutral.intense backgrounds.
For example: text links or icons on this background.
seaweed.60
seaweed.30
Accessible pairing for action text and icons, use only on neutral.normal backgrounds.
No usage example.
seaweed.20
seaweed.10
Accessible pairing for action text and icons, use only on neutral.subtle backgrounds.
For example: text links or icons on this background.
seaweed.30
seaweed.70
Accessible pairing for action text and icons, use only on neutral.muted backgrounds.
For example: text links or icons on this background.
seaweed.30
seaweed.60
Accessible pairing for action text and icons, use only on background.app
For example: text links or icons on list headers
seaweed.30
seaweed.60
Accessible pairing for action.subtle icons and graphics, use only on action.emphasis backgrounds.
For example: action icons in rows, radio button and checkbox.
ℹ️ On light mode don’t use on body text as it doesn’t meet the minimum contrast ratio (4.5:1).
static.white
seaweed.20
Accessible pairing for action.subtle icons, use only on elevation.base
For example: action icons in rows or floating button icons.
ℹ️ Don’t use on body text as it doesn’t meet the minimum contrast ratio (4.5:1). Can be used for large text (24 px and larger).
seaweed.50
seaweed.60
Accessible pairing for brand related text and icons, use only on elevation.base
No usage example.
brand.black-teal
static.white
Accessible pairing for brand-related text and icons, use only on elevation.base-alt
brand.black-teal
brand.black-teal
Accessible pairing for brand related text and icons, use only on elevation.base
For example: text on promotional tag (brand).
brand.teal-4
seaweed.70
Accessible pairing for brand-related text and icons, use only on elevation.base-alt
brand.teal-4
brand.teal-4
Accessible pairing for brand-related text and icons on brand.intense backgrounds.
static.white
static.white
Accessible pairing for brand-related text and icons, use only on brand.emphasis backgrounds.
static.white
static.white
Accessible pairing for brand-related text and icons, use only on brand.subtle backgrounds.
static.white
static.white
Accessible pairing for brand-related text and icons, use only on brand.subtle backgrounds.
seaweed.0
seaweed.0
Accessible pairing for brand related text and icons, use only on neutral.intense backgrounds.
No usage example.
static.white
anchovy.0
Accessible pairing for brand related text and icons, use only on elevation.base
For example: Deliveroo’s choice icon in the partner cards.
brand.teal-2
brand.brand-teal
Accessible pairing for brand-related text and icons, use only on elevation.base-alt
brand.teal-3
brand.teal-3
Accessible pairing for brand-related text and icons on brand.intense backgrounds.
brand.warm-white
brand.warm-white
Accessible pairing for brand-related text and icons, use only on brand.emphasis backgrounds.
brand.warm-white
brand.warm-white
Use for brand-related large text and icons on brand.normal backgrounds.
ℹ️ Don’t use on body text as it doesn’t meet the minimum contrast ratio (4.5:1). Can be used for large text (24 px and larger) and graphics like icons.
brand.warm-white
brand.warm-white
Use for brand-related large text and icons on brand.subtle backgrounds.
ℹ️ Don’t use on body text as it doesn’t meet the minimum contrast ratio (4.5:1). Can be used for large text (24 px and larger) and graphics like icons.
seaweed.20
seaweed.20
Use for Deliveroo’s logo or the rooute, only on neutral.intense backgrounds.
ℹ️ Don’t use for text or icons as it doesn’t pass the minimum contrast ratios for text (4.5:1) or UI elements (3:1) on light mode.
brand.brand-teal
brand.brand-teal
Use for Deliveroo’s logo, only on neutral.intense backgrounds.
ℹ️ Don’t use for text or icons as it doesn’t pass the minimum contrast ratios for text (4.5:1) or UI elements (3:1) on light mode.
static.white
static.white
Use only Deliveroo’s logo or the rooute, only on elevation.base backgrounds.
ℹ️ Don’t use for text or icons as it doesn’t pass the minimum contrast ratios for text (4.5:1) or UI elements (3:1) on light mode.
brand.brand-teal
brand.brand-teal
Use for brand purposes like the rooute or Deliveroo’s logo, use only on elevation.base-alt
ℹ️ Don’t use for text or icons as it doesn’t pass the minimum contrast ratios for text (4.5:1) or UI elements (3:1) on light mode.
brand.brand-teal
brand.brand-teal
Use for brand-related large text and icons on brand.intense backgrounds.
ℹ️ Don’t use on body text as it doesn’t meet the minimum contrast ratio (4.5:1). Can be used for large text (24 px and larger) and graphics like icons.
seaweed.60
seaweed.60
Use for brand-related large text and icons on brand.emphasis backgrounds.
ℹ️ Don’t use on body text as it doesn’t meet the minimum contrast ratio (4.5:1). Can be used for large text (24 px and larger) and graphics like icons.
seaweed.70
seaweed.70
Use for Deliveroo’s logo, only on brand.subtle backgrounds.
ℹ️ It can’t be used for text or icons as it doesn’t pass the minimum contrast ratios for text (4.5:1) or UI elements (3:1) on light mode.
static.white
static.white
Use for Deliveroo’s logo, only on neutral.subtle backgrounds.
ℹ️ Don’t use for text or icons as it doesn’t pass the minimum contrast ratios for text (4.5:1) or UI elements (3:1) on light mode.
brand.brand-teal
brand.brand-teal
Use for Deliveroo’s logo, only on neutral.muted backgrounds.
ℹ️ Don’t use for text or icons as it doesn’t pass the minimum contrast ratios for text (4.5:1) or UI elements (3:1) on light mode.
brand.brand-teal
brand.brand-teal
brand.brand-teal
brand.brand-teal
Accessible pairing for callout.emphasis text and icons, use only on elevation.base
No usage example.
mulberry.30
mulberry.80
Accessible pairing for callout text and icons, use only on elevation.base
For example: rewards progress badge for regular users and simple tag inverted.
mulberry.40
mulberry.70
Accessible pairing for callout text and icons, use only on callout.intense backgrounds.
For example: text on the rewards promotional tag for regular users.
mulberry.100
mulberry.0
Accessible pairing for callout text and icons, use only on callout.emphasis backgrounds.
For example: icon on the map pin.
static.white
mulberry.0
Accessible pairing for callout text and icons, use only on callout.normal backgrounds.
No usage example.
mulberry.10
mulberry.90
Accessible pairing for callout text and icons, use only on callout.subtle backgrounds.
For example: text and icons on the promo banner (callout) and simple tag (callout)
mulberry.20
mulberry.80
Accessible pairing for callout text and icons, use only on callout.muted backgrounds.
No usage example.
mulberry.20
mulberry.80
Accessible pairing for callout text and icons, use only on neutral.intense backgrounds.
No usage example.
mulberry.60
mulberry.30
Accessible pairing for callout text and icons, use only on neutral.normal backgrounds.
No usage example.
mulberry.20
mulberry.10
Accessible pairing for callout text and icons, use only on neutral.subtle backgrounds.
No usage example.
mulberry.40
mulberry.80
Accessible pairing for callout text and icons, use only on neutral.muted backgrounds.
No usage example.
mulberry.40
mulberry.60
Accessible pairing for callout text and icons, use only on background.app
No usage example.
mulberry.40
mulberry.60
Accessible pairing for callout.subtle icons, use only on elevation.base
ℹ️ Don’t use on body text as it doesn’t meet the minimum contrast ratio (4.5:1). Can be used for large text (24 px and larger).
mulberry.50
mulberry.60
Accessible pairing for text and icons communicating a critical or error message, use only on elevation.base. Can be used as the hover state for foreground.critical.normal.on.elevation.base.
No usage example.
tomato.30
tomato.70
Accessible pairing for text and icons communicating a critical or error message, use only on elevation.base
For example: error messages in inputs, required inputs, destructive text in rows, secondary and tertiary buttons, offers-related labels in the partner cards.
tomato.40
tomato.60
Accessible pairing for text and icons communicating a critical or error message, use only on critical.intense backgrounds.
For example: text and icons on the promotional tag (offers).
tomato.100
tomato.0
Accessible pairing for text and icons communicating a critical or error message, use only on critical.emphasis backgrounds.
For example: text on destructive buttons.
static.white
tomato.0
Accessible pairing for text and icons communicating a critical or error message, use only on critical.normal backgrounds.
For example: text and icons on error banners.
tomato.10
tomato.90
Accessible pairing for text and icons communicating a critical or error message, use only on critical.subtle backgrounds.
For example: text and icons on the promo banner (offers) and simple tag (critical).
tomato.20
tomato.80
Accessible pairing for text and icons communicating a critical or error message, use only on critical.muted backgrounds.
For example: text on the hover state of the secondary destructive button.
tomato.20
tomato.80
Accessible pairing for critical or error text and icons, use only on neutral.intense backgrounds.
No usage example.
tomato.60
tomato.30
Accessible pairing for critical or error text and icons, use only on neutral.normal backgrounds.
No usage example.
tomato.20
tomato.10
Accessible pairing for critical or error text and icons, use only on neutral.subtle backgrounds.
No usage example.
tomato.30
tomato.80
Accessible pairing for critical or error text and icons, use only on neutral.muted backgrounds.
No usage example.
tomato.40
tomato.60
Accessible pairing for critical or error text and icons, use only on background.app
No usage example.
tomato.40
tomato.60
Accessible pairing for icons communicating a critical or error message, use only on elevation.base
For example: error icons in inputs and destructive icons in rows.
ℹ️ Don’t use on body text as it doesn’t meet the minimum contrast ratio (4.5:1). Can be used for large text (24 px and larger).
tomato.50
tomato.50
Accessible pairing for feature text and icons, use only on elevation.base
No usage example.
aubergine.20
aubergine.90
Accessible pairing for feature text and icons, use only on elevation.base
No usage example.
Old example: Plus related text in the Deliveroo theme, rewards progress badge for Plus users. This should use the Plus role, not feature. PENDING TO FIX THIS ONCE PLUS TOKENS ARE FINALISED
aubergine.40
aubergine.80
Accessible pairing for feature text and icons, use only on feature.intense backgrounds.
No usage example.
aubergine.100
aubergine.0
Temporary until we surface plus as a role/themeAccessible pairing for feature text and icons, use only on feature.emphasis backgrounds. Use for Deliveroo plus logo in the Deliveroo theme.
For example: text on the rewards promotional tag for Plus users.
static.white
aubergine.0
Accessible pairing for feature text and icons, use only on feature.normal backgrounds.
For example: map pin in the order tracker.
aubergine.100
aubergine.90
Accessible pairing for feature text and icons, use only on feature.subtle backgrounds.
For example: text and icons in the simple tag (feature)
aubergine.20
aubergine.80
Accessible pairing for feature text and icons, use only on feature.muted backgrounds.
For example: default state of the selected pill and hover state of the unselected pill in the Plus theme (TBD).
aubergine.20
aubergine.80
Accessible pairing for feature text and icons, use only on neutral.intense backgrounds.
No usage example.
aubergine.70
aubergine.20
Accessible pairing for feature text and icons, use only on neutral.normal backgrounds.
No usage example.
aubergine.30
aubergine.20
Accessible pairing for feature text and icons, use only on neutral.subtle backgrounds.
No usage example.
aubergine.30
aubergine.80
Accessible pairing for feature text and icons, use only on neutral.muted backgrounds.
No usage example.
aubergine.20
aubergine.70
Accessible pairing for feature text and icons, use only on background.app
No usage example.
aubergine.20
aubergine.70
Accessible pairing for feature text and icons, use only on elevation.base
For example: visited links
aubergine.50
aubergine.70
Accessible pairing for highlight text and icons, use only on elevation.base
No usage example.
mustard.10
mustard.70
Accessible pairing for highlight text and icons, use only on elevation.base
No usage example.
mustard.20
mustard.60
Accessible pairing for highlight text and icons, use only on highlight.emphasis backgrounds.
No usage example.
mustard.0
mustard.0
Accessible pairing for highlight text and icons, use only on highlight.normal backgrounds.
No usage example.
mustard.10
mustard.0
Accessible pairing for highlight text and icons, use only on highlight.subtle backgrounds.
No usage example.
mustard.20
mustard.80
Accessible pairing for highlight text and icons, use only on highlight.muted backgrounds.
No usage example.
mustard.20
mustard.80
Accessible pairing for highlight text and icons, use only on neutral.intense backgrounds.
No usage example.
mustard.60
mustard.20
Accessible pairing for highlight text and icons, use only on neutral.normal backgrounds.
No usage example.
mustard.10
mustard.0
Accessible pairing for highlight text and icons, use only on neutral.subtle backgrounds.
No usage example.
mustard.20
mustard.60
Accessible pairing for highlight text and icons, use only on neutral.muted backgrounds.
No usage example.
mustard.20
mustard.60
Accessible pairing for highlight text and icons, use only on background.app
No usage example.
mustard.20
mustard.60
Accessible pairing for highlight icons, use only on elevation.base
No usage example.
ℹ️ Don’t use on body text as it doesn’t meet the minimum contrast ratio (4.5:1). Can be used for large text (24 px and larger).
mustard.30
mustard.50
Accessible pairing for text and icons with an informative message, use only on elevation.base
No usage example.
New for all products.
blueberry.20
blueberry.70
Accessible pairing for text and icons with an informative message, use only on elevation.base
For example: “new” label on white tooltips to inform that’s something’s new and simple tag inverted.
New for all products.
blueberry.40
blueberry.60
Accessible pairing for text and icons with an informative message, use only on info.intense backgrounds.
No usage example.
New for all products.
blueberry.100
blueberry.0
Accessible pairing for text and icons with an informative message, use only on info.emphasis backgrounds.
No usage example.
New for all products.
static.white
blueberry.0
Accessible pairing for text and icons with an informative message, use only on info.normal backgrounds.
For example: text and icons on info banners.
New for all products.
blueberry.10
blueberry.90
Accessible pairing for text and icons with an informative message, use only on info.subtle backgrounds.
For example: text and icons in the simple tag (info)New for all products.
blueberry.20
blueberry.80
Accessible pairing for text and icons with an informative message, use only on info.muted backgrounds.
No usage example.New for all products.
blueberry.20
blueberry.80
Accessible pairing for info text and icons, use only on neutral.intense backgrounds.
For example: “new” label on dark tooltips to inform that’s something’s new.
blueberry.60
blueberry.20
Accessible pairing for info text and icons, use only on neutral.normal backgrounds.
No usage example.
blueberry.20
blueberry.10
Accessible pairing for info text and icons, use only on neutral.subtle backgrounds.
No usage example.
blueberry.30
blueberry.70
Accessible pairing for info text and icons, use only on neutral.muted backgrounds.
No usage example.
blueberry.30
blueberry.60
Accessible pairing for info text and icons, use only on background.app
No usage example.
blueberry.30
blueberry.60
Accessible pairing for icons with an informative message, use only on elevation.base
No usage example.
ℹ️ Don’t use on body text as it doesn’t meet the minimum contrast ratio (4.5:1). Can be used for large text (24 px and larger).
blueberry.50
blueberry.50
Accessible pairing for primary text and icons, use only on elevation.base. Use in all primary text throughout the product.
For example: input text and labels, titles in modals and rows and all headings.
anchovy.0
static.white
Accessible pairing for text and icons that require more prominence, use only on elevation.base
No usage example.
anchovy.20
anchovy.90
Accessible pairing for secondary text and icons, use only on elevation.base. Use in all secondary text and subtitles throughout the product.
For example: subtitles in rows, modals and service banners, inactive tabs, placeholder text and helper text in inputs, metadata and rating information in partner cards.
anchovy.30
anchovy.70
Accessible pairing for primary text and icons, use only on neutral.intense backgrounds.
For example: text on tooltips, toasts and the footer.
static.white
anchovy.0
Accessible pairing for primary text and icons, use only on neutral.emphasis backgrounds.
No usage example.
static.white
anchovy.0
Accessible pairing for primary text and icons, use only on neutral.normal backgrounds.
For example: text and icons in the default banner.
anchovy.0
anchovy.0
Accessible pairing for primary text and icons, use only on neutral.subtle backgrounds.
For example: text and icon on the simple tag (neutral).
anchovy.0
static.white
Accessible pairing for primary text and icons, use only on neutral.muted backgrounds.
For example: Category headings in the partner page.
anchovy.0
static.white
Accessible pairing for primary text and icons, use only on background.app
For example: All headings and primary text in the home and partner page.
anchovy.0
static.white
Accessible pairing for neutral.subtle icons, that passes min 3:1 contrast ratio, use only on elevation.base For example: neutral icons in rows, inputs, modals and banners.
ℹ️ Don’t use on body text as it doesn’t meet the minimum contrast ratio (4.5:1). Can be used for large text (24 px and larger).
anchovy.50
anchovy.50
Accessible pairing for secondary text and icons, use only on neutral.intense backgrounds.
No usage example.
anchovy.70
anchovy.30
Accessible pairing for secondary text and icons, use only on neutral.emphasis backgrounds.
No usage example.
anchovy.90
anchovy.20
Accessible pairing for secondary text and icons, use only on neutral.normal backgrounds.
No usage example.
anchovy.20
anchovy.10
Accessible pairing for secondary text and icons, use only on neutral.subtle backgrounds.
No usage example.
anchovy.30
anchovy.70
Accessible pairing for secondary text and icons, use only on neutral.muted backgrounds.
For example: Secondary text on the account details page.
anchovy.30
anchovy.70
Accessible pairing for secondary text and icons, on use only on background.app
For example: Secondary text on the account details page.
anchovy.30
anchovy.70
Use for all disabled text and icons on elevation.baseIt has no accessibility requirement.
anchovy.70
anchovy.30
Use for disabled text and icons, use only on neutral.subtle backgrounds. It has no accessibility requirement.
For example: disabled text in primary buttons, pills and text inputs.
anchovy.70
anchovy.40
Use for disabled text and icons, use only on neutral.muted backgrounds. It has no accessibility requirement.
For example: disabled text on tertiary buttons or controls like radio, stepper and checkbox.
anchovy.70
anchovy.30
Use for disabled text and icons, use only on background.app. It has no accessibility requirement.
For example: disabled text
anchovy.70
anchovy.30
Accessible pairing for text and icons communicating warning feedback, use only on elevation.base
Diamond brand colour.
acai.20
acai.90
Accessible pairing for text and icons communicating warning feedback, use only on elevation.base
Diamond exclusive.
acai.30
acai.80
Accessible pairing for text and icons communicating warning feedback, use only on elevation.base
Deliveroo Plus exclusive.
acai.40
acai.70
Exclusive use for plus. Accessible pairing for text and icons, use only on plus.intense backgrounds.
For example: xxxx
Plus tokens will be updated once the new visual identity is finalised
static.white
static.white
Exclusive use for plus. Accessible pairing for text and icons, use only on plus.emphasis backgrounds.
For example: xxxx
Plus tokens will be updated once the new visual identity is finalised
static.white
static.white
Exclusive use for plus. Accessible pairing for text and icons, use only on plus.normal backgrounds.
For example: xxxx
Plus tokens will be updated once the new visual identity is finalised
static.white
static.white
Exclusive use for plus. Accessible pairing for text and icons, use only on plus.subtle backgrounds.
For example: xxxx
Plus tokens will be updated once the new visual identity is finalised
acai.20
acai.80
Exclusive use for plus. Accessible pairing for text and icons, use only on plus.muted backgrounds.
For example: xxxx
Plus tokens will be updated once the new visual identity is finalised
acai.20
acai.80
Accessible pairing for warning text and icons, use only on neutral.intense backgrounds.
Usage example?Plus tokens will be updated once the new visual identity is finalised
acai.70
acai.40
Accessible pairing for warning text and icons, use only on neutral.normal backgrounds.
Usage example?Plus tokens will be updated once the new visual identity is finalised
acai.40
acai.30
Accessible pairing for warning text and icons, use only on neutral.subtle backgrounds.
Usage example?Plus tokens will be updated once the new visual identity is finalised
acai.30
acai.80
Accessible pairing for warning text and icons, use only on neutral.muted backgrounds.
Usage example?Plus tokens will be updated once the new visual identity is finalised
acai.30
acai.70
Accessible pairing for plus text and icons, use only on background.app
No usage example.Plus tokens will be updated once the new visual identity is finalised
acai.30
acai.70
Accessible pairing for text and icons communicating warning feedback, use only on elevation.base
Plus exclusive
acai.60
acai.60
Accessible pairing for text and icons communicating a positive or successful message, use only on elevation.base
No usage example.
apple.30
apple.70
Accessible pairing for text and icons communicating a positive or successful message, use only on elevation.base
For example: dietary requirement labels (vegetarian, vegan, halal), ratings information in partner cards, confirmation text in inputs and simple tag inverted.
apple.40
apple.60
Accessible pairing for positive or success-related text and icons, use only on positive.intense.backgrounds.
No usage example.
apple.100
apple.0
Accessible pairing for text and icons communicating a positive or successful message, use only on positive.emphasis.backgrounds.
No usage example.
static.white
apple.0
Accessible pairing for text and icons communicating a positive or successful message, use only on positive.normal.backgrounds.
For example: text and icons on success banners.
apple.10
apple.90
Accessible pairing for text and icons communicating a positive or successful message, use only on positive.subtle.backgrounds.
For example: text on simple tag (positive)
apple.20
apple.80
Accessible pairing for text and icons communicating a positive or successful message, use only on positive.muted.backgrounds.No usage example.
apple.20
apple.80
Accessible pairing for positive text and icons, use only on neutral.intense backgrounds.
No usage example.
apple.60
apple.30
Accessible pairing for positive text and icons, use only on neutral.normal backgrounds.
No usage example.
apple.20
apple.10
Accessible pairing for positive text and icons, use only on neutral.subtle backgrounds.
No usage example.
apple.30
apple.70
Accessible pairing for positive text and icons, use only on neutral.muted backgrounds.
No usage example.
apple.30
apple.60
Accessible pairing for positive text and icons, use only on background.app
No usage example.
apple.30
apple.60
Accessible pairing for icons communicating a positive or successful message, use only on elevation.base
For example: positive icons in rows and text inputs.
ℹ️ Don’t use on body text as it doesn’t meet the minimum contrast ratio (4.5:1). Can be used for large text (24 px and larger).
apple.50
apple.50
Accessible pairing for text and icons communicating warning feedback, use only on elevation.base
No usage example.
pumpkin.30
pumpkin.70
Accessible pairing for text and icons communicating warning feedback, use only on elevation.base
For example: popular label in partner cards, warning text in rows and simple tag inverted.
pumpkin.40
pumpkin.60
Accessible pairing for text and icons communicating warning feedback to prevent an error, use only on warning.intense backgrounds.
No usage example.
pumpkin.100
pumpkin.0
Accessible pairing for text and icons communicating warning feedback to prevent an error, use only on warning.emphasis backgrounds.
No usage example.
static.white
pumpkin.0
Accessible pairing for text and icons communicating warning feedback to prevent an error, use only on warning.normal backgrounds.
For example: text and icons on warning banners.
pumpkin.10
pumpkin.90
Accessible pairing for text and icons communicating warning feedback to prevent an error, use only on warning.subtle backgrounds.
For example: text on simple tag (warning).
pumpkin.20
pumpkin.80
Accessible pairing for text and icons communicating warning feedback to prevent an error, use only on warning.muted backgrounds.
No usage example.
pumpkin.20
pumpkin.80
Accessible pairing for warning text and icons, use only on neutral.intense backgrounds.
No usage example.
pumpkin.60
pumpkin.30
Accessible pairing for warning text and icons, use only on neutral.normal backgrounds.
No usage example.
pumpkin.20
pumpkin.10
Accessible pairing for warning text and icons, use only on neutral.subtle backgrounds.
No usage example.
pumpkin.30
pumpkin.70
Accessible pairing for warning text and icons, use only on neutral.muted backgrounds.
No usage example.
pumpkin.30
pumpkin.60
Accessible pairing for warning text and icons, use only on background.app
No usage example.
pumpkin.30
pumpkin.60
Accessible pairing for icons communicating warning feedback, use only on elevation.base
For example: warning icons in rows.
ℹ️ Don’t use on body text as it doesn’t meet the minimum contrast ratio (4.5:1). Can be used for large text (24 px and larger).
pumpkin.50
pumpkin.50
Background
Use for backgrounds that need the highest level of prominence in the accent role.
For example: promotional tag (accent), promo banner for challenges (used in the gradient).
kelp.30
kelp.70
Use for backgrounds that need a high level of prominence in the accent role.
For example: order status bar.
kelp.40
kelp.60
Use for backgrounds that need the normal level of prominence in the accent role.
No usage example.
kelp.70
kelp.30
Use for backgrounds that need a low level of prominence in the accent role.
No usage example.
kelp.90
kelp.10
The lowest level of prominence in the accent role.
No usage example.
kelp.100
kelp.0
The highest level of prominence available in the action role. Hover state for action.normal and action.emphasis backgrounds.
Hover state: primary button and control components: radio button, checkbox, stepper, switch.
seaweed.30
seaweed.80
Use for backgrounds communicating an action with a high level of prominence. We use it in control components to differentiate them from the primary buttons.
Default state: radio button, checkbox, stepper, switch.
seaweed.50
seaweed.70
The normal level of prominence available in the action role.
For example: primary button.
seaweed.70
seaweed.60
Hover state for action.muted backgrounds.
For example: selected pill hover.
seaweed.90
seaweed.10
The lowest level of prominence in the action role.
Can be used as default state of hover state of some UI elements. For example: hover state for secondary and tertiary buttons, tabs and the unselected pill. It’s the default state in the selected pill.
seaweed.100
seaweed.0
This is the main background for the app and pages used in the product. Can also be used to create content modules on elevation.base (as inset).
neutral.muted
muted.darkValue
Use for brand purposes like merchandising banners.
seaweed.20
seaweed.20
Use for brand purposes only.
For example: in-app banners or merchandising banners.
seaweed.30
seaweed.30
Use for brand purposes only.
For example: in-app banners or merchandising banners.
seaweed.40
seaweed.40
Use for brand purposes only. This is the primary brand colour used in the Deliveroo rooute.
For example: backgrounds of in-app banners or merchandising banners.
seaweed.60
seaweed.60
Use for backgrounds that need the highest level of prominence in the callout role.
For example: promotional tag (rewards) for regular users.
mulberry.30
mulberry.70
Use for backgrounds that need a high level of prominence in the callout role.
For example: map pin.
mulberry.40
mulberry.60
Use for backgrounds that need the normal level of prominence in the callout role.
No usage example.
mulberry.70
mulberry.30
Use for backgrounds that need a low level of prominence in the callout role.
For example: promo banner (callout) and simple tag (callout)
mulberry.90
mulberry.10
Use for backgrounds that need the lowest level of prominence in the callout role.
No usage example.
mulberry.100
mulberry.0
Use for backgrounds communicating a critical or error message with the highest level of prominence.
For example: promotional tag (offers).
tomato.30
tomato.70
Use for backgrounds communicating a critical or error message with a high level of prominence.
For example: destructive buttons.
tomato.40
tomato.60
Use for backgrounds communicating a critical or error message with a normal prominence.
For example: error banners.
tomato.70
tomato.30
Use for backgrounds communicating a critical or error message with a low level of prominence.
For example: promo banner (offers) and simple tag (critical).
tomato.90
tomato.10
Use for backgrounds communicating a critical or error message with the lowest level of prominence.
For example: used in the radio button and checkbox error state.
tomato.100
tomato.0
The default background for many elements in our UI.
For example: backgrounds in most components like cards, text inputs, secondary buttons, service banners, navigation header, and modals.
static.white
anchovy.10
Use for brand and merchandising purposes only.
For example: in-app banners or merchandising banners.
brand.warm-white
brand.warm-white
Use for backgrounds that need the highest level of prominence in the feature role.
No usage example.
aubergine.10
aubergine.80
Use for backgrounds that need a high level of prominence in the feature role.
No usage example
aubergine.20
aubergine.70
Use for backgrounds that need the normal level of prominence in the feature role.
For example: map pin in the order tracker.
aubergine.30
aubergine.30
Use for backgrounds that need a low level of prominence in the feature role. Hover state for feature.muted backgrounds.
For example: simple tag (feature)
aubergine.90
aubergine.10
Use for backgrounds that need the lowest level of prominence in the feature role.
For example: default state of the selected pill and hover state of the unselected pill in the Plus theme (TBD).
aubergine.100
aubergine.0
Use for backgrounds that need a high level of prominence in the highlight role.
No usage example.
mustard.50
mustard.50
Use for backgrounds that need the normal level of prominence in the highlight role.
No usage example.
mustard.60
mustard.40
Use for backgrounds that need a low level of prominence in the highlight role.
No usage example.
mustard.90
mustard.10
Use for backgrounds that need the lowest level of prominence in the highlight role.
No usage example.
mustard.100
mustard.0
Use for backgrounds communicating an informative message with the highest level of prominence.
No usage example.
New for all products.
blueberry.20
blueberry.70
Use for backgrounds communicating an informative message with a high level of prominence.
No usage example.
New for all products.
blueberry.40
blueberry.60
Use for backgrounds communicating an informative message with a normal prominence.
For example: info banners.
New for all products.
blueberry.70
blueberry.30
Use for backgrounds communicating an informative message with a low level of prominence.
For example: simple tag (info)New for all products.
blueberry.90
blueberry.10
Use for backgrounds communicating an informative message with the lowest level of prominence.
No usage example.
New for all products.
blueberry.100
blueberry.0
Exclusive use for Diamond backgrounds.
For example: Olly to add
Plus tokens will be updated once the new visual identity is finalised
acai.20
acai.20
Exclusive use for plus backgrounds with a high level of prominence.
For example: Olly to add
Plus tokens will be updated once the new visual identity is finalised
acai.30
acai.30
Exclusive use for plus backgrounds with a normal prominence.
For example: promotional tag (rewards) for Plus users. Olly to add
Plus tokens will be updated once the new visual identity is finalised
acai.40
acai.40
Exclusive use for plus backgrounds with a low level of prominence.
For example: Olly to addPlus tokens will be updated once the new visual identity is finalised
acai.90
acai.10
Exclusive use for plus backgrounds with the lowest level of prominence.
For example: Olly to add
Plus tokens will be updated once the new visual identity is finalised
acai.100
acai.0
Use for backgrounds communicating a positive or successful message with the highest level of prominence.
No usage example.
apple.30
apple.70
Use for backgrounds communicating a positive or successful message with a high level of prominence.
No usage example.
apple.40
apple.60
Use for backgrounds communicating a positive or successful message with a normal prominence.
For example: success banners.
apple.70
apple.30
Use for backgrounds communicating a positive or successful message with a low level of prominence.
For example: simple tag (positive)
apple.90
apple.10
Use for backgrounds communicating a positive or successful message with the lowest level of prominence.No usage example.
apple.100
apple.0
Use for neutral backgrounds with the highest level of prominence.
For example: tooltips, toasts and the footer.
anchovy.0
static.white
Use for neutral backgrounds with a high level of prominence.
No usage example.
anchovy.40
anchovy.70
Use for neutral backgrounds with a normal level of prominence. For example: the default banner.
Can also be used for the disabled state in components like the switch.
anchovy.70
anchovy.60
Use for neutral backgrounds with a low level of prominence.
For example: simple tag (neutral), placeholders (skeletons) in all components, the loading state in buttons and disabled state in most components.
anchovy.90
anchovy.20
Use for neutral backgrounds with the lowest level of prominence.
This is the alias for color.background.app. Can also be used to create content modules on elevation.base (as inset).
anchovy.100
anchovy.0
Use for backgrounds communicating warning feedback to prevent an error with the highest level of prominence.
No usage example.
pumpkin.30
pumpkin.70
Use for backgrounds communicating warning feedback to prevent an error with a high level of prominence.
No usage example.
pumpkin.40
pumpkin.60
Use for backgrounds communicating warning feedback to prevent an error with a normal prominence.
For example: warning banners.
pumpkin.70
pumpkin.30
Use for backgrounds communicating warning feedback to prevent an error with a low level of prominence.
For example: simple tag (warning).
pumpkin.90
pumpkin.10
Use for backgrounds communicating warning feedback to prevent an error with the lowest level of prominence.
No usage example.
pumpkin.100
pumpkin.0
Border
Can be used in data visualisation.
No usage example.
kelp.10
kelp.90
Can be used in data visualisation.
No usage example.
kelp.20
kelp.80
Can be used in data visualisation.
No usage example.
kelp.30
kelp.70
Can be used in data visualisation.
No usage example.
kelp.40
kelp.60
Can be used in data visualisation.
No usage example.
kelp.50
kelp.50
Can be used in data visualisation.
No usage example.
seaweed.10
seaweed.80
Pressed state for components in the action and neutral role.
seaweed.20
seaweed.70
Can be used in data visualisation.
No usage example.
seaweed.30
seaweed.60
Hover state for border.action.muted
seaweed.40
seaweed.50
Default state for action borders that passes min 3:1 contrast ratios, like radio button, checkbox, tabs, pills and secondary buttons.
seaweed.50
seaweed.40
Can be used in data visualisation.
No usage example.
mulberry.20
mulberry.90
Can be used in data visualisation.
No usage example.
mulberry.30
mulberry.80
Use in the map pin tiny dot border.
mulberry.40
mulberry.70
Can be used in data visualisation.
No usage example.
mulberry.50
mulberry.60
Can be used in data visualisation.
No usage example.
mulberry.60
mulberry.50
Can be used in data visualisation.
No usage example.
tomato.20
tomato.80
Use in the pressed state for critical components or elements.
For example: destructive button, radio button and checkbox error states.
tomato.30
tomato.70
Hover state for border.critical.subtle (radio button, checkbox, secondary destructive buttons).
tomato.40
tomato.60
Default state for critical borders that passes min 3:1 contrast ratios, like the error state in radio button, checkbox, text input, select and destructive buttons (secondary).
tomato.50
tomato.50
Can be used in data visualisation.
No usage example.
tomato.60
tomato.40
Can be used in data visualisation.
No usage example.
aubergine.20
aubergine.100
Can be used in data visualisation.
Used in the map pins tiny dot border.
aubergine.30
aubergine.90
Used in the map pins tiny dot border.
No usage example.
aubergine.40
aubergine.80
Can be used in data visualisation.
No usage example.
aubergine.50
aubergine.70
Can be used in data visualisation.
No usage example.
aubergine.60
aubergine.60
Can be used in data visualisation.
No usage example.
blueberry.10
blueberry.80
Can be used in data visualisation.
No usage example.
blueberry.20
blueberry.70
Can be used in data visualisation.
No usage example.
blueberry.30
blueberry.60
Can be used in data visualisation.
No usage example.
blueberry.40
blueberry.50
Can be used in data visualisation.
No usage example.
blueberry.50
blueberry.40
Use in the focus state dark ring.
anchovy.0
static.white
Hover state for border.neutral.normal
anchovy.40
anchovy.60
Default state for neutral borders that passes min 3:1 contrast ratios.
For example: radio button, checkbox and pills.
anchovy.50
anchovy.50
Use to group or separate UI elements, such as dividers in pages or nows. It’s the default border for the majority of components like modals, service banners, floating button, select and text input.
Use for borders that don’t need to comply with AA standards, meaning they don’t add any context or meaning to the user. For example, it’s OK to use them in all cases where the border isn’t the only indication of what the UI element is.
Disabled state for border.neutral.normal
anchovy.80
anchovy.20
Disabled state for border.neutral.subtle
anchovy.90
anchovy.0
Exclusive use for plus.
For example: xxxx
Plus tokens will be updated once the new visual identity is finalised
acai.20
acai.80
Exclusive use for plus.
For example: xxxx
Plus tokens will be updated once the new visual identity is finalised
acai.30
acai.70
Exclusive use for plus.
For example: xxxx
Plus tokens will be updated once the new visual identity is finalised
acai.40
acai.60
Exclusive use for plus.
For example: xxxx
Plus tokens will be updated once the new visual identity is finalised
acai.50
acai.50
Exclusive use for plus.
For example: xxxx
Plus tokens will be updated once the new visual identity is finalised