雷诺 Renault

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

概述

Renault 的土耳其营销表面毫不掩饰地高对比：浏览用白色画布，产品故事用黑色画布，以及保留给最重要动作的单一 Sunlight Yellow 点缀（{colors.primary} — #ffed00）。品牌现代化的扁平菱形标志定下基调——几何、自信、略带工业感——系统与之呼应。直角主导，发丝边框罕见，层级通过色块表达而非阴影。

字体是单一化的。站点上的每一个文字都使用 NouvelR——Renault 的专有展示字体家族——展示尺寸强烈倾向 weight 700（配紧凑的 lineHeight: 0.95），正文使用 weight 400。没有次级衬线，没有装饰斜体，没有手写体——纪律本身就是标志。

页面节奏在三种表面模式之间循环：白色目录模式用于列表和配置器（{colors.canvas} 配细发丝 {colors.hairline} 分隔），黑色叙事模式用于首屏 section、生活方式图像和活动页的下半部分，以及简短的黄色点缀时刻（{colors.primary} 瓦片、"NEW" 徽标、R5 编码的黄色漆面照片）点缀在原本中性的调色板中。

关键特征：

• 双色画布系统——{colors.canvas}（白色）用于浏览，{colors.surface-dark}（黑色）用于叙事——以全幅带切换而非微妙的渐变。
• 单一品牌点缀——{colors.primary} Sunlight Yellow——稀缺地用于主 CTA、"NEW" / "yeni" 徽标、配置器圆点指示符和 R5 首屏摄影。
• NouvelR 无处不在，{typography.display-xl} 标题以 56px / weight 700 / lineHeight: 0.95 显示，使压缩的多行标题整齐堆叠。
• 直角几何：{rounded.xs}（2px）用于按钮，{rounded.none} 用于瓦片和产品卡片，{rounded.pill} 专门保留给子导航芯片和装饰徽标。
• 摄影优先的产品瓦片——车辆照片全幅位于原本中性的卡片内，文案堆叠在下方而非覆盖。
• 页面级节奏循环：白色 → 黑色 → 黄色点缀 → 黑色，字标和页脚始终在 {colors.surface-dark} 上收尾。

配色

品牌与点缀

• Sunlight Yellow（{colors.primary} — #ffed00）：品牌点缀。保留给主 CTA、"NEW" / "yeni" 徽标、配置器圆点指示符和全幅促销瓦片。从不装饰。
• Sunlight Yellow Pressed（{colors.primary-deep} — #e6d200）：{colors.primary} 按钮和瓦片的激活/按下状态。
• On-Primary（{colors.on-primary} — #000000）：{colors.primary} 表面上的标签颜色。黄色始终配黑色文字——从不用白色。

表面

• Canvas（{colors.canvas} — #ffffff）：默认页面背景和卡片表面。
• Surface Soft（{colors.surface-soft} — #f7f7f7）：分组配置器行和非激活表单字段的微妙抬升层。
• Surface Dark（{colors.surface-dark} — #000000）：替代画布，用于首屏带、页脚和全幅叙事 section。
• Surface Deep（{colors.surface-deep} — #111111）：{colors.surface-dark} 区域内的一级抬升，用于内嵌卡片和表单面板。
• Hairline（{colors.hairline} — #f2f2f2）：白色表面上行之间的柔和 1px 分隔线。
• Hairline Strong（{colors.hairline-strong} — #000000）：白色上的全强度分隔线，以及所有卡片 / 按钮描边。
• Divider Dark（{colors.divider-dark} — rgba(255,255,255,0.16)）：在 {colors.surface-dark} 区域内使用的对应低对比分隔线。

文字

