## Color Palette

A two-tone canvas system anchored by a single brand accent. Yellow is the only decorative colour; everything else is structural.

Brand & Accent

Sunlight Yellow

#ffed00

Primary CTA, "new" badge, accent tile.

Sunlight Yellow Pressed

#e6d200

Active/pressed state of yellow.

On-Primary

#000000

Label colour on yellow surfaces.

Surface Dark

#000000

Hero bands, footer, dark storytelling.

Surface

Canvas

#ffffff

Default page surface.

Surface Soft

#f7f7f7

Configurator inactive rows.

Surface Deep

#111111

Inset cards in dark bands.

Hairline

#f2f2f2

Soft 1px row dividers.

Text

Ink

#000000

Headings, logo, structural borders.

Body

#222222

Long-form body copy.

Charcoal

#333333

Captions, metadata.

Mute

#666666

Secondary nav labels.

Ash

#8a8a8a

Placeholder text.

Stone

#c4c4c4

Disabled foreground.

On-Dark

#ffffff

Text on dark canvas.

On-Dark Mute

rgba(255,255,255,0.72)

Secondary text on dark.

Semantic

Error

#be6464

Inline form errors.

Warning

#f0ad4e

Amber alerts.

Success

#8dc572

Confirmation.

Info

#337ab7

Informational chips.

## Typography

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.

display-xl56px · 700 · 0.95
E-Tech Electric
display-lg40px · 700 · 0.95
Renault Care Service
display-md32px · 700 · 0.95
Start configurator
heading-lg24px · 700 · 0.95
Hybrid vehicle models
heading-md20px · 700 · 0.95
Renault Master
heading-sm18px · 700 · 1.0
Service packages
subtitle19.2px · 600 · 1.3
Find out your vehicle's value and explore our campaigns.
body-lg18px · 400 · 1.5
Renault's innovative electric and hybrid vehicles, promotional sales opportunities, appointment system, and myRenault membership benefits all in one place.
body-md16px · 400 · 1.4
Renault's innovative electric vehicle.
body-sm14px · 400 · 1.57
Vehicle range listing — supporting metadata and short descriptions.
button-md14.4px · 700 · 1.0 · 0.144px
Book an appointment
button-sm13px · 600 · 1.2 · 0.13px
Service & appointment
caption12px · 400 · 1.4
© Renault Turkey 2026. All rights reserved.
overline10px · 700 · 1.45
New Model

## Buttons

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.

## Promotional Tiles

A 2-up grid of square-cornered tiles cycling between light, dark, and the rare yellow accent.

### Hybrid vehicle models

Renault hybrid vehicles, eco-conscious driving, and promotional sales opportunities.

### Commercial vehicle campaigns

Special financing options for Master and Trafic.

### SUNLIGHT YELLOW

Sunlight Yellow, designed especially for the R5 E-Tech Electric.

## Vehicle Cards

Full-bleed product photography with metadata stacked beneath. No rounded corners, no overlay text.

### Scenic E-Tech Electric

Electric SUV

→
new

### R5 E-Tech

Electric hatchback

→

### Renault Master

Commercial vehicle

→

## Configurator

A right-hand option list with hairline row dividers, circular colour swatches with `rounded.full`, and a sticky summary footer.

New Renault Master
Configurator
Body type
Panel Van →
Engine selection
dCi 150 →
Version selection
Pro+ →
Color options
Total price
— TL

## Form Elements

Borderless on top and sides with a single hairline at the bottom — keeping the catalogue feel.

Full name
Email
Phone
City
Message

## Spacing Scale

Built on a 4px base, with `section: 80px` driving full-bleed band-to-band rhythm.

xxs · 4
xs · 8
sm · 12
md · 16
lg · 20
xl · 24
xxl · 32
xxxl · 40
section · 80

## Border Radius

Square corners dominate. Pill shape is reserved for sub-nav and badges.

none · 0
xs · 2
sm · 3
md · 4
pill · 46
full · circle

## Elevation & Depth

Depth is structural — colour-blocking and outlines, not shadows.

Level 0 — Flat
Level 1 — Outline
Level 2 — Colour Block
Level 3 — Dark Inversion

## Responsive Behavior

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.

390
600
800
1024
1280
1440