精选 · 开放 · 免费

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的内边距实现清晰的版块分隔。

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

悬停状态下平滑的透明度与颜色过渡（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内边距）；保持边框微妙，使用 rgba(255, 255, 255, 0.08)。整体感觉应是高端、数据驱动且具有权威性，同时平易近人。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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