High-contrast black-and-white canvas, a single Sunlight Yellow accent, square-cornered photography tiles, and the proprietary NouvelR display typeface from the modernised Renault diamond.
A two-tone canvas system anchored by a single brand accent. Yellow is the only decorative colour; everything else is structural.
NouvelR is the entire system. Display sizes are weight 700 with a tight 0.95 line-height; body stays at weight 400. Inter Tight is the closest open-source substitute.
Six button variants, all with `rounded: 2px`. Yellow primary, black secondary, and outlined tertiary cover 95% of CTA needs; pill chips are reserved for sub-nav.
A 2-up grid of square-cornered tiles cycling between light, dark, and the rare yellow accent.
Renault hybrid vehicles, eco-conscious driving, and promotional sales opportunities.
Special financing options for Master and Trafic.
Sunlight Yellow, designed especially for the R5 E-Tech Electric.
Full-bleed product photography with metadata stacked beneath. No rounded corners, no overlay text.
A right-hand option list with hairline row dividers, circular colour swatches with `rounded.full`, and a sticky summary footer.
Borderless on top and sides with a single hairline at the bottom — keeping the catalogue feel.
Built on a 4px base, with `section: 80px` driving full-bleed band-to-band rhythm.
Square corners dominate. Pill shape is reserved for sub-nav and badges.
Depth is structural — colour-blocking and outlines, not shadows.
Six breakpoints from desktop XL (≥1440) to small mobile (≤425). Vehicle grids step from 4-up to 1-up; configurator switches from side-by-side to stacked at < 1024px.
| Breakpoint | Width | Key Changes |
|---|---|---|
| Desktop XL | ≥ 1440px | 4-up vehicle grid, 2-up promo tile grid. |
| Desktop | 1280–1439px | Container shrinks; padding `xl` 24px sides. |
| Tablet Large | 1024–1279px | Vehicle grid 3-up; configurator 55/45 split. |
| Tablet | 768–1023px | Promo tiles 2-up; sub-nav becomes scroll-rail. |
| Mobile Large | 426–767px | Vehicle grid 2-up; nav collapses to hamburger. |
| Mobile | ≤ 425px | All grids 1-up; display-xl clamps to 40px. |