Miele Design System

Miele's marketing site is built on an axiom most appliance brands avoid: the page is black and white, and the gold is an exception, not a rule. The nav bar is pure black (#000000) with white text. The hero below is a blurred product photograph. The editorial grid below that is white canvas with black text, hairline-separated cards, and sharp corners throughout. The amber-gold (#f59b00) CTA button visible in the bottom quarter of the screenshot — "LEARN MORE" — is the only chromatic element in the captured chrome, appearing 9 times total as a promotional badge or button fill. Where Bosch uses a blue accent across every interactive element and LG holds a magenta-red across CTAs and nav highlights, Miele places its gold so rarely that it functions almost as a luxury signal rather than a UI convention — you notice it precisely because nothing else competes.

The DESIGN.md file packages the system into machine-readable tokens for React and AI tools. Inside: 13 color tokens drawn from a pure binary system — black ink at four densities, white canvas at one, a light-mid grey for disabled states, and the amber-gold as the sole brand-layer token. Ten typography tokens span a proprietary four-weight Helvetica Neue stack: HelveticaNeueW01-45Ligh for light body and h3 subheadings, HelveticaNeueW01-55Roma for running text, HelveticaNeueW01-65Medi for uppercase category labels, and HelveticaNeueW01-75Bold for nav links and strong emphasis. 15 components cover the black primary button, the amber promotional CTA, the sharp-corner hairline card, the top-nav dark band, and the footer.

Feed this file to Claude or Cursor and it reproduces Miele's specific moves: binary black/white chrome, amber accent used at maximum scarcity, Helvetica Neue in four explicit weights, zero border-radius at every surface, and a 17-variable CSS custom-property system that drives button geometry consistently. The system is an argument for restraint by technical precision: where other appliance brands use accent colors to create visual excitement, Miele uses the complete absence of accent color as the excitement — and drops the gold at exact intervals as a reward for attention.