Renault Design System

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} — #ffffff — with hairline-thin {colors.hairline} — #f2f2f2 — dividers), a black storytelling mode for hero sections, lifestyle imagery, and the lower half of campaign pages, and brief yellow accent moments ({colors.primary} — #ffed00 — tiles, "NEW" badges, R5-coded yellow paint shots) that punctuate the otherwise neutral palette.

Key Characteristics:

• Two-tone canvas system — {colors.canvas} (#ffffff) for browsing, {colors.surface-dark} (#000000) for storytelling — switched in full-bleed bands rather than subtle gradations.
• A single brand accent — {colors.primary} (#ffed00) 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} (0px) on tiles and product cards, {rounded.pill} (46px) 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} (#000000).

Known Gaps

• Active/pressed visual states are not consistently observable in static surfaces; button-primary-pressed documents the extracted darkened-yellow value (#e6d200), but no other component has a pressed variant promoted to the YAML.
• Drop-shadow values exist in the extracted tokens but are rarely surfaced visually; only the configurator's sticky summary bar uses them on the captured pages.
• The MyRenault application surfaces (logged-in product) are out of scope for this extraction — only the public marketing canvas is documented.
• Form-field focus styling is not extracted; the system likely relies on a thicker bottom border at {colors.ink} (#000000), but this is not visually confirmed on the captured pages.