---
name: Renault
description: "An excellent example of a premium corporate site that uses editorial photography and strict typographic hierarchy to convey authority and innovation."
version: alpha

colors:
  background: "#000000"
  primary: "#000000"
  secondary: "#9E9E9E"
  tertiary: "#65D7D0"
  neutral: "#9E9E9E"
  bg-soft: "#F2F2F2"
  bg-quiet: "#FFFFFF"
  line: "rgba(158, 158, 158, 1)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 40px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "-1px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 700
    letterSpacing: "0px"
  small:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.3
    fontWeight: 700
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 16px
  lg: 24px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A clean, editorial corporate site for the Renault Group, balancing heritage with forward-looking innovation.

*A premium automotive group corporate portal showcasing innovation and sustainability.*

## Colors

High-contrast black and white foundation with a single teal accent for interactive highlights.

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#9E9E9E`)** — uses `ink-soft` token
- **Accent (`#65D7D0`)** — uses `accent` token
- **Muted (`#9E9E9E`)** — uses `muted` token
- **Borders (`rgba(158, 158, 158, 1)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** humanist-sans

- Headlines are strictly bold (700) to maintain a strong editorial presence.
- Use tight letter-spacing (e.g., -1px) for large display text to achieve a refined, premium look.

## Layout

Full-width photographic hero sections followed by structured editorial grids.

*Rhythm:* Generous vertical rhythm with large section breaks (64px-104px) to separate editorial blocks.

## Elevation & Depth

- none
- Borders: Clean, 1px lines using border colors to subtly divide sections or separate cards.

## Shapes

- `sm`: 4px
- `md`: 16px
- `lg`: 24px
- `pill`: 999px

## Components

- **button:** Pill-shaped buttons with solid backgrounds, bold text, and standard 19px vertical padding.
- **card:** Large photographic cards with rounded corners, overlaying category tags and headlines.
- **chip:** Small, rounded pill labels for categorization (e.g., Actualités du Groupe).
- **input:** Simple underline or borderless search inputs integrated into the header.
- **hero:** Full-bleed, high-quality automotive photography with overlaying text and gradient darkening at the bottom.

## Do's and Don'ts

**Don't:**
- Don't use italic typography — screenshot shows bold, upright sans-serif headlines exclusively.
- Don't use vibrant multi-color gradients — screenshot shows solid colors and subtle image darkening gradients.
- Don't use small, dense paragraph layouts — screenshot shows generous spacing and large, readable text blocks.
- Don't use harsh, unrounded corners on main containers — screenshot shows 16px to 24px border-radii.
- Don't use decorative or serif typefaces — screenshot shows exclusively clean humanist-sans-serif fonts.
- Don't use low-contrast text on busy backgrounds — screenshot shows dark gradient overlays to ensure white text readability.

---

## System Prompt (paste into AI agent)

```
This site is a premium, editorial corporate portal for the Renault Group, balancing heritage with forward-looking innovation. It relies on a high-contrast black and white foundation, utilizing a single teal accent (#65D7D0) for specific highlights. The typography uses a clean, modern humanist-sans-serif category. Critical donts: never use italics or serif fonts for headlines, avoid dense text blocks without generous spacing, and never place low-contrast text over busy images without a dark gradient overlay. The overall aesthetic is refined, spacious, and highly professional, emphasizing large photographic elements and bold, concise statements.
```