Design System

French precision,
electric future.

Clean whites and warm neutrals punctuated by the iconic Renault Yellow. A light-first system that embodies modern mobility and optimistic energy.

19 color tokens 9 type steps 4px grid 4 surface levels
Download Spec theme.css tokens.json variables.css
Foundation

Color Tokens

Light neutrals with the iconic Jaune Renault yellow and Bleu Électrique blue as interactive accents. 19 tokens across surfaces, text, interaction, and decorative gradients.

Blanc Pur
#ffffff
Primary page background
Gris Nuage
#f7f7f7
Secondary surface, sections
Gris Perle
#eeeeee
Tertiary surface, cards
Gris Clair
#e0e0e0
Borders, dividers
Gris Moyen
#b0b0b0
Inactive states, disabled
Noir Absolu
#1a1a1a
Primary text, headings
Gris Foncé
#333333
Body text, content
Gris Texte
#666666
Secondary text, labels
Gris Muted
#999999
Placeholders, captions
Jaune Renault
#FFCC00
Primary brand, CTAs
Jaune Profond
#E6B800
Hover state, deeper accent
Jaune Lumière
#FFD633
Highlights, softer yellow
Bleu Électrique
#0055FF
Links, interactive elements
Bleu Profond
#0044CC
Link hover, deeper blue
Vert Vital
#00A86B
Success states
Rouge Signal
#E63946
Error states, alerts
Orange Alerte
#FF8C00
Warning states

Gradients

jaune-glow
Ambient yellow glow for hero backgrounds
lumiere-douce
Soft top-down light effect
Typography

Type Scale

Renault Life as primary typeface (Inter substitute). Geometric, clean, and highly legible with a distinctly French modernist character.

Display-lg Electric future 64px / 1.0 / −0.02em
Display Move to zero 48px / 1.1 / −0.02em
Heading-lg Renault E-Tech 32px / 1.2 / −0.02px
Heading Section heading 24px / 1.3 / −0.01px
Heading-sm Subsection heading 20px / 1.3 / −0.01px
Subheading Card titles, introductions 18px / 1.4 / 0
Body Default body text for readable content 16px / 1.5 / 0
Body-sm Dense data, comparison rows 14px / 1.5 / 0.01px
Caption Meta info · Footer · Labels 12px / 1.5 / 0.08px

Fonts

Primary Renault Life 300–700 · 12–64px
Mono Renault Life Mono 400–500 · 12–16px · Code only
Fallback Inter Substitute for all above
Layout

Spacing & Shapes

Base unit 4px. Comfortable density with generous breathing room. 13-step spacing scale, 8 border radius values.

Spacing Scale (4px base)

44px
88px
1212px
1616px
2424px
3232px
4848px
9696px

Border Radius

sharp 0px
sm 4px
md 8px
cards 12px
xl 16px
pill 9999px

Shadows

Subtle inset border
Elevated cards
Floating modals
Focus active states
Elevation

Depth & Surfaces

Clean white canvas with subtle gray layering. Light, airy surfaces that evoke the spaciousness of a Renault interior.

Depth Levels

Blanc Pur
Base page background — the canvas
Level 0
Gris Nuage
Secondary sections, alternating areas
Level 1
Gris Perle
Elevated panels, card backgrounds
Level 2
Gris Clair
Borders, containers, subtle elevation
Level 3

Surface System

Blanc Pur #ffffff
Gris Nuage #f7f7f7
Gris Perle #eeeeee
Gris Clair #e0e0e0
Components

Button Variants

Primary action (Jaune Renault), secondary (outlined), and ghost variants for different interaction hierarchies.

Primary Action Button
Main call to action — highest visual weight
.btn-primary
Jaune Renault (#FFCC00) background, Noir Absolu text, 8px radius. Use exclusively for the single most important action.
Secondary Button
Secondary interactive actions
.btn-secondary
Noir Absolu text, Noir Absolu border, 8px radius. Clean and understated for secondary actions.
Ghost Button
Tertiary actions, navigation
.btn-ghost
Bleu Électrique text, Bleu Électrique border. Clear interactive target for secondary information.
Ghost Header Link
Navigation, secondary actions
.nav-link
Vehicles Services Innovation
Noir Absolu text, transparent background, 8px padding, no border. Used for top navigation items.
Pill Tag
Category filters, status indicators
.pill-tag
All Electric Hybrid
Gris Nuage background, pill shape (9999px radius), 6px/16px padding. Active state uses Jaune Renault.
Input Field
User text input
input
Blanc Pur background, Gris Clair border, 8px radius. Focus state uses Bleu Électrique border.
Guidelines

Do's & Don'ts

Do — Embrace
  • Blanc Pur (#ffffff) as primary canvas background
  • Jaune Renault (#FFCC00) for primary CTAs only
  • Noir Absolu (#1a1a1a) for all primary text
  • Bleu Électrique (#0055FF) for links and interactive icons
  • 8px radius for buttons, 12px for cards, 9999px for pills
  • 4px-based spacing with generous breathing room
  • Clean white space as a core design principle
Don't — Avoid
  • Jaune Renault for text or large background areas
  • Dark backgrounds as primary surfaces
  • Hard 0px corners on cards or buttons
  • Generic blue for links — use Bleu Électrique
  • Dense packing without breathing room
  • More than two accent colors in a single view
  • Decorative gradients on functional elements