---
version: alpha
name: Renault
website: "https://www.renault.com"
description: |
  Renault's web presence pairs the freshly-modernised Renault diamond
  (the 2021 flat-line rhombus mark) with a stark black-and-white canvas, a
  signature Sunlight Yellow accent, and the proprietary NouvelR display
  typeface. The system reads as confident, photography-first automotive — large
  hero cars on neutral or atmospheric backdrops, square-edged or barely-rounded
  containers, and a small disciplined palette where every coloured element is
  intentional. Tile grids, full-bleed banners, and a recurring "configurator"
  surface (white card, yellow accent dots, neutral product chrome) carry the
  mass-market dealership tone without crossing into luxury.

seo:
  title: "Renault Design System for React — Sunlight Yellow (#ffed00), NouvelR, 22 components"
  metaDescription: "Renault's design system as a DESIGN.md file. Sunlight Yellow #ffed00, NouvelR display type, 22 color tokens, 22 components. For React, Next.js, and AI tools."
  highlights:
    - "Single accent voltage — Sunlight Yellow #ffed00, reserved for primary CTAs, 'yeni' badges, and at most one promo tile per band"
    - "Square-corner discipline — 2px (#rounded.xs) on buttons, 0px on tiles and vehicle cards, pill only for sub-nav chips"
    - "Monolithic NouvelR — every label, headline, and caption set in one proprietary family at weight 400 or 700, never 500"
    - "Two-tone band rhythm — full-bleed white #ffffff catalogue mode against black #000000 storytelling mode, no mid-grey backgrounds"
    - "Display tightness — headlines hold lineHeight 0.95 at every size from 18px to 56px, so multi-line wraps stack cleanly"
  tags:
    - "Automotive"
  lastUpdated: "2026-05-12"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    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.
  related:
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "/blocks"
      title: "React blocks for shadcn/ui"
      description: "Production-ready hero, pricing, CTA, and dashboard sections built with Tailwind and shadcn primitives."
  questions:
    - id: "primary-color"
      title: "What is Renault's primary brand color?"
      answer: "Renault's accent is Sunlight Yellow — #ffed00 — paired with pressed-state #e6d200 and always combined with #000000 black text (yellow plus white is forbidden in the system). It is used scarcely: primary CTAs like 'Hemen randevu al' and 'Konfigüratörü başlat', 'yeni'/'NEW' badges on new vehicle cards, configurator swatch indicators, and at most one full-bleed yellow promo tile per campaign band. Most pages are a 90/10 split between #ffffff canvas mode and #000000 storytelling mode, with the yellow acting as a single voltage."
    - id: "typography"
      title: "What typography does Renault use, and what should I use if NouvelR isn't available?"
      answer: "Renault sets the entire system in NouvelR, a proprietary display family with squared apexes and tall x-heights that mirror the diamond logomark. The spec documents 16 type tokens, all NouvelR — from a 10px overline at weight 700 up to a 56px display-xl at weight 700 with lineHeight 0.95. Body sits at weight 400; display sits at weight 700; nothing uses 500. If you cannot license NouvelR, Inter Tight, Manrope, or HK Grotesk Semi Condensed are the closest open-source substitutes — clamp display lineHeight to 0.95 explicitly to match the original, since the substitutes default looser."
    - id: "dark-mode"
      title: "Does Renault's design system have a dark mode?"
      answer: "Not in the conventional theming sense, but the system runs on permanent two-tone rhythm: pages cycle white #ffffff catalogue mode for browsing and configurators against black #000000 storytelling mode for hero bands, lifestyle imagery, and the global footer. Surface Deep #111111 carries one-step elevation inside dark regions, and divider-dark rgba(255,255,255,0.16) handles low-contrast separators. The MyRenault logged-in product is out of scope for this extraction."
    - id: "shape-language"
      title: "What is Renault's shape language?"
      answer: "Square. The default radius scale is dominated by 0px (rounded.none) for tiles, vehicle cards, hero banners, and full-bleed imagery, plus 2px (rounded.xs) for every standard button — primary yellow, secondary black, outlined. The 46px pill radius is reserved exclusively for sub-nav chips and 'yeni' badges, and 9999px circles only appear on configurator paint swatches at 56px diameter. There are no soft 14px or 20px corners anywhere — Renault's near-flat geometry is structural, not stylistic."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own React automotive site?"
      answer: "Yes — the file is designed to feed Claude, Cursor, or any AI tool that reads structured design tokens. Pointed at this spec the agent will reproduce Renault's square corners, NouvelR-only typography, scarce yellow voltage, and white-to-black band rhythm rather than a generic shadcn theme. You can also reference tokens directly: every hex like #ffed00, weight like 700, lineHeight like 0.95, and radius like 2px is a quoted value ready to paste into Tailwind config, CSS variables, or your own component library."
    - id: "known-gaps"
      title: "What's missing from this DESIGN.md spec?"
      answer: "A handful of items, documented in the Known Gaps section: pressed-state visuals beyond button-primary-pressed (#e6d200) are not promoted to YAML because they are not consistently observable on the captured static surfaces; drop-shadow values exist in the extracted tokens but only the configurator's sticky summary bar surfaces them visually; the MyRenault logged-in product is out of scope; and form-field focus styling — likely a thicker bottom border at #000000 — is not visually confirmed on the captured pages."

