01
设计气质 DNA
邀请感清新感季节性欢迎感
一个明亮、现代的咖啡馆，配有大幅诱人的摄影图片和清晰、友好的导航。
02
色彩
#006241Accent#000000Inkrgba(0,0,0,0.58)Ink soft#FFFFFFBGrgba(0,0,0,0.12)Line高对比度的品牌绿色锚定了整体标识，与纯净的白色背景和生动的产品摄影图片相平衡。
03
字体
- display
48px · 600 - h2
36px · 600 - body
16px · 400
主导航标题采用大写字母 · 正文文本具有极高的可读性，字间距紧凑 · 标题中使用字体粗细 600 进行强调
04
间距
4px8px16px24px32px48px64px96px在大型主视觉区域和内容块上应用宽松的垂直内边距，让摄影图片得以呼吸。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 50px
干净的 1px 边框被谨慎使用，主要用于输入框和焦点状态。
rgba(0, 0, 0, 0.1) 0px 11px 15px 0px · rgba(0, 0, 0, 0.06) 0px 9px 46px 8px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
全宽主视觉块与标准的居中内容列交替出现。
07
动效与交互
200msmicro
200mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
悬停状态下的微妙透明度和变换过渡 · 交互元素的平滑颜色变化
文本链接上的颜色偏移和按钮上的背景变化 · 即时视觉反馈
08
组件
- button 药丸形状的实心绿色按钮配白色文字，或白色药丸按钮配绿色轮廓。
- card 大型分屏视图卡片，将全出血摄影图片与实心绿色背景的文字块相结合。
- chip 用于导航的简单文本链接。
- input 标准圆角矩形输入框。
- hero 大型、全宽的分屏视图，一侧是突出的食物/饮料照片，另一侧是品牌绿色背景和文字。
09
文案语气与禁用清单
- 语气 友好、热情、富有庆祝感
- 标题风格 简短、有力、聚焦季节
- 按钮文案 直接、行动导向、带有鼓励性（例如：“探索夏日菜单”）
- 不要在主布局中使用深色背景——截图显示明亮的白色背景主导了空间。
- 不要在主要元素上使用厚重的投影——截图显示主要在模态框上使用微小、柔和的阴影。
- 不要在标题中使用衬线字体——截图显示整体使用一致的无衬线字体系统。
- 不要在按钮上使用尖锐的90度直角——截图显示完全圆润的‘药丸’形状。
- 不要在主视觉区域使用狭小、拥挤的间距——截图显示在大型摄影图片周围有宽松的内边距。
- 不要依赖厚重的边框来构建结构——截图显示使用色块和空白作为主要分隔符。
- 避免: 通用的企业术语
- 避免: 过于复杂的句子
- 避免: 生硬或命令式的语言
10
包内真实截图
11
System Prompt
这是一个面向消费者的季节性营销网站，服务于一个主要饮料品牌。它采用干净、明亮的设计，由大型、诱人的摄影图片和强烈、可识别的品牌绿色驱动。调色板以纯净的白色背景、深森林绿色强调色和高对比度的黑色文本为基础。字体设计依赖于现代几何无衬线字体，用于展示和正文文本。关键禁忌：避免深色模式美学，避免交互元素上的尖锐边角，避免使用衬线字体。布局使用全宽分屏主视觉卡片，与居中内容交替出现，优先考虑清晰度和视觉吸引力，而非复杂的 UI 模式。