精选 · 开放 · 免费
Aeon
专注于思想、科学与文化的长篇随笔优质数字出版物。
editoriallongform
01
设计气质 DNA
长文思想随笔哲学科学
一本享有盛誉的学术期刊，以现代数字出版物形式重生。
02
色彩
#0C776DAccent
#000000Ink
#666666Ink soft
#FFFFFFBG
#F5F5F5BG soft
#999999Muted
rgba(0,0,0,0.1)Line
以黑白为主，搭配微妙青绿色点缀，干净且对比鲜明。
03
字体
didone-serif · humanist-sans · monospace
- display
56px · 700 - h1
42px · 700 - h2
28px · 700 - body
16px · 400 - caption
13px · 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
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Aeon 是一本专注于思想、科学与文化的长篇随笔优质数字出版物。设计采用干净、高对比度的编辑布局，以白色背景（#FFFFFF）和黑色文字（#000000）为主。主要强调色为柔和的青绿色（#0C776D），仅用于标识，且使用克制。字体排印依赖迪多纳衬线字体（用于标题）与人文无衬线字体（用于正文）之间的精妙对比，导航标签则使用等宽字体。关键约束：绝不使用深色模式或厚重的背景色；避免为展示文字使用无衬线字体；不要用不必要的 UI 元素或鲜艳、饱和的颜色使界面显得杂乱。布局优先考虑长文阅读体验，确保充足的留白。
en · zh-CN · zh-TW · ja · ko