厳選・オープン・無料

Gitpod

バックグラウンドエージェントのためのプラットフォーム。

01

デザイン DNA

自律型AIソフトウェアエージェントのためのエンタープライズグレードのオーケストレーション・プラットフォーム。

02

カラー

微細なグレーの階調を持つハイコントラストなモノクロームベースを、主要リンクにはダークグリーンのアクセントカラーを使用。

03

タイポグラフィ

transitional-serif · neo-grotesque-sans · monospace

• display72px · 400
• body18px · 400
• caption12px · 400

大物のディスプレイ文字にはトランジショナル・セリフを使用し、エディトリアルな権威を伝えます。 · すべてのUI要素と本文には、最大限の可読性のためにネオ・グロテスク・サンセリフを使用します。 · 大きなディスプレイテキストには、一体感のあるブロックを形成するために、 Tightな字間を維持します。

04

余白

8pxグリッド

05

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

1px solid rgba(10,14,25,1.0)

0px 0px 120px 0px rgba(0,0,0,0.07) · 0px 0.0346895px 0.208137px 0px rgba(0,0,0,0)

06

レイアウト

豊かなホワイトスペースと固定トップナビゲーションバーを持つ、中央揃えのコンテンツ。

07

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

メニューおよびUI状態の変化のための、滑らかな不透明度トランジション。 · hover時の微細な背景およびボーダーのカラー変化。

テキストおよびボーダーのための滑らかなカラー変化。 · 不透明度や背景の変化による、微細な視覚フィードバック。

08

コンポーネント

• button ダークな実塗りにホワイトテキスト、またはホワイト塗りにダークなボーダーとテキスト。
• card 微細なボーダーと8pxの角丸を持つ、クリーンなコンテナ。
• chip タグやステータスインジケーターのための小さな角丸コンテナ。
• input 明確なフォーカス状態を持つ標準化されたテキストフィールド。
• hero 大きなエディトリアル・スタイルのセリフ見出しと、サンセリフのサブテキストの組み合わせ。

09

文体と禁止事項

• トーン 権威があり、プロフェッショナルで、高度に技術的。
• 見出し セリフ書体による、太字で宣言的なステートメント。
• CTA 「Get started」や「Request a demo」のような、直接的で行動を促す表現。

• ネオンや高彩度のアクセントカラーを使用しないこと — スクリーンショットでは落ち着いたダークグリーンのアクセントが示されています。
• 過度に装飾的なサンセリフ書体を使用しないこと — スクリーンショットでは、ディスプレイ用のトランジショナル・セリフと、本文用のクリーンなネオ・グロテスクが示されています。
• 重いドロップシャドウを使用しないこと — スクリーンショットでは、最小限の、大きな半径のボックスシャドウ、またはシャドウなしで示されています。
• プライマリテキストに低コントラストを使用しないこと — スクリーンショットでは、白い背景に対して非常に暗い（#0A0E19）インクが示されています。
• 複雑で忙しい背景パターンを使用しないこと — スクリーンショットでは、クリーンで単色の背景が示されています。
• 角張った角を使用しないこと — スクリーンショットでは、8pxから12pxのボーダー半径が一貫して使用されています。
• 避ける: 過度にカジュアルなスラング
• 避ける: 過度の感嘆符
• 避ける: 文脈のない曖昧な技術用語

10

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

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

11

System Prompt

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