厳選・オープン・無料

Dovetailapp

Dovetail は、AI を活用して顧客シグナルを実行可能なインサイトに変換する、洗練されたダークテーマの B2B プラットフォーム。

SaaSProductivityAIDeveloper ToolsDark Mode
Dovetailapp のスクリーンショット
↓ デザインシステムをダウンロード (23 MB)OpenDesign で開く

オリジナル: https://dovetailapp.com

📦 パックの中身を見る →

01

デザイン DNA

顧客インサイトデータプラットフォームAI ベースリサーチ分析

顧客フィードバックのための、モダンでデータ中心のコマンドセンター。

02

カラー

#0044FFAccent
#FAFAFAInk
#A7A7A7Ink soft
#0A0A0ABG
#141414BG soft
#151515BG quiet
rgba(255, 255, 255, 0.08)Line

ハイコントラストのモノクロベースに、プライマリアクションを示す単一のエレクトリックブルーアクセントを配置。

03

タイポグラフィ

geometric-sans · humanist-sans · monospace

現代的なテクノロジー感を確立するため、大規模でインパクトのあるヘッドラインにはジオメトリックサンセリフを使用。 · 本文テキストは快適な読み取りサイズを維持し、十分な行高で可読性を確保。 · モノスペースは、コードスニペットまたは技術データの表現にのみ厳密に使用。 · PP Mondwest はヒーロー内の「vibes」装飾要素にのみ使用。

04

余白

4px
8px
16px
24px
32px
48px
64px
96px
124px

124px のパディングで明確なセクション区切りを生む、余裕のある縦のリズム。

05

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

sm · 4px
md · 8px
lg · 12px
pill · 999px

カードや入力フィールドに、rgba(255, 255, 255, 0.08) を使用した控えめな 1px ボーダー。

0px 4px 12px rgba(0, 0, 0, 0.3) · 0px 8px 24px rgba(0, 0, 0, 0.4)

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

中央揃えのシングルカラムヒーローの後、幅広いマルチカラム機能グリッド。

07

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

220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing

hover 状態での滑らかな opacity と色のトランジション (0.2s-0.3s)。 · コンテンツブロックの控えめな出現アニメーション。 · インタラクティブな要素は、不快なジャンプなしに滑らかに色を変化。

ボタンやリンクでの、控えめな背景色の変化と opacity の変化。 · 色の反転やわずかなスケーリングによる、即座の視覚フィードバック。

08

コンポーネント

09

文体と禁止事項

10

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

Dovetailapp — 桌面首屏（hero）
桌面首屏（hero）
Dovetailapp — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Dovetailapp — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Dovetailapp — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Dovetailapp — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Dovetailapp — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Dovetailapp — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Dovetailapp — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Dovetailapp — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Dovetailapp — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Dovetailapp — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Dovetailapp — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Dovetailapp — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Dovetailapp — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Dovetailapp — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Dovetailapp — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Dovetailapp — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Dovetailapp — 移动首屏
移动首屏

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

11

System Prompt

Dovetailapp は顧客インサイトとリサーチに焦点を当てた B2B SaaS プラットフォーム。デザインの DNA は、深黒背景 (#0A0A0A) とハイコントラストの白文字 (#FAFAFA) を持つダークモードのエステティックで定義。プライマリアクセント色は鮮やかなエレクトリックブルー (#0044FF) で、主要なインタラクティブ要素に控えめに使用。タイポグラフィは、ディスプレイテキスト (112px ヒーロー) 用のクリーンでモダンなジオメトリックサンセリフと、本文コピー用のヒューマニストサンセリフを中心に構成され、優れた可読性を確保。重要なデザインルールには、ホワイト背景を絶対に使用しない、厳格なモノクロ＋単色パレットを維持する、セクション間に十分な間隔 (124px パディング) を確保する、ボーダーは rgba(255, 255, 255, 0.08) を使用して控えめにする、が含まれる。全体的な印象はプレミアムでデータドリヴン、権威がありながらも親しみやすい。

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

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

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

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