The Ordinary Design System

The Ordinary's marketing site communicates through deliberate visual silence. The hero is a white panel with a 36px bold Raleway headline, a product photograph, and a text sub-head — no gradient, no brand-colored CTA, no hero animation. The page continues this way below the fold: white cards with 20px border radius, product grids on white, editorial callout panels on white. The single moment of color is a hot magenta (#dc049b) that appears on promotional badges and price-chip borders — 33 occurrences in the extracted page, all on callout elements rather than primary interactive surfaces. Where most skincare brands build brand identity through color saturation (Tatcha's gold, Sunday Riley's sage, Youth to the People's sage-and-carbon), The Ordinary builds identity through its clinical absence of decoration.

The DESIGN.md file packages the system into a machine-readable spec for React and AI tooling. Inside: 12 color tokens organized around three near-black ink tones (#212529 at 1020 occurrences, #333333 at 874, #22121f at 217) for text and borders, a pure-white canvas, a light beige (#e1ded9) hairline, and the hot magenta accent. Ten typography tokens span Raleway at 14-36px in weights 400/600/700 for display, body, and UI chrome, plus Geologica at 11-16px in weights 300/600/700 for uppercase labels. Five component groups cover the white-card grid, the black-border primary button, the monochrome top-nav, and the Raleway-driven hero heading.

Feed this file to Claude or Cursor to reproduce The Ordinary's specific moves: white canvas with no tint, near-black text at #212529 (not pure black), Raleway at 700 for the only bold moment in the hierarchy, 20px card rounding as the single expressive shape move, and hot magenta reserved exclusively for promotional badges. The system is worth studying as a counter-example to the beauty-brand norm: it demonstrates that a skincare product page can convey authority through restraint rather than through brand-color saturation.