精選 · 開放 · 免費

Dovetailapp

Dovetail 是一個時尚、深色主題的 B2B 平台，運用 AI 將客戶訊號轉化為可行動的洞察。

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 的 padding，創造清晰的區塊分隔。

05

表面 (圓角 / 陰影 / 邊線)

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

細微的 1px 邊框，使用 rgba(255, 255, 255, 0.08)，應用於卡片和輸入欄位。

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 狀態下流暢的透明度和色彩過渡（0.2 秒-0.3 秒）。 · 內容區塊的細膩入場動畫。 · 互動元素平滑地改變色彩，不會有突兀的跳動。

按鈕和連結有細微的背景色彩變化和透明度改變。 · 透過色彩反轉或輕微縮放提供即時的視覺回饋。

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 padding）；並使用 rgba(255, 255, 255, 0.08) 保持邊框細微。整體感覺是優質、數據驅動、具權威感，同時保持可及性。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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