registry://designs/voltagent-awesome-design-md-renault
### Renault - French automotive. - Vivid aurora gradients, NouvelR proprietary typeface, zero-radius buttons - Renault's web presence pairs the freshly-modernised Renault diamond
| 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 |
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:
{colors.canvas} (white) for browsing, {colors.surface-dark} (black) for storytelling — switched in full-bleed bands rather than subtle gradations.{colors.primary} Sunlight Yellow — used scarcely on primary CTAs, "NEW" badges, R5 hero photography, and configurator dot indicators.{typography.display-xl} headlines at 56px / weight 700 / lineHeight: 0.95 so condensed multi-line headlines stack cleanly.{rounded.xs} (2px) on buttons, {rounded.none} on tiles and product cards, {rounded.pill} reserved exclusively for sub-nav chips and decorative badges.{colors.surface-dark}.{colors.primary} — #ffed00): the brand accent. Reserved for primary CTAs, "NEW" / "yeni" badges, configurator dot indicators, and full-bleed promotional tiles. Never decorative.{colors.primary-deep} — #e6d200): the active/pressed state of {colors.primary} buttons and tiles.{colors.on-primary} — #000000): label colour on top of {colors.primary} surfaces. Yellow always pairs with black text — never white.{colors.canvas} — #ffffff): the default page background and card surface.{colors.surface-soft} — #f7f7f7): subtle elevation step for grouped configurator rows and inactive form fields.{colors.surface-dark} — #000000): the alternate canvas, used for hero bands, footer, and full-bleed storytelling sections.{colors.surface-deep} — #111111): a one-step-up elevation inside {colors.surface-dark} regions for inset cards and form panels.{colors.hairline} — #f2f2f2): the soft 1px divider between rows on white surfaces.{colors.hairline-strong} — #000000): full-strength dividers on white, plus all card / button outlines.{colors.divider-dark} — rgba(255,255,255,0.16)): the corresponding low-contrast divider used inside {colors.surface-dark} regions.{colors.ink} — #000000): primary text colour on white surfaces. The same value also drives logos, icons, and outline borders — black is structural, not decorative.{colors.body} — #222222): secondary body text where pure black would feel too heavy in long paragraphs.{colors.charcoal} — #333333): captions, metadata, and small labels.{colors.mute} — #666666): supporting text and inactive nav labels.{colors.ash} — #8a8a8a): placeholder text, disabled labels.{colors.stone} — #c4c4c4): disabled-state foreground.{colors.on-dark} — #ffffff): primary text on {colors.surface-dark} surfaces.{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.{colors.error} — #be6464): muted desaturated red used for inline form errors. Notably warmer than typical pure-red error states.{colors.warning} — #f0ad4e): amber alert.{colors.success} — #8dc572): muted green confirmation.{colors.info} — #337ab7): a desaturated mid-blue used in informational chips.{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.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.
| 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} | 19.2px | 600 | 1.3 | 0 | Lead paragraphs, hero subtitles. |
{typography.body-lg} | 18px | 400 | 1.5 | 0 | Long-form body. |
{typography.body-md} | 16px | 400 | 1.4 | 0 | Default body and form fields. |
{typography.body-sm} | 14px | 400 | 1.57 | 0 | Captions, metadata. |
{typography.button-lg} | 16px | 700 | 1.0 | 0 | Large CTAs in hero bands. |
{typography.button-md} | 14.4px | 700 | 1.0 | 0.144px | Default button label across the system. |
{typography.button-sm} | 13px | 600 | 1.2 | 0.13px | Sub-nav pills, small in-card actions. |
{typography.caption} | 12px | 400 | 1.4 | 0 | Footer disclosure, regulatory text. |
{typography.overline} | 10px | 700 | 1.45 | 0 | Short uppercase labels above titles. |
lineHeight: 0.95. The tightness is what makes the brand feel confident rather than corporate.0.144px on {typography.button-md}) — almost imperceptible, but it adds the small bit of mechanical precision the brand wants on CTAs.NouvelR is licensed; substitutes (Inter Tight / Manrope / HK Grotesk Semi
Condensed) preserve the geometric character but typically render with
slightly looser line heights at display sizes — clamp display
lineHeight to 0.95 explicitly to match the source.
{spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 12px · {spacing.md} 16px · {spacing.lg} 20px · {spacing.xl} 24px · {spacing.xxl} 32px · {spacing.xxxl} 40px · {spacing.section} 80px.{spacing.section} (80px) on desktop, collapsing to {spacing.xxxl} (40px) on mobile.{spacing.xxl} (32px) all sides on desktop.{spacing.xl} (24px) top/bottom with hairline divider between rows.{rounded.none}) with the photography or solid colour as the background.{colors.hairline} dividers on white surfaces create the sense of catalogue precision; on dark surfaces, {colors.divider-dark} carries the same role.| Level | Treatment | Use |
|---|---|---|
| 0 — flat | No shadow, no border | Default page surface, full-bleed bands. |
| 1 — outline | 1px solid {colors.hairline-strong} or {colors.hairline} | Promo tiles on light, vehicle cards, configurator panels. |
| 2 — colour-blocked elevation | Surface colour shift (e.g. {colors.canvas} card sitting inside a {colors.surface-soft} band) | Configurator detail cards, related-content rows. |
| 3 — dark inversion | Card swaps to {colors.surface-dark} against a {colors.canvas} band | "Ticari araç" hero promo tiles, lifestyle storytelling cards. |
Drop shadows are extracted from the system but rarely visible on the marketing surfaces. When they appear, they are very subtle (~10% opacity, 2–4px blur) and used on floating elements like the configurator's sticky summary bar.
| Token | Value | Use |
|---|---|---|
{rounded.none} | 0px | Tiles, vehicle cards, dividers, banner bands, full-bleed images. |
{rounded.xs} | 2px | Default buttons (primary yellow, secondary black, outline). |
{rounded.sm} | 3px | Tab panels, small chips. |
{rounded.md} | 4px | Form labels, inline tags. |
{rounded.pill} | 46px | Sub-nav pills, "yeni" / "NEW" badges, decorative carousel chips. |
{rounded.full} | 9999px | Configurator colour swatches, avatar dots. |
{rounded.none}). No rounded vehicle hero shots, no soft-edged car cards.{rounded.full} circles to contrast with the otherwise square geometry.button-primary — yellow CTA
{colors.primary}, label {colors.on-primary}, type {typography.button-md}, padding 14px 24px, rounded: {rounded.xs}.button-primary-pressed (background {colors.primary-deep}).button-secondary-dark — solid black CTA
{colors.surface-dark}, label {colors.on-dark}, type {typography.button-md}, rounded: {rounded.xs}.{component.button-primary}, or the primary action when used on a yellow tile background.button-outline-dark — outlined CTA on light
{colors.canvas}, label {colors.ink}, 1px solid {colors.hairline-strong}, type {typography.button-md}, rounded: {rounded.xs}.button-outline-light — outlined CTA on dark
{colors.surface-dark}, label {colors.on-dark}, 1px solid {colors.on-dark}, type {typography.button-md}, rounded: {rounded.xs}.{component.button-outline-dark}.button-pill — sub-nav chip
{colors.canvas}, label {colors.ink}, 1px solid {colors.hairline-strong}, type {typography.button-sm}, rounded: {rounded.pill}, height 36px.button-icon-square — small icon button
{colors.canvas}, 1px solid {colors.hairline-strong}, rounded: {rounded.xs}, 40×40px square.promo-tile-light — white promo tile
{colors.canvas}, text {colors.ink}, type {typography.heading-lg}, padding {spacing.xxl}, rounded: {rounded.none}.promo-tile-dark — black promo tile
{colors.surface-dark}, text {colors.on-dark}, type {typography.heading-lg}, padding {spacing.xxl}, rounded: {rounded.none}.promo-tile-yellow — accent promo tile
{colors.primary}, text {colors.on-primary}, type {typography.heading-lg}, padding {spacing.xxl}, rounded: {rounded.none}.vehicle-card — car listing card
{colors.canvas}, full-bleed product photography on top, text below, rounded: {rounded.none}, no outer border.{typography.heading-md}), variant subtitle ({typography.body-sm}), and a single trailing arrow icon.hero-banner — full-bleed hero
{colors.surface-dark} with full-bleed photo or atmospheric gradient, content stacked left, type {typography.display-xl} for the title.text-input — default input
{colors.canvas}, text {colors.ink}, type {typography.body-md}, 1px bottom border {colors.hairline-strong}, rounded: {rounded.none}, padding {spacing.sm} {spacing.md}, height 48px.configurator-row — option list row
{colors.canvas}, separator hairline {colors.hairline} between rows, padding {spacing.xl} top/bottom, type {typography.body-md}.configurator-swatch — circular colour pick
{colors.surface-soft} (or the actual car colour), rounded: {rounded.full}, 56×56px.{colors.hairline-strong} ring.nav-bar — top nav (desktop)
{colors.canvas}, type {typography.button-md}, height 60px, hairline {colors.hairline} bottom border.nav-bar (mobile)
sub-nav-pill — pill-style sub-nav
{component.button-pill} styling.badge-new — "yeni" badge
{colors.primary}, label {colors.on-primary}, type {typography.button-md}, rounded: {rounded.full}, padding 6px 14px.footer — global footer
{colors.surface-dark}, text {colors.on-dark}, type {typography.body-sm}, padding 64px 24px.{colors.divider-dark}.{colors.primary} exclusively for primary CTAs, "yeni"/"NEW" badges, and at most one accent promo tile per band — {component.promo-tile-yellow} is intentionally rare.{colors.primary} only with {colors.on-primary} text. Yellow + white is forbidden.{typography.display-xl} weight 700 with lineHeight: 0.95 so they stack tightly on multi-line wraps.{rounded.xs} (2px) on every standard button — the near-flat corner is part of the brand.{colors.canvas} and {colors.surface-dark} for storytelling rhythm. Avoid mid-greys as section backgrounds.{component.vehicle-card} with copy stacked beneath, never overlaid.{component.sub-nav-pill} ({rounded.pill}) only for sub-nav and small filter rows — never for primary CTAs.{colors.error}, {colors.success}, {colors.warning}) are functional, not decorative.{colors.primary} to body text or large surfaces beyond the single accent tile per band.{colors.body}, {colors.charcoal}, {colors.mute} — {colors.ash} and {colors.stone} are reserved for placeholders and disabled states.| Name | Width | Key Changes |
|---|---|---|
| Desktop XL | ≥ 1440px | Full max-width container, 3–4 column vehicle grid, 2-up promo tile grid. |
| Desktop | 1280–1439px | Same layout, container shrinks to viewport with {spacing.xl} side padding. |
| Tablet Large | 1024–1279px | Vehicle grid drops to 3-up, configurator left/right panes resize to 55/45. |
| Tablet | 768–1023px | Promo tile grid collapses to 2-up, sub-nav pills become horizontal scroll. |
| Mobile Large | 426–767px | Vehicle grid 2-up, configurator switches to stacked panes (visualisation on top, options below), nav collapses to hamburger. |
| Mobile | ≤ 425px | All grids 1-up, hero {typography.display-xl} clamps to ~40px, section padding {spacing.section} collapses to {spacing.xxxl}. |
{component.button-primary} is 48px tall, comfortably exceeding WCAG AAA.{component.sub-nav-pill} (36px) is bumped to 40px tall on mobile via increased vertical padding.{component.button-icon-square} (40px) sits at the WCAG AA minimum and remains tappable, but should grow to 44px when used as a primary navigation control.{spacing.xxl} to {spacing.lg}.{typography.display-xl} 56px → 40px → 32px across the breakpoint ladder.{component.promo-tile-dark} keeps the same 16:9 framing across breakpoints, cropping inward rather than letterboxing.{rounded.xs}, {colors.canvas} / {colors.surface-dark}, and NouvelR — only the role-specific tokens ({colors.primary}, {component.promo-tile-yellow}) shift between variants.{colors.primary}, {component.button-primary-pressed}, {rounded.pill}) — do not paraphrase.npx @google/design.md lint DESIGN.md after edits; the orphaned-tokens warning will catch unused entries before they ship.-pressed, -disabled, -outline) — do not bury them in prose.{typography.body-md}; reach for {typography.subtitle} only on hero subtitles and lead paragraphs.{colors.primary} scarce — if more than one yellow element appears per viewport, ask whether one of them should drop to {colors.surface-dark} or {colors.canvas} instead.button-primary-pressed documents the extracted darkened-yellow value, but no other component has a pressed variant promoted to the YAML.{colors.ink}, but this is not visually confirmed on the captured pages.Still exploring the format? Browse the full DESIGN.md registry or draft a new system with our DESIGN.md generator.
Community listing for AI design workflows—not necessarily affiliated with any brand referenced in the name or summary. For context on the format, see Google Stitch.
Share your design system with AI agents worldwide