OpenDesign·你的设计资产库

网页参考

Sometimesalways Com Au

一家精品在线瓶装酒店,提供有趣饮品,设计温暖、有趣且经过精心策展。

ConsumerCurationWarmEditorialProduct
Sometimesalways Com Au 网站截图

01

设计气质 DNA

精品店自然酒策展趣味性温暖

一家友好的本地瓶装酒店,拥有经过策展的、编辑性的美学。

02

色彩

#EBA900Accent
#000000Ink
#333333Ink soft
#FFE9C7BG
#555555Muted
rgba(0,0,0,0.1)Line

温暖、大地色的背景,搭配高对比度的黑色排版,并使用充满活力的橙色作为交互元素的强调色。

03

字体

didone-serif · grotesque-sans

  • display50px · 400
  • h140px · 400
  • body20px · 400
  • caption12px · 400

使用 SunsetSerial-Light 作为主标志和衬线装饰字体。 · 使用 Founders Grotesk 作为所有正文文本、导航和 UI 元素的字体。 · 谨慎使用粗体,主要用于句中强调。

04

间距

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

交互元素使用宽裕的内边距(20px),网格布局中保持一致的间隙(20px)。

05

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

sm · 4px
md · 20px
lg · 40px
pill · 100px

1px solid black 或 #333333

0px 2px 0px 0px rgba(0, 0, 0, 0.035) · 0px 5px 40px 0px rgba(0, 0, 0, 0.16) · 0px 8px 24px 0px rgba(0, 0, 0, 0.16)

06

布局

1280container
12columns
20pxgutter
768 / 1024breakpoints

全宽促销横幅,带有圆角的英雄区域,随后是用于产品列表的响应式网格。

07

动效与交互

200msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

按钮和链接悬停状态的不透明度和 transform 过渡。 · 交互元素上的平滑颜色过渡。

链接和按钮上的微妙不透明度变化或颜色偏移。 · 即时响应,过渡平滑。

08

组件

  • button 药丸形按钮,内边距宽裕,通常带有细 1px 边框。
  • card 图像优先的卡片,大圆角(20px 或 40px),下方文字最少。
  • chip 小型药丸形标签(例如 'Progressive', 'Traditional'),带 1px 边框。
  • input 简单的文本输入框或搜索框,样式极简。
  • hero 大型圆角图像容器,品牌名称以衬线字体叠加显示。

09

文案语气与禁用清单

  • 语气 友好、平易近人且略带趣味。
  • 标题风格 直接、随意,有时使用有趣的箭头(→)代替破折号。
  • 按钮文案 清晰且以行动为导向,常使用大写文本。
  • 不要使用冰冷、临床的白色背景——截图显示的是温暖的桃色背景。
  • 不要使用严格极简、稀疏的布局——截图显示的是内容丰富、图像密集的编辑式布局。
  • 不要在卡片上使用锐利的 0px border-radius——截图显示所有卡片和图像都采用 20px 或 40px 的大圆角。
  • 不要使用僵硬、刻板的字体——截图显示的是一种有趣的衬线字体和一种简洁的 grotesque sans 的组合。
  • 不要使用高对比度的深色模式——截图使用的是温暖、浅色的调色板。
  • 不要使用复杂、多彩的渐变——截图依赖于纯色的暖色和摄影图像。
  • 避免: 过于正式或生硬的语言
  • 避免: 密集、难以阅读的文本块
  • 避免: 僵硬、企业化的设计模式

10

包内真实截图

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

11

System Prompt

这是一家精品在线瓶装酒店,提供有趣饮品。其设计 DNA 是温暖、有趣且具有编辑性,围绕柔和的桃色背景(#FFE9C7)和清晰的黑色排版展开。它结合使用一种有趣的衬线字体(SunsetSerial)作为标志和展示文字,以及一种简洁的 grotesque sans(Founders Grotesk)作为所有正文和 UI 元素的字体。充满活力的橙色(#EBA900)作为主要强调色。关键禁忌:不要使用冰冷、临床的白色背景;而是使用温暖、大地色的色调。不要使用锐利的边角;截图显示所有卡片和图像都采用 20px 或 40px 的大圆角。不要使用僵硬、企业化的布局;该设计是图像优先和编辑性的。布局是响应式的,具有全宽的促销横幅和基于网格的产品展示。交互元素具有宽裕的内边距和微妙的过渡效果。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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