# Renault Group — Design System
> Official corporate website for the Renault Group automotive manufacturer.
- **Canonical:** https://uiuxskills.com/library/renault-group
- **Source:** https://www.renault.com
- **Category:** Automotive
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:15:22.577Z

---

---
version: alpha
name: Renault Group
description: Official corporate website for the Renault Group automotive manufacturer.
tone: >-
  Authoritative, informative, and forward-looking. The tone is professional and corporate,
  emphasizing sustainability and technological progress.
color-scheme: light
colors:
  primary: "#FFD600"
  surface: "#FFFFFF"
  surface-dim: "#F4F4F4"
  on-surface: "#1A1A1A"
  neutral: "#978B7F"
  outline: "#E0E0E0"
  error: "#D32F2F"
  success: "#388E3C"
  on-primary: "#000000"
  focus-ring: "#FFD600"
typography:
  display-lg:
    fontFamily: Renault Life, sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: Renault Life, sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: Renault Life, sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: Renault Life, sans-serif
    fontSize: 1.5rem
  body-md:
    fontFamily: Renault Life, sans-serif
    fontSize: 1rem
  label-md:
    fontFamily: Renault Life, sans-serif
    fontSize: 0.875rem
  label-sm:
    fontFamily: Renault Life, sans-serif
    fontSize: 0.75rem
rounded:
  sm: 2px
  md: 4px
  lg: 8px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#E6C000"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
  input-field:
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.on-surface}"
  link-hover:
    textColor: "{colors.primary}"
  badge:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.on-surface}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "#FFFFFF"
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "#FFFFFF"
  swatch-neutral:
    backgroundColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 2px 4px rgba(0,0,0,0.08)
  lg: 0 4px 8px rgba(0,0,0,0.10)
---

## Overview

The Renault Group visual identity is professional, clean, and corporate, focusing on high-quality imagery and structured information. It conveys a sense of industrial reliability and forward-thinking innovation, targeting investors, employees, and industry partners.

## Colors

The color palette is anchored by the iconic brand yellow, balanced against a neutral, high-contrast monochrome base to ensure clarity and professional legibility.

