OpenDesign·你的设计资产库

网页参考

Aeon

专注于思想、科学与文化的长篇随笔优质数字出版物。

EditorialLongform
Aeon 网站截图

01

设计气质 DNA

长文思想随笔哲学科学

一本享有盛誉的学术期刊,以现代数字出版物形式重生。

02

色彩

#0C776DAccent
#000000Ink
#666666Ink soft
#FFFFFFBG
#F5F5F5BG soft
#999999Muted
rgba(0,0,0,0.1)Line

以黑白为主,搭配微妙青绿色点缀,干净且对比鲜明。

03

字体

didone-serif · humanist-sans · monospace

  • display56px · 700
  • h142px · 700
  • h228px · 700
  • body16px · 400
  • caption13px · 400

导航与标签使用等宽字体 · 文章标题使用迪多纳衬线字体 · 正文与无衬线元素使用人文无衬线字体

04

间距

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

基于标准 4px 基准网格,保持一致的内边距与间距。

05

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

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

使用 rgba(0,0,0,0.1) 的细 1px 边框

0px 4px 6px -4px rgba(0,0,0,0.1) · 0px 10px 15px -3px rgba(0,0,0,0.1)

06

布局

1280container
3columns
24pxgutter
768 / 1024breakpoints

文章卡片采用多栏网格布局,主视觉图为全宽。

07

动效与交互

150msmicro
300mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

交互元素的颜色与背景色实现平滑过渡。 · 微妙的透明度过渡。

链接与按钮在 hover 时产生微妙的颜色变化或透明度改变。 · 标准指针光标,响应即时。

08

组件

  • button 极简设计,通常为文本链接,带有微妙的 hover 过渡。
  • card 以图片为主的文章卡片,下方有严格的字体排印层级。
  • chip 无明显芯片组件,使用简洁文本标签作为分类。
  • input 极简的搜索或通讯订阅输入框。
  • hero 全宽电影感图片,搭配大号叠加衬线文字。

09

文案语气与禁用清单

  • 语气 学术、知性且富有探索精神。
  • 标题风格 大胆、醒目的衬线标题,清晰陈述一个具有启发性的观点。
  • 按钮文案 低调的文本链接,很少使用醒目的按钮。
  • 不要使用深色模式——截图显示的是浅色、白色背景的界面
  • 不要使用鲜艳、饱和的原色——截图显示的主色调是白色、黑色和柔和的青绿色
  • 不要为标题使用无衬线字体——截图显示的是大型、粗体的迪多纳衬线字体
  • 不要为正文使用密集的多栏布局——截图显示的是充足的留白和清晰的层级
  • 不要为每个卡片都使用厚重的边框或阴影——截图显示的是简洁、无边框的图文过渡
  • 不要使用俏皮或圆润的 UI 元素——截图显示的是利落、干净的线条和最小化的装饰
  • 避免: 过于随意的语言
  • 避免: 耸人听闻的标题
  • 避免: 视觉杂乱

10

包内真实截图

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

11

System Prompt

Aeon 是一本专注于思想、科学与文化的长篇随笔优质数字出版物。设计采用干净、高对比度的编辑布局,以白色背景(#FFFFFF)和黑色文字(#000000)为主。主要强调色为柔和的青绿色(#0C776D),仅用于标识,且使用克制。字体排印依赖迪多纳衬线字体(用于标题)与人文无衬线字体(用于正文)之间的精妙对比,导航标签则使用等宽字体。关键约束:绝不使用深色模式或厚重的背景色;避免为展示文字使用无衬线字体;不要用不必要的 UI 元素或鲜艳、饱和的颜色使界面显得杂乱。布局优先考虑长文阅读体验,确保充足的留白。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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