厳選・オープン・無料

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

デスクトップ向けの3カラムグリッドで、広いメインコンテンツエリアがあり、関連コンテンツやコールアウト用のサイドバーが側に配置されています。

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）、そして高コントラストのインク（#262622）で定義されます。タイポグラフィは、洗練された書籍のような雰囲気のために、ヒューマニストおよびトランジショナルセリフに依存しています。レイアウトはstrictlyにテキストファーストであり、派手なビジュアルよりも長文の可読性を優先します。主要な制約：本文にサンセリフを使わない、行間を詰めない、複雑で雑然としたUIコンポーネントを使わない。デザインはキュレーションされたライブラリのように感じられ、現代的なデジタルノイズよりも、明瞭さ、人間中心のコンテンツ、知的深度を重視する必要があります。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック（エージェント用） ↗

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