厳選・オープン・無料

Ably

耐久性のあるリアルタイムアプリケーションを構築するための、開発者向けインフラストラクチャプラットフォーム。

01

デザイン DNA

現代のマルチデジタルエクスペリエンスのための高性能エンジンルーム。

02

カラー

高コントラストダークモードと、高優先度アクション用の鮮やかでエネルギッシュなオレンジアクセント。

03

タイポグラフィ

geometric-sans · humanist-sans · monospace

• display56px · 500
• body17px · 500

主要メッセージには大きく太字のディスプレイテキストを使用し、明確なタイポグラフィ階層を構築。 · ダーク背景と白/グレーテキストの間に十分なコントラストを確保。

04

余白

一貫した4pxの基本単位が、レイアウト全体に構造と予測可能な間隔を提供します。

05

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

微妙な区切りには1px solid rgba(226,232,240,1.0)、インタラクティブ要素には1px solid rgba(255,255,255,0.25)を使用。

0px 4px 4px 0px rgba(0,0,0,0.25)

06

レイアウト

中心コンテナを備えた構造化された12カラムグリッドシステム。ヒーローコンテンツ、統計、ユースケースカードのための明確なセクションを特徴とします。

07

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

ホバー、色の変化、レイアウトのシフトなど、インタラクティブ状態のための滑らかなトランジション。

色の変化、不透明度の調整、または微妙なパディングのシフトによる視覚的フィードバック。 · 標準的なインタラクティブフィードバックによる即座の応答。しばしば要素をアクティブ状態に遷移させます。

08

コンポーネント

• button 大胆で塗りつぶしのプライマリボタン（しばしばオレンジグラデーション）とアウトライン付きセカンダリボタン。両方とも大きなパディングと丸みのある角を備えます。
• card ダークテーマの角丸カード。ユースケースを画像と簡潔な説明で紹介するために使用されます。
• chip UI内のステータスや分類用の小さな丸みのあるタグまたはバッジ。
• input 明確なボーダーとインタラクティブ要素の特定の状態を備えたダークテーマの入力フィールド。
• hero 説得力のある見出し、説明テキスト、目立つCTAボタンを備えた、左揃えの大規模なヒーローセクション。

09

文体と禁止事項

• トーン 開発者向けで自信に満ち、権威があり、信頼性とパフォーマンスを強調。
• 見出し 直接的で、メリット指向で、簡潔。しばしば強い動詞と影響力のある数字を使用。
• CTA 「Start」や「Jump to」などの動詞を使用してユーザーを導く、実行可能で明確な表現。

• ライトテーマを使用しない。スクリーンショットではダーク背景（#03020D）に白テキストが表示されています。
• プライマリブルーアクセントを使用しない。スクリーンショットでは主要アクション用に鮮やかなオレンジ（#FF5416）が使用されています。
• 4px未満の丸みのある角を使用しない。スクリーンショットではカードに一貫して8px-12pxが使用されています。
• 複雑なサンセリフフォントを使用しない。スクリーンショットではクリーンな幾何学的およびヒューマニストサンセリフが使用されています。
• 小さく窮屈な間隔を使用しない。スクリーンショットでは十分な24pxのガターと大きなパディングが使用されています。
• 装飾的なセリフフォントを使用しない。スクリーンショットではモダンで機能的なサンセリフタイポグラフィが使用されています。
• 避ける: 技術的価値提案を曖昧にする、過度にカジュアルまたは専門用語を多用した表現を避ける。
• 避ける: ダークで高コントラストのテーマと衝突する、明るいパステルカラーパレットの使用を避ける。
• 避ける: 雑然としたレイアウトを避ける。主要情報を強調するために十分な余白を維持する。
• 避ける: 複雑で予測不能なアニメーションを避ける。モーションは微妙で目的をもったものにする。
• 避ける: 複数の競合するアクセントカラーの使用を避ける。焦点を合わせるためにプライマリのオレンジに集中する。

10

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

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

11

System Prompt

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