Just Eat DESIGN.md

Design System Inspiration of Just Eat

Overview

Visual Theme & Atmosphere

Just Eat lets people order from restaurants, grocery stores and other local businesses. Its UK website terms identify the operator as Just Eat.co.uk Ltd, with a London registered office. UK terms The group's company history dates the original Just Eat business to Denmark in 2001 and its merger with Takeaway.com to 2020.

The measured homepage combines an orange food-photography hero, heavy white lettering and a charcoal Search pill. A white header carries compact icon-and-label actions; a pale blue app panel, warm neutral benefit section and cream footer extend the page below. These are observations of the live UK homepage, captured at 1440×1000 on 2026-11-02.

The current headline, “Stay just where you are”, matches the brand platform announced on 15 October 2026. That announcement shifts emphasis towards the moments delivery lets people keep enjoying, and introduces an updated visual identity and an evolved Did Somebody Say mnemonic. This is the company's stated direction; the measured controls below describe the actual homepage implementation. Official announcement

PIE is Just Eat Takeaway's global design system. Its colour guidance explicitly separates Brand orange from Product orange for interactive use. That distinction matters when recreating this style: an orange brand environment can contain a charcoal primary action. What is PIE?, Colour

Brand Narrative

A delivery marketplace presents convenience through time people can keep for themselves. The observed expression joins food photography and orange surroundings with heavy type, simple instructions and compact charcoal/transparent controls. Homepage

Principles

PIE describes colour as a way to communicate hierarchy and interactive states, and cautions against conveying information through colour alone. In the measured interface, text labels, icons and a separate keyboard-focus ring work alongside colour. Official colour principles

Personas

No verified persona research was opened; no personas are asserted.

Colors

The homepage census found 3,605 computed root properties and 3,742 declared properties across document and open shadow stylesheets. The selected colours below come from that homepage, rather than from the appearance of the documentation site.

Foreground is usually translucent on this page. Paragraph ink was rgba(0, 0, 0, 0.76) in 12 paragraphs and rgba(255, 255, 255, 0.9) in five. Search's visible label also uses the latter. The solid foreground alternative above is a separate existing token, not a conversion of the paragraph colour. Alpha values remain in prose because the colour registry accepts opaque six-digit hex only.

PIE recommends Brand orange for such uses as logos and marketing backgrounds, and Product orange for interactive elements. Its guidance also requires content colours to be paired with the appropriate orange role. The hero's visible gradient was not extracted as a CSS gradient; its stops are therefore absent. Official colour guidance

--swiper-* is excluded as a library namespace. Explicit third-party provider colours, Braze-named values and cookie-banner internals are not promoted into this product palette. Their raw declarations remain in the measurement report.

Typography

Evidence classes

• Official product use: PIE names JET Sans Digital as its primary family. It documents Arial as a fallback and PT Mono for code snippets; these documented purposes do not establish that either loaded on this homepage. Typography
• Live-loaded: the census contains one loaded face, JETSansDigital 100 1000 oblique 0deg 20deg. The body and button CSS stacks begin with JETSansDigital; the h1 stack begins with JetSansDigital. Case differences are preserved in the raw evidence. The family token in this reference contains only JETSansDigital.
• Official distributed assets observed in homepage CSS: Digital is served as JETSansDigital-VF-optimised-extended.woff2, declared for weights 100 1000 and oblique 0deg 20deg. Homepage CSS also declares JETSansDisplay-ExtraBlackItalic-optimised-extended.woff2 as JETSansDisplay, weight 1000, italic. Both URLs use pie-design-system-cdn.production.jet-external.com/fonts/. The Display face was not loaded and receives no specimen.
• Declared-only: --dt-font-family-alternative and its --xds-* counterpart name JETSansVF2; the code-family tokens name PTMono. Arial also appears in the fallback stack and a font-family token. None appears in the census's loaded-face list. No specimen is assigned to these faces.
• Unresolved: the relationship between JETSansVF2 and the loaded Digital face, Display's actual product use, and font redistribution/licensing were not established. Substitute: none chosen.

Measured metrics and available scale

The weight range describes the loaded variable face declaration; the control rows show actual computed weights. PIE's typography guidance reserves italic treatment for suitable brand moments and excludes functional CTAs from that treatment. Typography guidance

Layout

The desktop page places the wordmark at the left of a white header and partner/courier/account actions at the right. The hero has left-aligned copy and location search beside a large food image. Below it are ordering instructions, an app promotion, three benefit panels and an expanded multi-column footer. This sequence is visible in the full-page capture.

Keep the input's inner 24px text line distinct from its 56px surrounding label. The Search pill is 48px high inside the larger search assembly; header actions are 40px high. These separate dimensions are more useful than treating every row as one generic input or button.

The live --dt-spacing-* aliases provide: none 0; a-small 2px; a 4px; b 8px; c 12px; d 16px; e 24px; f 32px; g 40px; h 56px; i 64px; j 80px. The measured controls use 16px and 24px horizontal padding in the contexts described above.

Responsive Behavior

