Five Guys Design System

Overview

Five Guys' marketing site stakes out the most aggressive typographic position in the US quick-service burger category. Black-canvas weight-900 Americana. The hero headline — the brand's punchy three-word identity claim — runs at 108px in Public Sans Black with -4.32px letter-spacing, the sort of display scale more common on a stadium banner than a fast-food website. Where McDonald's editorial system tops out at 36px/700 and Shake Shack holds its hero at 60px/700, Five Guys renders its opening sentence at three times that scale and smashes the letters together with negative tracking until the counterforms nearly close. No other brand in this review stack — not Shake Shack, not Chipotle, not McDonald's — matches this level of typographic intensity.

The crimson red ({colors.primary} — #d21033) is used in every possible role at once: CTA fill, section heading text, card border, nav link background highlight. With 97 total occurrences (24 text, 24 background, 49 border), the red is not an accent — it is a structural color. The 49 border occurrences alone exceed the total chromatic presence of McDonald's golden yellow on the entire McDonald's site. The red creates an environmental saturation that reads as a chromatic field rather than a highlight, which is the brand's physical identity (the red-and-white checkered bag, tray liner, and box) translated into pixels.

The black hero canvas ({colors.ink} — #000000) flips to white below the fold, creating a hard surface jump that mimics the brand's diner aesthetic: a dramatic opening (chalkboard-dark) followed by a display-case interior (white menu grid with red tile outlines). The surface shift is abrupt by design.

Key Characteristics:

• Hero h1 at 108px / weight 900 / uppercase / -4.32px tracking — the largest and most typographically dense display in the QSR comparison set.
• Crimson {colors.primary} (#d21033) in three simultaneous roles: fill (24), text (24), border (49) — structural rather than held-in-reserve.
• Pure black {colors.ink} (#000000) hero canvas flipping to pure white {colors.canvas} (#ffffff) below the fold — no mid-tone transition surface.
• Public Sans exclusively — weight 900 for all uppercase headings, weight 400 for all body paragraphs, weight 700 for buttons and small labels; no second typeface.
• Binary radius: 10px standard cards, 100px pill CTA — nothing in between.
• WordPress CMS under the hood — the CSS variable names follow the --wp--preset-- naming convention, visible in the extraction.
• 97 red color occurrences versus 5 colors total in the extraction's active-use palette — the most chromatic concentration of any QSR brand captured.

Colors

Brand

• Primary Red ({colors.primary} — #d21033): frequency 97 total — 24 as text, 24 as background, 49 as border. Wired as --wp--preset--color--vivid-red. The structural brand voltage — appears as section heading text ("THE ULTIMATE CROWD PLEASER"), CTA fill ("Order Now" pill), menu card outlines, and checkered grid dividers simultaneously. The 49 border occurrences are the system's most distinctive detail: the red draws the structural grid of the menu, not just the conversion moments.

Text

• Ink ({colors.ink} — #000000): frequency 281 as text, 10 as background (hero section, footer), 271 as border. Wired as --wp--preset--color--black. The dominant structural color — the hero canvas, footer, and the majority of border outlines (on non-red card sides) all use pure black.

Surface

• Canvas ({colors.canvas} — #ffffff): frequency 91 as text (white text on dark surfaces), 24 as background (mid-page and card fills), 73 as border. Wired as --wp--preset--color--white. The body canvas below the hero fold; also the fill for menu category cards and the nav surface.

Accent

• Accent Blue ({colors.accent-blue} — #6aaae4): frequency 1 as background. A single mid-blue tile visible in the "From Grill to Glory" promotional section. Classified as layer:"brand" in the extraction — this appears to be a social sharing or app download badge element. It is the only non-red chromatic accent on the page and appears once.

Muted Tones

• Ink Muted ({colors.ink-muted} — #929292): frequency 1 as border. A single medium gray divider — appears in a thin rule between page sections.
• Surface-1 ({colors.surface-1} — #696969): frequency 1 as background. A single mid-gray promotional tile background.

Hairline

• Hairline ({colors.hairline} — #e6e4e4): frequency 1 as border. A very light warm gray — single hairline divider; carries a faint warm undertone (chroma 0.002) that reads as off-white rather than neutral gray.

Typography

Font Family

The system runs Public Sans exclusively — a free Google Font originally commissioned for the US government's plainlanguage.gov initiative, derived from Libre Franklin. The full stack is "Public Sans", sans-serif. There is no second typeface, no monospace accent, no condensed variant loaded separately — the condensed effect at display sizes is achieved through negative letter-spacing on the same face. Weight 900 (Black) is the dominant weight for all uppercase headings; weight 400 (Regular) covers body copy; weight 700 (Bold) handles button labels and small navigational emphasis.

Hierarchy

Principles

Every heading tier uses weight 900 with uppercase transformation and negative letter-spacing that scales with font size. The tightest tracked size (108px / -4.32px) achieves the visual effect of a condensed display face without loading one. Body copy at weight 400 / no tracking provides the extreme contrast — the visual jump from a 108px/900 headline to a 22px/400 paragraph is larger than any other QSR system in this comparison set. There is no intermediate 500 or 600 weight anywhere on the captured page.

Note on Font Substitutes

Public Sans is available on Google Fonts with no license. For environments where weight 900 might not render (older Android WebView, some email clients), weight 800 at 90% of the display size is the closest fallback. For a condensed-display alternative that achieves a similar impact without font-size scaling, Barlow Condensed Black or Bebas Neue (both free) can substitute at heading tiers, though they would require removing the letter-spacing values.

Layout

Spacing System

• Base unit: 20px — appears 23 times in the extracted spacing data, more than any other single value.
• Tokens: {spacing.xs} 8px · {spacing.sm} 16px · {spacing.md} 20px · {spacing.lg} 27px · {spacing.xl} 36px · {spacing.2xl} 46px · {spacing.3xl} 60px · {spacing.4xl} 80px.
• Hero section padding: 80px top, 125px bottom — generous vertical breathing room around the typographic mass.
• Button padding: 13.986px vertical, 27px horizontal — a carefully-measured 14px vertical for 45px button height with 17px Jost equivalent.
• Nav padding: 0px vertical, 36px horizontal inside nav links.
• Card internal padding: 20px top and sides, 40px bottom (the extra bottom padding creates room for the explore CTA below the card title).

Grid & Container

• Hero: full-bleed black canvas, content centered, burger photograph right-aligned at full bleed.
• Section 1 (below fold): white canvas with a centered crimson h2 and a split layout (text left, styled food photography right, at roughly 40/60 ratio).
• Menu grid: a 3×2 card grid with crimson-bordered tiles, each card containing a food photograph, uppercase heading, and small explore pill. The grid has the visual logic of the brand's physical checkered bag pattern.
• "From Grill to Glory" section: full-bleed dark photographic band with white overlay text and the Five Guys crest badge centered.
• Footer: full-bleed black canvas, centered single-column content.

Rhythm

The page alternates between dark cinematic (hero, "From Grill to Glory") and light commercial (white body, menu grid) bands without a transitional gray surface. The rhythm is binary — black or white, never gray — which matches the brand's physical black-and-white checkered aesthetic (the red fills the grid-line role, not a surface role).

Elevation

The system has a minimal shadow tier. WordPress custom properties declare shadow presets (--wp--preset--shadow--natural, --wp--preset--shadow--crisp, etc.) but the captured page uses primarily border-based elevation — the crimson 1px card borders and the pure-black borders on white cards do the work that shadows would do in other systems.

• Flat (no shadow): hero section, footer, nav — all major layout bands.
• Border-elevated: menu cards use the crimson border as their single depth signal; no box-shadow on the card surface.
• Declared but minimal: the WordPress shadow presets exist as CSS variables but appear to be unused on the captured marketing surface.

Shapes

The radius scale is binary:

• {rounded.none} 0px — hero section, footer, nav bar. The large structural surfaces are flat-cornered.
• {rounded.sm} 10px — the standard card and form input radius, appearing 23 times at ~9.99px and 11 times at exactly 10px. Used on menu cards, the hero food photograph corners, and the crest card.
• {rounded.lg} 20px — a single occurrence on one secondary card variant.
• {rounded.pill} 100px — the primary CTA button ("Order Now") and the smaller "Explore" pill CTAs within menu cards. A generous pill that renders as fully circular at standard button heights.
• {rounded.full} 50% — single occurrence for an avatar or badge circle.

There is no middle tier (12px, 16px, 24px). The system is binary: either the tight 10px on cards or the generous 100px on CTAs. The jump from card (10px) to button (100px) produces the visual contrast between the menu's structure (boxy, contained) and its calls to action (round, tactile).

Components

button-primary — Crimson {colors.primary} fill, white text, {rounded.pill} 100px radius, 13.986x27px padding, 45px height. "Order Now" is the canonical label. The asymmetric padding in the extraction (13.986px 27px 13.986px 24px on the hero button with an arrow icon) suggests a right-offset for the arrow; the symmetric 27px version appears on standard CTAs.

button-secondary — Transparent fill, crimson text, crimson border, {rounded.pill} 100px radius. The outlined pill variant used for "Order Now" in secondary contexts below the fold.

top-nav — White {colors.canvas} surface, 60px height, 0x36px padding. Carries the Five Guys logo top-left, uppercase Public Sans 900 nav links centered, and a crimson pill CTA ("Order Now") at right. The nav background itself is white; the nav link backgrounds are crimson on hover.

nav-link — Crimson fill background on hover, crimson text in {typography.nav-link} (16px / 900 / uppercase), 0px padding base. The dual crimson (text color matches fill background) means the active/hover state is a crimson block — the text bleeds into the fill at lower saturation.

hero-section — Full-bleed black {colors.ink} canvas, 80px top / 125px bottom padding. Contains the white display headline, white body paragraph, and crimson "Order Now" pill CTA.

hero-heading — White text at {typography.display-xl} (108px / 900 / uppercase / -4.32px tracking). The single most typographically aggressive component in the QSR design set captured here.

section-heading — Crimson {colors.primary} text at {typography.heading-md} (34px / 900 / uppercase / -2.052px tracking). Used for "THE ULTIMATE CROWD PLEASER," "THE FOOD," and other section titles on the white canvas below the hero.

body-paragraph — White text on dark sections, {typography.body-lg} (22px / 400) — the hero paragraph that describes the brand's "real ingredients" proposition.

body-paragraph-light — Ink text on white sections, {typography.body-md} (16px / 400). Standard body paragraphs below the fold.

card — White {colors.canvas} fill, black text, {rounded.sm} 10px radius, 20x20x40px padding (top, side, bottom), 1px crimson {colors.primary} border. The menu grid tile — contains a food photograph, uppercase heading, and explore pill. The red border carries the brand's checkered-pattern visual language into the digital grid.

crest-card — Crimson {colors.primary} fill, white text, {rounded.sm} 10px radius, 46px padding. The Five Guys crest badge card used in the "From Grill to Glory" section — the single large-format crimson fill surface below the hero.

explore-pill — Transparent fill, crimson text, crimson border, {rounded.pill} 100px radius. The small "Explore" CTA within each menu card — a smaller version of the primary button style used as a secondary action.

text-input — White canvas fill, black text, {rounded.sm} 10px radius, 16px padding, black border. Generic form field; appears in the location finder and any search flow.

footer — Black {colors.ink} canvas, white text, 16px body size, 60x36px padding. Single-column centered content with the Five Guys wordmark and navigation links.

Do's and Don'ts

Do use {colors.primary} (#d21033) as a structural color — fill it into card borders, not just CTA buttons. The system's signature is the red grid divider, which references the checkered bag aesthetic. Reducing the red to accent-only CTA use would remove the most distinctive design signal in the system.

Do apply negative letter-spacing proportionally to the font size at display tiers. The tracking formula is roughly -0.04em: -4.32px at 108px, -3.6px at 90px, -2.376px at 59px, -2.052px at 34px. Keeping this proportional relationship is what gives all heading tiers a consistent compressed feel without loading a separate condensed family.

Do maintain the black/white surface binary. The hero is on black, the body is on white, and the footer is back on black. There is no medium-gray surface band between them. The hard jump is the layout's structural statement.

Do use Public Sans 900 uppercase for every heading tier. The system's identity depends on the consistent weight across heading levels — if h1 is at 900 and h2 drops to 700, the compressed-signage aesthetic collapses into a conventional typographic hierarchy.

Don't use the crimson as a text color at small sizes (below 16px). At body paragraph scale, crimson on white falls below AA contrast for running text. The system uses crimson text only for headings (34px+ uppercase) where the large letterforms compensate for the contrast reduction.

Don't introduce a middle radius value (12px, 16px, 24px). The system is binary — {rounded.sm} 10px for cards and {rounded.pill} 100px for CTAs. Adding an intermediate radius breaks the visual distinction between structural chrome (boxy) and conversion surfaces (pill), which is the layout's primary depth signal.

Don't reduce the hero display below 90px. At smaller sizes, the weight-900 uppercase with tight negative tracking reads as merely bold rather than as signage-scaled. The typographic identity requires scale — the letters need to be large enough that the compressed tracking reads as a deliberate choice rather than an oversight.

Don't mix the red across both fill and text roles in the same component. The system uses red-fill-white-text for CTAs and red-text-white-fill for section headings — crossing these (e.g., a red-fill button with red text) would disappear into a monochrome block.

Known Gaps

• Hover and focus states: the extraction captures only resting states; the crimson nav link's active/hover behavior (crimson fill block) is inferred from the navLink component data but not directly confirmed from a hover capture.
• Menu category detail pages: the menu grid links to individual item pages (Burgers, Fries, Hot Dogs, Shakes, etc.) whose component layouts — item photography, customization options, allergen tables — are not represented in this top-level extraction.
• Ordering flow: the online ordering interface, cart, checkout, and delivery-partner handoff carry their own component set that is outside the marketing page scope.
• Mobile layout: the desktop-first marketing page captures assume a viewport around 960–1280px; the mobile collapse of the 108px hero headline (which must scale dramatically), the menu card grid (likely 1-up on mobile), and the nav (likely hamburger-collapsed) are not documented.
• WordPress block theme details: the site runs on WordPress with a block theme; the CSS variable stack includes dozens of --wp--preset-- values for color and typography that are declared but unused on the captured marketing surface.
• "From Grill to Glory" section: this promotional content band with the Five Guys crest and store-finder CTA appears in the screenshot but its detailed layout, the crest logo markup, and the location-search component are not fully captured in the extraction.
• App store assets: the Five Guys mobile app carries its own design language, and the extraction captures only the web marketing surface.