OpenDesign·你的设计资产库

网页参考

Recess

一个融合了俏皮奇思与现代极简主义的高端饮品品牌网站。

BeverageDtc

封面待补录,可通过原站查看设计。

01

设计气质 DNA

宁静现代俏皮清新极简

一个沉稳而精致的饮品品牌,融合了现代极简主义与俏皮、异想天开的元素。

02

色彩

#25385BInk
#394A6AInk soft
#C8D8FFBG
#E8F0FFBG soft
rgba(37, 56, 91, 1)Line

采用柔和的粉彩背景,搭配高对比度的深海军蓝文字,以确保可读性。

03

字体

grotesque-sans

  • display60px · 700
  • h140px · 700
  • body16px · 400
  • caption14px · 400

为大标题使用紧凑的字距,以形成坚实的排版区块。 · 在不同字号间保持一致的行高,以形成有韵律的阅读体验。

04

间距

4px
8px
16px
24px
32px
48px
64px
96px

采用一致的 4px 基础比例,提供标准的网页间距。

05

表面 (圆角 / 阴影 / 边线)

sm · 0px
md · 4px
lg · 12px
pill · 999px

按钮和输入框使用 2px 实线深海军蓝边框。

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

不对称的首屏布局,文字在左,图像在右。

07

动效与交互

150msmicro
300mssmall
600msmedium
cubic-bezier(0.175, 0.885, 0.32, 1.275)easing

悬停时平滑的透明度和变换过渡。 · 背景元素上的类视差效果。

细微的颜色或透明度变化。 · 无可见的自定义点击动画。

08

组件

  • button 高对比度的实心海军蓝按钮配白色文字,或海军蓝描边按钮。
  • card 不明显突出;图像直接放置在背景形状上。
  • chip 在截图中不可见。
  • input 标准的矩形输入框,带有实线深海军蓝边框。
  • hero 一个大型的不对称首屏区域,拥有明亮的天空背景和醒目的绿色弧形形状。

09

文案语气与禁用清单

  • 语气 俏皮、随意且自信。
  • 标题风格 简短、有力、对话式。
  • 按钮文案 直接且以行动为导向。
  • 勿使用通用的无衬线字体——该网站依赖于特定的、富有特色的 grotesque-sans 字族。
  • 勿使用暗黑模式——网站的身份构建于明亮、通透的粉彩背景之上。
  • 勿使用复杂的网格布局——首屏区域采用清晰的不对称分割。
  • 勿使用厚重的投影——设计是扁平的,依靠色彩对比来营造深度。
  • 勿使用明亮的霓虹强调色——调色盘由柔和的粉彩和深海军蓝构成。
  • 勿使用衬线字体——整个网站使用统一的无衬线系统。
  • 避免: 过于技术化或临床化的语言。
  • 避免: 激进或高压的销售策略。
  • 避免: 冗长、复杂的段落。

10

包内真实截图

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

11

System Prompt

定位:一个面向现代、健康意识消费者的高端、俏皮饮品品牌。关键十六进制颜色:#C8D8FF(背景)、#25385B(墨色)、#163BF3(强调蓝)、#A8B2FF(柔和背景)。字体类别:富有特色的 grotesque-sans,以呈现大胆、现代的外观。关键禁忌:勿使用暗黑模式,避免复杂网格,且不要使用厚重投影。保持随意而有力的品牌语调,呼应品牌轻松的活力。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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