Under Armour Design System

Under Armour's marketing site is achromatic by design — and not as a restraint, but as a strategy. The nav bar, primary CTA buttons, icon set, product-card borders, and tooltip backgrounds all render in the same near-black (#1d1d1d), while the page floor and card surfaces are pure white. There is no brand-voltage red, no accent blue, no highlight color applied anywhere in the chrome. The photography — athlete shots in neon training gear, colorway flats of shoes, outdoor action sequences — does every chromatic job the design system refuses to do. Where Nike draws a full-bleed gradient and Adidas adds a yellow accent strip, Under Armour withholds.

The DESIGN.md file packages the system into a machine-readable spec for React and AI tools. Inside: 14 color tokens drawn almost entirely from an achromatic scale — near-black ink, mid-gray muted text, light-gray surface accents, pure white canvas — plus a handful of declared but rarely-rendered semantic colors (error red, amber, green) that live in form-validation states rather than brand chrome. Ten typography tokens run NeuePlakUA, a condensed grotesque Under Armour commissions for the brand; display tops at 64px weight 800 in uppercase with 2px tracking, body sits at 14–16px weight 400–600, and labels run 12px. Fifteen components cover the pill CTA, the near-black nav bar, the photography-first hero, hairline-bordered product cards, and the flat text input.

Feed this file to Claude or Cursor to reproduce Under Armour's specific moves: near-black-on-white chrome with zero chromatic interruption, NeuePlakUA condensed grotesque at athletic weights, 9999px pill buttons as the only rounded surface, and photography as the sole source of color on the page. The system is worth studying not for what it does with color but for what it refuses to do — the achromatic discipline is the brand's confidence signal, and every colorful product image reads louder against it.