Consumer Brand Design Systems
Billion-user brands. The design systems behind them.
Consumer brands need to resonate with everyone, which is much harder than designing for developers. These DESIGN.md files pull from the brands that cracked mass-market design: Nike's confident minimalism, Duolingo's playful boldness, Starbucks's warm greens. Each one a master class in accessible, memorable brand expression.
Good for
- +Consumer apps and products targeting general audiences
- +Retail, lifestyle, and brand-forward projects
- +Projects that need warmth and approachability over technical precision
3 Consumer design systems
Duolingo
A gamified, character-driven canvas built around Duo green (#58CC02) — one of the most recognized brand greens in consumer apps — with bright white surfaces, bold rounded typography, and a supporting cast of vibrant accent colors (yellow #FFC800, red #FF4B4B, blue #1CB0F6) that drive streak and XP mechanics. The system feels physically substantial: thick drop shadows on interactive elements, bold outlines on cards and buttons, and Duo the owl's presence throughout. Typography is set in Feather Bold — a custom rounded display face — that reads as fun and slightly educational, like a children's book that grew up.
Nike
A photography-first commerce system built on extreme typographic contrast — towering uppercase Futura display lockups burned into editorial campaign imagery, sitting above a dense, neutral, near-monochrome retail chrome of pill-shaped black CTAs, gray search and tag pills, and tight 8px-grid product cards. The brand's voice is athletic, kinetic, and absolute: pure black, pure white, a single soft surface gray, and a deliberately small set of semantic accents (sale red, success green, restrained category tints) — every chromatic moment is reserved for editorial photography or pricing signal, never decorative chrome.
Starbucks
Starbucks' design system is a **warm, confident retail flagship** wearing the green of their storefront apron across every surface. The canvas alternates between a neutral-warm cream (`#f2f0eb`) and a ceramic off-white (`#edebe9`) — colors that reference actual store materials: t…