Renault

version alpha

name Renault

description | Renault's web presence pairs the freshly-modernised Renault diamond (the 2021 flat-line rhombus mark) with a stark black-and-white canvas, a signature Sunlight Yellow accent, and the proprietary NouvelR display typeface. The system reads as confident, photography-first automotive — large hero cars on neutral or atmospheric backdrops, square-edged or barely-rounded containers, and a small disciplined palette where every coloured element is intentional. Tile grids, full-bleed banners, and a recurring "configurator" surface (white card, yellow accent dots, neutral product chrome) carry the mass-market dealership tone without crossing into luxury.

colors primary: "#ffed00" primary-deep: "#e6d200" on-primary: "#000000" ink: "#000000" body: "#222222" charcoal: "#333333" mute: "#666666" ash: "#8a8a8a" stone: "#c4c4c4" on-dark: "#ffffff" on-dark-mute: "rgba(255,255,255,0.72)" canvas: "#ffffff" surface-soft: "#f7f7f7" surface-card: "#ffffff" surface-dark: "#000000" surface-deep: "#111111" hairline: "#f2f2f2" hairline-strong: "#000000" divider-dark: "rgba(255,255,255,0.16)" badge-new: "#ffed00" link: "#0000ee" error: "#be6464" warning: "#f0ad4e" success: "#8dc572" info: "#337ab7"

typography display-xl: fontFamily: NouvelR fontSize: 56px fontWeight: 700 lineHeight: 0.95 letterSpacing: 0 display-lg: fontFamily: NouvelR fontSize: 40px fontWeight: 700 lineHeight: 0.95 letterSpacing: 0 display-md: fontFamily: NouvelR fontSize: 32px fontWeight: 700 lineHeight: 0.95 letterSpacing: 0 heading-lg: fontFamily: NouvelR fontSize: 24px fontWeight: 700 lineHeight: 0.95 letterSpacing: 0 heading-md: fontFamily: NouvelR fontSize: 20px fontWeight: 700 lineHeight: 0.95 letterSpacing: 0 heading-sm: fontFamily: NouvelR fontSize: 18px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0 subtitle: fontFamily: NouvelR fontSize: 19.2px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0 body-lg: fontFamily: NouvelR fontSize: 18px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 body-md: fontFamily: NouvelR fontSize: 16px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0 body-sm: fontFamily: NouvelR fontSize: 14px fontWeight: 400 lineHeight: 1.57 letterSpacing: 0 button-lg: fontFamily: NouvelR fontSize: 16px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0 button-md: fontFamily: NouvelR fontSize: 14.4px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.144px button-sm: fontFamily: NouvelR fontSize: 13px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.13px caption: fontFamily: NouvelR fontSize: 12px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0 overline: fontFamily: NouvelR fontSize: 10px fontWeight: 700 lineHeight: 1.45 letterSpacing: 0

rounded none: 0px xs: 2px sm: 3px md: 4px pill: 46px full: 9999px

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

components button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.xs}" padding: 14px 24px height: 48px button-primary-pressed: backgroundColor: "{colors.primary-deep}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.xs}" button-secondary-dark: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.button-md}" rounded: "{rounded.xs}" padding: 14px 24px button-outline-dark: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.xs}" padding: 13px 23px button-outline-light: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.button-md}" rounded: "{rounded.xs}" padding: 13px 23px button-pill: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-sm}" rounded: "{rounded.pill}" padding: 8px 16px height: 36px button-icon-square: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.xs}" size: 40px text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: 12px 16px height: 48px hero-banner: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" rounded: "{rounded.none}" padding: 0 promo-tile-light: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.heading-lg}" rounded: "{rounded.none}" padding: 32px promo-tile-dark: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.heading-lg}" rounded: "{rounded.none}" padding: 32px promo-tile-yellow: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.heading-lg}" rounded: "{rounded.none}" padding: 32px vehicle-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.none}" padding: 0 configurator-row: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: 24px 0 configurator-swatch: backgroundColor: "{colors.surface-soft}" rounded: "{rounded.full}" size: 56px badge-new: backgroundColor: "{colors.badge-new}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: 6px 14px nav-bar: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.none}" height: 60px sub-nav-pill: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-sm}" rounded: "{rounded.pill}" padding: 8px 16px footer: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: 64px 24px

Overview

Renault's Turkish marketing surfaces are unapologetically high-contrast: a white canvas for browsing, a black canvas for product storytelling, and a single Sunlight Yellow accent ({colors.primary} — #ffed00) reserved for the most consequential actions. The brand's modernised flat diamond logo sets the tone — geometric, confident, slightly industrial — and the system follows suit. Square corners dominate, hairline borders are rare, and elevation is expressed through colour blocking rather than shadow.

The typography is monolithic. Every text on the site is set in NouvelR, Renault's bespoke display family, with a strong preference for weight 700 at display sizes (with a tight lineHeight: 0.95) and weight 400 for body. There is no secondary serif, no decorative italic, no script — the discipline is the signature.

