精选 · 开放 · 免费
Regrocery
一个高端的零浪费生鲜平台，运用富有表现力的排版和温暖的摄影，让可持续性显得轻松而高端。
ConsumerCleanPremiumPhotographicRefined
01
设计气质 DNA
零浪费可持续性无包装高端简洁
一本面向环保意识消费者的高端编辑杂志
02
色彩
#F74C25Accent
#211D1CInk
#F7F6F2BG
#EFEDF7BG soft
rgba(247, 76, 37, 1.0)Line
温暖的中性色提供简洁、有机的基础，而单一的高能量橙红色驱动用户行动。
03
字体
didone-serif · humanist-sans
- display
100px · 400 - heading
30px · 400 - body
20px · 400
展示和标题级别采用紧凑的字距，营造精致、现代的感觉 · 衬线字体仅专用于大型、富有表现力的标题 · 无衬线字体处理所有功能性和导航性文本
04
间距
4px
8px
10px
16px
20px
30px
40px
95px
使用充足的留白，让摄影和排版自由呼吸
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 999px
pill · 999px
1px 细实线，使用主强调色
0px 0px 20px 0px rgba(0,0,0,0.05)
06
布局
1280container
12columns
20pxgutter
768 / 1024breakpoints
非对称分割，配有大型摄影主视觉区域，并搭配居中或左对齐的文本块
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.22, 1, 0.36, 1)easing
hover 状态下平滑、有机的过渡 · 使用自定义缓动曲线的背景色过渡
交互元素上的微妙色彩变化和背景过渡 · 所有可点击项目都有即时视觉反馈和指针光标
08
组件
- button 胶囊形状按钮，带细边框和高对比度的强调色
- card 圆角图片容器，以有机形状打破网格限制
- hero 全幅沉浸式摄影，叠加巨大的展示型排版
09
文案语气与禁用清单
- 语气 自信、精致且专注于可持续性
- 标题风格 简短、有冲击力的短语，搭配富有表现力的衬线排版
- 按钮文案 直接且以行动为导向，常使用胶囊形状的轮廓按钮
- 不要使用杂乱的布局——截图显示了充足的留白和大幅图像
- 不要使用纯几何无衬线字体作为标题——截图显示了富有表现力的 didone 衬线体
- 不要使用刺眼的原色——截图显示了特定的温暖橙红色强调色
- 不要使用方形边角的按钮——截图显示了胶囊形状的圆角边框
- 不要隐藏导航——截图显示了简洁、持续的顶栏
- 不要使用平淡、冰冷的背景——截图显示了温暖的米白色和微妙的渐变
- 避免: 激进的营销术语
- 避免: 杂乱的布局
- 避免: 通用的企业语言
- 避免: 过于复杂的界面
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Regrocery 是一个高端零浪费生鲜平台，具有精致的编辑式美学。它使用温暖的米白色 (#F7F6F2) 和浅灰色 (#EFEDF7) 背景，与大胆的橙红色 (#F74C25) 强调色和深棕黑色 (#211D1C) 墨水形成对比。排版结合了用于简洁导航和正文的人文主义无衬线字体，以及用于有冲击力标题的大型、富有表现力的 didone 衬线字体。布局强调充足的留白和全幅摄影。关键约束：绝不使用杂乱的布局；避免使用无衬线字体作为展示标题；不要用通用颜色替换标志性的温暖橙红色强调色；绝不在交互按钮上使用方形边角；避免使用冰冷的白色背景；不要使用通用的企业排版或语言。
en · zh-CN · zh-TW · ja · ko