Hyundai USA Design System

Hyundai's USA site is one of the strictest grayscale systems in the automotive category. The hero is a full-bleed video plate of a Palisade Hybrid driving toward the camera at golden hour, headline set in white Hyundai Sans Head at 54px / weight 500 ("Make every day feel epic. The first-ever PALISADE Hybrid."), and a floating white inset card asks for a ZIP code before any inventory will surface. Above the photography, a near-black masthead carries the wordmark and a five-item product nav. Below the fold, the page returns to pure white canvas with charcoal ink — and the only color that breaks the grayscale anywhere on the chrome is deep navy at the primary CTA fill.

Where Lexus stages its luxury chrome on dark backgrounds and Ferrari hard-cuts to pure black, Hyundai sits in the editorial-magazine half of the automotive category: white floor, square text columns, photography doing the chromatic labor. The DESIGN.md file packages this into a machine-readable spec for React tooling. Inside: 20 color tokens (with deep navy as the only true brand voltage), 13 typography tokens running the two-family proprietary Hyundai Sans set, 4 corner-radius values centered on 2px square edges and 50% circles, an 8 spacing scale anchored on a 4px module, and 16 component definitions covering the navy primary button, the white ZIP-card, the dark masthead, and the cyan conversational pill.

Feed this file to Claude or Cursor and the AI reproduces Hyundai's specific moves: navy CTA only, square-edged corners on buttons, photography as the chromatic source, and the two-family proprietary type stack. The one move worth borrowing only if you're in a category where photography genuinely carries the story is the willingness to let the only color be the brand voltage. For most SaaS teams, the same restraint reads as undercooked; for a vehicle marketer where the car is the hero, it forces the chrome out of the way.