厳選・オープン・無料
Hashicorp
クラウドインフラとセキュリティ管理のための、クリーンで権威のあるプラットフォーム
Developer ToolsCleanRestraintCalmRefined
01
デザイン DNA
インフラクラウドセキュリティ開発者信頼性
クラウドのための産業制御盤
02
カラー
#2264D6Accent
#000000Ink
#3B3D45Ink soft
#0D0E12BG
#FAFAFABG soft
#FFFFFFBG quiet
#B2B6BDMuted
rgba(213, 215, 219, 1.0)Line
単一の支配的なコーポレートブルーアクセントを用いた、ハイコントラストのダークモード
03
タイポグラフィ
humanist-sans · monospace
本文テキストの大部分にはsystem-ui sans-serifを使用 · 見出しとブランディングにはカスタムのヒューマニストsansを使用 · コードスニペットと技術ラベルにはモノをを使用
04
余白
4px
8px
12px
16px
24px
32px
48px
64px
96px
厳密な4pxベースグリッドと、セクション間の広めの余白
05
サーフェス (角丸 / 影 / 罫線)
sm · 2px
md · 4px
lg · 8px
pill · 999px
1px solid rgb(213, 215, 219)
0px 1px 1px 0px rgba(97, 104, 117, 0.05) · 0px 2px 2px 0px rgba(97, 104, 117, 0.05) · 0px 1px 2px 1px inset rgba(101, 106, 118, 0.05)
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
柔軟なグリッドカラムを持つ、標準的な中央揃えコンテナ
07
モーションとインタラクション
150msmicro
250mssmall
400msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
hover時のクイックなカラーおよび背景トランジション · フォーカスとインタラクション時の微細な不透明度変化
0.15秒のease-inでカラーおよびbackground-colorを変更 · 微細なスケールやカラー変化による、即座のビジュアルレスポンス
08
コンポーネント
- button 微細な1pxボーダーまたは4px角丸を伴う、クリーンなソリッド背景。「Get started」にはプライマリブルーを、その他のアクションにはセカンダリの白/黒を使用。
- card 分類用にグラデーション背景を特徴とする、微細なボーダーまたはシャドウを持つシンプルなコンテナ。
- chip ステータスやラベル用の、明るいボーダーを持つピルシェイプのバッジ。
- input 1pxソリッドボーダーと、フォーカス時の微細な内部シャドウを持つ標準フォームフィールド。
- hero フルワイドのダーク背景に、大きなタイポグラフィと顕著なグラデーションメッシュまたは抽象的なライティングエフェクト。
09
文体と禁止事項
- トーン プロフェッショナルで、権威があり、技術的
- 見出し 短く、力強く、断定的な（例：「Do cloud right」）
- CTA 行動を促す、直接的（例：「Meet The Infrastructure Cloud」「Get started」）
- 複雑なグリッドレイアウトを使用しない — スクリーンショットは広い余白を持つシンプルな中央揃えコンテナを示している
- 色の幅広いバリエーションを使用しない — スクリーンショットは主に白、黒、および1つのプライマリブルーアクセントで構成されるパレットを示している
- 装飾的またはスクリプトフォントを使用しない — スクリーンショットは全体を通してクリーンでプロフェッショナルなサンセリフタイポグラフィを示している
- 激しく、太いボーダーを使用しない — スクリーンショットは非常に低い不透明度またはカラーコントラストの微細な1pxボーダーを示している
- 重く、暗いシャドウを使用しない — スクリーンショットはシャドウがほとんどないか、奥行きのための非常に微細なものを示している
- 至る所に派手で明るいアクセントカラーを使用しない — スクリーンショットはプライマリアクションにのみブルーアクセントを控えめに使用している
- 避ける: 過度にカジュアルまたはスラングの言語
- 避ける: 華やかまたは過度に記述的な形容詞
- 避ける: 攻撃的または過度にセールスっぽい句読点
- 避ける: 過度な感嘆符の使用
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（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
これは、クラウドインフラとセキュリティツールに特化した、プロフェッショナルでエンタープライズ志向のウェブサイトです。デザインはクリーンで抑制的かつ権威があり、ダークモードのヒーローと大部分がモノクロームのパレット（黒#0D0E12、白#FFFFFF、グレー#D5D7DB、#B2B6BD）と、単一のプライマリコーポレートブルーアクセント（#2264D6）を使用しています。タイポグラフィは見出しにプロフェッショナルなヒューマニストsans-serif、本文に標準のsystem-ui sans-serif、コード要素にカスタムモノスペースに依存しています。レイアウトは、広い余白を持つ標準的な中央揃えコンテナです。重要なデザインルール：装飾的フォントを避ける、複雑なマルチカラムグリッドを避ける、派手なマルチカラーパレットを避ける、重いドロップシャドウを避ける、攻撃的なセールスコピーを避ける、プライマリブルーアクセントカラーの過度な使用を避ける。
en · zh-CN · zh-TW · ja · ko