Only the desktop homepage was measured. PIE's responsive illustration shows heading-L at 28px/32px above 768px and 24px/32px below 768px. The captured homepage tokens instead resolve heading-L to 28px/32px wide and 24px/28px narrow (--dt-font-heading-l-size--narrow, --dt-font-heading-l-line-height--narrow). Keep this documentation/token difference explicit; no mobile viewport was tested. Responsive type guidance

Elevation & Depth

The four exported controls have no resting shadow. Focus uses the two sharp shadow spreads described in §4. The live root also contains --dt-elevation-card:

0px 0px 1px 0px rgba(0,0,0,0.12),0px 1px 5px 0px rgba(0,0,0,0.04),0px 0px 4px 0px rgba(0,0,0,0.1)

This establishes an available foundation value, not a measured shadow on a particular card. Rounded foundation aliases a/b/c/d/f/g are 4/8/12/16/20/24px. Alias e is 50rem; the measured Search and header actions compute to an 800px pill radius.

Motion & Easing

The Search control's raw computed transition is:

border-color, background-color, color 0.15s, 0.15s, 0.15s cubic-bezier(0, 0, 0.3, 1), cubic-bezier(0, 0, 0.3, 1), cubic-bezier(0, 0, 0.3, 1) 0s, 0s, 0s

It exposes a 0.15s duration with cubic-bezier(0, 0, 0.3, 1). Log in, the courier link, the address input, Receive stamps and Top Cuisines each report all 0s ease 0s on the measured element. This does not describe transitions on descendants, ancestors or untested surfaces. No scroll or campaign animation timing is inferred.

---

First-party context: company history, UK website terms, PIE, typography, colour, October 2026 brand announcement. Live measurements: homepage survey 20261102-113658 and states 20261102-113914; full provenance and capture limitations are in verification.md.

Components

These are raw observations from one states capture. The cookie banner remained visible; its reject action reads “Necessary only”. No consent was accepted. The Search, Log in, courier and accordion crops identify the intended controls; their pointer states matched :hover and :active, and keyboard focus matched :focus-visible.

The focus treatment is authored box-shadow, not a browser auto outline:

box-shadow: #ffffff 0px 0px 0px 2px, #2b3e97 0px 0px 0px 4px;

Both shadows have zero blur and zero offset. The outer blue shadow extends to 4px; the inner white shadow occupies the first 2px. The four controls returned to their baseline after blur. All four had box-shadow: none and outline: none at rest.

The address input itself is 448.3×24px, radius 0, padding 0, transparent, with black-at-76% ink and no border. Its surrounding survey label is 480.3×56px, radius 12px and padding 16px. Hover, pressed and keyboard focus produced no change across the compared input, its pseudos and three ancestor levels; this is a bounded observation, not a claim about every possible visual effect. It is absent from component tokens because all measured states were unchanged.

Receive stamps (href="#stampCards") is a 96.9×20px underlined link, radius 0, padding 0, 14px/400, fg #3147ad, transparent on white. Tab focus measured radius 2px and the same dual shadow. Hover and pressed were UNMEASURED: the tool reported the pie-link[Receive stamps] host covering the target. Its focus crop is obscured, so the link is retained as raw prose evidence rather than a component token. No card link was identified in the survey.

States

Search lightens both fill and border on hover and pressed. Log in, the courier link and Top Cuisines add 4% then 12% black backgrounds. Their keyboard-focus ring is a white/blue box-shadow that clears after blur. The address reading was unchanged within scope; Receive stamps pointer states remain unmeasured. No disabled, expanded, submitted or validation state was measured. Cookie-banner buttons are excluded.

Do's and Don'ts

• Keep Brand orange and Product orange as distinct roles; use the measured charcoal treatment when recreating this Search action.
• Preserve the heavy control weights: 800 for Search and header actions, 900 for the measured footer trigger.
• Preserve the white inner separation and blue outer focus shadow on these controls.
• Keep opacity-bearing foreground values as alpha colours over their real surfaces.
• Do not turn the unchanged input reading into an invented focus state, or infer card interaction states from static benefit panels.
• Do not treat Swiper blue, external-provider colours or cookie buttons as the product's primary palette/components.

Voice & Tone

The homepage pairs an invitation to stay put with direct task labels: Search, Full address and Log in. The official campaign frames delivery around preserving enjoyable moments. For a reference implementation, combine that relaxed invitation with short, concrete interface instructions. This is a reading of the observed copy, not a separately verified tone-of-voice manual. Official campaign

Agent Prompt Guide

“Build a Just Eat-style ordering landing page using the verified JETSansDigital family. Pair an orange brand environment (#ff8000) with white surfaces, warm #f6f3ef / #f0ece6 sections, and a #c1dade app panel. Use a 48px-high charcoal #2b2a28 Search pill with 20px/800 text at 90% white, 11px 24px padding, and the measured white/blue keyboard-focus shadows. Keep header action links and buttons at 40px high, 16px/800, with 4% black hover and 12% black pressed backgrounds.”

The exact hero gradient and any unavailable face are outside this prompt's verified values.