What is Grubhub's primary brand color on its marketing site?

The captured marketing surface uses near-black #1a1a19 as the structural primary — the CTA button background, the border on form inputs, and the dominant text color. This is not Grubhub's traditional red-orange brand color, which appears in the logo but was not captured as a structural CSS token with significant usage frequency. The warm cream surface #f8f4f1 and the warm mid-gray #575655 appear as secondary structural tones. If you need the historical Grubhub brand red-orange for branded component work, reference the company's public brand guidelines; it is not extractable from the marketing page's current token system.

What typeface does Grubhub use, and what are the weight variants?

Grubhub runs Bagoss as its proprietary typeface across all surfaces. The font is declared in four distinct named variants: 'Bagoss Standard' (the core family, used at weights 400 and 700), 'bagoss-medium' (weight 500 interface copy and subheadings), 'bagoss-bold' (weight 700 for display headings and form labels), and 'bagoss-regular' (weight 400 label and form contexts). Display headings use Bagoss Bold at 42px; body copy uses Bagoss Standard at 14px / 400; interface buttons use Bagoss Medium at 16px / 500. The fallback stack is 'Fira Sans', Helvetica, Arial — Fira Sans is the closest openly-licensed substitute at the interface sizes.

Why does Grubhub use such large corner radii on its cards?

Grubhub's radius scale tops out at 48px (effectively a half-pill on a 96px-tall card) and centers on 24px as the default card rounding. The 24px value appears on 10 of the extracted elements, making it the dominant rounding treatment across the page. This is aggressively generous compared to most food-delivery peers — DoorDash and delivery.com use 8–12px card rounding while Grubhub commits to soft, almost bubble-shaped cards. The 4px value appears on the text input only, and the 28px value on category chips. The system skips the 8px and 16px middle tiers entirely, making it a high-contrast radius vocabulary: either tight (4px inputs) or very soft (24–48px cards and chips).

How is the Grubhub footer different from the main page surface?

The footer is a dense dark band that contrasts sharply with the white and cream content above it. Body text in the footer appears in #ffffff on a dark background surface, with a multi-column link grid covering restaurant categories, cuisines, and city markets. The footer's body-text extraction shows #ffffff at 14px / 400 / Bagoss Standard — the only large white-on-dark context in the marketing system. The restaurant and city link density is high, serving as a programmatic SEO surface for long-tail search terms. The footer structure mirrors Uber Eats' city/country grid approach but in a darker, denser format.

What does the Grubhub feature grid look like?

Below the hero photography band, Grubhub presents a 2x2 card grid of value propositions: 'Top Offers, Lowest Fees', 'Dine with Grubhub', 'Easy Ordering Control', and 'Fast, Reliable Service'. Each card is a white-background panel with a 24px rounded border, a small photograph thumbnail, an h6-level subheading in Bagoss Medium at 16px, and two to three lines of body copy in Bagoss Standard at 14px. Below the 2x2 grid, larger editorial image panels cover 'Grow Your Business' (restaurant partners) and 'Deliver with Grubhub' (courier sign-up). The feature section is structured, symmetrical, and information-dense without relying on photography for the full card fill.

Grubhub Design System

Grubhub's marketing design system: near-black pill CTAs on white-and-cream canvas, Bagoss bold 42px display, aggressively rounded 24–48px card surfaces.

About Grubhub DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source grubhub.com

Food & Delivery
Marketplaces

Grubhub's marketing page presents a deliberate tension: a brand that built its identity on red-orange energy delivers its homepage on a near-black-and-white structural palette, with food photography doing the chromatic work. The primary CTA ("See what's nearby") uses #1a1a19 — a near-black with the faintest warm undertone — as its fill color. The nav carries no structural accent. Grubhub's familiar red-orange appears in the logo mark at the top left but nowhere else in the captured CSS token system. Where DoorDash runs a saturated red hero and Uber Eats relies on green-tinged brand touches in its app, Grubhub's marketing surface reads as a neutral, photography-led canvas with a near-black ink system.

The DESIGN.md file packages the system into 9 color tokens drawn from a near-black, white, warm-gray, and warm-cream palette; 13 typography tokens spanning Bagoss across four named weight variants at 12–42px; 6 radius tokens anchored on a 24px default with a 48px half-pill for interactive chips; and 16 components covering the hero search layout, the feature card grid, the restaurant promotion strip, the footer dark band, and the text input with its border-heavy form field treatment.

Feed this file to Claude or Cursor and it reproduces Grubhub's specific moves: near-black pill CTAs rather than a colored fill, generous 24–48px rounding on all card and chip surfaces, a warm-cream section separator (#f8f4f1) that functions like a subtle brand signal without being a declared accent color, and Bagoss medium as the primary interface weight with Bagoss bold reserved for headings only. The one move worth noting before borrowing: the Bagoss family is proprietary to Grubhub; Fira Sans (the fallback in the font stack) or Inter Medium provides the closest open-source substitute at the 14–16px interface sizes.

What makes it distinct

Near-black ink over brand colorthe captured CTA and heading system uses #1a1a19, not Grubhub's familiar red-orange; the brand color is present in the logo but absent from the page's structural token system
Bagoss across four named weightsstandard, regular, medium, and bold are distinct font-file variants, not just numeric weight values; the system has more typographic granularity than most food-delivery peers
24–48px aggressively rounded cardscard surfaces and interactive chips use 24px and 48px rounding, giving the page a soft, approachable character that contrasts with the stark dark CTAs
Warm cream surfacethe below-fold content area uses #f8f4f1, a warm off-white that signals warmth without photography
Address-search as hero primarylike Uber Eats, Grubhub gates restaurant browsing behind a location typeahead, making the search input the above-fold primary interaction

Live at grubhub.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

grubhub.com

Explore Grubhub

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Grubhub design system FAQ

Common questions about Grubhub's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Grubhub — official site

Grubhub's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.