OpenDesign·你的设计资产库

网页参考

AnOther

一本专注于艺术、时尚与文化的优雅、以图像为主导的编辑杂志。

EditorialFashion

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

01

设计气质 DNA

编辑艺术时尚文化高端

以数字杂志形式呈现的当代艺术与时尚策展画廊

02

色彩

#000011Ink
#686868Ink soft
#ffffffBG
rgba(0,0,17,1.0)Line

以单色为主的调色板,纯黑文字与白色背景形成最大对比,让摄影承载所有色彩与视觉趣味。

03

字体

transitional-serif · humanist-sans

  • display52px · 400
  • headline32px · 400
  • body18px · 400
  • caption12px · 400

所有标题与展示文字使用过渡衬线体。 · 正文与导航使用人文主义无衬线体。 · 保持充裕的行高以确保可读性。

04

间距

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

基于 4px 的一致比例,各板块周围留有充裕的垂直内边距(内容区域顶部内边距约 206px),营造视觉呼吸空间。

05

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

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

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

全宽主视觉图像后接多栏网格(文章预览为 4 栏)。内容居中,留有充裕留白。

07

动效与交互

150msmicro
400mssmall
600msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing

hover 状态下的颜色与背景过渡(0.15s ease-in-out) · 内容显现时的透明度渐变过渡

交互元素上的细微颜色过渡。 · 所有可点击元素使用标准指针光标。

08

组件

  • button 极简描边按钮(1px 黑色实线边框,黑色文字,白色填充),用于 Cookie 同意提示。
  • card 以图像为主的卡片,上方为分类标签,下方为衬线体标题;无边框或阴影。
  • hero 全出血摄影主视觉图像,叠加文字置于右侧。

09

文案语气与禁用清单

  • 语气 精致、有文化修养且具权威性。
  • 标题风格 醒目优雅的大型衬线体标题。
  • 按钮文案 低调简约的行动号召,不与编辑内容竞争。
  • 不要使用圆角——截图显示所有元素(包括按钮和卡片)均为尖锐的 0px 圆角。
  • 不要使用明亮的强调色——截图显示严格的单色黑白灰配色方案。
  • 不要使用粗体字重——截图显示所有元素均为 fontWeight 400。
  • 不要使用留白稀少的密集布局——截图显示板块间有充裕的内边距(206px)。
  • 不要对标题使用无衬线体——截图显示所有展示文字均使用过渡衬线体(Kepler3)。
  • 不要为卡片或 UI 元素添加投影——截图显示完全扁平、无阴影的表面。
  • 避免: 明亮或霓虹强调色
  • 避免: UI 元素上的圆角
  • 避免: 厚重装饰边框
  • 避免: 俏皮或随意的字体
  • 避免: 密集拥挤的布局

10

包内真实截图

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

11

System Prompt

这是一个专注于艺术、时尚与文化的高端编辑杂志网站(AnOther Magazine)。将其定位为精致、以图像为主导、具有画廊般呈现效果的数字出版物。关键十六进制颜色为 #ffffff(背景)、#000011(主墨色/文字)和 #686868(柔和/次要文字)。字体方面,标题使用过渡衬线体(Kepler3),正文使用人文主义无衬线体(HelveticaNowText),所有文字均为 fontWeight 400。关键禁忌:任何元素都不要使用圆角;不要引入明亮或霓虹强调色;不要使用粗体字重;不要创建没有充裕留白的密集布局;标题不要使用无衬线体;不要为表面添加投影。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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