OpenDesign·你的设计资产库

网页参考

Norse Projects

一个专注于精致摄影和简洁排版的极简主义时尚电商网站。

Fashion
Norse Projects 网站截图

01

设计气质 DNA

极简高端斯堪的纳维亚编辑风格时尚

一个高端的斯堪的纳维亚时尚品牌,感觉像一个精心策划的画廊。

02

色彩

#58595BInk
rgba(88,89,91,0.6)Ink soft
#FFFFFFBG
#808080Muted
rgb(238, 238, 239)Line

极其柔和且单色,几乎完全依赖摄影来提供色彩。

03

字体

grotesque-sans

  • display26px · 400
  • body13px · 400

使用 Helvetica Neue LT Std 或 Arial 作为主要无衬线字体。 · 所有正文文本使用大写形式,并保持宽字间距。 · 大多数UI元素保持一致的400字重。

04

间距

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

一个基于4像素的栅格,支持组件内充足的内边距和栅格项之间的留白。

05

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

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

1px solid rgb(238, 238, 239)

06

布局

1440container
12columns
24pxgutter
768 / 1024breakpoints

一个紧凑的12列栅格,包含全出血的主区域和多列产品网格。

07

动效与交互

150msmicro
200mssmall
300msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

针对 background-size 和 top 属性的细微 0.2秒 ease-in-out 过渡。 · 用于UI显示的快速 0.15秒 ease-in-out 不透明度和可见性变化。 · 广泛应用于平滑次要状态变化的通用 'all' 过渡。

文本链接上的细微不透明度变化或下划线动画。 · 即时反馈,无厚重的弹跳动画。

08

组件

  • button 极简,基于文本,使用大写字母间距,没有可见的边框或背景。
  • card 无边框,聚焦于大型产品摄影,下方是简洁的大写排版。
  • chip 用于尺寸选择的小型大写文本,通常伴有最小化的颜色色块。
  • input 流畅且极简,可能由透明背景上的简单底部边框定义。
  • hero 全出血分屏或全宽摄影,配有大写标题和带下划线的链接。

09

文案语气与禁用清单

  • 语气 精致、安静且高度考究。
  • 标题风格 全部大写,宽字间距,简单的描述性短语。
  • 按钮文案 带下划线的大写文本,避免使用标准按钮形状。
  • 不要使用投影——截图显示完全扁平、由摄影驱动的表面。
  • 不要在卡片上使用装饰性的圆角——截图显示的是锐利的矩形产品图像。
  • 不要对产品名称使用粗体字重——截图显示一致的400字重。
  • 不要在主导航中使用带下划线的链接——截图显示的是简洁的纯文本。
  • 不要使用明亮、饱和的强调色——截图显示的是灰色的单色调色板。
  • 不要为按钮使用厚重的背景色——截图显示的是仅带下划线的纯文本CTA。
  • 避免: 喧闹的促销语言
  • 避免: 明亮的强调色
  • 避免: 密集的文本块

10

包内真实截图

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

11

System Prompt

Norse Projects是一个高端的斯堪的纳维亚时尚电商网站,以极致的简约和编辑摄影为定义。调色板高度克制,背景使用 #FFFFFF,墨色使用 #58595B,柔和墨色使用 rgba(88,89,91,0.6),用于细微网格线的为 #ECEEEF。排版依赖一种无衬线字体(Helvetica Neue LT Std),几乎完全以大写形式、宽字间距(0.7px)和400常规字重使用。关键交互涉及针对 background-size 和 top 偏移的细微 0.2秒过渡。至关重要的是,避免在卡片上使用投影或圆角,避免对产品细节使用粗体字重,并避免使用明亮的强调色或装饰性按钮形状。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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