Design System Inspiration of Ocado

Overview

Visual Theme & Atmosphere

Ocado is the UK’s online-only grocer. Its own history begins with the words “We were founded in 2000, and just one year later, pilot deliveries had begun” — a supermarket with no shops, built on automated warehouses. For most of its life it sold Waitrose products; in 2019 Marks & Spencer paid up to £750m for half of Ocado’s retail business, forming Ocado Retail, and in 2020 ocado.com switched from Waitrose to M&S products. The technology side, Ocado Group, now licenses its warehouse platform to grocers abroad. This reference is the storefront, ocado.com.

The storefront is calm and practical. Most of the page is a pale blue-grey #e6ecf0 — 157 elements, the fill of panels and product placeholders — around white cards, with a slate ink #2d333a. The brand purple #4d216d is used sparingly; lavender #e9e4ed buttons with deep-purple text #2e004d carry the everyday actions, and a warm yellow #f1c500 means one thing: add to basket. Promotions are red. Everything is set in Source Sans Pro and rounded at 8px.

What makes it worth reading:

• Colour steps name their own text colour. The base, 100, 200, 700 and 900 steps of each --intent-* ramp carry a -contrast twin — --intent-action-700-contrast #2d333a, --intent-primary-700-contrast #ffffff — so the system decides legibility, not the designer.
• Colour is assigned by intent. Primary, action, promotion, secondary, success, warning, error — each a ten-step ramp.
• A namesake, not a borrowing. The component tokens are --salt-*, the same prefix as J.P. Morgan’s Salt design system, and share none of its names.

Primary tasks

• Search for a product; add it to the basket.
• Log in or register; browse categories and recipes.

Brand Narrative

Ocado sells groceries without a single shop, and the storefront behaves like a well-run warehouse: grey-blue shelving, white product cards, a single colour for the one action that matters most — yellow for the basket — and the brand purple held in reserve. Its partners have changed, from Waitrose to M&S, and the company has split into a retailer and a technology licensor; the storefront’s system has stayed quietly consistent.

The token system is an engineer’s: every colour organised by the job it does, its key background steps naming their own legible text colour, spacing counted in 4px units that double. Its components carry a name that happens to match a well-known open-source design system and nothing else of it.

Principles

• One colour, one action. Yellow adds to the basket.
• Legibility is a token. The key steps carry their contrast colour.
• Lift, don’t paint. Cards rise on hover.

Personas

Not researched. No persona claim is made from a UI capture.

Colors

Measured with getComputedStyle on www.ocado.com. Every custom property traces to first-party stylesheets on ocado.com; no third-party script injects any. 316 in all: --salt-* 156 · --intent-* 105 · --z-* 24 · --typography-* 7 · --surface-* 4 · --interaction-* 4 · a few singletons. The root font size is 14px, so Ocado’s rem values convert at 14.

Purple — the brand

