01
设计气质 DNA
汽车企业全球创新传承
一个展示创新与可持续性的高端汽车集团企业门户。
02
色彩
#65D7D0Accent#000000Ink#9E9E9EInk soft#F2F2F2BG soft#FFFFFFBG quietrgba(158, 158, 158, 1)Line以高对比度的黑白为基础,搭配单一的蓝绿色(Teal)作为交互高亮色。
03
字体
- display
40px · 700 - body
16px · 400 - caption
14px · 700 - small
12px · 700
标题严格使用粗体(700字重),以保持强烈的编辑感。 · 大型展示文本使用紧凑的字间距(例如:-1px),以营造精致、高端的外观。
04
间距
4px8px16px24px32px48px64px96px采用宽松的垂直节奏,章节间留有较大的间距(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)。关键注意事项:标题永远不要使用斜体或衬线字体,避免没有充足间距的密集文本块,永远不要在复杂的图像上放置没有深色渐变叠加层的低对比度文本。整体美学精致、开阔且高度专业,强调大型摄影元素和大胆、简洁的陈述。










