Design System
Inspired by Renault

A visual reference generated from DESIGN.md — every color, type rule, and component token documented from Renault's design system.

Configure Explore

Color Palette

Every color extracted from Renault's design system with semantic names, hex values, and functional roles.

Primary
Renault Yellow
#EFDF00
Super-primary CTA, brand accent
Absolute Black
#000000
Primary button bg, headings, dark sections
Pure White
#FFFFFF
Primary surface, light canvas (--rt-color-white)
Secondary & Accent
Soft Yellow
#F8EB4C
Yellow hover/pressed state
Renault Blue
#1883FD
Link hover color across all variants
Warm Gray
#D9D9D6
Disabled states, subtle borders
Surface & Background
Charcoal
#222222
Secondary dark surface (--rt-color-dark)
Pale Silver
#F2F2F2
Alternate light surface, card borders
Border Gray
#D1D1D1
Input borders, subtle separators
Semantic
Success Green
#8DC572
Positive status (--rt-color-success)
Error Rose
#BE6464
Validation errors (--rt-color-error)
Warning Amber
#F0AD4E
Cautionary alerts (--rt-color-warning)
Info Blue
#337AB7
Informational callouts (--rt-color-info)

Typography Scale

NouvelR proprietary typeface — geometric sans-serif with a 28-degree "radical r" cut. Rendered with Nunito Sans as Google Font substitute.

Hero Title
Hero Title — 56px / 700 / 0.95 LH / uppercase — NouvelR
Section Heading — Electric Models
Section Heading — 40px / 700 / 0.95 LH — NouvelR
Card Heading — New Scenic
Card Heading — 32px / 700 / 0.95 LH — NouvelR
Subheading — Campaign Offers
Subheading — 24px / 700 / 0.95 LH — NouvelR
Module Title — Vehicle Range
Module Title — 21.92px / 600 / 1.20 LH — NouvelR
UI Heading — Configuration Options
UI Heading — 19.2px / 600 / 1.30 LH — NouvelR
Emphasis — E-Tech Hybrid
Emphasis — 18px / 700 / 1.00 LH — NouvelR
Body Heading — Performance Details
Body Heading — 16px / 700 / 1.40 LH — NouvelR
Body Text — The all-new Scenic E-Tech electric delivers a driving experience that combines range, comfort, and advanced technology for everyday journeys.
Body Text — 14px / 400 / 1.40 LH — NouvelR
Button Label — Configure
Button Label — 14.4px / 700 / 1.00 LH / 0.144px — NouvelR
Nav Link — Models & Range
Nav Link — 13px / 700 / 1.50 LH — NouvelR
Caption — Photographed at the Renault Design Center
Caption — 12.8px / 400 / 1.10 LH — NouvelR
Micro Text — Legal Disclaimer
Micro Text — 10px / 700 / 1.45 LH — NouvelR

Button Variants

All buttons use zero border-radius — sharp rectangular forms. Four variants cover light and dark contexts.

Super Primary (Yellow)
Primary (Black)
Ghost (Black)
Text LinkView Details
On Dark Background
Super Primary (Yellow)
Primary Inverted (White)
Ghost (White)
Text LinkView All

Card Examples

PromoCards with dark gradient overlays for text legibility over photography. Alternating light and dark modes.

Scenic E-Tech
Electric
The next generation of electric mobility, reimagined.
Explore
E-Tech
Hybrid
Intelligent hybrid powertrain for everyday efficiency.
Configure
Renault
Clio
The iconic city car, now with hybrid technology.
Learn More

Form Elements

Pill-shaped inputs (50px radius) contrasting with zero-radius buttons. NouvelR 12.8px text.

Please enter a valid phone number

Spacing Scale

Base unit: 8px. The full spacing scale from Renault's design tokens.

1px
4px
5px
6px
8px
10px
12px
15px
16px
20px
24px
32px
40px

Border Radius Scale

Zero-radius dominates buttons and cards. Pill shapes reserved for inputs only.

0pxButtons, Cards
2pxSmall UI
3pxPanels, Tabs
4pxLabels, Tags
46pxFilter Chips
50pxSearch Input

Elevation & Depth

Seven shadow tokens progressing from subtle hover lifts to dramatic deep panels.

Level 0 — Flat
No shadow. Default for PromoCards and buttons.
Level 1 — Soft
Card hover states, subtle lift effect.
Level 2 — Medium
Floating elements, dropdown menus.
Level 3 — Layered
Compound shadow for elevated cards and modals.
Level 4 — Deep
Large floating panels, configurator overlays.
Level 5 — Directional
Offset directional shadow for specific components.
Level 6 — Ambient
Warm ambient glow for highlighted elements.