colors:
  primary: "#ffed00"
  primary-deep: "#e6d200"
  on-primary: "#000000"
  ink: "#000000"
  body: "#222222"
  charcoal: "#333333"
  mute: "#666666"
  ash: "#8a8a8a"
  stone: "#c4c4c4"
  on-dark: "#ffffff"
  on-dark-mute: "rgba(255,255,255,0.72)"
  canvas: "#ffffff"
  surface-soft: "#f7f7f7"
  surface-card: "#ffffff"
  surface-dark: "#000000"
  surface-deep: "#111111"
  hairline: "#f2f2f2"
  hairline-strong: "#000000"
  divider-dark: "rgba(255,255,255,0.16)"
  badge-new: "#ffed00"
  link: "#0000ee"
  error: "#be6464"
  warning: "#f0ad4e"
  success: "#8dc572"
  info: "#337ab7"

typography:
  display-xl:
    fontFamily: NouvelR
    fontSize: 56px
    fontWeight: 700
    lineHeight: 0.95
    letterSpacing: 0
  display-lg:
    fontFamily: NouvelR
    fontSize: 40px
    fontWeight: 700
    lineHeight: 0.95
    letterSpacing: 0
  display-md:
    fontFamily: NouvelR
    fontSize: 32px
    fontWeight: 700
    lineHeight: 0.95
    letterSpacing: 0
  heading-lg:
    fontFamily: NouvelR
    fontSize: 24px
    fontWeight: 700
    lineHeight: 0.95
    letterSpacing: 0
  heading-md:
    fontFamily: NouvelR
    fontSize: 20px
    fontWeight: 700
    lineHeight: 0.95
    letterSpacing: 0
  heading-sm:
    fontFamily: NouvelR
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0
  subtitle:
    fontFamily: NouvelR
    fontSize: 19.2px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0
  body-lg:
    fontFamily: NouvelR
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-md:
    fontFamily: NouvelR
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
  body-sm:
    fontFamily: NouvelR
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.57
    letterSpacing: 0
  button-lg:
    fontFamily: NouvelR
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0
  button-md:
    fontFamily: NouvelR
    fontSize: 14.4px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.144px
  button-sm:
    fontFamily: NouvelR
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0.13px
  caption:
    fontFamily: NouvelR
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
  overline:
    fontFamily: NouvelR
    fontSize: 10px
    fontWeight: 700
    lineHeight: 1.45
    letterSpacing: 0

rounded:
  none: 0px
  xs: 2px
  sm: 3px
  md: 4px
  pill: 46px
  full: 9999px

spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  xxl: 32px
  xxxl: 40px
  section: 80px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.xs}"
    padding: 14px 24px
    height: 48px
  button-primary-pressed:
    backgroundColor: "{colors.primary-deep}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.xs}"
  button-secondary-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-md}"
    rounded: "{rounded.xs}"
    padding: 14px 24px
  button-outline-dark:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.xs}"
    padding: 13px 23px
  button-outline-light:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-md}"
    rounded: "{rounded.xs}"
    padding: 13px 23px
  button-pill:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button-sm}"
    rounded: "{rounded.pill}"
    padding: 8px 16px
    height: 36px
  button-icon-square:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xs}"
    size: 40px
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: 12px 16px
    height: 48px
  hero-banner:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    rounded: "{rounded.none}"
    padding: "0"
  promo-tile-light:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.heading-lg}"
    rounded: "{rounded.none}"
    padding: 32px
  promo-tile-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.heading-lg}"
    rounded: "{rounded.none}"
    padding: 32px
  promo-tile-yellow:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.heading-lg}"
    rounded: "{rounded.none}"
    padding: 32px
  vehicle-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: "0"
  configurator-row:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: 24px 0
  configurator-swatch:
    backgroundColor: "{colors.surface-soft}"
    rounded: "{rounded.full}"
    size: 56px
  badge-new:
    backgroundColor: "{colors.badge-new}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: 6px 14px
  nav-bar:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.none}"
    height: 60px
  sub-nav-pill:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button-sm}"
    rounded: "{rounded.pill}"
    padding: 8px 16px
  footer:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.none}"
    padding: 64px 24px
---

## Overview

Renault's Turkish marketing surfaces are unapologetically high-contrast: a white canvas for browsing, a black canvas for product storytelling, and a single Sunlight Yellow accent (`{colors.primary}` — `#ffed00`) reserved for the most consequential actions. The brand's modernised flat diamond logo sets the tone — geometric, confident, slightly industrial — and the system follows suit. Square corners dominate, hairline borders are rare, and elevation is expressed through colour blocking rather than shadow.

The typography is monolithic. Every text on the site is set in **NouvelR**, Renault's bespoke display family, with a strong preference for weight 700 at display sizes (with a tight `lineHeight: 0.95`) and weight 400 for body. There is no secondary serif, no decorative italic, no script — the discipline is the signature.

Page rhythm cycles between three surface modes: a **white catalogue mode** for listings and configurators (`{colors.canvas}` — `#ffffff` — with hairline-thin `{colors.hairline}` — `#f2f2f2` — dividers), a **black storytelling mode** for hero sections, lifestyle imagery, and the lower half of campaign pages, and brief **yellow accent moments** (`{colors.primary}` — `#ffed00` — tiles, "NEW" badges, R5-coded yellow paint shots) that punctuate the otherwise neutral palette.

**Key Characteristics:**
- Two-tone canvas system — `{colors.canvas}` (`#ffffff`) for browsing, `{colors.surface-dark}` (`#000000`) for storytelling — switched in full-bleed bands rather than subtle gradations.
- A single brand accent — `{colors.primary}` (`#ffed00`) Sunlight Yellow — used scarcely on primary CTAs, "NEW" badges, R5 hero photography, and configurator dot indicators.
- **NouvelR everywhere**, with `{typography.display-xl}` headlines at 56px / weight 700 / `lineHeight: 0.95` so condensed multi-line headlines stack cleanly.
- Square geometry: `{rounded.xs}` (2px) on buttons, `{rounded.none}` (0px) on tiles and product cards, `{rounded.pill}` (46px) reserved exclusively for sub-nav chips and decorative badges.
- Photography-first product tiles — vehicle photos full-bleed inside otherwise neutral cards, with copy stacked beneath rather than overlaid.
- Page-level rhythm cycles white → black → yellow accent → black, with the wordmark and footer always closing on `{colors.surface-dark}` (`#000000`).

## Known Gaps

- Active/pressed visual states are not consistently observable in static surfaces; `button-primary-pressed` documents the extracted darkened-yellow value (`#e6d200`), but no other component has a pressed variant promoted to the YAML.
- Drop-shadow values exist in the extracted tokens but are rarely surfaced visually; only the configurator's sticky summary bar uses them on the captured pages.
- The MyRenault application surfaces (logged-in product) are out of scope for this extraction — only the public marketing canvas is documented.
- Form-field focus styling is not extracted; the system likely relies on a thicker bottom border at `{colors.ink}` (`#000000`), but this is not visually confirmed on the captured pages.