厳選・オープン・無料

Pulumi

クラウドエンジニアのための Infrastructure as Code。

01

デザイン DNA

クラウドインフラストラクチャのための高性能エンジン。パワフルでありながら、親しみやすい。

02

カラー

深い紫のアクセントを配したクリーンなホワイトスペースが、高級感と専門性を確立する。

03

タイポグラフィ

geometric-sans · humanist-sans · monospace

• display56px · 600

大きなディスプレイ見出しには、 tight な文字間隔（-1.8pxから-2.4px）を使用する。 · 本文テキストとUI要素には Inter を使用する。 · コードスニペットには Monaspace Neon を使用する。

04

余白

すべてのスペーシングに、一貫した4pxをベースユニットとする。

05

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

1px solid #e0dfe2

0px 10px 15px -3px rgba(0, 0, 0, 0.1) · 0px 4px 6px -4px rgba(0, 0, 0, 0.1)

06

レイアウト

標準的な12カラムグリッド。

07

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

ボタンやリンクのなめらかな hover トランジション。 · インタラクティブ要素の繊細な色の変化。

色の変化、または繊細なシャドウの増加。 · 少し暗い shades でアクティブステートを表現。

08

コンポーネント

• button プライマリアクションにはソリッドな紫、セカンダリにはアウトライン。
• card 白い背景に1pxボーダーと8pxボーダー半径。
• chip 薄いボーダーを持つピル形状。
• input クリーンな、単一ピクセルのボーダー。
• hero 左側に大きなタイポグラフィ、右側にインタラクティブな可視化を持つ分割レイアウト。

09

文体と禁止事項

• トーン 専門的で権威がありながら、現代的でアクセスしやすい。
• 見出し 簡潔で力強く、利益を志向したもの。
• CTA 直接的でアクション志向。

• メインページにダークな背景を使用しない — スクリーンショットでは主に白（#ffffff）の背景が使われている。
• コードにサンセリフフォントを使用しない — スクリーンショットでは Monaspace Neon（モノスペース）が使用されている。
• プライマリボタンに丸みのあるピル形状を使用しない — スクリーンショットでは8pxのボーダー半径を持つボタンが使われている。
• 複数の高彩度アクセントカラーを使用しない — スクリーンショットでは単一の主なアクセントカラーとして紫（#5a31c5）が使われている。
• ディスプレイタイポグラフィに幅広い文字間隔を使用しない — スクリーンショットでは tight なトラッキング（-2.4px）が使われている。
• すべてのサーフェスに重いドロップシャドウを使用しない — スクリーンショットでは特定のカードにのみ、繊細なボックスシャドウが使われている。
• 避ける: 過度にカジュアルなスラングや絵文字は避ける。
• 避ける: 価値提案を曖昧にする複雑な専門用語は避ける。
• 避ける: 視覚的な雑然さや過度なアニメーションは避ける。

10

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

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

11

System Prompt

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