厳選・オープン・無料
Manifesto Endel
抑制されたタイポグラフィと単一のCTAで、フォーカスされたブランドメッセージを伝える、ダークでミニマルなマニフェストページ。
Dark ModePremiumEditorialMinimalProduct
01
デザイン DNA
マニフェスト再構築集合未来Endel
ビジュアルの複雑さよりもコアメッセージを優先する、クリーンで集中度の高いマニフェストランディングページ。
02
カラー
#FFFFFFInk
#000000BG
#6F6F6FMuted
rgba(111, 111, 111, 1)Line
セカンダリUI要素に単一の控えめなグレーを用いた、高コントラストのモノクロームパレット。
03
タイポグラフィ
humanist-sans
- display
40px · 400 - h1
24px · 400 - body
16px · 400
全テキストにfont-family: Roboto, sans-serifを使用 · 全テキストにfont-weight: 400を使用 · 見出しには視覚的インパクトのためにややタイトな字間設定を使用
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
垂直方向の余白はたっぷりと取り、ロゴ、見出し、CTAの間に明確な区切りを作る。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 10px
lg · 16px
pill · 999px
ボタン(実体のある背景を使用)以外に、目に見える境界線はなし。
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
全コンテンツが中心軸に揃う、中央揃えの垂直積層レイアウト。
07
モーションとインタラクション
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
全要素にtransitionプロパティを'all'に設定。
ボタンはhover時に状態が変化する。 · 単一のプライマリアクションボタン。
08
コンポーネント
- button 控えめなグレー背景(#4D4D4D)、白文字、10pxのborder-radiusを持つ、プライマリCTA。
- hero ビューポート全体を覆う黒背景に、中央揃えのロゴ、見出し、CTA。
09
文体と禁止事項
- トーン 権威があり、未来的。
- 見出し 宣言的で中央揃え。
- CTA 直接的でアクション志向(「詳細を見る」)。
- 明るい背景を使わない — スクリーンショットは純粋な黒(#000000)の背景を示している。
- 複数のフォントウェイトを使わない — スクリーンショットではfont-weight 400が一貫して使用されている。
- 明るいアクセントカラーを追加しない — スクリーンショットは白と控えめなグレー(#6F6F6F)のみを示している。
- 複雑なレイアウトを使わない — スクリーンショットはシンプルで中央揃えの垂直積層構造を示している。
- カードにドロップシャドウを使わない — スクリーンショットに影のある要素はない。
- 装飾的なパターンを使わない — スクリーンショットはソリッドな黒背景を示している。
- 避ける: 複雑な文
- 避ける: 装飾的な要素
- 避ける: 競合する複数のアクション
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
あなたは、ミニマルでダークテーマのマニフェストウェブサイトのデザインシステムを生成しています。パレットは厳格にモノクローム:背景は純粋な黒(#000000)、主要テキストは白(#FFFFFF)、CTAボタンなどのセカンダリ要素には控えめなグレー(#6F6F6F)を使用します。タイポグラフィはhumanist-sansフォントのRobotoで、全要素でfont-weight 400のみを厳密に使用します。レイアウトは中央揃えで垂直積層です。主なDos:高コントラストを使用し、たっぷりと垂直方向の余白を保ち、インターフェースをミニマルに保つこと。主なDonts:明るいアクセントカラーを導入しない、装飾的なパターンや影を使わない、複数のフォントウェイトを使わないこと。声調は権威があり、未来的です。このシステムは、プレミアムで集中度が高く、意図的なものを感じるべきです。
en · zh-CN · zh-TW · ja · ko