Five Guys Design System

Five Guys' marketing site makes no typographic apology. The hero headline — the brand's punchy three-word identity claim — renders at 108px in Public Sans weight 900, uppercase, with -4.32px letter-spacing that smashes the characters together until the negative space nearly closes. At that size on a pure-black canvas, with a burger photograph bleeding in from the right, the words look less like a web page and more like the side of a building. Where McDonald's has retreated to 36px charcoal-on-white editorial restraint and Shake Shack holds its Jost at a measured 60px, Five Guys goes in the opposite direction and turns its typography into signage.

The crimson red (#d21033) is the system's only non-neutral color, and it is everywhere: CTA button fills, section heading text, card borders, the checkered tile dividers in the menu grid, and the nav background on hover. Unlike Shake Shack's green (held in reserve for two positions) or Cloudflare's orange (concentrated on the hero canvas), Five Guys' red is dispersed — used as text, fill, and border simultaneously. The effect is a chromatic environment rather than a single accent point. The page feels red without necessarily being red-background, because the hue shows up in so many roles at once.

Feed this file to an AI coding tool and it will reproduce the specific Five Guys moves: 108px / 900 uppercase with tight negative tracking for display, crimson as a structural color rather than a scarce accent, pure-black hero then white body mid-section, and the 10px / 100px binary radius system. The system has no moving parts — it is Public Sans, crimson, and a photograph of a cheeseburger, and it is more aggressive than any other brand in this category.