• Ink（{colors.ink} — #000000）：白色表面上的主文字颜色。同样的值也驱动标志、图标和描边——黑色是结构性的，而非装饰性的。
• Body（{colors.body} — #222222）：在长段落中纯黑显得过重时的次级正文文字。
• Charcoal（{colors.charcoal} — #333333）：说明文字、元数据和小标签。
• Mute（{colors.mute} — #666666）：辅助文字和非激活导航标签。
• Ash（{colors.ash} — #8a8a8a）：占位符文字、禁用标签。
• Stone（{colors.stone} — #c4c4c4）：禁用状态前景。
• On-Dark（{colors.on-dark} — #ffffff）：{colors.surface-dark} 表面上的主文字。
• On-Dark Mute（{colors.on-dark-mute} — rgba(255,255,255,0.72)）：深色区域内的次级文字；在不诉诸中灰的情况下保持品牌的高对比感。

语义

• Error（{colors.error} — #be6464）：用于行内表单错误的柔和去饱和红。值得注意的是比典型的纯红错误状态更暖。
• Warning（{colors.warning} — #f0ad4e）：琥珀色警告。
• Success（{colors.success} — #8dc572）：柔和的绿色确认。
• Info（{colors.info} — #337ab7）：用于信息芯片的去饱和中蓝。
• Link（{colors.link} — #0000ee）：未样式化锚点的默认值，保留用于回退行内文本链接——生产中的链接继承 {colors.ink} 并依赖下划线/字重而非颜色。

字体排版

字体族

整个系统使用 NouvelR——Renault 的专有展示字体家族——覆盖导航、标题、正文、说明和按钮标签。该家族具有略几何、半压缩的性格，x-height 高，apex 方正，与菱形标志自然搭配。

当 NouvelR 无法授权时，合适的开源替代包括 Inter Tight、Manrope 或 HK Grotesk Semi Condensed——都共享几何带温度的感觉，并在 400 / 600 / 700 字重下适应清晰。将展示尺寸的 lineHeight 收紧到约 0.95 以匹配原始；不要放松。

层级

原则

• 展示尺寸始终为 weight 700，始终 lineHeight: 0.95。紧凑度是品牌显得自信而非企业化的原因。
• 正文保持在 weight 400——从不超过 500。正文和展示之间的对比是系统的一部分。
• 按钮标签带有微小的正字距（{typography.button-md} 上为 0.144px）——几乎不可察觉，但为品牌在 CTA 上所需的机械精确度增添了细微之处。
• 没有斜体，没有手写体，没有装饰连字。

关于字体替代

NouvelR 是授权的；替代品（Inter Tight / Manrope / HK Grotesk Semi Condensed）保留几何特征，但通常在展示尺寸下行高更宽——将展示 lineHeight 显式限制为 0.95 以匹配源。

布局

间距系统

