OpenDesign·你的设计资产库

网页参考

Renault

一个简洁、具有编辑感的雷诺集团企业网站,平衡了传承与前瞻性创新。

EditorialRefinementPremiumAutomotiveClean
Renault 网站截图

01

设计气质 DNA

汽车企业全球创新传承

一个展示创新与可持续性的高端汽车集团企业门户。

02

色彩

#65D7D0Accent
#000000Ink
#9E9E9EInk soft
#F2F2F2BG soft
#FFFFFFBG quiet
rgba(158, 158, 158, 1)Line

以高对比度的黑白为基础,搭配单一的蓝绿色(Teal)作为交互高亮色。

03

字体

humanist-sans

  • display40px · 700
  • body16px · 400
  • caption14px · 700
  • small12px · 700

标题严格使用粗体(700字重),以保持强烈的编辑感。 · 大型展示文本使用紧凑的字间距(例如:-1px),以营造精致、高端的外观。

04

间距

4px
8px
16px
24px
32px
48px
64px
96px

采用宽松的垂直节奏,章节间留有较大的间距(64px-104px),以分隔编辑块。

05

表面 (圆角 / 阴影 / 边线)

sm · 4px
md · 16px
lg · 24px
pill · 999px

使用边框颜色划分出干净的1px线条,用于微妙地区分章节或卡片。

无

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

全宽摄影英雄区,后接结构化的编辑网格。

07

动效与交互

150msmicro
200mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

适用于悬停和状态变化的标准微交互。 · 交互元素上平滑的背景色和边框颜色过渡。

交互元素上微妙的颜色过渡;按钮和链接清晰地指示状态变化。 · 即时的视觉反馈;所有交互项上显示明确的指针光标。

08

组件

  • button 胶囊形按钮,实色背景,粗体文字,标准的19px垂直内边距。
  • card 大型摄影卡片,圆角设计,叠加分类标签和标题。
  • chip 用于分类的小型圆角胶囊标签(例如:Actualités du Groupe)。
  • input 集成在页眉中的简单下划线或无边框搜索输入框。
  • hero 全出血的高质量汽车摄影,底部叠加文字和渐变暗化效果。

09

文案语气与禁用清单

  • 语气 专业、权威,同时具有前瞻性和以人为本的视角。
  • 标题风格 大胆、简洁、富有冲击力的陈述,总结战略目标或产品特性。
  • 按钮文案 直接、以行动为导向的短语(例如:Découvrez le Groupe),使用胶囊形按钮。
  • 不要使用斜体字体——截图显示标题仅为粗体、直立的无衬线字体。
  • 不要使用鲜艳的多色渐变——截图显示为纯色和微妙的图像暗化渐变。
  • 不要使用小型、密集的段落布局——截图显示为宽松的间距和大而易读的文本块。
  • 不要在主要容器上使用尖锐、无圆角的边角——截图显示使用16px到24px的圆角。
  • 不要使用装饰性或衬线字体——截图显示仅使用干净的无衬线字体类别(如 humanist-sans)。
  • 不要在复杂的背景上使用低对比度文本——截图显示使用深色渐变叠加层以确保白色文本的可读性。
  • 避免: 过于随意的俚语或非专业语言。
  • 避免: 没有视觉分隔的密集段落文本。
  • 避免: 偏离既定的黑、白、蓝绿色调的冲突配色方案。
  • 避免: 杂乱的动画或过于复杂的交互元素。

10

包内真实截图

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

这个网站是一个高端、具有编辑感的雷诺集团企业门户,平衡了传承与前瞻性创新。它依赖于高对比度的黑白基础,并使用单一的蓝绿色(#65D7D0)作为特定高亮。字体使用干净、现代的无衬线字体类别(如 humanist-sans)。关键注意事项:标题永远不要使用斜体或衬线字体,避免没有充足间距的密集文本块,永远不要在复杂的图像上放置没有深色渐变叠加层的低对比度文本。整体美学精致、开阔且高度专业,强调大型摄影元素和大胆、简洁的陈述。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效,整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明,可复制给 Agent。