厳選・オープン・無料

Foundation

抑制されたモノクロムデザインによる、誠実でタイポグラフィ重視の終了告知。

01

デザイン DNA

率直な公開書簡。

02

カラー

高コントラストのモノクロム・パレットを基調とし、単一の温かみのあるアクセントを最小限かつ控えめに使用。

03

タイポグラフィ

humanist-sans

• display56px · 700
• body20px · 400
• caption11px · 400

日付やフッターテキストのような小さなラベルには、大文字で広い字間を設定。 · 主要な表示見出しには、狭い字間と太いウェイトを適用。 · 落ち着いた読書リズムを維持するために、段落間に十分な余白を設ける。

04

余白

テキストを強調するために十分な余白を設けた、一貫した垂直リズム。

05

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

半透明白または薄いグレーを使用した、微妙な1pxボーダー。

inset 0 0 2px 0 rgba(0, 0, 0, 0.03)

06

レイアウト

可読性に最適化された、狭い中央揃えのシングルカラム・レイアウト。

07

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

インタラクティブな要素に対する、滑らかに減速するトランジション。 · 控えめな透明度のフェード。

インタラクティブな要素に対する、微妙な背景色の変化。 · アクティブ状態に対する、滑らかなトランジション。

08

コンポーネント

• button 微妙なボーダーを持つ、ミニマルなピル型ボタン。
• card 埋め込みソーシャル投稿用に使用される、最小限のパディングを持つボーダーコンテナ。
• hero 中央揃えの大型見出しと小さな日付のみを含む、スタイリッシュなフルワイド・ヒーロー。

09

文体と禁止事項

• トーン 誠実、直截的、かつ透明。
• 見出し 短く、インパクトがあり、宣言的。
• CTA 控えめで目立たず、メインメッセージの従属となることが一般的。

• 複雑なレイアウトを使用しない — スクリーンショットは単一カラムで非常にフォーカスされた読書レイアウトを示しています。
• 幅広い色を使い分けない — スクリーンショットは厳密なモノクロム・パレットにアクセントが1点だけであることを示しています。
• セリフや装飾過多なフォントを使用しない — スクリーンショットはクリーンで中立的なヒューマニスト・サンセリフを示しています。
• 密集したコンパクトなスペーシングを使用しない — スクリーンショットは段落間に十分な余白があることを示しています。
• 太いボーダーやドロップシャドウを使用しない — スクリーンショットは非常に控えめな半透明のボーダーのみを示しています。
• 本文テキストをすべて中央揃えにしない — スクリーンショットは中央揃えのコンテナ内で左揃えの本文テキストを示しています。
• 避ける: マーケティング用語
• 避ける: 過度に明るいまたは彩度の高い色
• 避ける: 密集した複雑なレイアウト

10

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

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

11

System Prompt

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