Gousto DESIGN.md

Design System Inspiration of Gousto

Overview

Visual Theme & Atmosphere

Gousto is a British recipe-box company: it delivers measured ingredients and recipe cards for cooking at home, and publishes a public cookbook of its recipes. Its current identity dates from 2017, when a new logo — a lowercase, geometric wordmark with a circular monogram — replaced the old one, as Brand New recorded that September. Today the homepage runs a "Meet the New Gousto" banner over its hero.

What renders is a purple/indigo action colour, #615cff, deepening to #412dee on hover and pressed states, over a body-copy ink of #516272 and a dominant nav/UI ink of #373a3c. Sections alternate white (#ffffff), a light grey #f4f7fa, and two dark bands, #333d47 and #11161b. A red ribbon (#ff0032) and a green accent (#01a92b) appear as promotional and status colours.

Primary tasks

• Browse recipe boxes and prices; get started signing up.
• Browse the public recipe cookbook (/cookbook/recipes).

Brand Narrative

Regional UK trade press corroborates a 2017 rebrand: Fresh Produce Journal/Fruitnet ("Gousto rebrand targets families," 13 Sep 2017) describes a new logo, "design system" and photography style aimed at families, a TV campaign via The Sharp Agency (production by The Gate, director Cosmo Wallace), with CEO Timo Boldt quoted on "good food on the table." underconsideration.com's Brand New ("New Logo for Gousto," 27 Sep 2017) corroborates the same rebrand date and describes it with tags including circle, geometric, lowercase and monogram, though its full analysis is paywalled and was not read.

Grocery Gazette ("How Gousto used AI guardrails to speed up Ireland website development," 24 Sep 2026) describes active 2026 engineering and design work: an engineer-built, Claude-based "AI harness" for constrained code generation, a pricing-page redesign, and a homepage overhaul across mobile/tablet/desktop via Figma and feature flags, with product designer Dec Roberts quoted; it also confirms roughly 15 years of UK operation before Gousto's Ireland launch in February 2025.

Principles

• One colour for doing. #615cff/#412dee carries every primary action and every interactive ring, on light and dark backgrounds alike.
• Body ink is its own colour. #516272 for paragraph text is distinct from the #373a3c used in navigation and headings.
• The ring travels, the radius doesn't agree with itself. The #412dee focus/pressed ring is applied consistently across button, nav and dropdown controls, even though the CTA's 8px radius contradicts its own declared 3px token.

Personas

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

Colors

Measured with getComputedStyle on www.gousto.co.uk: 212 root custom properties beyond the 31 --cc-* cookie-consent vars, which belong to the third-party "vanilla-cookieconsent" library (orestbida/cookieconsent) and are excluded. Everything else is first-party, though structurally messy: four parallel type-scale namespaces and three parallel grey ramps coexist.

Action colour