• Primary (#4d216d) — --intent-primary and --salt-button-primary-background-color.
• Primary Hover (#240b3d) — --salt-button-primary-hover-background-color, also --interaction-primary and --intent-primary-900.
• Primary Ink (#2e004d) — --typography-primary, the text on lavender (38 elements).
• Primary Surface (#e9e4ed) — --intent-primary-50 and the secondary button’s fill (18 elements).
• Primary Surface Hover (#c9bcd3) — --intent-primary-100, the secondary button’s hover.
• Primary Muted (#a690b6) — --intent-primary-200, the links bar’s hover underline.

Yellow — action

• Action (#f1c500) — --intent-action, the Add button.
• Action Hover (#e6a300) — --interaction-action / --intent-action-900.

Red — promotion

• Promotion (#c51d25) — --intent-promotion.
• Promotion Text (#a90016) — --typography-promotion, --salt-text-promotion-color and --salt-link-promotion-color.

Ink and surface

• Foreground (#2d333a) — --typography-default and --salt-text-color. 997 elements; the page sets body copy in divs and spans rather than <p>.
• Placeholder (#4c5157) — --typography-placeholder · Disabled (#96999c) — --typography-disabled.
• Decoration (#e6ecf0) — --decoration, --intent-secondary and --surface-sunken; the most-painted background · Decoration Contrast (#6c7075).
• Background (#f3f5f8) — --surface-background · Canvas (#ffffff) — --surface-base and --surface-raised.

Status

Success #116623 · Warning #bd5407 · Error #9e171c (--intent-error), with #a31800 for error text (--typography-error). Each is a ten-step ramp with contrast twins.

Typography

Font family

Source Sans Pro — one family for everything, 400 and 600 loaded (document.fonts), served from Google Fonts. --salt-text-font-family, --salt-display-font-family and --salt-links-bar-font-family all name it. It is an open Adobe typeface, recorded as what is served.

Scale

At the 14px root: --salt-text-s 12px (line height 1.33) · --salt-text-m 14px (1.29) · --salt-text-l 16px (1.25) · --salt-display 20px (1.2). Buttons set 14px at 600.

Layout

• Spacing doubles: --salt-spacing-05 2 · -1 4 · -2 8 · -4 16 · -8 32 · -16 64 · -32 128px. The token name is the number of 4px units.
• Borders are tokenised by width — --salt-border-1 1px, --salt-border-2 2px — and many controls carry a border in their own fill colour, so hover can recolour it.

Responsive Behavior

Not measured. Desktop 1440×1000 only.

Elevation & Depth

Three elevation tokens, all soft and mostly centred: --salt-elevation-shadow-1 0 2px 12px rgb(0 0 0 / 8%) · -2 0 0 14px rgb(0 0 0 / 12%) · -3 0 0 16px rgb(0 0 0 / 12%). Level 1 is the card hover. A couple of one-off shadows outside the scale appear once each.

Motion & Easing

Not measured. No motion token among the custom properties.

Regional sources: (Food Manufacture, 2019-02-27 — M&S and Ocado announce a joint venture in a £750m deal); (The Grocer — Ocado Group drops its claim for £190m from M&S tied to the joint venture)

Components

Four components, every state on its own page load, focus read before the mouse moved.

• Secondary — Log in and the search submit: #e9e4ed, #2e004d 14px/600, 8px, 40px. Hover #c9bcd3.
• Action — Add, on a product tile: #f1c500, #2d333a label, 8px, 40px. Hover #e6a300, border following.
• Primary — #4d216d, white, 7px, 42px. Hover #240b3d. Logged out on the home page, the only purple button is the Live Chat launcher; the purple is not a shopping call to action here.
• Card — Register: #ffffff, #2d333a, 8px, 92px, 16px padding. Hover adds rgba(0,0,0,0.08) 0 2px 12px — --salt-elevation-shadow-1 — without changing colour.

So: lavender for everyday actions, yellow for the basket, purple for the brand, and elevation — not colour — for cards.

Focus is the browser’s

Every control shows outline: rgb(0, 95, 204) auto 1px under :focus-visible. Each component sets its own ink as a resting outline colour with outline-style: none, but none turns it on; the ring that renders is Chrome’s. No focus colour is recorded.

Radius

--salt-radius-default 8px (0.571rem) — 8px ×264, the standard for cards, buttons and fields; --salt-radius-1 12px; 0 0 8px 8px ×27 (bottom-rounded cards); 7px ×15; 20px ×3 (pills).

States

Four components, every state measured. Hover: secondary to #c9bcd3, action to #e6a300, primary to #240b3d, cards gain a soft shadow. Focus is the browser’s auto ring throughout. Disabled tokens exist — --salt-button-primary-disabled-background-color #e9e4ed with #96999c text — but no disabled control was observed.

Do’s and Don’ts

Do

• Use #f1c500 only for adding to the basket.
• Use lavender #e9e4ed with #2e004d text for everyday secondary actions.
• Take text colours from the -contrast twin of the --intent-* step used as the background.
• Lift cards with --salt-elevation-shadow-1 on hover instead of recolouring them.

Don’t

• Don’t treat --salt-* as J.P. Morgan Salt — none of its names are Salt’s.
• Don’t spread the brand purple across surfaces; it is an accent.
• Don’t rely on the browser ring as a brand focus style.

Voice & Tone

Not assessed as authored voice. 5,667 characters on the measured surface.

Agent Prompt Guide

Quick Color Reference

#4d216d purple · #240b3d purple hover · #2e004d purple ink · #e9e4ed lavender · #c9bcd3 lavender hover · #f1c500 basket yellow · #e6a300 yellow hover · #c51d25 / #a90016 promotion · #2d333a ink · #e6ecf0 decoration · #f3f5f8 background · #ffffff cards

Example Component Prompts

• “An Add button: #f1c500, #2d333a 14px/600 Source Sans Pro, 8px radius, 40px; hover #e6a300.”
• “A secondary button: #e9e4ed, #2e004d 14px/600, 8px radius; hover #c9bcd3.”