厳選・オープン・無料
Earlydog
大胆なタイポグラフィと抽象的なシェイプを通じて、クラウドインフラをヒューマン化する、遊び心のある幾何学的SaaSブランド。
SaaSDeveloper ToolsBold TypographyGeometricPlayful
01
デザイン DNA
クラウド運用インフラデベロッパーモダン
クラウド運用のためのデジタル・バウハウス・スタジオ
02
カラー
#0A65DBAccent
#000609Ink
#FFF9F0BG
#BFB1A3Muted
rgba(0, 6, 9, 0.1)Line
暖色クリームベースに主アクセントを配した、高コントラストの幾何学パレット
03
タイポグラフィ
geometric-sans · humanist-sans · monospace
- display
116px · 700 - display-md
80px · 700 - body
18px · 400
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
120px〜128pxのセクションパディングを用いた、豊かな垂直リズム
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 12px
pill · 9999px
ボタンには1px solid rgba(0, 6, 9, 0.1)、アクティブ状態には3px solid
06
レイアウト
1280container
12columns
32pxgutter
768 / 1024breakpoints
テキスト/グラフィックスの非対称分割を用いた、フルブリード・ヒーロー
07
モーションとインタラクション
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
transition: all をグローバルに適用
インタラクティブ要素の微妙な状態変化 · 即座のレスポンス
08
コンポーネント
- button 太い黒ボーダーと大胆なテキストを持つ、ピル形のアウトラインボタン
- card 該当なし - レイアウトは従来のカードではなくグラフィック構成を使用
- chip 該当なし
- input 該当なし
- hero 太い2行のヘッドラインと幾何学的グラフィック構成を持つ、大型分割レイアウト
09
文体と禁止事項
- トーン プロフェッショナルでありながら、親しみやすい
- 見出し 大胆で、直接的、メリット重視
- CTA 明確なアクション動詞を持つシンプルなピルボタン
- ダーク背景を使用しない — スクリーンショットは暖色クリーム(#FFF9F0)ベースを示しています
- セリフフォントを使用しない — スクリーンショットは幾何学サンセリフとヒューマニストサンセリフのみを使用しています
- ドロップシャドウ付きの角丸カードを使用しない — スクリーンショットはシャドウのないフラットな幾何学構成を示しています
- くすんだ、デサチュレーションされたカラーを使用しない — スクリーンショットは高彩度の主アクセント(青、オレンジ、イエロー)を示しています
- グラデーション背景を使用しない — スクリーンショットはフラットな単色と幾何学シェイプを示しています
- 細く、軽いタイポグラフィを使用しない — スクリーンショットは tighten された文字間隔を持つ、太い700ウェイトのヘッドラインを示しています
- 標準的な長方形ボタンを使用しない — スクリーンショットは太い黒ボーダーを持つピル形ボタンを示しています
- 避ける: 専門用語の乱用
- 避ける: ダークモードの美学
- 避ける: フォトリアリスティックなイメージ
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
EarlyDogは、バウハウスに着想を得たビジュアルシステムを使用するクラウドインフラSaaS企業です。パレットは、暖色クリーム(#FFF9F0)を中央に据え、コントラストの高い黒(#000609)テキストと、青(#A65DB)、オレンジレッド(#EF4C2C)、イエロー(#FFD100)の鮮やかな幾何学アクセントを用います。タイポグラフィには、ディスプレイに幾何学サンセリフ、本文にヒューマニストサンセリフを採用し、極めて太いヘッドライン(700ウェイト)と豊かな行間を特徴とします。重要な禁止事項:決してダーク背景を使用せず、決してセリフフォントを使用せず、決して要素にドロップシャドウを追加せず、決してグラデーションフィルを使用せず、決して細いタイポグラフィウェイトを使用しません。レイアウトは、従来のカードベースデザインよりも、大型のグラフィック構成を用いた非対称分割を好んでいます。
en · zh-CN · zh-TW · ja · ko