• Primary (#615cff) — --Secondary-400, the resting fill of the primary CTA and every recipe card's link colour. Primary Highlight (#412dee) — --Secondary-600 and --Gousto-focused-border, the hover/pressed/focus colour used everywhere: buttons, nav-link rings, the card border. Primary Surface (#eae9ff) — --Secondary-50.

Text and surfaces

• Foreground (#516272) — the most frequent colour inside <p> elements (rgb(81, 98, 114)), matching --ColdGrey-600. This is the body-copy ink, distinct from the nav/UI ink.
• Text Strong (#373a3c) — the dominant text colour overall (694 occurrences), used in nav and headings. Text Black (#000000) — 368 occurrences, mixed use.
• Surface (#f4f7fa) — a light grey section background (21 occurrences). Surface Dark (#333d47, 9 occurrences) and Surface Darkest (#11161b, 7 occurrences) are the dark footer/section bands. Border (#ced4d9) appears on card edges. Canvas (#ffffff) is the base background (71 occurrences) and the header background.
• Grey (#7d7e7f) — --NeutralGrey_500, whose declared value is malformed, a literal quoted string "\"#7D7E7F\"" baked into the custom property — a pipeline bug, recorded as found.

Status and a stray

• Red (#ff0032) — Pomegranate, the "50% OFF" ribbon colour (also seen as #ff3355). Green (#01a92b) is a status/promo green (also seen as #006700/#008610). A success-tint background #e6f7e7 appears behind confirmation-style content.
• Link Blue (#0275d8) — 53 occurrences, a Bootstrap-blue-looking link colour that reads as a stray default rather than an intentional brand colour; flagged, not promoted further.

Typography

Font family

Axiforma is the confirmed rendered brand face — document.fonts reports it loaded in three weights actually used: Book (400), Bold (700), and ExtraBold (on <h1>), plus variable-font instances with continuous weight ranges (AxiformaBook 401 1000, AxiformaBold 1 1000, AxiformaExtraBold 1 1000), meaning Axiforma is served as a variable font alongside static Book and Bold files. It is self-hosted — no Google Fonts or Adobe Fonts network call appears in the font fallback chain, which falls back straight to system fonts — but this serving mechanism was not independently confirmed via a network trace in this pass, only that document.fonts reports it loaded.

Declared stacks: body = AxiformaBook, Helvetica, sans-serif; h1 = AxiformaExtraBold, Helvetica, sans-serif; button = AxiformaBook, Helvetica, sans-serif.

Scale, and the mess

At least four parallel size namespaces coexist: --fontStyle-* (composite tokens baking in size, line-height and family, e.g. --fontStyle-BodyL: 18px/27px AxiformaBook,Helvetica,sans-serif, sans-serif — note the doubled sans-serif, a token-pipeline artefact repeated across several of these), --font-Static* (pure size/line-height pairs, e.g. --font-StaticLarge: 18px/27px), --fontSize-* (bare px sizes, 11–48), and --Font-Scale-* (a second bare-px ramp, 16/18/20/24/28, overlapping the others in value space). --Line-Height-* supplies a third naming convention for line-heights (20/24/28/36 px) alongside --lineHeight-normal: 1.4.

Confirmed rendered sizes: the primary CTA label is 18px at weight 400; the "Recipe boxes"/"Box prices" nav links are 14px at weight 700; the "How it works" dropdown trigger is 18px at weight 400; the "Login" ghost link is 13px at weight 400.

Layout

• Two parallel spacing scales: mobile --spacing-* (XXS 5 … XXXXXL 100) and --spacing-Desktop*, which uses different px values below XXL and converges with the mobile scale from XXL up.
• Button padding: --Gousto-button-padding 8px 16px; the rendered primary CTA instead uses 10px 24px.
• Border widths were not enumerated as a dedicated scale beyond the component borders above.

Responsive Behavior

Not measured. Desktop 1440×1000 only.

Elevation & Depth

Mostly flat, with the ring itself doing the work of state feedback: 0 0 0 3px #412dee (button and nav-link pressed/focus), 0 0 0 1px #ffffff inset (the focus inner ring on white-text buttons). A soft rgba(2,2,3,.28) shadow belongs to the cookie-consent modal and is excluded as third-party.

Motion & Easing

Not measured. No --transition/--duration custom properties were found in the root enumeration.

---

Tier 1 sources: https://www.gousto.co.uk/ (live homepage, headless-refused, headed Chrome; en-GB, 1440×1000; 212 first-party :root custom properties beyond --cc-*; consent banner rejected via "Reject all non-essential" before any measurement; captured 2026-09-26); https://www.gousto.co.uk/cookbook/recipes (public recipe browse page, used to measure the card-link component and to confirm no search input exists logged out, captured 2026-09-26); https://www.gousto.co.uk/zz-this-does-not-exist (nonsense-path control — HTTP 200, byte-identical 785-character "Oh crumbs!" 404 body to /about-us and /our-story, captured 2026-09-26), compared against https://www.gousto.co.uk/jobs (a real, distinct 3,862-character page, same date).

Regional sources: https://www.underconsideration.com/brandnew/archives/new_logo_for_gousto.php (Brand New — "New Logo for Gousto", spotted 2017-09-27; circle, geometric, lowercase, monogram)

Components

Six controls were checked; five were measurable on the logged-out public surface. A search input was not found — the only <input> elements reachable while logged out (homepage and /cookbook/recipes) are a hidden coupon-toggle radio and four filter checkboxes; no visible text/search field exists without logging in.

• Primary CTA — "Get started" (hero): rest #615cff fill, #ffffff text, 8px radius, 48px height, 10px 24px padding, 18px/400. Renders at 8px though --Gousto-button-border-radius declares 3px — the token doesn't match the live control. Hover and pressed both deepen the fill to #412dee; pressed adds a 0 0 0 3px #412dee shadow; focus adds a white inset ring (0 0 0 1px #ffffff) plus a 2px solid #412dee outline.
• Nav links — "Recipe boxes" and "Box prices" (top nav, red header): transparent background, #ffffff text, 3px radius, 20px height, 14px/700. Hover shows no visible change, confirmed. Pressed and focus both draw a 0 0 0 3px #412dee shadow ring, even against the red header background.
• "How it works" dropdown trigger: #ffffff text, 24px height, 18px/400. Hover not measured. Pressed and focus both add a white inset ring (0 0 0 1px #ffffff) plus a 2px solid #412dee outline — the same treatment as the primary CTA's focus.
• "Login" (ghost/text button, top right): transparent background, #373a3c text, 35px height, 0px radius, 13px/400. No hover or pressed change measured. Its focus ring is the browser's default (outline-style: auto) — the only control here without an authored ring.
• Recipe card link (/cookbook/recipes): the whole card is one anchor, 402px tall. Rest: #615cff text, an asymmetric border — top/left/right #615cff, bottom #c0c5c9 — reading like a card-shadow-as-border trick. Hover and pressed both turn the text and border #3e3ac2 (--color-BlueBaseDarker). Focus draws the browser's default blue ring, inconsistent with the purple ring used on nav and CTA controls.

States

Five controls measured. Hover: unchanged on the two nav links, #412dee fill on the primary CTA, no data on the dropdown trigger or Login, #3e3ac2 on the recipe-card link. Pressed: a #412dee ring on CTA and nav links, #3e3ac2 on the card link. Focus: an authored #412dee-based ring on CTA, nav links and the dropdown trigger; the browser's own default ring on Login and the recipe card, with no brand token assigned to either.

Do's and Don'ts

Do

• Use #615cff for the primary action and #412dee for hover/pressed/focus.
• Set body copy in #516272, not the nav ink #373a3c.
• Put a 0 0 0 3px #412dee ring (or the white-inset + #412dee outline pair) on focusable controls that already carry one.

Don't

• Don't assume the CTA's 8px radius matches the declared 3px button-radius token — they disagree.
• Don't copy --NeutralGrey_500's malformed quoted value; use #7d7e7f.
• Don't call the design system "Zest" — that name could not be verified for Gousto and is not used here.
• Don't treat #0275d8 as a brand colour; it reads as a stray default link colour.

Voice & Tone

Not assessed as authored voice. The only first-party line captured is the hero banner "Meet the New Gousto," undated and unexplained on the page itself.

Agent Prompt Guide

Quick Color Reference

#615cff primary · #412dee highlight/hover · #eae9ff primary surface · #516272 body text · #373a3c UI text · #000000 black · #f4f7fa light surface · #333d47 / #11161b dark sections · #ced4d9 border · #ffffff canvas · #ff0032 red ribbon · #01a92b green · #7d7e7f grey · #0275d8 stray link blue

Example Component Prompts

• "A 48px button: #615cff fill, white 18px/400 Axiforma, 8px radius; hover and pressed #412dee; focus adds a white inset ring plus a 2px #412dee outline."
• "A recipe-card link: #615cff text and border, turning #3e3ac2 on hover, 402px tall."

Governance

Known Gaps

• Contrast, link-ghost. Text #373a3c on #00000000 measures 1.83:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.