Microsoft Design System

Microsoft.com's marketing home does something almost no other consumer-tech giant attempts: it commits entirely to the 4-up tile. The above-fold is a single dark hero block (a cinematic Xbox Game Pass Ultimate photograph filling the right two-thirds, the cobalt "Join now" CTA tucked at the lower-left) — and below it, every single band on the page is a 4-column row of Fluent product cards. Four tiles for the consumer-product row (Edge / Bing Wallpaper / OneDrive / Surface), four for the "For business" rail (Microsoft 365 Copilot / Visual Studio 2026 / Join the era of AI / Windows 365 Cloud PC), four for the bottom enterprise rail. Where Apple lays a single hero device per product page and Google constrains itself to three cards, Microsoft trusts the 4-column tile grid to do the entire navigational job — the page is a product catalog rendered as a wall of small windows.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 8 color tokens drawn from the inherited Microsoft Blue brand color (`{colors.brand-blue}` — wired as `--sc-card-link-color`), pure ink black, three gray tones tracking the Fluent ramp (Fluent Gray 130 for body text, Fluent Gray 90 for nav links, Fluent Gray 60 for secondary), pure canvas white, and a single light-gray surface for the "For business" band background. Eleven typography tokens cover Segoe UI from the 11px footer link up to the 37px hero h1 — every tier at weight 400 or 600 with normal letter-spacing, no negative tracking anywhere on the page. Radius is the tightest in the directory at 2px (11 of 12 occurrences) plus a single 50% icon-circle mask. Fourteen components cover the dark hero, the 4-up product tile, the photo-top + body + CTA pattern, the soft-gray "For business" rail, the four-column footer category grid.

Feed this file to Claude or Cursor and it will reproduce Microsoft's specific moves: dark cinematic hero with a tucked-corner cobalt CTA, 4-up Fluent product tile grid as the entire page rhythm, Segoe UI across every tier with no display family, 2px Fluent card radius, photographic top on every product tile. The tokens resolve cleanly without invention. The single move worth borrowing only if you have a deep product catalog is the all-4-up commitment — most teams with five or fewer products will look hollow trying to fill four columns.