Garmin Design System

Garmin's home page does what very few consumer-electronics brands do: it skips brand voltage entirely. The captured surface has six color tokens, five of them grayscale (matte ink, soft ink, off-white, hairline gray, a single near-white) and one deep brick red used twice on a status flag. There is no Garmin Blue, no Garmin Orange, no chromatic accent on the marketing chrome anywhere above the fold. The page renders as monochrome plus product photography — the hero shows a runner mid-stride wearing a Forerunner 170, with a 40px Oswald headline ("FORERUNNER 70 & 170") in white over the photo and a thin uppercase eyebrow band above it. The brand carries itself on imagery and grayscale typography, the way an Outside Magazine spread does.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 6 color tokens — pure white, pure black, a soft ink, a hairline gray, a deep brick-red status flag, and an off-white surface tint — covering the entire captured page; 13 typography tokens running on Oswald for every display tier and Roboto for every body and label tier, with weights 400, 500, and a single 700 emphasis; a deliberately tiny radius scale of just 2px and 100%; and 14 components covering the product-card grid, the dense secondary-product strip, the uppercase nav labels, the email-capture input, and the eyebrow status band that runs above the hero.

Feed this file to Claude or Cursor and it reproduces Garmin's specific moves: monochrome plus product photography rather than a chromatic brand voltage, Oswald at weight 400 as the display voice (not the heavy condensed default), Roboto body at 14.4px with the full CJK fallback stack, and the brutal 2px-or-circle radius binary. The one move worth borrowing if your product is hardware that photographs well: the willingness to skip brand color on the marketing surface and trust the imagery to carry chromatic interest. Most software brands cannot do this — the screen has no product photo, so the brand color has to do the heavy lifting. Garmin's hardware does the lifting; the chrome stays out of the way.