精选 · 开放 · 免费

The Marginalian

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

editoriallongform
The Marginalian 网站截图
↓ 下载设计系统包 (39 MB)在 OpenDesign 中打开

原站: https://www.themarginalian.org

📦 浏览包内文件 →

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

正文使用高可读性的过渡衬线体（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

组件

09

文案语气与禁用清单

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 — 移动首屏
移动首屏

抓自真实页面 · 真 computed styles

11

System Prompt

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

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

en · zh-CN · zh-TW · ja · ko