厳選・オープン・無料

CodeSandbox

プログラマティックに隔離されたサンドボックスを起動するための、開発者向けプラットフォームです。

01

デザイン DNA

クラウドのダークモードターミナル

02

カラー

深いダークニュートラル背景に対して、ハイコントラストなネオンアクセントカラーを採用

03

タイポグラフィ

grotesque-sans · monospace

• display56px · 500
• title32px · 500
• subtitle22px · 400
• body16px · 400

大きなディスプレイ見出しには、 tightening の強い負の文字間隔を使用 · テキストと背景の間に高いコントラストを維持

04

余白

4px ベースグリッド

05

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

1pxの実線ボーダー、色は#252525

06

レイアウト

ダーク背景とネオン背景セクションが交互に配置された、中央揃えの単一カラムレイアウト

07

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

hover状態のための滑らかなopacityトランジション · インタラクティブな要素のための控えめな色のトランジション

控えめな色の変化またはopacityの調整 · 即座のビジュアルフィードバック

08

コンポーネント

• button プライマリボタンはアクセントカラー背景(#d6fb41)にダークテキスト(#0e0e0e)を組み合わせ、ピル形状とします。セカンダリボタンはアウトライン付きです。
• card ネオン背景にブラックテキストを配置したフィーチャーカードで、目立つボーダーやシャドウはありません。
• chip 「新規」のようなラベル用の、小さなアクセントカラーバッジ。
• input ダーク背景に控えめなボーダーを持つ標準テキスト入力。
• hero ダーク背景に巨大なタイポグラフィ見出し、補足テキスト、およびプライマリCTAボタンを配置したヒーローセクション。

09

文体と禁止事項

• トーン 技術的、プロフェッショナル、率直
• 見出し スケールとセキュリティに焦点を当てた、大胆で簡潔な表現
• CTA 「無料で始める」や「CodeSandbox SDK を試す」のような、行動を促すフレーズ

• くすんだ、低コントラストのアクセントカラーを使用しない — スクリーンショットでは高彩度なネオンイエローグリーン(#d6fb41)がプライマリアクセントとして使用されている
• 見出しにセリフフォントを使用しない — スクリーンショットではクリーンでモダンなグロテスクサンスフォントファミリーが使用されている
• 過度なシャドウやグラデーションを使用しない — スクリーンショットでは最小限のlevationのフラットデザインが使用されている
• メインインターフェースに明るい白い背景を使用しない — スクリーンショットでは主にダーク背景(#0e0e0e)が使用されている
• 見出しに広い文字間隔を使用しない — スクリーンショットではディスプレイテキストにtightで負の文字間隔(-2.8px)が使用されている
• 複数のアクセントカラーを使用しない — スクリーンショットではダークニュートラルと単一のネオンアクセントのstrictな2トーンパレットが使用されている
• すべての要素に角丸を使用しない — スクリーンショットではシャープなエッジと控えめな角丸(max 10px)のミックスが使用されている
• 避ける: マーケティング用語
• 避ける: 曖昧な約束
• 避ける: 過度に複雑な文章
• 避ける: 不必要な感嘆符
• 避ける: 弱い、または受動的な言葉遣い

10

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

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

11

System Prompt

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