Dark Mode

# 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
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.
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
Micro Text — Legal Disclaimer
Micro Text — 10px / 700 / 1.45 LH — NouvelR

## Button Variants

All buttons use zero border-radius. Four variants for dark contexts.

Super Primary (Yellow)
Primary Inverted (White)
Ghost (White)
Text Link View Details
On Deeper Dark Background
Super Primary (Yellow)
Primary Inverted (White)
Ghost (White)

## Card Examples

PromoCards with dark gradient overlays for text legibility over photography.

Scenic E-Tech
Electric
The next generation of electric mobility.
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) with transparent background for dark mode.

First Name
Last Name
Email (Focus State)
Phone (Error State)Please enter a valid phone number
Message

## Spacing Scale

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

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

## Border Radius Scale

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

0px Buttons, Cards
2px Small UI
4px Labels, Tags
46px Filter Chips
50px Search Input

## Elevation & Depth

Seven shadow tokens 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.
Level 2 — Medium
Floating elements, dropdowns.
Level 3 — Layered
Compound shadow for modals.
Level 4 — Deep
Large floating panels.
Level 5 — Directional
Offset directional shadow.
Level 6 — Ambient
Warm ambient glow.