Page rhythm cycles between three surface modes: a white catalogue mode for listings and configurators ({colors.canvas} with hairline-thin {colors.hairline} dividers), a black storytelling mode for hero sections, lifestyle imagery, and the lower half of campaign pages, and brief yellow accent moments ({colors.primary} tiles, "NEW" badges, R5-coded yellow paint shots) that punctuate the otherwise neutral palette.

Key Characteristics:

• Two-tone canvas system — {colors.canvas} (white) for browsing, {colors.surface-dark} (black) for storytelling — switched in full-bleed bands rather than subtle gradations.

• A single brand accent — {colors.primary} Sunlight Yellow — used scarcely on primary CTAs, "NEW" badges, R5 hero photography, and configurator dot indicators.

• NouvelR everywhere, with {typography.display-xl} headlines at 56px / weight 700 / lineHeight: 0.95 so condensed multi-line headlines stack cleanly.

• Square geometry: {rounded.xs} (2px) on buttons, {rounded.none} on tiles and product cards, {rounded.pill} reserved exclusively for sub-nav chips and decorative badges.

• Photography-first product tiles — vehicle photos full-bleed inside otherwise neutral cards, with copy stacked beneath rather than overlaid.

• Page-level rhythm cycles white → black → yellow accent → black, with the wordmark and footer always closing on {colors.surface-dark}.

Colors

Brand & Accent

• Sunlight Yellow ({colors.primary} — #ffed00): the brand accent. Reserved for primary CTAs, "NEW" / "yeni" badges, configurator dot indicators, and full-bleed promotional tiles. Never decorative.

• Sunlight Yellow Pressed ({colors.primary-deep} — #e6d200): the active/pressed state of {colors.primary} buttons and tiles.

• On-Primary ({colors.on-primary} — #000000): label colour on top of {colors.primary} surfaces. Yellow always pairs with black text — never white.

Surface

• Canvas ({colors.canvas} — #ffffff): the default page background and card surface.

• Surface Soft ({colors.surface-soft} — #f7f7f7): subtle elevation step for grouped configurator rows and inactive form fields.

• Surface Dark ({colors.surface-dark} — #000000): the alternate canvas, used for hero bands, footer, and full-bleed storytelling sections.

• Surface Deep ({colors.surface-deep} — #111111): a one-step-up elevation inside {colors.surface-dark} regions for inset cards and form panels.

• Hairline ({colors.hairline} — #f2f2f2): the soft 1px divider between rows on white surfaces.

• Hairline Strong ({colors.hairline-strong} — #000000): full-strength dividers on white, plus all card / button outlines.

• Divider Dark ({colors.divider-dark} — rgba(255,255,255,0.16)): the corresponding low-contrast divider used inside {colors.surface-dark} regions.

Text

• Ink ({colors.ink} — #000000): primary text colour on white surfaces. The same value also drives logos, icons, and outline borders — black is structural, not decorative.

• Body ({colors.body} — #222222): secondary body text where pure black would feel too heavy in long paragraphs.

• Charcoal ({colors.charcoal} — #333333): captions, metadata, and small labels.

• Mute ({colors.mute} — #666666): supporting text and inactive nav labels.

• Ash ({colors.ash} — #8a8a8a): placeholder text, disabled labels.

• Stone ({colors.stone} — #c4c4c4): disabled-state foreground.

• On-Dark ({colors.on-dark} — #ffffff): primary text on {colors.surface-dark} surfaces.

• On-Dark Mute ({colors.on-dark-mute} — rgba(255,255,255,0.72)): secondary text in dark regions; preserves the brand's high-contrast feel without resorting to mid-grey.

Semantic

• Error ({colors.error} — #be6464): muted desaturated red used for inline form errors. Notably warmer than typical pure-red error states.

• Warning ({colors.warning} — #f0ad4e): amber alert.

• Success ({colors.success} — #8dc572): muted green confirmation.

• Info ({colors.info} — #337ab7): a desaturated mid-blue used in informational chips.

• Link ({colors.link} — #0000ee): the unstyled-anchor default kept for fallback inline text links — production links inherit {colors.ink} and rely on underline/weight rather than colour.

Typography

Font Family

The entire system is set in NouvelR, Renault's proprietary display family, used across navigation, headlines, body, captions, and button labels. The family carries a slightly geometric, semi-condensed personality with tall x-heights and squared apexes that pair naturally with the diamond logomark.

When NouvelR cannot be licensed, suitable open-source substitutes include Inter Tight, Manrope, or HK Grotesk Semi Condensed — all share the geometric-with-warmth feel and adapt cleanly to weights 400 / 600 / 700. Tighten lineHeight on display sizes to ~0.95 to match the original; do not relax it.

Hierarchy

Token Size Weight Line Height Letter Spacing Use {typography.display-xl} 56px 700 0.95 0 Hero headlines, campaign titles ("E-TECH ELEKTRİKLİ", "REVOLUTION"). {typography.display-lg} 40px 700 0.95 0 Secondary section titles. {typography.display-md} 32px 700 0.95 0 Page-level H1 on sub-pages and configurator panels. {typography.heading-lg} 24px 700 0.95 0 Section headers, card titles. {typography.heading-md} 20px 700 0.95 0 Sub-section headers, prominent labels. {typography.heading-sm} 18px 700 1.0 0 Tile titles, list group headers. {typography.subtitle} 1