01
设计气质 DNA
橄榄油可挤压厨房高端趣味性
一个高端、手工食品品牌，具有趣味性和触感体验。
02
色彩
#D1E030Accent#3C422EInk#F6E6D9BG#4E5340Mutedrgba(60, 66, 46, 1)Line以深橄榄绿和柔和蜜桃色为主导的质朴、温暖基础色板，点缀以鲜亮的黄绿色作为强调色。
03
字体
- display
72px · 500 - body
16px · 400
04
间距
4px8px16px24px32px48px64px96px垂直间距使用较大的间隙，通常为35px或68px，让大幅图像和粗体排版得以舒展。
05
表面 (圆角 / 阴影 / 边线)
sm · 10px
md · 20px
lg · 20px
pill · 9999px
边框主要用于轮廓和分隔，通常为1px solid深绿色。
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
全宽摄影英雄区段，后接用于产品卡片的宽敞网格布局。
07
动效与交互
250msmicro
250mssmall
400msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
交互元素的背景色和透明度平滑过渡。 · hover状态的transform过渡。
按钮、链接等元素会轻微改变背景色、边框色或transform属性。 · 通过背景色或transform变化提供即时反馈。
08
组件
- button 粗体、药丸形的按钮，使用强烈的强调色和大写文字。
- card 产品卡片拥有大幅图像，带有细微的圆角和清晰的价格/类别标签。
- chip 不适用
- input 不适用
- hero 全出血摄影背景，上方叠加大型、左对齐的衬线标题。
09
文案语气与禁用清单
- 语气 自信、亲切，略带俏皮。
- 标题风格 大型、优雅的衬线排版，常采用句首字母大写或全部小写。
- 按钮文案 直接、大写，常置于高对比度的药丸形背景中。
- 不要使用深色背景——截图显示的是浅色、温暖的蜜桃色背景 (#F6E6D9)
- 不要为使用主标题使用无衬线字体——截图显示的是用于展示文字的过渡衬线字体
- 不要使用柔和或低调的强调色——截图显示的是鲜亮的黄绿色强调色 (#D1E030)
- 不要到处使用尖锐的直角——截图显示的是圆角 (20px) 和药丸形状
- 不要使用密集、小号文字传达关键信息——截图显示的是大型、粗体文字 (72px)
- 不要使用冷色调、灰色系的中性色——截图显示的是质朴、温暖的色调，如深橄榄绿 (#3C422E)
- 避免: 避免冷酷、企业化的语言——截图显示的是温暖、对话式的语气
- 避免: 避免密集的文本块——截图显示的是充足的间距和大幅图像
- 避免: 避免深色模式——截图显示的是持续的浅色、温暖背景
- 避免: 避免过于复杂的界面模式——截图显示的是直接、图像主导的布局
- 避免: 避免为标题使用无衬线字体——截图显示的是用于展示文字的衬线字体
- 避免: 避免柔和、低对比度的强调色——截图显示的是鲜亮的黄绿色强调色
10
包内真实截图
11
System Prompt
Graza 是一个高端、趣味性的橄榄油品牌，目标消费者看重品质与设计。该网站使用温暖、质朴的色彩方案，以柔和的蜜桃色 (#F6E6D9) 和深橄榄绿 (#3C422E) 为中心，并使用鲜亮的黄绿色 (#D1E030) 作为行动号召的强调色。排版融合了优雅的过渡衬线展示字体与打字机风格的正文。关键注意事项：避免深色模式，避免为标题使用无衬线字体，避免柔和的强调色，避免尖锐的角，避免密集文本，避免冷色调中性色。布局依赖大幅、全出血摄影和充足的空白，营造出编辑化、高端的感觉。