A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
24tokens
10type steps
4radius steps
6pxspacing base
Grubhub, in one page
Grubhub's iOS app is an appetite-first food delivery marketplace. The canvas is pure white (#FFFFFF) and every screen is engineered to push you toward a decision: pick a restaurant, add a dish, track the bag. The hero of the experience is restaurant photography — wide 16:9 food and storefront images sit at the top of every restaurant card, full-bleed within a rounded container, never cropped to a square or hidden behind a tint. Around that photography the chrome is deliberately quiet: a thin "Deliver to" address row, a single search field, a scrollable strip of cuisine chips, then a vertical river of restaurant cards. The brand makes its presence felt through two saturated colors — Grubhub Red (#F63440) for the primary action and the brand mark, and Grubhub Orange (#FF8000) for deals, savings and value messaging — set against an otherwise neutral, almost editorial layout.
The two signature UI moments are the restaurant list and live order tracking. The restaurant list is the home screen: address pinned at top, search below, cuisine chips, then cards that each carry a photo, a Grubhub+ Perks badge, the restaurant name, a green rating chip, delivery time, fee, and an orange deal line. The moment you place an order the app flips into order tracking — a persistent banner and a full tracking screen with an animated progress bar, an ETA window ("Arriving 7:45 – 7:55 PM"), a step timeline (Order confirmed → Driver picking up → On the way → Delivered), a live map with the courier moving, and the driver's name. This tracking surface is the emotional payoff of the app and gets the most motion and the calmest, most reassuring blue accent (#00A0DF).
The membership layer — Grubhub+ — is woven through the UI as a gold (#FFB81C) "Grubhub+ Perks" badge on eligible restaurant cards, a "$0 delivery fee" line in orange, and an upsell card. It is a value signal, not a chrome color: gold appears only on Perks badges and the membership pill. The color system is therefore strictly three-tone for brand (Red action, Orange savings, Gold membership) plus a quiet utility set (green rating, blue tracking, neutral text).
Typography is a clean grotesque. Grubhub's brand face is Graphik; in an unlicensed clone the closest free substitute is Inter (or Helvetica Now / system SF Pro). Hierarchy is bold and product-driven, not editorial: screen titles are heavy (weight 800–900), restaurant names are 16pt bold, metadata drops to a muted gray 14pt, and deal lines are 13pt bold orange. Numbers — prices, ETAs, ratings, fees — are everywhere and always get extra weight because the decision is economic.
Key Characteristics:
- Pure white canvas (
#FFFFFF) light / warm near-black (#121212) dark — content-forward, low chrome - Wide 16:9 restaurant photography in 14pt rounded containers — the visual anchor of every card
- Two-tone brand: Grubhub Red (
#F63440) for actions/brand, Grubhub Orange (#FF8000) for deals & savings - Grubhub+ membership surfaced as a gold (
#FFB81C) "Perks" badge + "$0 delivery fee" messaging - "Deliver to" address row pinned top-left with a bag/cart button top-right (item count badge)
- Cuisine chip rail — horizontally scrolling pill filters, active chip filled Grubhub Red
- Restaurant card: photo + Perks badge + saved heart + name + green rating chip + time/fee + orange deal
- Live order tracking — persistent ETA banner + full screen with progress bar, step timeline, courier map
- Track Blue (
#00A0DF) accent reserved for the order-tracking surface only - Quantity stepper (− n +) with Grubhub Red circular controls on menu and bag
- Pill-shaped primary buttons (fully rounded,
999px) — "Add to bag", "Checkout", "Get Grubhub+" - Bottom tab bar: Delivery / Search / Orders / Saved / Account — active icon tinted Grubhub Red
Do's and don'ts
Do
- Use pure white (
#FFFFFF) as the light canvas; warm near-black#121212for dark — never true black - Lead every restaurant card with a wide 16:9 photo in a 14pt rounded container
- Use Grubhub Red (
#F63440) for the primary action, brand mark, active tab and active chip - Use Grubhub Orange (
#FF8000) for deals, savings and "$0 delivery fee" messaging — value, not action - Surface Grubhub+ as a gold (
#FFB81C) "Perks" badge and membership pill — membership only - Render ratings with a green star (
#18A957), not gold — this is a Grubhub signature - Reserve Track Blue (
#00A0DF) exclusively for the order-tracking surface - Make every price, fee, ETA and quantity bold and tabular
- Use fully-rounded pill buttons (
999px) for all primary/secondary CTAs - Keep a persistent tracking banner on Home whenever an order is active
- Embed the total in the checkout button label ("Go to checkout · $42.18")
Don't
- Don't crop restaurant photos to squares or hide them behind heavy tints — wide and full-color
- Don't use Grubhub Red for deals/savings — that is Orange's job; don't use Orange for the primary CTA
- Don't render ratings in gold/yellow stars — Grubhub uses green
- Don't spread Perks Gold across the chrome — it appears only on Perks badges and the membership pill
- Don't use the tracking blue anywhere except the order-tracking experience
- Don't use sharp-cornered rectangular buttons — primary CTAs are pills
- Don't shadow restaurant cards in light mode — photo + whitespace create separation
- Don't bury the ETA — it is the emotional payoff; show it large and early in tracking
- Don't use thin weights for prices — economic figures are always 700+
- Don't make the address row loud — it is utility chrome, not a headline
- Don't animate aggressively — motion is functional (bag bump, progress fill, stage advance)
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Grubhub design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Grubhub Red: #f63440
- Grubhub Orange: #ff8000
- Grubhub Red Pressed: #d2202b
- Grubhub Orange Pressed: #e06e00
- Perks Gold: #ffb81c
- Track Blue: #00a0df
- Rating Green: #18a957
- Canvas White: #ffffff
- Surface Gray: #f6f6f4
- Surface Pressed: #ececea
Type:
- families: Graphik, Brand Face, Inter, System Fallback
- scale: 10, 12, 13, 14, 15, 16, 18, 22, 26
- weights: 400, 500, 600, 700, 800, 900
Shape:
- radius: 8, 10, 12, 14
Spacing: 6, 11, 13, 14, 22
Rules:
- Use pure white (`#FFFFFF`) as the light canvas; warm near-black `#121212` for dark — never true black
- Lead every restaurant card with a wide 16:9 photo in a 14pt rounded container
- Use Grubhub Red (`#F63440`) for the primary action, brand mark, active tab and active chip
- Use Grubhub Orange (`#FF8000`) for deals, savings and "$0 delivery fee" messaging — value, not action
- Surface Grubhub+ as a gold (`#FFB81C`) "Perks" badge and membership pill — membership only
- Render ratings with a green star (`#18A957`), not gold — this is a Grubhub signature
Avoid:
- Don't crop restaurant photos to squares or hide them behind heavy tints — wide and full-color
- Don't use Grubhub Red for deals/savings — that is Orange's job; don't use Orange for the primary CTA
- Don't render ratings in gold/yellow stars — Grubhub uses green
- Don't spread Perks Gold across the chrome — it appears only on Perks badges and the membership pill
- Don't use the tracking blue anywhere except the order-tracking experience
- Don't use sharp-cornered rectangular buttons — primary CTAs are pills
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary (Interactive)
- Grubhub Red (
#F63440): Primary interactive color — primary buttons, brand logomark, active tab, active filter chip, saved-heart fill, stepper controls. - Grubhub Red Pressed (
#D2202B): Pressed/active state on red buttons and controls. - Grubhub Orange (
#FF8000): Deals, savings, "$0 delivery fee", value messaging, secondary CTA ("Get Grubhub+"). - Grubhub Orange Pressed (
#E06E00): Pressed state on orange buttons.
Membership & Status
- Perks Gold (
#FFB81C): Grubhub+ Perks badge fill, membership pill border/text — membership signal only. - Track Blue (
#00A0DF): Live order-tracking accent — progress bar, ETA dot, "on the way" status; used only on the tracking surface. - Rating Green (
#18A957): Star icon and rating chip on restaurant cards (Grubhub renders ratings in green, not gold).
Canvas & Surfaces (Light Mode)
- Canvas White (
#FFFFFF): Primary light canvas. - Surface Gray (
#F6F6F4): Search field, chip backgrounds, subtle cards, grouped sections. - Surface Pressed (
#ECECEA): Pressed rows and tappable cells. - Divider (
#E6E6E6): Hairline dividers between menu rows and sections.
Canvas & Surfaces (Dark Mode)
- Dark Canvas (
#121212): Primary dark canvas — warm near-black, NOT pure black. - Dark Surface 1 (
#1C1C1E): Cards, search field, elevated surfaces. - Dark Surface 2 (
#262626): Chips, steppers, pressed cells. - Dark Divider (
#2C2C2E): Hairline dividers.
Text
- Text Primary Light (
#1B1B1B): Primary text — near-black, restaurant names, prices. - Text Secondary Light (
#707070): Metadata, cuisine, delivery time, fee. - Text Tertiary Light (
#A0A0A0): Disabled, low-emphasis captions. - Text Primary Dark (
#F2F2F2): Primary text on dark. - Text Secondary Dark (
#A0A0A0): Secondary text on dark (works on both modes).
Semantic
- Error Red (
#F0454F): Form errors, failed payment, removal confirmation (distinct from brand red). - Success Green (
#18A957): Order placed, item added confirmation, rating chip. - Warning Amber (
#FF8000): "Restaurant closes soon", surge messaging (shares the brand orange). - Info Blue (
#00A0DF): Order-tracking informational status.
Color Usage Table
| Role | Light Mode | Dark Mode |
|---|---|---|
| Canvas | #FFFFFF | #121212 |
| Surface 1 | #F6F6F4 | #1C1C1E |
| Surface 2 | #ECECEA | #262626 |
| Divider | #E6E6E6 | #2C2C2E |
| Text Primary | #1B1B1B | #F2F2F2 |
| Text Secondary | #707070 | #A0A0A0 |
| Primary Action | #F63440 | #F63440 |
| Deal / Savings | #FF8000 | #FF8000 |
| Membership (Perks) | #FFB81C | #FFB81C |
| Tracking Accent | #00A0DF | #00A0DF |
| Rating | #18A957 | #18A957 |
| Error | #F0454F | #F0454F |
Type scaleRead the full spec
Font Family
- Brand Face:
Graphik(by Commercial Type) — the workhorse grotesque in Grubhub's brand system. - Recommended Substitute (unlicensed clone):
Inter(by Rasmus Andersson, SIL OFL) — geometric humanist grotesque with near-identical proportions and excellent small-size hinting. - System Fallback:
-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif - Numerals: Tabular figures for prices, fees, ETAs and quantity steppers (
font-variant-numeric: tabular-nums).
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Screen Title | Inter | 32pt | 900 | 1.15 | -0.5pt | "Delivery", large nav title |
| Restaurant Hero | Inter | 26pt | 800 | 1.2 | -0.3pt | Restaurant detail header name |
| Section Header | Inter | 22pt | 700 | 1.25 | -0.2pt | "Order again", "Most popular" |
| Card / Subsection | Inter | 18pt | 700 | 1.3 | -0.1pt | Menu category, card title |
| Restaurant Name | Inter | 16pt | 700 | 1.3 | 0pt | Name on restaurant card |
| Body | Inter | 15pt | 500 | 1.45 | 0pt | Menu item description, paragraphs |
| Price / Number | Inter | 15pt | 700 | 1.3 | 0pt | Prices, fees, totals — tabular |
| Meta | Inter | 14pt | 400 | 1.4 | 0pt | Cuisine · time · fee, muted gray |
| Deal Line | Inter | 13pt | 600 | 1.35 | 0pt | "$0 delivery fee", orange |
| Overline / Badge | Inter | 12pt | 700 | 1.0 | 0.4pt | "GRUBHUB+ PERKS", uppercase |
| Button | Inter | 16pt | 700 | 1.0 | 0pt | Primary/secondary button label |
| Tab Label | Inter | 10pt | 600 | 1.0 | 0.1pt | Bottom tab labels |
| Caption | Inter | 12pt | 500 | 1.35 | 0pt | Timestamps, footnotes |
Principles
- Numbers carry weight: every price, fee, ETA, rating and quantity is bold (700+) and tabular — the decision is economic, so the figures lead.
- Bold product hierarchy, not editorial: titles are heavy (800–900); this is a commerce app, not a magazine — contrast is created by weight and color, not by serif elegance.
- Color encodes meaning in type: black = neutral, orange = savings/deal, green = rating, blue = tracking status, red = primary action.
- Muted metadata: cuisine, time and fee lines stay in
#707070so the photo and name dominate the card. - Dynamic Type first-class: screen titles, restaurant names, body and prices scale; badges, tab labels and chip text stay fixed.
Components and layoutRead the full spec
Buttons
Primary Button ("Add to bag" / "Checkout" / "Place order")
- Shape: Fully rounded pill,
999pxcorner radius - Background:
#F63440(Grubhub Red) / same on dark - Text:
#FFFFFF, Inter 16pt weight 700 - Height: 52pt; padding 14pt vertical, 28pt horizontal; often full-width with 16pt side insets
- Pressed: background
#D2202B+ scale 0.98 - Disabled:
#F6342Fat 35% opacity, text 60%
Secondary Button ("Get Grubhub+" / value CTA)
- Background:
#FF8000(Grubhub Orange) - Text:
#1A1206(near-black for contrast on orange), Inter 15pt weight 700 - Shape: pill
999px; padding 13pt × 24pt - Pressed:
#E06E00
Outline / Tertiary Button ("Schedule" / "Filters")
- Background: transparent
- Border: 1.5pt
#E6E6E6light /#2C2C2Edark - Text:
#1B1B1Blight /#F2F2F2dark, Inter 14pt weight 600 - Shape: pill
999px; padding 11pt × 20pt - Pressed: background
#F6F6F4
Text Button ("View full menu" / inline link)
- Text:
#F63440(Grubhub Red), Inter 14pt weight 700 - No background, no underline
- Pressed: 60% opacity
Button State Reference
| State | Primary (Red) | Secondary (Orange) | Outline | Text |
|---|---|---|---|---|
| Default | #F63440 / white | #FF8000 / #1A1206 | transparent / #1B1B1B | #F63440 |
| Pressed | #D2202B + scale 0.98 | #E06E00 | bg #F6F6F4 | 60% opacity |
| Disabled | #F63440 @ 35% / text 60% | #FF8000 @ 35% | border @ 40% | 40% opacity |
| Loading | spinner (white) on #F63440 | spinner on #FF8000 | spinner #F63440 | — |
| Focus (a11y) | 2pt #F63440 ring, 2pt offset | 2pt #FF8000 ring | 2pt #F63440 ring | underline on focus |
Core Atoms
Restaurant Card
- Photo: full-width within card, aspect ratio 16:9, corner radius 14pt
- Perks badge: top-left,
#FFB81Cfill,#1A1206text, 6pt radius, 12pt uppercase 700 (or an orange "20% OFF" deal badge) - Saved heart: top-right, 30pt circle,
rgba(0,0,0,0.45)scrim, white outline icon; filled#F63440when saved - Row 1: restaurant name (16pt 700, left) + rating chip (right): green star + number
#18A957 - Row 2: meta line — "Cuisine · 20–30 min · $0 delivery fee" in
#70707014pt 400 - Row 3 (optional): orange deal line "Free delivery with Grubhub+" 13pt 700
#FF8000 - Card vertical gap: 22pt; no card border or shadow in light mode (photo + whitespace separate)
Cuisine Chip (filter rail)
- Height: 34pt; padding 0 14pt; corner radius
999px - Inactive: background
#F6F6F4/#262626dark, text#707070, 0.5pt divider border - Active: background
#F63440, text#FFFFFF, border#F63440 - Horizontal scroll, 10pt gap, no scrollbar
Quantity Stepper (− n +)
- Container: pill
999px,#F6F6F4/#262626dark, 0.5pt divider border, padding 6pt × 8pt - Controls: 30pt circle,
#F63440fill, white−/+glyph 18pt 700 - Count: 15pt weight 700, tabular, min-width 18pt centered
- Disabled
−at quantity 1: control fades to 35% opacity
Rating Chip
- Green star (
#18A957) 12pt + number 13pt weight 600#1B1B1B - No background; sits at the right edge of the card name row
Perks / Membership Pill
- Inline pill
999px, backgroundrgba(255,184,28,0.14), 1pt border#FFB81C, text#FFB81C12pt 800 - Leading ★ glyph; e.g. "★ GRUBHUB+ · $0 delivery"
Navigation
Top Address Bar
- Height: ~44pt + safe area
- Leading: "Deliver to" label 11pt 600
#707070over address value 15pt 700#1B1B1Bwith a 12pt chevron-down - Trailing: bag button — 34pt circle
#262626/surface, bag icon, red count badge top-right (16pt,#F63440, white 9pt 800)
Search Field
- Height: 44pt; corner radius 12pt; background
#F6F6F4/#1C1C1Edark - Leading magnifier 16pt
#707070; placeholder "Search Grubhub" 14pt#707070 - Focus: 1.5pt
#F63440border
Bottom Tab Bar
- Height: 52pt + safe area
- Background:
#FFFFFF/rgba(18,18,18,0.94)blurred dark, 0.5pt top divider - Tabs (5): Delivery, Search, Orders, Saved, Account
- Icon size: 22pt; active color
#F63440(icon fills); inactive#888 - Labels: Inter 10pt weight 600, always shown
Restaurant Detail Top Nav
- Transparent over the hero photo on scroll-to-top; collapses to a solid bar with the restaurant name (compact) once scrolled past the hero
- Leading back chevron; trailing search + share icons in white circular scrims while transparent
Input Fields
Text Field (address, promo code, instructions)
- Height: 48pt; corner radius 10pt; background
#F6F6F4/#1C1C1Edark - Border: none default; focus 1.5pt
#F63440 - Label: floating 12pt
#707070; input 16pt#1B1B1B - Error: 1.5pt
#F0454Fborder + helper text#F0454F12pt
Search-with-results (cuisine / dish search)
- Same field; results below as rows: leading thumbnail 44pt rounded 8pt, title 15pt 600, meta 13pt
#707070 - Pressed row:
#ECECEA
Distinctive Components
Live Order Tracking Banner (persistent)
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Photo aspect tightens slightly; chips scroll; single column |
| iPhone 13/14/15 | 390pt | Standard layout |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated above address bar |
| iPhone 15/16 Pro Max | 430pt | Larger photos; deal carousel shows ~1.3 cards |
| iPad (portrait) | 768pt | 2-column restaurant grid; address bar + search in a wider header |
| iPad (landscape) | 1024pt+ | 3-column grid; map + tracking timeline shown side-by-side |
Dynamic Type
- Screen title, restaurant name, body, prices: full scale
- Perks badge, deal line, tab labels, chip text, ETA dot label: FIXED (layout-sensitive)
- Menu item descriptions: scale to XL
Orientation
- iPhone: portrait-locked on most flows; tracking map may rotate
- iPad: full rotation; tracking screen shows map + timeline in a split layout in landscape
Touch Targets
- Restaurant card: full-card tap, ≥ 88pt tall
- Stepper controls: 30pt glyph in 44pt hit area
- Cuisine chip: 34pt tall, ≥ 44pt hit
- Tab bar icon: 22pt glyph, 44pt hit
- Bag button: 34pt circle, 44pt hit
- Primary buttons: 52pt tall
Safe Area Handling
- Top: address bar respects safe area and Dynamic Island
- Bottom: tab bar and sticky checkout pill respect the home indicator
- Tracking map: extends under the status bar with a gradient scrim for legibility
- Sides: 16pt content inset throughout
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-grubhub {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #121212;
--heading-color: #121212;
--link-color: #af5800;
--link-hover-color: #7c3e00;
--border-color: #d4d4d4;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(18,18,18,0.06);
--card-hover-shadow: 0 6px 18px rgba(18,18,18,0.12);
--header-bg: #121212;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #656565;
--button-bg: #ff8000;
--button-text-color: #000000;
--button-hover-bg: #cc6600;
--button-border: none;
--button-border-radius: 12px;
--button-secondary-bg: #f1f1f1;
--button-secondary-text-color: #121212;
--button-secondary-hover-bg: #e3e3e3;
--button-secondary-border: 1px solid #d4d4d4;
--prompt-bg: #f3f3f3;
--prompt-text-color: #121212;
--base-font: var(--font-helvetica);
--heading-font: var(--font-inter);
--card-border-radius: 12px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- iheartradio 83.8%
- asana 80.3%
- vimeo 79.9%
- airbnb 79.2%
- apple fitness 77.6%
Where this came from
- Source document
ios/design-md/food/grubhub/DESIGN.md· 27.7 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.