厳選・オープン・無料

Substack

大胆なオレンジアクセントと読みやすさに焦点を当てた、クリーンなコンテンツファーストの出版プラットフォーム。

publishingnewsletter

↓ デザインシステムをダウンロード (10 MB)OpenDesign で開く

オリジナル: https://substack.com

📦 パックの中身を見る →

デザイン DNA

出版ニュースレタークリエイターコミュニティ

現代的なデジタルマガジンや、インデペンデントなライターと読者のためのキュレーションされたフィードのように感じられる、クリーンでエディトリアルに焦点を当てたプラットフォーム。

カラー

#FF6719Accent

#363737Ink

#777777Ink soft

#FFFFFFBG

#F4F4F4BG soft

#EEEEEEBG quiet

#999999Muted

rgba(0,0,0,0.1)Line

可読性のために白背景と高コントラストのインクを使用。1つの鮮やかなオレンジアクセントがエネルギーとCTAの焦点を提供。

タイポグラフィ

transitional-serif · humanist-sans · monospace

display40px · 600
h124px · 600
h220px · 600
body15px · 400
caption13px · 400

顕著な見出しやエディトリアルディスプレイにはセリフフォントファミリーを使用。 · 本文テキスト、ナビゲーション、UI要素にはシステムサンセリフスタックを使用。 · タイトルと本文のサイズとウェイトの違いによる明確な階層を維持。

余白

4px

8px

12px

16px

20px

24px

32px

48px

要素間の間隔には一貫した8pxベースの垂直リズムを、よりタイトなギャップには4pxの増分を使用。

サーフェス (角丸 / 影 / 罫線)

sm · 4px

md · 8px

lg · 12px

pill · 9999px

1px solid rgba(0,0,0,0.1)

0 1px 0 0 rgba(255,255,255,0.2) inset, 0 -1px 0 0 rgba(0,0,0,0.1) inset · 0 2px 4px -1px rgba(0,0,0,0.06), 0 4px 6px -1px rgba(0,0,0,0.1)

レイアウト

1280container

12columns

24pxgutter

768 / 1024breakpoints

固定左サイドバーナビゲーション（デスクトップ）、中央フィードカラム、右サイドバー（ログイン/検索用、デスクトップ）；単一カラムスタックとボトムナビゲーション（モバイル）。

モーションとインタラクション

220msmicro

250mssmall

400msmedium

cubic-bezier(0.19, 1, 0.22, 1)easing

インタラクティブ要素のcolor、background-color、borderプロパティに対する滑らかな250msトランジション。 · ホバー状態のTransformトランジション。 · 複雑なアニメーションなし；モーションは控えめで機能的。

リンクやボタンなどのインタラクティブ要素に対する控えめなbackground-colorまたはtext-colorの変化。 · 標準のブラウザフォーカス状態による即時フィードバック。

コンポーネント

button 主要なCTA（「作成」「Substackを始める」）にはソリッドオレンジ。セカンダリボタンは、控えめなボーダーまたはライトグレーの塗りつぶしを用いた白背景を使用。
card フィードアイテムは細い境界線で区切られ、著者アバター、メタデータ、テキストコンテンツ、メディア、アクションバー（いいね、コメント、共有）を特徴とする。
chip 最小限の使用。「購読」テキストはセカンダリアクションリンクとして機能。
input 検索フィールドは、控えめなボーダーと角丸の清潔な白背景を使用。
hero セリフの見出しと2つの明確なCTAオプション（ソリッドオレンジボタン vs. 白テキストリンク）を持つ、大きなダークティールバナー。

文体と禁止事項

トーン 自信に満ち、率直で、クリエイター中心。
見出し 簡潔で力強い、エディトリアル感を出すためにセリフフォントを多用。
CTA 直接的で行動を促す、「開始」「サインイン」「ログイン」などの明確な動詞を使用。

ダークテーマを使用しない — スクリーンショットは主に白背景とライトグレーのアクセントを示している。
複数のアクセントカラーを使用しない — スクリーンショットはオレンジを単一の支配的な高彩度カラーとして示している。
メインフィードに角丸カードを使用しない — スクリーンショットはアイテムを単純な水平線で区切っている。
主要な見出しにサンセリフフォントを使用しない — スクリーンショットはディスプレイテキストにセリフフォント（Cahuenga/Spectralなど）を使用している。
カードに重いドロップシャドウを使用しない — スクリーンショットはフィードアイテムに非常に控えめまたはシャドウなしを示している。
コンテンツに密集した複数カラムグリッドを使用しない — スクリーンショットはメインフィードに単一の集中されたカラムを示している。
UIに装飾的な要素やイラストを使用しない — スクリーンショットはアイコンと写真のみのクリーンで機能的なレイアウトを示している。
避ける: 過度にカジュアルなスラング
避ける: 技術的な専門用語
避ける: 煽り系の言葉

パック内の実スクリーンショット

Substack — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

実ページから取得 · 実 computed styles

System Prompt

このデザインは、出版およびニュースレター向けプラットフォーム用です。クリーンな白背景レイアウトで、可読性とコンテンツの発見を優先。プライマリアクセントは、CTAやブランディングに使用される鮮やかなオレンジ（#FF6719）。タイポグラフィは、ディスプレイ見出しにセリフフォント（CahuengaやSpectralなど）と、本文テキストにシステムサンセリフスタックを組み合わせ使用。レイアウトは、固定サイドバー（デスクトップ）、中央フィード、ログイン用の右サイドバーを特徴とし、ボトムナビゲーションのある単一カラムのモバイルレイアウトに移行。重要な禁止事項：ダークモードを使用しない、複数のアクセントカラーを導入しない、複雑なアニメーションを使用しない。

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

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

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

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