厳選・オープン・無料
Buttondown
独立したクリエイターのための、飾り気のない人間味のあるメールニュースレタープラットフォーム。
publishingnewsletter
01
デザイン DNA
ニュースレターメール信頼性シンプルさ独立
デジタルクリエイターにとっての、落ち着いた信頼できる郵便局。
02
カラー
#0069ffAccent
#000000Ink
#4b5563Ink soft
#ffffffBG
#fef9c3BG quiet
#6b7280Muted
rgba(0, 0, 0, 0.1)Line
最大限の読みやすさを実現するハイコントラストの黒オンホワイト。アクションには鮮やかなプライマリブルーを、温かみのあるパステルのアクセントを用います。
03
タイポグラフィ
transitional-serif · humanist-sans
- display
96px · 900 - heading
48px · 700 - body
18px · 400 - caption
14px · 400
ディスプレイ用タイポグラフィには、ウェイトが重くトラッキングの tightened セリフフォントを使用します。 · 本文テキストには、高い可読性を実現するクリーンなサンセリフを使用します。 · 読みやすさを確保するため、行長を短く抑えています。
04
余白
4px
8px
12px
16px
24px
32px
48px
64px
96px
標準の4pxベースライングリッドを採用し、セクション間にはたっぷりの垂直パディングを設けています。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 9999px
pill · 9999px
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
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
ヒーローから機能、クチコミへと明確な階層構造を持つ、標準のセンタードレイアウト。
07
モーションとインタラクション
150msmicro
300mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
インタラクティブ要素上の微細な色と背景のトランジション。
インタラクティブ要素上の微細な背景色の変化。 · アクションを示す視覚的な状態変化。
08
コンポーネント
- button 白いテキストを持つハイコントラストの青いピル型ボタン、またはシンプルなテキストリンク。
- card クチコミブロック。柔らかなイエローバックグラウンドに、太字の帰属表示。
- hero 白い背景に大きくインパクトのあるセリフ見出し。両側には鮮やかなフラットなイラストレーション。
09
文体と禁止事項
- トーン 自信に満ち、ややカジュアルで、安心感を与えるトーン。
- 見出し 直接的で修辞的な疑問文、および太く明確な主張。
- CTA アクション重視で率直な表現。
- ダークモードを使用しない — スクリーンショットは純白の背景を示しています。
- ネオンカラーを使用しない — スクリーンショットはプライマリブルー(#0069ff)とパステルのアクセントを使用しています。
- 見出しにサンセリフを使用しない — スクリーンショットはディスプレイ用テキストに重ウェイトのトランジショナルセリフを使用しています。
- everywhere鋭い角を使用しない — スクリーンショットはピル型ボタンと丸みのあるカード要素を示しています。
- インターフェースを雑踏させない — スクリーンショットは要素間に十分なホワイトスペースを保っています。
- 読むための密集したマルチカラムレイアウトを使用しない — スクリーンショットは段落の幅を制限しています。
- 避ける: 企業用語
- 避ける: 曖昧な約束
- 避ける: 過度に複雑な技術言語
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
Buttondownは、独立したクリエイターにとっての信頼性が高く人間味のある選択肢として位置づけられるメールニュースレタープラットフォームです。デザインDNAは、純白の背景、実体の黒いテキスト、コール・トゥ・アクションに使用する鮮やかなプライマリブルー(#0069ff)を特徴とするクリーンでハイコントラストなパレットに基づいており、アクセントには温かみのあるパステルイエローを補足しています。タイポグラフィは、インパクトのあるディスプレイヘッドラインには重ウェイトのトランジショナルセリフ(Auto Pro)、高い可読性を実現する本文テキストにはクリーンなヒューマニストサンセリフ(Inter)を採用しています。重要なデザイン制約には、ダークモードの回避、確立されたブランドカラーのみの使用、およびゆとりあるホワイトスペースの維持が含まれます。見出しにサンセリフを使用せず、ボタンやカードに鋭い角のない丸みのある形状を使用してください。
en · zh-CN · zh-TW · ja · ko