Renault Design System

Renault's web design is the opposite of luxury restraint and the opposite of fintech maximalism — it is mass-market automotive done with discipline. The 2021 flat-line diamond logomark sets the tone: geometric, slightly industrial, confident without being aggressive. The marketing site follows suit. Full-bleed bands cycle white #ffffff against black #000000, square corners dominate every container, photography of vehicles carries the visual weight, and a single Sunlight Yellow #ffed00 accent punctuates only the most consequential moments — primary CTAs, "yeni" badges, R5 paint shots, configurator dot indicators. There is no second brand colour. There are no decorative gradients outside the dedicated R5 and E-TECH hero contexts. Elevation is expressed through colour-blocking, not shadow.

This page packages Renault's marketing canvas into a single DESIGN.md file following the Google Labs spec. Inside: 22 colour tokens (one accent, one pressed variant, eight neutrals across ink and surface, three semantic states), 16 typography tokens all set in NouvelR at sizes from 10px overline to 56px display-xl, six radius tokens spanning 0px square to 9999px circular, a nine-step spacing scale anchored on a 4px base, and 22 components covering buttons, hero banners, promo tiles, vehicle cards, configurator rows and swatches, navigation pills, and the global dark footer.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent will reproduce Renault's mass-market dealership tone — square corners, yellow used scarcely, NouvelR everywhere — rather than a generic shadcn theme. Reference the tokens directly in Tailwind config: every hex, font weight, line height, and radius is a quoted value ready to paste. The Renault system is worth studying precisely because it refuses ornament — the discipline of leading with photography and colour-blocking instead of typography and shadow is unusual enough to teach by example.