01
设计气质 DNA
健康汽水复古俏皮消化健康怀旧
一个为健康时代重新构想的怀旧复古汽水品牌
02
色彩
#FFFF7DAccent#143F3DInk#3A3A3AInk soft#FFFBF5BG soft#FFF6EABG quiet#034638Mutedrgba(20,67,61,1.0)Line深青色承载着俏皮的品牌形象，明亮的黄色作为行动号召的活力点缀，温暖的奶油色则用于柔和的背景。
03
字体
- display
48px · 700 - heading
32px · 700 - body
16px · 400 - caption
14px · 400
使用人文主义衬线字体作为标题，以传达温暖和怀旧感 · 使用几何无衬线字体作为正文，以确保可读性和现代感 · 保持充裕的行高以获得舒适的阅读体验
04
间距
4px8px12px16px24px32px48px64px96px基于一致的4px基础，版块之间留有充裕的间距，营造呼吸感
05
表面 (圆角 / 阴影 / 边线)
sm · 6px
md · 10px
lg · 16px
pill · 50px
1px solid rgba(20,67,61,1.0) 用于微妙的结构感
rgba(0, 0, 0, 0.3) 0px 32px 68px 0px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
内容居中，留白充裕，采用不对称布局以增加视觉趣味
07
动效与交互
150msmicro
250mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
交互元素的平滑过渡 · hover状态的微妙动画 · 流畅的模态窗口过渡
交互元素上的微妙颜色偏移和缩放变化 · 通过缩放或透明度变化提供即时视觉反馈
08
组件
- button 圆润的药丸形按钮，采用纯色填充、充裕的留白和清晰的排版
- card 以图片为主的卡片，极简的框架，以摄影作为主要视觉元素
- chip 小型圆角标签，带有微妙背景，用于分类
- input 简洁的圆角输入框，配有清晰标签和充裕的留白
- hero 大型沉浸式主视觉区域，在产品图像或纯色背景上采用粗犷的排版
09
文案语气与禁用清单
- 语气 俏皮、平易近人、关注健康，但不显得说教
- 标题风格 粗犷、怀旧的排版，搭配关于真实成分的温暖信息
- 按钮文案 直接且鼓舞人心，使用行动导向的语言
- 不要为产品版块使用深色背景——截图显示的是温暖的奶油色（#FFFBF5）或青色（#143F3D）背景
- 不要使用纤细、紧凑的字体——截图显示的是粗体、圆润的人文主义衬线字体用于标题
- 不要使用尖锐、有棱角的按钮——截图显示的是圆润的药丸形按钮，带有充裕的border-radius
- 不要使用单色调色板——截图显示的是活泼的黄色（#FFFF7D）和青色作为点缀色
- 不要使用极少的留白——截图显示的是贯穿整个布局的充裕留白和间距
- 不要使用临床或冷冰冰的设计语言——截图显示的是俏皮的复古插图和温暖的摄影
- 避免: 临床或医疗语言
- 避免: 激进的销售策略
- 避免: 过于技术性的成分解释
- 避免: 暗沉或阴郁的美学
- 避免: 极简无衬线字体的主导
10
包内真实截图
11
System Prompt
Olipop 是一个俏皮、复古灵感的消化健康汽水品牌，目标客户是注重健康的消费者，他们想要具有怀旧风味且兼具现代益处的产品。关键颜色包括深青色（#143F3D）、温暖的奶油色（#FFFBF5）和活泼的黄色（#FFFF7D）点缀。排版上，标题使用人文主义衬线字体，正文使用几何无衬线字体，并使用粗体强调。设计特点包括圆润的药丸形按钮、充裕的留白和俏皮的插图。关键禁忌：避免临床/医疗语言、产品使用深色背景、纤细字体、尖锐的棱角元素、单色调色板以及冷冰冰的极简主义美学。网站应感觉温暖、平易近人、怀旧，同时保持现代健康产品的可信度。