OpenDesign·你的设计资产库

网页参考

Regrocery

一个高端的零浪费生鲜平台,运用富有表现力的排版和温暖的摄影,让可持续性显得轻松而高端。

ConsumerCleanPremiumPhotographicRefined
Regrocery 网站截图

01

设计气质 DNA

零浪费可持续性无包装高端简洁

一本面向环保意识消费者的高端编辑杂志

02

色彩

#F74C25Accent
#211D1CInk
#F7F6F2BG
#EFEDF7BG soft
rgba(247, 76, 37, 1.0)Line

温暖的中性色提供简洁、有机的基础,而单一的高能量橙红色驱动用户行动。

03

字体

didone-serif · humanist-sans

  • display100px · 400
  • heading30px · 400
  • body20px · 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

包内真实截图

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

Regrocery 是一个高端零浪费生鲜平台,具有精致的编辑式美学。它使用温暖的米白色 (#F7F6F2) 和浅灰色 (#EFEDF7) 背景,与大胆的橙红色 (#F74C25) 强调色和深棕黑色 (#211D1C) 墨水形成对比。排版结合了用于简洁导航和正文的人文主义无衬线字体,以及用于有冲击力标题的大型、富有表现力的 didone 衬线字体。布局强调充足的留白和全幅摄影。关键约束:绝不使用杂乱的布局;避免使用无衬线字体作为展示标题;不要用通用颜色替换标志性的温暖橙红色强调色;绝不在交互按钮上使用方形边角;避免使用冰冷的白色背景;不要使用通用的企业排版或语言。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效,整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明,可复制给 Agent。