厳選・オープン・無料

Aeon

アイデア、サイエンス、文化に関するロングフォームエッセイのためのプレミアムデジタルパブリッシュ。

editoriallongform
Aeon のスクリーンショット
↓ デザインシステムをダウンロード (44 MB)OpenDesign で開く

オリジナル: https://aeon.co

📦 パックの中身を見る →

01

デザイン DNA

ロングフォームアイデアエッセイ哲学サイエンス

現代のデジタルパブリッシングとして再生した、名声ある学術ジャーナル。

02

カラー

#0C776DAccent
#000000Ink
#666666Ink soft
#FFFFFFBG
#F5F5F5BG soft
#999999Muted
rgba(0,0,0,0.1)Line

白地に黒のクリーンでコントラストの高い、サブティルなティールアクセントを加えた配色。

03

タイポグラフィ

didone-serif · humanist-sans · monospace

ナビゲーションとラベルにはモノスペースフォントを使用 · 記事タイトルにはディドン・セリフフォントを使用 · 本文とサンセリフ要素にはヒューマニスト・サンセリフフォントを使用

04

余白

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

標準の4pxベースグリッドと、一貫したパディングとギャップ。

05

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

sm · 4px
md · 0px
lg · 0px
pill · 999px

rgba(0,0,0,0.1)を使用した薄い1pxボーダー

0px 4px 6px -4px rgba(0,0,0,0.1) · 0px 10px 15px -3px rgba(0,0,0,0.1)

06

レイアウト

1280container
3columns
24pxgutter
768 / 1024breakpoints

フルワイドヒーローイメージと、記事カード向けのマルチカラムグリッド。

07

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

150msmicro
300mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

インタラクティブな要素上のスムーズなカラーおよびバックグラウンドカラートランジション。 · サブティルな不透明度トランジション。

リンクやボタン上でのサブティルなカラー変化または不透明度の変化。 · 即座に応答する標準ポインターカーソル。

08

コンポーネント

09

文体と禁止事項

10

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

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

11

System Prompt

Aeonは、アイデア、サイエンス、文化に関するロングフォームエッセイのためのプレミアムデジタルパブリッシュです。デザインは、白背景(#FFFFFF)と黒インク(#000000)を特徴とするクリーンでコントラストの高いエディトリアルレイアウトです。プライマリアクセントカラーは、ロゴに控えめに使用される控えめなティール(#0C776D)です。タイポグラフィは、見出しのディドン・セリフと本文のヒューマニスト・サンセリフの洗練されたコントラストに依存し、ナビゲーションラベルにはモノスペースが使用されます。重要な制約:ダークモードや重い背景色は決して使用しない;ディスプレイテキストにサンセリフを使用しない;不要なUI要素や明るく彩度の高いカラーでインターフェースを雑然としない。レイアウトは、ゆったりとしたホワイトスペースを用いたロングフォームの読み込みを優先します。

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

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

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

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