Renault Design System
Light · Generated 17/04/2026 · Renault India
v1.0.0
Color Palette
Background Colors
Black
#000000
White
#FFFFFF
Light Gray
#F2F2F2
White 2
#F4F4F4
Mid Gray
#A1A1A1
Dark Gray 4
#3D3D3D
Yellow
#EFDF00
White 3
#F9FFFA
Blue 2
#3860BE
Blue 3
#6699CC
Text Colors
Blue
#0000EE
Dark Gray
#656666
Dark Gray 2
#555555
Dark Gray 3
#565656
Border Colors
Cyan
#32AE88
Light Gray 3
#D1D1D1
Light Gray 4
#BBBBBB
Shadow Colors
Light Gray 2
#C7C5C7
Dark Blue
rgba(50,50,93,0.1)
Fill & Gradient Colors
Dark Gray 5
#656565
Dark Blue 2
#2E3644
Typography
Base Font · Times
Times
The quick brown fox jumps over the lazy dog. Renault — Passion for life.
Regular · 400 Semibold · 600 Bold · 700
Display Font · NouvelR
NouvelR
Renault's proprietary brand typeface, used for headlines and UI.
Regular · 400 Semibold · 600 Bold · 700
Display / Heading
--font-size-40px · 40px · Bold · line-height: 38px
Passion for life
--font-size-32px · 32px · Bold · line-height: 30.4px
Discover the range
--font-size-24px · 24px · Bold · line-height: 24.96px
Best cars to buy in India
--font-size-22px · 21.92px · Bold · line-height: 26.304px
Explore our latest models and offers
--font-size-6xl · 19.2px · Semibold · line-height: 20.8px
Renault offers a range of vehicles engineered for Indian roads — combining French design heritage with performance you can trust every day.
--font-size-5xl · 18px · Regular · line-height: 22.4px
Body copy for feature descriptions, specifications and user-facing content.
--font-size-4xl · 16px · Regular · line-height: 20.8px
Body default — used throughout the site for paragraphs and descriptive content.
--font-size-3xl · 14.4px · Regular · line-height: 19.2px · letter-spacing: 0.144px
Body small · legal copy · footnotes · fine print
--font-size-sm · 12px · Regular · line-height: 14px
KWID · TRIBER · KIGER · DUSTER
--font-size-xs · 10px · Bold · uppercase · letter-spacing: 0.144px
Line Heights
Tight
9.5px
Snug
11.5px
Normal
13.3px
Relaxed
14px
Loose
14.5px
LH-6
15.61px
LH-7
16.8px
LH-8
18px
LH-9
19.2px
LH-10
19.51px
LH-11
20.8px
LH-12
22.4px
LH-13
22.8px
LH-14
24.96px
LH-15
26.3px
LH-16
30.4px
LH-17
38px
Letter Spacing
Renault Range
Tight
0.13008px · headings, display type
Passion for life
Normal
0.144px · body, labels, buttons
Spacing
Spacing Scale
Token scale — 2px → 489.414px
2
4
8
10
12
15
16
20
24
32
40
44
48
64
72
80
96
121.2
131.1
140.5
489.4
Borders
Border Radii
Small
0 0 2px 2px
Medium
2px
Large
3px
X-Large
10px
2X-Large
17px
Full
46px
R7
50px
R8
100px
Border Widths
Hairline
1px
Thin
10px
Base
12px
Shadow / Elevation
Shadow Tokens
Elevation system for cards, modals and floating elements
Small
--shadow-sm
rgba(0,0,0,.2) 0 0 18px · soft glow
Medium
--shadow-md
rgba(50,50,93,.1) 0 7px 14px · cards
Large
--shadow-lg
rgb(199,197,199) −3 −3 5px · inset-like
X-Large
--shadow-xl
rgb(199,197,199) 0 0 12px 2px · spread
Shadow 5
--shadow-shadow-5
rgba(0,0,0,.2) 5 5 8px · directional
Shadow 6
--shadow-shadow-6
rgba(0,0,0,.2) 0 4px 8px · floating
Z-Index
TokenValueUsage
--z-11Base stacking layer
--z-22Raised inline elements
--z-319Sticky headers, navigation
--z-424Overlays, dropdowns
--z-51000Modals, dialogs
--z-62147483645Critical overlay layer 1
--z-72147483646Critical overlay layer 2
--z-82147483647Max-level overlay (cookie banner)
Breakpoints
--breakpoint-xs
400px
Ultra-small mobile
--breakpoint-sm
425px
Small mobile
--breakpoint-md
426px
Medium mobile
--breakpoint-lg
530px
Large mobile
--breakpoint-xl
550px
Phablet
--breakpoint-2xl
600px
Small tablet
--breakpoint-3xl
610px
Tablet portrait
--breakpoint-bp-8
640px
Tablet
--breakpoint-bp-9
669px
Large tablet portrait
--breakpoint-bp-10
670px
Large tablet
--breakpoint-bp-11
767px
iPad portrait edge
--breakpoint-bp-12
768px
iPad portrait
--breakpoint-bp-13
769px
Tablet landscape
--breakpoint-bp-14
890px
Small laptop edge
--breakpoint-bp-15
896px
Small laptop
--breakpoint-bp-16
897px
Laptop portrait
--breakpoint-bp-17
1023px
Laptop edge
--breakpoint-bp-18
1024px
Laptop
--breakpoint-bp-19
1280px
Desktop
--breakpoint-bp-20
1440px
Large desktop
Opacity
Opacity Tokens
Transparency scale — 30% → 75%
--opacity-30
30%
--opacity-60
60%
--opacity-75
75%
Accessibility
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 (large/bold) · AAA ≥ 7:1
Text TokenBackground TokenRatioRating
BlueBlack2.23:1Fail
BlueWhite9.4:1AAA
BlueLight Gray8.39:1AAA
BlueWhite 28.54:1AAA
BlueMid Gray3.64:1AA Large
Dark GrayBlack3.65:1AA Large
Dark GrayWhite5.76:1AA
Dark GrayLight Gray5.15:1AA
Dark GrayWhite 25.24:1AA
Dark GrayMid Gray2.23:1Fail
Dark Gray 2Black2.82:1Fail
Dark Gray 2White7.46:1AAA
Dark Gray 2Light Gray6.66:1AA
Dark Gray 2White 26.78:1AA
Dark Gray 2Mid Gray2.89:1Fail
Dark Gray 3Black2.86:1Fail
Dark Gray 3White7.34:1AAA
Dark Gray 3Light Gray6.56:1AA
Dark Gray 3White 26.67:1AA
Dark Gray 3Mid Gray2.84:1Fail
CSS Variables Reference
Background Colors
Black--color-black#000000
White--color-white#FFFFFF
Light Gray--color-light-gray#F2F2F2
White 2--color-white-2#F4F4F4
Mid Gray--color-mid-gray#A1A1A1
Dark Gray 4--color-dark-gray-4#3D3D3D
Yellow--color-yellow#EFDF00
White 3--color-white-3#F9FFFA
Blue 2--color-blue-2#3860BE
Blue 3--color-blue-3#6699CC
Text, Border, Shadow & Fill
Blue--color-blue#0000EE
Dark Gray--color-dark-gray#656666
Dark Gray 2--color-dark-gray-2#555555
Dark Gray 3--color-dark-gray-3#565656
Cyan--color-cyan#32AE88
Light Gray 3--color-light-gray-3#D1D1D1
Light Gray 4--color-light-gray-4#BBBBBB
Light Gray 2--color-light-gray-2#C7C5C7
Dark Blue--color-dark-bluergba(50,50,93,.1)
Dark Gray 5--color-dark-gray-5#656565
Dark Blue 2--color-dark-blue-2#2E3644
Typography
Base Font--font-family-baseTimes
Display Font--font-family-2NouvelR
Regular--font-weight-regular400
Semibold--font-weight-semibold600
Bold--font-weight-bold700
2XS--font-size-2xs0px
XS--font-size-xs10px
SM--font-size-sm12px
Base--font-size-base12.8px
LG--font-size-lg13px
XL--font-size-xl13.008px
2XL--font-size-2xl14px
3XL--font-size-3xl14.4px
4XL--font-size-4xl16px
5XL--font-size-5xl18px
6XL--font-size-6xl19.2px
22px--font-size-22px21.92px
24px--font-size-24px24px
32px--font-size-32px32px
40px--font-size-40px40px
Tight Tracking--letter-spacing-tight0.13008px
Normal Tracking--letter-spacing-normal0.144px
Spacing
Space 1--space-12px
Space 2--space-24px
Space 3--space-38px
Space 4--space-410px
Space 5--space-512px
Space 6--space-615px
Space 8--space-816px
Space 10--space-1020px
Space 12--space-1224px
Space 16--space-1632px
Space 20--space-2040px
Space 24--space-2444px
Space 32--space-3248px
Space 40--space-4064px
Space 48--space-4872px
Space 64--space-6480px
Space 80--space-8096px
Space 96--space-96121.2px
Space 128--space-128121.2px
Space 160--space-160131.1px
Space 192--space-192140.5px
Space 256--space-256489.4px
Borders & Radius
Hairline--border-width-hairline1px
Thin--border-width-thin10px
Base--border-width-base12px
Small--radius-sm0 0 2px 2px
Medium--radius-md2px
Large--radius-lg3px
X-Large--radius-xl10px
2X-Large--radius-2xl17px
Full--radius-full46px
R7--radius-r750px
R8--radius-r8100px
Motion, Opacity, Layers & Breakpoints
Instant--duration-instant0.1s
Fast--duration-fast0.15s
Normal--duration-normal0.2s
Slow--duration-slow0.25s
Slower--duration-slower0.3s
Duration 6--duration-duration-60.4s
Duration 7--duration-duration-70.5s
Duration 8--duration-duration-80.6s
Ease Out--easing-ease-outease-out
Ease In--easing-ease-inease-in
Linear--easing-linearlinear
Ease In Out--easing-ease-in-outease-in-out
Opacity 30--opacity-300.3
Opacity 60--opacity-600.6
Opacity 75--opacity-750.75
Z-1 Base--z-11
Z-2 Raised--z-22
Z-3 Sticky--z-319
Z-4 Overlay--z-424
Z-5 Modal--z-51000
Z-6 Critical--z-62147483645
Z-7 Critical--z-72147483646
Z-8 Max--z-82147483647
XS--breakpoint-xs400px
SM--breakpoint-sm425px
MD--breakpoint-md426px
LG--breakpoint-lg530px
XL--breakpoint-xl550px
2XL--breakpoint-2xl600px
3XL — BP-20--breakpoint-3xl → bp-20610px → 1440px
Design System Preview · Renault India · Generated 17/04/2026