*   Primary (inferred) (#FFD600): The iconic Renault yellow, used for primary brand accents and call-to-actions.
*   Surface (#FFFFFF): Primary background color for the clean, white-space-heavy layout.
*   Surface-dim (inferred) (#F4F4F4): Light gray background used for section differentiation.
*   On-surface (inferred) (#1A1A1A): Primary text color for high readability against white surfaces.
*   Neutral (#978B7F): Dominant neutral tone used for secondary text and subtle UI elements.
*   Outline (inferred) (#E0E0E0): Border color for cards and dividers.
*   Error (inferred) (#D32F2F): Standard semantic error color for alerts.
*   Success (inferred) (#388E3C): Standard semantic success color for positive indicators.
*   On-primary (inferred) (#000000): High-contrast text color for primary buttons.
*   Focus-ring (inferred) (#FFD600): High-visibility focus indicator for accessibility.

## Typography

The brand utilizes the "Renault Life" typeface across all levels to maintain a cohesive, authoritative, and modern corporate voice.

*   Display-lg (inferred): Used for hero section titles.
*   Display-md (inferred): Used for major section headers.
*   Headline-lg (inferred): Used for card titles.
*   Headline-md (inferred): Used for sub-headers.
*   Body-md (inferred): Primary body text for paragraph readability.
*   Label-md (inferred): Used for metadata, button text, and small labels.
*   Label-sm (inferred): Used for captions and fine print.

## Layout

The site employs a mobile-first responsive grid system designed to showcase large-scale imagery. Content is organized in a vertical flow: hero, news, magazine, strategy, careers, brands, and footer. A consistent {spacing.xl} gap is maintained between major content blocks to ensure a spacious, scannable layout, with no spacing between elements reduced below {spacing.md}.

## Elevation & Depth

Depth is used sparingly to maintain a flat, enterprise-grade aesthetic. Subtle single-layer shadows are applied to distinguish interactive elements from the background.

*   elevation.sm: Subtle lift for small UI elements.
*   elevation.md: Standard lift for card components.
*   elevation.lg: Used for modal or drawer overlays.

## Shapes

The design system uses a subtle rounding strategy to balance industrial precision with modern approachability. 

Components like cards and input fields utilize {rounded.md} to soften edges without appearing overly organic. Smaller UI elements such as swatches use {rounded.sm}, while {rounded.lg} serves as the maximum radius for standard card components.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button Primary
These buttons feature a {colors.primary} background with {colors.on-primary} text. Use these for primary calls-to-action to ensure brand recognition. They transition to a darker yellow on hover.

### Card
Cards utilize a {colors.surface} background with a subtle {colors.outline} border. Use these to group related content, ensuring they maintain the {rounded.md} shape.

### Input Field
Designed for forms, these utilize {rounded.sm} and {colors.outline}. On focus, the border transitions to {colors.focus-ring} to meet accessibility standards.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use {colors.primary} for primary CTAs | Do not use {colors.primary} for body text |
| Apply {typography.headline-lg} for section titles | Avoid mixing too many font weights |
| Maintain {spacing.xl} between major sections | Do not reduce spacing below {spacing.md} |
| Use {rounded.md} for all card components | Avoid rounded corners larger than {rounded.lg} |
| Ensure text contrast against {colors.surface} | Do not use excessive shadows on flat UI |
| Use {colors.neutral} for secondary metadata | Avoid using {colors.error} for non-critical info |
| Apply {colors.outline} for card borders | Do not use borders on non-card elements |
| Use {colors.focus-ring} for accessibility | Avoid removing default focus states |

## Content Style

- CTA style: Labels use imperative verbs in sentence case, kept concise (e.g., "En savoir plus").
- Heading tone: Direct, informative, and professional, focusing on clarity and corporate messaging.
- Copy density: Moderate; the design balances text with imagery to ensure high scannability for professional audiences.

## Imagery & Icons

The imagery style is mixed, featuring high-quality professional photography of vehicles and corporate environments. This is paired with clean, flat vector icons used to represent strategy pillars. Iconography should remain minimal and geometric to align with the enterprise aesthetic.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Renault Group, a minimal enterprise automotive brand with an authoritative, forward-looking corporate tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name — `{colors.primary}`, `{typography.body-md}`, `{spacing.xl}` — never hardcode hex values, pixel sizes, or font names.
2. Respect the `components:` block exactly. Do not invent variants (e.g., outlined buttons, rounded cards) that the spec does not define.
3. Follow the Layout narrative: maintain `{spacing.xl}` between major content blocks; never reduce gaps below `{spacing.md}`; structure pages in mobile-first vertical flow with one breakpoint at 768px.
4. Apply the Shapes rules strictly: cards and inputs use `{rounded.md}`; small elements use `{rounded.sm}`; never exceed `{rounded.lg}` on standard components.
5. Treat the Do's and Don'ts table as authoritative. Surface any conflict with a user request before proceeding — do not silently override the spec.

## Output contract

**Must:**
- Use token names for all colors, spacing, radius, elevation, and typography.
- Include hover, focus, and disabled states for every interactive component the spec defines (button hover → `button-primary-hover`; input focus → `input-field-focus`; link hover → `link-hover`).
- Apply `{elevation.md}` to cards, `{elevation.sm}` to small UI elements, `{elevation.lg}` to modals and drawers.
- Write CTAs in sentence-case imperative style per the Content Style section (e.g., "En savoir plus").

**Must NOT:**
- Invent colors, fonts, radii, or spacing values absent from the spec.
- Use framework utility defaults when a brand token exists.
- Use `{colors.primary}` for body text, decorative borders on non-card elements, or non-critical error states.
- Add emoji, filler copy, or marketing language.
- Rewrite existing headings, button labels, or navigation items, or alter page information architecture.

## When in doubt
- If a value is not defined in the spec, ask the user before inventing one.
- Tokens marked "(inferred)" are visual approximations; if an authoritative source (theme file, Storybook) exists, it takes precedence.
- For ambiguous backgrounds, default to `{colors.surface}`; for section differentiation, use `{colors.surface-dim}`.
- Prefer composing existing components over introducing new tokens.
- For unspecified icon styles, keep geometry flat and minimal to match the enterprise aesthetic described under Imagery & Icons.