厳選・オープン・無料

Buttondown

独立したクリエイターのための、飾り気のない人間味のあるメールニュースレタープラットフォーム。

01

デザイン DNA

デジタルクリエイターにとっての、落ち着いた信頼できる郵便局。

02

カラー

最大限の読みやすさを実現するハイコントラストの黒オンホワイト。アクションには鮮やかなプライマリブルーを、温かみのあるパステルのアクセントを用います。

03

タイポグラフィ

transitional-serif · humanist-sans

• display96px · 900
• heading48px · 700
• body18px · 400
• caption14px · 400

ディスプレイ用タイポグラフィには、ウェイトが重くトラッキングの tightened セリフフォントを使用します。 · 本文テキストには、高い可読性を実現するクリーンなサンセリフを使用します。 · 読みやすさを確保するため、行長を短く抑えています。

04

余白

標準の4pxベースライングリッドを採用し、セクション間にはたっぷりの垂直パディングを設けています。

05

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

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

0 4px 6px -1px rgba(0, 0, 0, 0.1) · 0 2px 4px -2px rgba(0, 0, 0, 0.1)

06

レイアウト

ヒーローから機能、クチコミへと明確な階層構造を持つ、標準のセンタードレイアウト。

07

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

インタラクティブ要素上の微細な色と背景のトランジション。

インタラクティブ要素上の微細な背景色の変化。 · アクションを示す視覚的な状態変化。

08

コンポーネント

• button 白いテキストを持つハイコントラストの青いピル型ボタン、またはシンプルなテキストリンク。
• card クチコミブロック。柔らかなイエローバックグラウンドに、太字の帰属表示。
• hero 白い背景に大きくインパクトのあるセリフ見出し。両側には鮮やかなフラットなイラストレーション。

09

文体と禁止事項

• トーン 自信に満ち、ややカジュアルで、安心感を与えるトーン。
• 見出し 直接的で修辞的な疑問文、および太く明確な主張。
• CTA アクション重視で率直な表現。

• ダークモードを使用しない — スクリーンショットは純白の背景を示しています。
• ネオンカラーを使用しない — スクリーンショットはプライマリブルー（#0069ff）とパステルのアクセントを使用しています。
• 見出しにサンセリフを使用しない — スクリーンショットはディスプレイ用テキストに重ウェイトのトランジショナルセリフを使用しています。
• everywhere鋭い角を使用しない — スクリーンショットはピル型ボタンと丸みのあるカード要素を示しています。
• インターフェースを雑踏させない — スクリーンショットは要素間に十分なホワイトスペースを保っています。
• 読むための密集したマルチカラムレイアウトを使用しない — スクリーンショットは段落の幅を制限しています。
• 避ける: 企業用語
• 避ける: 曖昧な約束
• 避ける: 過度に複雑な技術言語

10

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

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

11

System Prompt

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