{
  "$schema": "https://tr.designtokens.org/format/",
  "$description": "Design tokens for Renault",
  "meta": {
    "name": "Renault",
    "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.",
    "theme": "light"
  },
  "color": {
    "primary": {
      "$value": "#ffed00",
      "$type": "color",
      "$description": "Use for the primary role."
    },
    "primary-deep": {
      "$value": "#e6d200",
      "$type": "color",
      "$description": "Use for the primary deep role."
    },
    "on-primary": {
      "$value": "#000000",
      "$type": "color",
      "$description": "Use for the on primary role."
    },
    "ink": {
      "$value": "#000000",
      "$type": "color",
      "$description": "Use for the ink role."
    },
    "body": {
      "$value": "#222222",
      "$type": "color",
      "$description": "Use for the body role."
    },
    "charcoal": {
      "$value": "#333333",
      "$type": "color",
      "$description": "Use for the charcoal role."
    },
    "mute": {
      "$value": "#666666",
      "$type": "color",
      "$description": "Use for the mute role."
    },
    "ash": {
      "$value": "#8a8a8a",
      "$type": "color",
      "$description": "Use for the ash role."
    },
    "stone": {
      "$value": "#c4c4c4",
      "$type": "color",
      "$description": "Use for the stone role."
    },
    "on-dark": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the on dark role."
    },
    "on-dark-mute": {
      "$value": "rgba(255,255,255,0.72)",
      "$type": "color",
      "$description": "Use for the on dark mute role."
    },
    "canvas": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the canvas role."
    },
    "surface-soft": {
      "$value": "#f7f7f7",
      "$type": "color",
      "$description": "Use for the surface soft role."
    },
    "surface-card": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the surface card role."
    },
    "surface-dark": {
      "$value": "#000000",
      "$type": "color",
      "$description": "Use for the surface dark role."
    },
    "surface-deep": {
      "$value": "#111111",
      "$type": "color",
      "$description": "Use for the surface deep role."
    },
    "hairline": {
      "$value": "#f2f2f2",
      "$type": "color",
      "$description": "Use for the hairline role."
    },
    "hairline-strong": {
      "$value": "#000000",
      "$type": "color",
      "$description": "Use for the hairline strong role."
    },
    "divider-dark": {
      "$value": "rgba(255,255,255,0.16)",
      "$type": "color",
      "$description": "Use for the divider dark role."
    },
    "badge-new": {
      "$value": "#ffed00",
      "$type": "color",
      "$description": "Use for the badge new role."
    },
    "link": {
      "$value": "#0000ee",
      "$type": "color",
      "$description": "Use for the link role."
    },
    "error": {
      "$value": "#be6464",
      "$type": "color",
      "$description": "Use for the error role."
    },
    "warning": {
      "$value": "#f0ad4e",
      "$type": "color",
      "$description": "Use for the warning role."
    },
    "success": {
      "$value": "#8dc572",
      "$type": "color",
      "$description": "Use for the success role."
    },
    "info": {
      "$value": "#337ab7",
      "$type": "color",
      "$description": "Use for the info role."
    }
  },
  "typography": {
    "display-xl": {
      "$value": {
        "fontFamily": "NouvelR",
        "fontSize": "56px",
        "fontWeight": 700,
        "lineHeight": 0.95,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for display xl."
    },
    "display-lg": {
      "$value": {
        "fontFamily": "NouvelR",
        "fontSize": "40px",
        "fontWeight": 700,
        "lineHeight": 0.95,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for display lg."
    },
    "display-md": {
      "$value": {
        "fontFamily": "NouvelR",
        "fontSize": "32px",
        "fontWeight": 700,
        "lineHeight": 0.95,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for display md."
    },
    "heading-lg": {
      "$value": {
        "fontFamily": "NouvelR",
        "fontSize": "24px",
        "fontWeight": 700,
        "lineHeight": 0.95,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for heading lg."
    },
    "heading-md": {
      "$value": {
        "fontFamily": "NouvelR",
        "fontSize": "20px",
        "fontWeight": 700,
        "lineHeight": 0.95,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for heading md."
    },
    "heading-sm": {
      "$value": {
        "fontFamily": "NouvelR",
        "fontSize": "18px",
        "fontWeight": 700,
        "lineHeight": 1,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for heading sm."
    },
    "subtitle": {
      "$value": {
        "fontFamily": "NouvelR",
        "fontSize": "19.2px",
        "fontWeight": 600,
        "lineHeight": 1.3,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for subtitle."
    },
    "body-lg": {
      "$value": {
        "fontFamily": "NouvelR",
        "fontSize": "18px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for body lg."
    },
    "body-md": {
      "$value": {
        "fontFamily": "NouvelR",
        "fontSize": "16px",
        "fontWeight": 400,
        "lineHeight": 1.4,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for body md."
    },
    "body-sm": {
      "$value": {
        "fontFamily": "NouvelR",
        "fontSize": "14px",
        "fontWeight": 400,
        "lineHeight": 1.57,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for body sm."
    },
    "button-lg": {
      "$value": {
        "fontFamily": "NouvelR",
        "fontSize": "16px",
        "fontWeight": 700,
        "lineHeight": 1,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for button lg."
    },
    "button-md": {
      "$value": {
        "fontFamily": "NouvelR",
        "fontSize": "14.4px",
        "fontWeight": 700,
        "lineHeight": 1,
        "letterSpacing": "0.144px"
      },
      "$type": "typography",
      "$description": "Typography style for button md."
    },
    "button-sm": {
      "$value": {
        "fontFamily": "NouvelR",
        "fontSize": "13px",
        "fontWeight": 600,
        "lineHeight": 1.2,
        "letterSpacing": "0.13px"
      },
      "$type": "typography",
      "$description": "Typography style for button sm."
    },
    "caption": {
      "$value": {
        "fontFamily": "NouvelR",
        "fontSize": "12px",
        "fontWeight": 400,
        "lineHeight": 1.4,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for caption."
    },
    "overline": {
      "$value": {
        "fontFamily": "NouvelR",
        "fontSize": "10px",
        "fontWeight": 700,
        "lineHeight": 1.45,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for overline."
    }
  },
  "spacing": {
    "xxs": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Spacing step xxs."
    },
    "xs": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Spacing step xs."
    },
    "sm": {
      "$value": "12px",
      "$type": "dimension",
      "$description": "Spacing step sm."
    },
    "md": {
      "$value": "16px",
      "$type": "dimension",
      "$description": "Spacing step md."
    },
    "lg": {
      "$value": "20px",
      "$type": "dimension",
      "$description": "Spacing step lg."
    },
    "xl": {
      "$value": "24px",
      "$type": "dimension",
      "$description": "Spacing step xl."
    },
    "xxl": {
      "$value": "32px",
      "$type": "dimension",
      "$description": "Spacing step xxl."
    },
    "xxxl": {
      "$value": "40px",
      "$type": "dimension",
      "$description": "Spacing step xxxl."
    },
    "section": {
      "$value": "80px",
      "$type": "dimension",
      "$description": "Spacing step section."
    }
  },
  "radius": {
    "none": {
      "$value": "0px",
      "$type": "dimension",
      "$description": "Border radius none."
    },
    "xs": {
      "$value": "2px",
      "$type": "dimension",
      "$description": "Border radius xs."
    },
    "sm": {
      "$value": "3px",
      "$type": "dimension",
      "$description": "Border radius sm."
    },
    "md": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Border radius md."
    },
    "pill": {
      "$value": "46px",
      "$type": "dimension",
      "$description": "Border radius pill."
    },
    "full": {
      "$value": "9999px",
      "$type": "dimension",
      "$description": "Border radius full."
    }
  },
  "shadow": {},
  "$extensions": {
    "com.design-md-editor.source": {
      "url": "https://www.renault.com/",
      "note": "Official brand website used for visual comparison."
    }
  }
}