• 基础单位：4px，工作刻度建立在 4 和 8 的倍数上。
• Token：{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（全幅带 → 下一带）：桌面 {spacing.section}（80px），移动端收紧到 {spacing.xxxl}（40px）。
• 促销瓦片内 padding：桌面所有边 {spacing.xxl}（32px）。
• 配置器行垂直 padding：上下 {spacing.xl}（24px），行之间发丝分隔线。

网格与容器

• 最大内容宽度 ≈ 1440px。超出此宽度，内容保持居中，深/浅色带全幅延伸。
• 首页上的促销网格：桌面 2 列瓦片网格，移动端降为 1 列。每个瓦片都是直角的（{rounded.none}），以摄影或纯色作为背景。
• 车型范围网格：桌面每行 3 到 4 辆车，平板降为 2 列，小型移动端降为 1 列。
• 配置器使用固定的左侧可视化面板（桌面约 60% 宽度）和右侧滚动选项列表（约 40% 宽度）。

留白哲学

• 留白是结构性的，而非装饰性的。section 之间通过色块（白色 → 黑色）分隔，而非柔和 padding 渐变。
• 卡片和配置器行内，padding 充裕但从不空洞——品牌是大众市场，所以密度可以接受。
• 白色表面上的发丝 {colors.hairline} 分隔线营造出目录精确感；在深色表面上，{colors.divider-dark} 承担相同角色。

层次与深度

投影从系统中提取但在营销表面上很少可见。当它们出现时，非常微妙（约 10% 不透明度，2–4px 模糊），用于像配置器的粘性摘要栏这样的浮动元素。

装饰性深度

• R5 首屏带使用氛围网格渐变背景——紫到粉到黄的光晕出现在汽车剪影后——作为系统中唯一的真正氛围深度。其他地方，深度是结构性的（色块 + 描边），而非氛围性的。
• E-TECH 电动动力总成页面在剖面图后使用发光的洋红到紫色渐变，专门保留给电动子品牌。

形状

圆角刻度

摄影几何

• 车辆摄影始终是直角的（{rounded.none}）。没有圆角车辆首屏照片，没有柔边汽车卡片。
• 长宽比集中在 16:9（首屏带）、1:1（方形促销瓦片）和 4:3（车型范围卡片）。生活方式图像有时为 2:1 宽幅用于全幅带。
• 头像和小个人资料提示（如果存在）使用 {rounded.full} 圆形，与其他直角几何形成对比。

组件

按钮

button-primary——黄色 CTA

• 背景 {colors.primary}，标签 {colors.on-primary}，字号 {typography.button-md}，padding 14px 24px，rounded: {rounded.xs}。
• 页面上的单个最重要动作（如 "Hemen randevu al"、"Hesapla"、"Konfigüratörü başlat"）。
• 按下状态位于 button-primary-pressed（背景 {colors.primary-deep}）。

button-secondary-dark——纯黑 CTA

• 背景 {colors.surface-dark}，标签 {colors.on-dark}，字号 {typography.button-md}，rounded: {rounded.xs}。
• 与 {component.button-primary} 配对的等重次级动作，或在黄色瓦片背景上使用时的主动作。

button-outline-dark——浅色上的描边 CTA

• 背景 {colors.canvas}，标签 {colors.ink}，1px 实线 {colors.hairline-strong}，字号 {typography.button-md}，rounded: {rounded.xs}。
• 三级动作；与主/次级动作并排出现，用于 "Detayları gör"、"Modeller" 等。

button-outline-light——深色上的描边 CTA

• 背景 {colors.surface-dark}，标签 {colors.on-dark}，1px 实线 {colors.on-dark}，字号 {typography.button-md}，rounded: {rounded.xs}。
• {component.button-outline-dark} 的深色画布对应物。

button-pill——子导航芯片

• 背景 {colors.canvas}，标签 {colors.ink}，1px 实线 {colors.hairline-strong}，字号 {typography.button-sm}，rounded: {rounded.pill}，高 36px。
• 系统唯一使用胶囊的地方——用于顶层筛选芯片（"Servis & randevu"、"Sahiplik dönemi geçişi"、"Kampanyalar"）和配置器 tab 切换。

button-icon-square——小图标按钮

• 背景 {colors.canvas}，1px 实线 {colors.hairline-strong}，rounded: {rounded.xs}，40×40px 方形。
• 轮播箭头、分享、语言切换。

卡片与容器

promo-tile-light——白色促销瓦片

• 背景 {colors.canvas}，文字 {colors.ink}，字号 {typography.heading-lg}，padding {spacing.xxl}，rounded: {rounded.none}。
• 用于首页 2 列网格中的 "Hybrid araç modelleri"、"binek araç satış kampanyaları" 瓦片。

promo-tile-dark——黑色促销瓦片

• 背景 {colors.surface-dark}，文字 {colors.on-dark}，字号 {typography.heading-lg}，padding {spacing.xxl}，rounded: {rounded.none}。
• 生活方式 / 商用车叙事瓦片（"ticari araç satış kampanyaları"）。

promo-tile-yellow——点缀促销瓦片

• 背景 {colors.primary}，文字 {colors.on-primary}，字号 {typography.heading-lg}，padding {spacing.xxl}，rounded: {rounded.none}。
• 锚定活动带的单一 "PARLAK SARI" / "Sunlight Yellow" 注意瓦片。保留——通常每页最多一个。

vehicle-card——汽车列表卡片

• 背景 {colors.canvas}，顶部全幅产品摄影，下方文字，rounded: {rounded.none}，无外边框。
• 包含车型名称（{typography.heading-md}）、变体副标题（{typography.body-sm}）和单个尾随箭头图标。

hero-banner——全幅首屏

• 背景 {colors.surface-dark}，配全幅照片或氛围渐变，内容左堆叠，字号 {typography.display-xl} 用于标题。
• 首页上的 "SCENIC E-TECH ELEKTRİKLİ" 首屏。

输入与表单

text-input——默认输入

• 背景 {colors.canvas}，文字 {colors.ink}，字号 {typography.body-md}，1px 底部边框 {colors.hairline-strong}，rounded: {rounded.none}，padding {spacing.sm} {spacing.md}，高 48px。
• 输入故意极简——顶部和侧面无边框，底部单一发丝线——保持目录感。

配置器

configurator-row——选项列表行

• 背景 {colors.canvas}，分隔发丝 {colors.hairline} 在行之间，padding {spacing.xl} 上下，字号 {typography.body-md}。
• 配置器右侧滚动列表："kasa tipi"、"motor seçimi"、"versiyon seçimi"、"renk seçenekleri" 等。

configurator-swatch——圆形颜色选择

• 背景 {colors.surface-soft}（或实际汽车颜色），rounded: {rounded.full}，56×56px。
• 用于漆面颜色选择。激活状态添加 1px 实线 {colors.hairline-strong} 圆环。

导航

nav-bar——顶部导航（桌面）

• 背景 {colors.canvas}，字号 {typography.button-md}，高 60px，底部发丝 {colors.hairline} 边框。
• 左：菱形标志。居中：顶层导航（"Modeller"、"Hizmetler"、"Renault Yaşamı"、"MyRenault"）。右：语言切换 + 登录图标。

nav-bar（移动端）

• 相同高度 60px，居中导航折叠为汉堡图标。标志留在左侧，登录留在右侧。

sub-nav-pill——胶囊式子导航

• 胶囊芯片设置在首屏和正文之间的水平滚动条中（如 "Servis & randevu"、"Sahiplik dönemi geçişi"、"Kampanyalar"），配 {component.button-pill} 样式。

标志性组件

badge-new——"yeni" 徽标

• 背景 {colors.primary}，标签 {colors.on-primary}，字号 {typography.button-md}，rounded: {rounded.full}，padding 6px 14px。
• 锚定在新车型卡片的左下角。

footer——全局页脚

• 背景 {colors.surface-dark}，文字 {colors.on-dark}，字号 {typography.body-sm}，padding 64px 24px。
• 三列法律/快捷链接/语言网格位于单行版权之上，由 {colors.divider-dark} 分隔。

推荐与避免

推荐

• 将 {colors.primary} 专门保留给主 CTA、"yeni"/"NEW" 徽标，以及每个带最多一个点缀促销瓦片——{component.promo-tile-yellow} 故意的稀有。
• {colors.primary} 仅与 {colors.on-primary} 文字配对。黄色 + 白色是禁止的。
• 全部使用 NouvelR——没有次级衬线，没有手写体，没有装饰斜体。
• 展示标题保持在 {typography.display-xl} weight 700，lineHeight: 0.95，以便在多行换行时整齐堆叠。
• 每个标准按钮使用 {rounded.xs}（2px）——近平的角是品牌的一部分。
• 在 {colors.canvas} 和 {colors.surface-dark} 之间切换全幅带来创造叙事节奏。避免将中灰作为 section 背景。
• 在 {component.vehicle-card} 内全幅显示车辆摄影，文案堆叠在下方，绝不覆盖。
• 仅在子导航和小型筛选行使用 {component.sub-nav-pill}（{rounded.pill}）——绝不用于主 CTA。

避免

• 不要引入次级点缀颜色。黄色是唯一的品牌点缀；语义颜色（{colors.error}、{colors.success}、{colors.warning}）是功能性的，不是装饰性的。
• 不要圆角化车型卡片或促销瓦片。直角摄影是品牌表达的核心。
• 不要将正文字重柔化为 500 或 600——系统依赖 400 / 700 对比。
• 不要在正文文字或每个带内单一点缀瓦片之外的大表面上使用 {colors.primary}。
• 不要在专门的 R5 / E-TECH 首屏上下文之外添加氛围渐变渲染。
• 不要在白色上配浅灰文字。正文通过 {colors.body}、{colors.charcoal}、{colors.mute} 阶梯——{colors.ash} 和 {colors.stone} 保留给占位符和禁用状态。
• 不要在车型卡片或促销瓦片上添加投影——系统在目录层面无阴影。

响应式行为

断点

触控目标

• 所有按钮在移动端至少 44×44px；默认 {component.button-primary} 高 48px，舒适地超过 WCAG AAA。
• {component.sub-nav-pill}（36px）在移动端通过增加垂直 padding 提升至 40px 高。
• {component.button-icon-square}（40px）位于 WCAG AA 最小值，保持可点击，但作为主要导航控件使用时应当增长到 44px。

折叠策略

• 顶层导航在 < 1024px 时折叠为汉堡；标志和登录图标保持锚定。
• 2 列促销网格在 < 768px 时折叠为 1 列；瓦片 padding 从 {spacing.xxl} 收缩到 {spacing.lg}。
• 配置器在 < 1024px 时从并排切换到堆叠，可视化在滚动时钉到视口顶部。
• 展示标题限制：{typography.display-xl} 56px → 40px → 32px 跨断点阶梯。
• 子导航胶囊在 < 768px 时从换行行转换为水平滚动条。

图像行为

• 车辆摄影以 1.5× 和 2× DPR 提供；768px 以下，系统在 art direction 允许的情况下切换为纵向构图。
• 首屏氛围渐变（R5、E-TECH）在主要内容之后延迟加载；它们不阻塞。
• {component.promo-tile-dark} 中的生活方式 / 商业摄影在断点间保持相同的 16:9 构图，向内裁剪而非加黑边。

迭代指南

1. 一次专注于一个组件。大多数组件共享 {rounded.xs}、{colors.canvas} / {colors.surface-dark} 和 NouvelR——只有角色专属 token（{colors.primary}、{component.promo-tile-yellow}）在变体之间变化。
2. 直接引用组件名和 token（{colors.primary}、{component.button-primary-pressed}、{rounded.pill}）——不要转述。
3. 编辑后运行 npx @google/design.md lint DESIGN.md；orphaned-tokens 警告将在它们上线前捕获未使用的条目。
4. 添加新变体作为单独的条目（-pressed、-disabled、-outline）——不要将它们埋在正文中。
5. 默认正文为 {typography.body-md}；仅在首屏副标题和引导段落上使用 {typography.subtitle}。
6. 保持 {colors.primary} 稀缺——如果每个视口出现一个以上黄色元素，问问其中一个是否应该改为 {colors.surface-dark} 或 {colors.canvas}。

已知缺口

• 激活/按下的视觉状态在静态表面上不能一致地观察到；button-primary-pressed 记录了提取的深黄值，但没有其他组件有提升到 YAML 的按下变体。
• 投影值存在于提取的 token 中，但很少在视觉上出现；只有配置器的粘性摘要栏在捕获的页面上使用它们。
• MyRenault 应用程序表面（已登录产品）超出本次提取的范围——仅记录公共营销画布。
• 表单字段聚焦样式未提取；系统可能依赖于 {colors.ink} 处更粗的底部边框，但这在捕获的页面上未在视觉上确认。