厳選・オープン・無料

Fly.io

インフラを親しみやすく、高速に感じさせる、遊び心のある開発者ファーストのクラウドプラットフォーム。

01

デザイン DNA

コードをビルドおよびデプロイするための、親しみやすい近所のワークショップ。

02

カラー

柔らかく落ち着いた背景に、暗く高コントラストのテキスト、そしてプライマリアクション向けの単一の鮮やかな紫色アクセント。

03

タイポグラフィ

grotesque-sans · humanist-sans · monospace

• display56px · 500

ディスプレイテキストには、個性を出すために太字でやや不規則なgrotesque-sansを使用。 · 本文テキストには、クリーンで読みやすいhumanist-sansを使用。 · イタリックアクセント（「fearlessly」など）には、強調のためにserif体を使用。 · 大きな見出しには文字間隔を狭く、小さいテキストにはやや広めに設定。

04

余白

セクション間には豊かな垂直方向のスペーシングを、グループ化された要素の内部には適度なスペーシングを設定。

05

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

1px solid rgba(231,230,244,1)

rgba(32,34,55,0.075) 0px 0px 0px 1px · rgba(32,34,55,0.05) 0px 10px 15px -3px · rgba(91,33,182,0.1) 0px 5px 5px -2px

06

レイアウト

中央揃えのシングルカラムヒーローレイアウトから、マルチカラムのフィーチャーグリッドへと移行。

07

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

色や背景のトランジションには標準的なease-in-out。 · マイクロインタラクションには速いopacityとtransformの変化。

インタラクティブ要素の背景や色の微細な変化。 · 標準的な押下フィードバック。

08

コンポーネント

• button ピルシェイプのプライマリボタン（紫の背景に白文字）；セカンダリボタンは透明で微細なボーダー付き。
• card 柔らかなシャドウ付きのボーダーレスカード、または近接性でグループ化されたカード。
• chip 目立っては使用されていない；フレームワークロゴはアイコンバッジとして表示。
• input スクリーンショットには表示されていない；クリーンで丸みのある入力と推測。
• hero 中央に配置された大きな見出しの上に、特徴的な遊び心のあるイラストが配置。

09

文体と禁止事項

• トーン 自信に満ち、フレンドリーで、少し皮肉が効いている。
• 見出し 短く、力強く、率直で、強調のために太字とイタリックを混ぜることが多い。
• CTA 「Deploy your app」のように、アクション指向で明確。

• ダークテーマを使用しない — スクリーンショットは主にライトで、淡い紫色の背景を示している。
• 厳格で幾何学的なイラストを使用しない — スクリーンショットは手描きの、遊び心のある、有機的なラインアートを示している。
• 単一で鮮明なアクセントカラーのみを使用しない — スクリーンショットは主な紫色を示すが、イラストでは落ち着いたパステルのパレットに依存している。
• 密に詰め込まれたレイアウトを使用しない — スクリーンショットは豊かな余白と明確な視覚的区切りを示している。
• 純粋なsans-serifタイポグラフィのみを使用しない — スクリーンショットは見出しのイタリック強調にserif体が使用されていることを示している。
• 鋭く角の立ったUI要素を使用しない — スクリーンショットは一貫して丸みのある角、しばしばピルシェイプを示している。
• 避ける: 過度に企業的な専門用語
• 避ける: 冷たく、個人的でない言葉遣い
• 避ける: 密に詰め込まれた技術的なテキストの壁

10

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

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

11

System Prompt

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