savant-code 0.0.22 → 0.0.23

package/savant-design-systems/resources/renault-design-analysis.json

@@ -0,0 +1,916 @@
+{
+  "schemaVersion": "1",
+  "id": "renault-design-analysis",
+  "displayName": "Renault-design-analysis",
+  "description": "Renault's web presence pairs the freshly-modernised Renault diamond\n(the 2021 flat-line rhombus mark) with a stark black-and-white canvas, a\nsignature Sunlight Yellow accent, and the proprietary NouvelR display\ntypeface. The system reads as confident, photography-first automotive — large\nhero cars on neutral or atmospheric backdrops, square-edged or barely-rounded\ncontainers, and a small disciplined palette where every coloured element is\nintentional. Tile grids, full-bleed banners, and a recurring \"configurator\"\nsurface (white card, yellow accent dots, neutral product chrome) carry the\nmass-market dealership tone without crossing into luxury.\n",
+  "source": "embedded",
+  "status": "curated-reference",
+  "targets": [
+    "terminal",
+    "react",
+    "web"
+  ],
+  "contentPath": "packages/design-systems/library/renault.design.md",
+  "sourceContentHash": "b343df9a67e57f248e9eee704f52b17dff9cf6a46d1dc9f8d7ab36741940db59",
+  "normalizedContentHash": "3cccd7576b9623bfa58beab1e1eccaaf2dab5976c5f6066fbf9908db94ac1f60",
+  "provenance": {
+    "sourceRepository": "VoltAgent/awesome-design-md",
+    "sourceRevision": "working-tree-curated-snapshot",
+    "sourcePath": "packages/design-systems/library/renault.design.md",
+    "license": "MIT"
+  },
+  "fonts": [
+    {
+      "family": "NouvelR",
+      "fallback": [
+        "system-ui",
+        "sans-serif"
+      ],
+      "redistributable": false
+    }
+  ],
+  "tokens": {
+    "colors": {
+      "ash": "#8a8a8a",
+      "badge-new": "#ffed00",
+      "body": "#222222",
+      "canvas": "#ffffff",
+      "charcoal": "#333333",
+      "divider-dark": "rgba(255,255,255,0.16)",
+      "error": "#be6464",
+      "hairline": "#f2f2f2",
+      "hairline-strong": "#000000",
+      "info": "#337ab7",
+      "ink": "#000000",
+      "link": "#0000ee",
+      "mute": "#666666",
+      "on-dark": "#ffffff",
+      "on-dark-mute": "rgba(255,255,255,0.72)",
+      "on-primary": "#000000",
+      "primary": "#ffed00",
+      "primary-deep": "#e6d200",
+      "stone": "#c4c4c4",
+      "success": "#8dc572",
+      "surface-card": "#ffffff",
+      "surface-dark": "#000000",
+      "surface-deep": "#111111",
+      "surface-soft": "#f7f7f7",
+      "warning": "#f0ad4e"
+    },
+    "typography": {
+      "display-xl": {
+        "fontFamily": "NouvelR",
+        "fontSize": "56px",
+        "fontWeight": 700,
+        "letterSpacing": 0,
+        "lineHeight": 0.95
+      },
+      "display-lg": {
+        "fontFamily": "NouvelR",
+        "fontSize": "40px",
+        "fontWeight": 700,
+        "letterSpacing": 0,
+        "lineHeight": 0.95
+      },
+      "display-md": {
+        "fontFamily": "NouvelR",
+        "fontSize": "32px",
+        "fontWeight": 700,
+        "letterSpacing": 0,
+        "lineHeight": 0.95
+      },
+      "heading-lg": {
+        "fontFamily": "NouvelR",
+        "fontSize": "24px",
+        "fontWeight": 700,
+        "letterSpacing": 0,
+        "lineHeight": 0.95
+      },
+      "heading-md": {
+        "fontFamily": "NouvelR",
+        "fontSize": "20px",
+        "fontWeight": 700,
+        "letterSpacing": 0,
+        "lineHeight": 0.95
+      },
+      "heading-sm": {
+        "fontFamily": "NouvelR",
+        "fontSize": "18px",
+        "fontWeight": 700,
+        "letterSpacing": 0,
+        "lineHeight": 1
+      },
+      "subtitle": {
+        "fontFamily": "NouvelR",
+        "fontSize": "19.2px",
+        "fontWeight": 600,
+        "letterSpacing": 0,
+        "lineHeight": 1.3
+      },
+      "body-lg": {
+        "fontFamily": "NouvelR",
+        "fontSize": "18px",
+        "fontWeight": 400,
+        "letterSpacing": 0,
+        "lineHeight": 1.5
+      },
+      "body-md": {
+        "fontFamily": "NouvelR",
+        "fontSize": "16px",
+        "fontWeight": 400,
+        "letterSpacing": 0,
+        "lineHeight": 1.4
+      },
+      "body-sm": {
+        "fontFamily": "NouvelR",
+        "fontSize": "14px",
+        "fontWeight": 400,
+        "letterSpacing": 0,
+        "lineHeight": 1.57
+      },
+      "button-lg": {
+        "fontFamily": "NouvelR",
+        "fontSize": "16px",
+        "fontWeight": 700,
+        "letterSpacing": 0,
+        "lineHeight": 1
+      },
+      "button-md": {
+        "fontFamily": "NouvelR",
+        "fontSize": "14.4px",
+        "fontWeight": 700,
+        "letterSpacing": "0.144px",
+        "lineHeight": 1
+      },
+      "button-sm": {
+        "fontFamily": "NouvelR",
+        "fontSize": "13px",
+        "fontWeight": 600,
+        "letterSpacing": "0.13px",
+        "lineHeight": 1.2
+      },
+      "caption": {
+        "fontFamily": "NouvelR",
+        "fontSize": "12px",
+        "fontWeight": 400,
+        "letterSpacing": 0,
+        "lineHeight": 1.4
+      },
+      "overline": {
+        "fontFamily": "NouvelR",
+        "fontSize": "10px",
+        "fontWeight": 700,
+        "letterSpacing": 0,
+        "lineHeight": 1.45
+      }
+    },
+    "spacing": {
+      "lg": "20px",
+      "md": "16px",
+      "section": "80px",
+      "sm": "12px",
+      "xl": "24px",
+      "xs": "8px",
+      "xxl": "32px",
+      "xxs": "4px",
+      "xxxl": "40px"
+    },
+    "radius": {
+      "full": "9999px",
+      "md": "4px",
+      "none": "0px",
+      "pill": "46px",
+      "sm": "3px",
+      "xs": "2px"
+    },
+    "components": {
+      "button-primary": {
+        "backgroundColor": "{colors.primary}",
+        "height": "48px",
+        "padding": "14px 24px",
+        "rounded": "{rounded.xs}",
+        "textColor": "{colors.on-primary}",
+        "typography": "{typography.button-md}"
+      },
+      "button-primary-pressed": {
+        "backgroundColor": "{colors.primary-deep}",
+        "rounded": "{rounded.xs}",
+        "textColor": "{colors.on-primary}",
+        "typography": "{typography.button-md}"
+      },
+      "button-secondary-dark": {
+        "backgroundColor": "{colors.surface-dark}",
+        "padding": "14px 24px",
+        "rounded": "{rounded.xs}",
+        "textColor": "{colors.on-dark}",
+        "typography": "{typography.button-md}"
+      },
+      "button-outline-dark": {
+        "backgroundColor": "{colors.canvas}",
+        "padding": "13px 23px",
+        "rounded": "{rounded.xs}",
+        "textColor": "{colors.ink}",
+        "typography": "{typography.button-md}"
+      },
+      "button-outline-light": {
+        "backgroundColor": "{colors.surface-dark}",
+        "padding": "13px 23px",
+        "rounded": "{rounded.xs}",
+        "textColor": "{colors.on-dark}",
+        "typography": "{typography.button-md}"
+      },
+      "button-pill": {
+        "backgroundColor": "{colors.canvas}",
+        "height": "36px",
+        "padding": "8px 16px",
+        "rounded": "{rounded.pill}",
+        "textColor": "{colors.ink}",
+        "typography": "{typography.button-sm}"
+      },
+      "button-icon-square": {
+        "backgroundColor": "{colors.canvas}",
+        "rounded": "{rounded.xs}",
+        "size": "40px",
+        "textColor": "{colors.ink}"
+      },
+      "text-input": {
+        "backgroundColor": "{colors.canvas}",
+        "height": "48px",
+        "padding": "12px 16px",
+        "rounded": "{rounded.none}",
+        "textColor": "{colors.ink}",
+        "typography": "{typography.body-md}"
+      },
+      "hero-banner": {
+        "backgroundColor": "{colors.surface-dark}",
+        "padding": 0,
+        "rounded": "{rounded.none}",
+        "textColor": "{colors.on-dark}"
+      },
+      "promo-tile-light": {
+        "backgroundColor": "{colors.canvas}",
+        "padding": "32px",
+        "rounded": "{rounded.none}",
+        "textColor": "{colors.ink}",
+        "typography": "{typography.heading-lg}"
+      },
+      "promo-tile-dark": {
+        "backgroundColor": "{colors.surface-dark}",
+        "padding": "32px",
+        "rounded": "{rounded.none}",
+        "textColor": "{colors.on-dark}",
+        "typography": "{typography.heading-lg}"
+      },
+      "promo-tile-yellow": {
+        "backgroundColor": "{colors.primary}",
+        "padding": "32px",
+        "rounded": "{rounded.none}",
+        "textColor": "{colors.on-primary}",
+        "typography": "{typography.heading-lg}"
+      },
+      "vehicle-card": {
+        "backgroundColor": "{colors.canvas}",
+        "padding": 0,
+        "rounded": "{rounded.none}",
+        "textColor": "{colors.ink}"
+      },
+      "configurator-row": {
+        "backgroundColor": "{colors.canvas}",
+        "padding": "24px 0",
+        "rounded": "{rounded.none}",
+        "textColor": "{colors.ink}",
+        "typography": "{typography.body-md}"
+      },
+      "configurator-swatch": {
+        "backgroundColor": "{colors.surface-soft}",
+        "rounded": "{rounded.full}",
+        "size": "56px"
+      },
+      "badge-new": {
+        "backgroundColor": "{colors.badge-new}",
+        "padding": "6px 14px",
+        "rounded": "{rounded.full}",
+        "textColor": "{colors.on-primary}",
+        "typography": "{typography.button-md}"
+      },
+      "nav-bar": {
+        "backgroundColor": "{colors.canvas}",
+        "height": "60px",
+        "rounded": "{rounded.none}",
+        "textColor": "{colors.ink}",
+        "typography": "{typography.button-md}"
+      },
+      "sub-nav-pill": {
+        "backgroundColor": "{colors.canvas}",
+        "padding": "8px 16px",
+        "rounded": "{rounded.pill}",
+        "textColor": "{colors.ink}",
+        "typography": "{typography.button-sm}"
+      },
+      "footer": {
+        "backgroundColor": "{colors.surface-dark}",
+        "padding": "64px 24px",
+        "rounded": "{rounded.none}",
+        "textColor": "{colors.on-dark}",
+        "typography": "{typography.body-sm}"
+      }
+    },
+    "extensions": {
+      "description": "Renault's web presence pairs the freshly-modernised Renault diamond\n(the 2021 flat-line rhombus mark) with a stark black-and-white canvas, a\nsignature Sunlight Yellow accent, and the proprietary NouvelR display\ntypeface. The system reads as confident, photography-first automotive — large\nhero cars on neutral or atmospheric backdrops, square-edged or barely-rounded\ncontainers, and a small disciplined palette where every coloured element is\nintentional. Tile grids, full-bleed banners, and a recurring \"configurator\"\nsurface (white card, yellow accent dots, neutral product chrome) carry the\nmass-market dealership tone without crossing into luxury.\n",
+      "name": "Renault-design-analysis",
+      "version": "alpha"
+    }
+  }
+}
+
+---
+
+---
+version: alpha
+name: Renault-design-analysis
+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}` | 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. |
+
+### Principles
+- Display sizes always weight 700, always at `lineHeight: 0.95`. The tightness is what makes the brand feel confident rather than corporate.
+- Body copy stays at weight 400 — never 500. The contrast between body and display is part of the system.
+- Button labels carry a tiny positive letter-spacing (`0.144px` on `{typography.button-md}`) — almost imperceptible, but it adds the small bit of mechanical precision the brand wants on CTAs.
+- No italics, no script, no decorative ligatures.
+
+### Note on Font Substitutes
+
+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.
+
+## Layout
+
+### Spacing System
+- **Base unit**: 4px, with the working scale built on multiples of 4 and 8.
+- **Tokens**: `{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.
+- Section padding (full-bleed band → next band): `{spacing.section}` (80px) on desktop, collapsing to `{spacing.xxxl}` (40px) on mobile.
+- Promo-tile internal padding: `{spacing.xxl}` (32px) all sides on desktop.
+- Configurator row vertical padding: `{spacing.xl}` (24px) top/bottom with hairline divider between rows.
+
+### Grid & Container
+- **Max content width** ≈ 1440px. Beyond that, content remains centred and the dark/light bands extend full-bleed.
+- **Promo grid** on the homepage: a 2-column tile grid on desktop, dropping to 1-up on mobile. Each tile is square-cornered (`{rounded.none}`) with the photography or solid colour as the background.
+- **Vehicle range grids**: 3 to 4 cars per row at desktop, collapsing 2-up at tablet and 1-up at small mobile.
+- **Configurator** uses a fixed left visualisation pane (~60% width) with a right-hand scrolling option list (~40% width) on desktop.
+
+### Whitespace Philosophy
+- Whitespace is structural, not decorative. Sections are separated by colour-blocking (white → black) rather than soft padding ramps.
+- Inside cards and configurator rows, padding is generous but never airy — the brand is mass-market, so density is acceptable.
+- Hairline `{colors.hairline}` dividers on white surfaces create the sense of catalogue precision; on dark surfaces, `{colors.divider-dark}` carries the same role.
+
+## Elevation & Depth
+
+| 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.
+
+### Decorative Depth
+- The R5 hero band uses an atmospheric mesh-gradient backdrop — purple-to-pink-to-yellow glow behind the car silhouette — that acts as the only true atmospheric depth in the system. Everywhere else, depth is structural (colour-blocking + outlines), not atmospheric.
+- E-TECH electric powertrain pages use a luminous magenta-to-violet gradient behind cutaway diagrams, reserved for the electric sub-brand.
+
+## Shapes
+
+### Border Radius Scale
+
+| 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. |
+
+### Photography Geometry
+- Vehicle photography is **always square-cornered** (`{rounded.none}`). No rounded vehicle hero shots, no soft-edged car cards.
+- Aspect ratios cluster around **16:9** (hero bands), **1:1** (square promo tiles), and **4:3** (vehicle range cards). Lifestyle imagery sometimes runs **2:1 wide** for full-bleed bands.
+- Avatars and small profile cues — when present — use `{rounded.full}` circles to contrast with the otherwise square geometry.
+
+## Components
+
+### Buttons
+
+**`button-primary`** — yellow CTA
+- Background `{colors.primary}`, label `{colors.on-primary}`, type `{typography.button-md}`, padding `14px 24px`, `rounded: {rounded.xs}`.
+- The single most important action on a page (e.g. "Hemen randevu al", "Hesapla", "Konfigüratörü başlat").
+- Pressed state lives in `button-primary-pressed` (background `{colors.primary-deep}`).
+
+**`button-secondary-dark`** — solid black CTA
+- Background `{colors.surface-dark}`, label `{colors.on-dark}`, type `{typography.button-md}`, `rounded: {rounded.xs}`.
+- Equal-weight secondary action paired with `{component.button-primary}`, or the primary action when used on a yellow tile background.
+
+**`button-outline-dark`** — outlined CTA on light
+- Background `{colors.canvas}`, label `{colors.ink}`, 1px solid `{colors.hairline-strong}`, type `{typography.button-md}`, `rounded: {rounded.xs}`.
+- Tertiary action; appears alongside primary/secondary for "Detayları gör", "Modeller", etc.
+
+**`button-outline-light`** — outlined CTA on dark
+- Background `{colors.surface-dark}`, label `{colors.on-dark}`, 1px solid `{colors.on-dark}`, type `{typography.button-md}`, `rounded: {rounded.xs}`.
+- The dark-canvas counterpart to `{component.button-outline-dark}`.
+
+**`button-pill`** — sub-nav chip
+- Background `{colors.canvas}`, label `{colors.ink}`, 1px solid `{colors.hairline-strong}`, type `{typography.button-sm}`, `rounded: {rounded.pill}`, height 36px.
+- The only place the system uses a pill — for top-level filter chips ("Servis & randevu", "Sahiplik dönemi geçişi", "Kampanyalar") and configurator tab switches.
+
+**`button-icon-square`** — small icon button
+- Background `{colors.canvas}`, 1px solid `{colors.hairline-strong}`, `rounded: {rounded.xs}`, 40×40px square.
+- Carousel arrows, share, language switcher.
+
+### Cards & Containers
+
+**`promo-tile-light`** — white promo tile
+- Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.heading-lg}`, padding `{spacing.xxl}`, `rounded: {rounded.none}`.
+- Used in the homepage 2-up grid for "Hybrid araç modelleri", "binek araç satış kampanyaları" tiles.
+
+**`promo-tile-dark`** — black promo tile
+- Background `{colors.surface-dark}`, text `{colors.on-dark}`, type `{typography.heading-lg}`, padding `{spacing.xxl}`, `rounded: {rounded.none}`.
+- Lifestyle / commercial-vehicle storytelling tiles ("ticari araç satış kampanyaları").
+
+**`promo-tile-yellow`** — accent promo tile
+- Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.heading-lg}`, padding `{spacing.xxl}`, `rounded: {rounded.none}`.
+- The single "PARLAK SARI" / "Sunlight Yellow" attention tile that anchors a campaign band. Reserved — usually one per page maximum.
+
+**`vehicle-card`** — car listing card
+- Background `{colors.canvas}`, full-bleed product photography on top, text below, `rounded: {rounded.none}`, no outer border.
+- Includes vehicle name (`{typography.heading-md}`), variant subtitle (`{typography.body-sm}`), and a single trailing arrow icon.
+
+**`hero-banner`** — full-bleed hero
+- Background `{colors.surface-dark}` with full-bleed photo or atmospheric gradient, content stacked left, type `{typography.display-xl}` for the title.
+- "SCENIC E-TECH ELEKTRİKLİ" hero on the homepage.
+
+### Inputs & Forms
+
+**`text-input`** — default input
+- Background `{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.
+- Inputs intentionally minimal — borderless on top and sides, single hairline at the bottom — keeping the catalogue feel.
+
+### Configurator
+
+**`configurator-row`** — option list row
+- Background `{colors.canvas}`, separator hairline `{colors.hairline}` between rows, padding `{spacing.xl}` top/bottom, type `{typography.body-md}`.
+- Right-side scrolling list on the configurator: "kasa tipi", "motor seçimi", "versiyon seçimi", "renk seçenekleri", etc.
+
+**`configurator-swatch`** — circular colour pick
+- Background `{colors.surface-soft}` (or the actual car colour), `rounded: {rounded.full}`, 56×56px.
+- Used for paint colour selection. Active state adds a 1px solid `{colors.hairline-strong}` ring.
+
+### Navigation
+
+**`nav-bar`** — top nav (desktop)
+- Background `{colors.canvas}`, type `{typography.button-md}`, height 60px, hairline `{colors.hairline}` bottom border.
+- Left: diamond logomark. Centre: top-level nav ("Modeller", "Hizmetler", "Renault Yaşamı", "MyRenault"). Right: language switcher + login icon.
+
+**`nav-bar`** (mobile)
+- Same height 60px, collapses centre nav into a hamburger icon. Logo stays left, login stays right.
+
+**`sub-nav-pill`** — pill-style sub-nav
+- Pill chips set in a horizontal scroll bar between hero and content body (e.g. "Servis & randevu", "Sahiplik dönemi geçişi", "Kampanyalar"), `{component.button-pill}` styling.
+
+### Signature Components
+
+**`badge-new`** — "yeni" badge
+- Background `{colors.primary}`, label `{colors.on-primary}`, type `{typography.button-md}`, `rounded: {rounded.full}`, padding `6px 14px`.
+- Anchored on the bottom-left of new vehicle cards.
+
+**`footer`** — global footer
+- Background `{colors.surface-dark}`, text `{colors.on-dark}`, type `{typography.body-sm}`, padding `64px 24px`.
+- Three-column legal/quick-links/locale grid above a single-line copyright row separated by `{colors.divider-dark}`.
+
+## Do's and Don'ts
+
+### Do
+- Reserve `{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.
+- Pair `{colors.primary}` only with `{colors.on-primary}` text. Yellow + white is forbidden.
+- Set everything in **NouvelR** — no secondary serif, no script, no decorative italic.
+- Hold display headlines at `{typography.display-xl}` weight 700 with `lineHeight: 0.95` so they stack tightly on multi-line wraps.
+- Use `{rounded.xs}` (2px) on every standard button — the near-flat corner is part of the brand.
+- Switch full bands between `{colors.canvas}` and `{colors.surface-dark}` for storytelling rhythm. Avoid mid-greys as section backgrounds.
+- Show vehicle photography full-bleed inside `{component.vehicle-card}` with copy stacked beneath, never overlaid.
+- Use `{component.sub-nav-pill}` (`{rounded.pill}`) only for sub-nav and small filter rows — never for primary CTAs.
+
+### Don't
+- Don't introduce a secondary accent colour. Yellow is the only brand accent; semantic colours (`{colors.error}`, `{colors.success}`, `{colors.warning}`) are functional, not decorative.
+- Don't round vehicle cards or promo tiles. Square-cornered photography is core to the brand expression.
+- Don't soften body weights to 500 or 600 — the system relies on the 400 / 700 contrast.
+- Don't apply `{colors.primary}` to body text or large surfaces beyond the single accent tile per band.
+- Don't add atmospheric gradient washes outside the dedicated R5 / E-TECH hero contexts.
+- Don't pair light grey text on white. Body text steps through `{colors.body}`, `{colors.charcoal}`, `{colors.mute}` — `{colors.ash}` and `{colors.stone}` are reserved for placeholders and disabled states.
+- Don't add drop shadows to vehicle cards or promo tiles — the system is shadow-free at the catalogue level.
+
+## Responsive Behavior
+
+### Breakpoints
+
+| 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}`. |
+
+### Touch Targets
+- All buttons ship at minimum 44×44px on mobile; default `{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.
+
+### Collapsing Strategy
+- Top-level nav collapses to hamburger at < 1024px; the logo and login icon stay anchored.
+- 2-up promo grid collapses to 1-up at < 768px; tile padding shrinks from `{spacing.xxl}` to `{spacing.lg}`.
+- Configurator switches from side-by-side to stacked at < 1024px, with the visualisation pinned to the top of the viewport on scroll.
+- Display headlines clamp: `{typography.display-xl}` 56px → 40px → 32px across the breakpoint ladder.
+- Sub-nav pills convert from a wrap row to a horizontal scroll-rail at < 768px.
+
+### Image Behavior
+- Vehicle photography is served at 1.5× and 2× DPR; below 768px, the system swaps to a portrait-oriented composition where art direction allows.
+- Hero atmospheric gradients (R5, E-TECH) load lazily after primary content; they are not blocking.
+- Lifestyle / commercial photography in `{component.promo-tile-dark}` keeps the same 16:9 framing across breakpoints, cropping inward rather than letterboxing.
+
+## Iteration Guide
+
+1. Focus on ONE component at a time. Most components share `{rounded.xs}`, `{colors.canvas}` / `{colors.surface-dark}`, and NouvelR — only the role-specific tokens (`{colors.primary}`, `{component.promo-tile-yellow}`) shift between variants.
+2. Reference component names and tokens directly (`{colors.primary}`, `{component.button-primary-pressed}`, `{rounded.pill}`) — do not paraphrase.
+3. Run `npx @google/design.md lint DESIGN.md` after edits; the orphaned-tokens warning will catch unused entries before they ship.
+4. Add new variants as separate entries (`-pressed`, `-disabled`, `-outline`) — do not bury them in prose.
+5. Default body type to `{typography.body-md}`; reach for `{typography.subtitle}` only on hero subtitles and lead paragraphs.
+6. Keep `{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.
+
+## Known Gaps
+
+- Active/pressed visual states are not consistently observable in static surfaces; `button-primary-pressed` documents the extracted darkened-yellow value, 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}`, but this is not visually confirmed on the captured pages.