精選 · 開放 · 免費

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