厳選・オープン・無料

Earlydog

大胆なタイポグラフィと抽象的なシェイプを通じて、クラウドインフラをヒューマン化する、遊び心のある幾何学的SaaSブランド。

01

デザイン DNA

クラウド運用のためのデジタル・バウハウス・スタジオ

02

カラー

暖色クリームベースに主アクセントを配した、高コントラストの幾何学パレット

03

タイポグラフィ

geometric-sans · humanist-sans · monospace

• display116px · 700
• display-md80px · 700
• body18px · 400

04

余白

120px〜128pxのセクションパディングを用いた、豊かな垂直リズム

05

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

ボタンには1px solid rgba(0, 6, 9, 0.1)、アクティブ状態には3px solid

06

レイアウト

テキスト/グラフィックスの非対称分割を用いた、フルブリード・ヒーロー

07

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

transition: all をグローバルに適用

インタラクティブ要素の微妙な状態変化 · 即座のレスポンス

08

コンポーネント

• button 太い黒ボーダーと大胆なテキストを持つ、ピル形のアウトラインボタン
• card 該当なし - レイアウトは従来のカードではなくグラフィック構成を使用
• chip 該当なし
• input 該当なし
• hero 太い2行のヘッドラインと幾何学的グラフィック構成を持つ、大型分割レイアウト

09

文体と禁止事項

• トーン プロフェッショナルでありながら、親しみやすい
• 見出し 大胆で、直接的、メリット重視
• CTA 明確なアクション動詞を持つシンプルなピルボタン

• ダーク背景を使用しない — スクリーンショットは暖色クリーム(#FFF9F0)ベースを示しています
• セリフフォントを使用しない — スクリーンショットは幾何学サンセリフとヒューマニストサンセリフのみを使用しています
• ドロップシャドウ付きの角丸カードを使用しない — スクリーンショットはシャドウのないフラットな幾何学構成を示しています
• くすんだ、デサチュレーションされたカラーを使用しない — スクリーンショットは高彩度の主アクセント(青、オレンジ、イエロー)を示しています
• グラデーション背景を使用しない — スクリーンショットはフラットな単色と幾何学シェイプを示しています
• 細く、軽いタイポグラフィを使用しない — スクリーンショットは tighten された文字間隔を持つ、太い700ウェイトのヘッドラインを示しています
• 標準的な長方形ボタンを使用しない — スクリーンショットは太い黒ボーダーを持つピル形ボタンを示しています
• 避ける: 専門用語の乱用
• 避ける: ダークモードの美学
• 避ける: フォトリアリスティックなイメージ

10

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

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

11

System Prompt

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