Deepgram · デザイン DNA

音声認識、テキスト読み上げ、ボイスエージェント向けの、最も正確かつコスト効率の高いリアルタイムAPIで構築します。

デザイン DNA

支払いにおけるStripeのような、音声インテリジェンスの基盤インフラ層。

カラー

#00F099Accent

#FFFFFFInk

#E1E1E5Ink soft

#0F0F13BG

#1F1F24BG soft

#88888CMuted

rgba(44, 44, 51, 1)Line

ダークモードを基調とし、革新性と開発者向けツールを強調する鮮やかなティールのアクセント。

タイポグラフィ

ディスプレイサイズはインパクトのためにタイトなトラッキング（-1.2px）を使用。 · 本文は可読性のために余裕のある行高（1.55）を維持。 · フォントウェイトは400、500、600、700のみに厳密に限定。 · 見出しには幾何学的なサンセリフを使用し、現代的で技術的な正確さを伝達。

余白

4px

8px

16px

24px

32px

48px

64px

96px

一貫した4pxグリッドシステムと、異なるコンテンツブロックを分離するための余裕のある垂直間隔（32px、48px、64px）。

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

0px 24px 48px -12px rgba(38, 44, 52, 0.25) · 6px 0px 15px 0px rgba(56, 237, 172, 0.2) · -6px 0px 15px 0px rgba(20, 154, 251, 0.2)

レイアウト

明確なセクション区切りを持つ中央揃えのコンテンツ。ヒーローはフルワイドで中央揃えテキストを使用し、機能やパートナーには複数カラムグリッドへと移行。

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

ホバー時の滑らかなカラーおよびバックグラウンドトランジション（0.15秒〜0.2秒）。 · インタラクティブな要素に対する控えめな不透明度およびフィルターの変化。 · 主要なフレーズに対する視覚的な強調のためのグラデーションアニメーション。

ボタンやリンクに対する控えめなバックグラウンドカラーのシフトとテキストカラーの変化。 · ステータス変化（例：ボタンの押し込みやカラーシフト）による即座の視覚フィードバック。

コンポーネント

文体と禁止事項

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

Deepgram — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

System Prompt

Deepgramのデザインシステムは、ダークモードファースト、開発者向けのSaaS美学です。Voice AI向けのプレミアムで技術的なインフラプロバイダーとしてブランドを位置づけています。主要カラーは、深いダークグレーのバックグラウンド（#0F0F13）、鮮明な白のテキスト（#FFFFFF）、強調用の鮮やかなティール（#00F099）です。タイポグラフィは、幾何学的およびヒューマニストなサンセリフカテゴリに依存し、ヘッドラインには大きなディスプレイサイズ（56px以上）とタイトなトラッキングを使用。重要な注意点：明るいバックグラ绝えず使用しない、過度なグラデーションを避ける（主要なヘッドラインのみに使用）、CTAを小さくしない — 大きく目立つように維持。レイアウトはクリーンで中央揃え、12カラムグリッドと余裕のある間隔を用いて、スケール感と技術的洗練さを維持しています。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック（エージェント用） ↗