OpenDesign·你的设计资产库

网页参考

The Marginalian

一本致力于跨学科叙事与人文探索的数字杂志。

EditorialLongform
The Marginalian 网站截图

01

设计气质 DNA

编辑设计长篇内容人文智识策展

一个融合科学、哲学与艺术的思想策展库。

02

色彩

#FFDB00Accent
#262626Ink
#333333Ink soft
#FFFFFFBG
#F6F6F6BG soft
#E6E6E6BG quiet
#8C8C8CMuted
rgba(38, 38, 38, 1)Line

高对比度、以文本为核心的调色板，以标志性的活力黄色作为强调与结构色。

03

字体

didone-serif · transitional-serif · geometric-sans

  • display56px · 700
  • headline36px · 400
  • body18px · 400
  • caption12px · 400

正文使用高可读性的过渡衬线体（ff-tisa-web-pro / Georgia），并采用充足的行高。 · 标题常配以粗体的黄色矩形高亮。 · 图注和标签使用简洁的几何无衬线体，采用大写字母并调整字间距。

04

间距

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

基于正文主要段落的充足行高（1.8）建立垂直节奏。

05

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

sm · 3px
md · 8px
lg · 25px
pill · 999px

采用柔和的灰色或主色墨黑的实色边框。

rgba(0, 0, 0, 0.2) 0px 4px 10px 0px

06

布局

1024container
12columns
24pxgutter
768 / 1024breakpoints

桌面端采用三栏网格，主内容区较宽，两侧边栏用于展示相关内容或提示框。

07

动效与交互

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

针对长篇内容的平滑滚动 · 针对图片和段落切换的轻柔淡入淡出效果。

链接色彩变化及边栏项目的微妙透明度变化。 · 标准的文本选择与导航操作。

08

组件

  • button 基于文本的链接或圆角胶囊按钮，常采用大写及调整字间距。
  • card 边栏中内容密集的卡片，上下带有细边框。
  • chip 无标准标签组件；强调效果通过粗体黄色背景高亮实现。
  • input 极简的文本输入框，带有细微的底部边框。
  • hero 全宽黄色页头，配有大型、风格化的黑色品牌标识。

09

文案语气与禁用清单

  • 语气 智识的、人文的、反思的，并具有深度的策展感。
  • 标题风格 描述性且富有哲思，常以粗体黄色高亮进行格式化。
  • 按钮文案 支持性且以使命为导向，聚焦于人类劳动与赞助的价值。
  • 避免在正文中使用僵硬的几何字体——截图显示的是传统的、高可读性的衬线字体。
  • 避免为文章使用复杂的多栏网格——截图显示的是单一的窄栏，以优化阅读流。
  • 避免使用中性、低饱和度的调色板——截图显著使用了充满活力、高色度的黄色。
  • 避免使用厚重的投影——截图显示的是深度最小的扁平化表面。
  • 避免使用紧凑的行高——截图中正文使用了非常充足的 1.8 行高。
  • 避免使用杂乱的导航——截图显示的是简洁、极简的头部，聚焦于品牌标识。
  • 避免: 企业术语
  • 避免: 流行词汇
  • 避免: 过度技术化的语言
  • 避免: 激进的销售话术

10

包内真实截图

The Marginalian — 桌面首屏（hero）
桌面首屏（hero）
The Marginalian — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
The Marginalian — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
The Marginalian — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
The Marginalian — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
The Marginalian — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
The Marginalian — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
The Marginalian — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
The Marginalian — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
The Marginalian — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
The Marginalian — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
The Marginalian — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
The Marginalian — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
The Marginalian — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
The Marginalian — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
The Marginalian — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
The Marginalian — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
The Marginalian — 移动首屏
移动首屏

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

11

System Prompt

The Marginalian 是一本专注于跨学科叙事的数字杂志，融合了科学、哲学与艺术，具有温暖而智识的基调。其视觉系统由标志性的活力黄色（#FFDB00）定义，用于标题和文字高亮，搭配纯净的白色背景（#FFFFFF）和高对比度的墨黑色（#262626）。排版上依赖人文主义与过渡衬线体，以营造精致、类书籍的质感。布局严格以文本为核心，优先考虑长篇内容的可读性而非炫目视觉效果。关键约束：避免在正文中使用无衬线字体，避免使用紧凑的行间距，避免使用复杂、杂乱的 UI 组件。设计应感觉像一个策展图书馆，强调清晰度、以人为本的内容和智识深度，超越现代数字噪音。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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