큐레이션 · 오픈 · 무료

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

크고 인상적인 헤드라인에는 기하학적 sans를 사용하여 현대적인 기술 느낌을 구현합니다. · 본문 텍스트는 가독성을 위한 충분한 행간과 함께 편안한 읽기 크기를 유지합니다. · 모노스페이스는 코드 조각이나 기술 데이터 표시에만 엄격하게 사용합니다. · PP Mondwest는 히어로의 'vibes' 장식 요소에 특별히 사용됩니다.

04

여백

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

124px 패딩으로 명확한 섹션 분리를 만드는 넉넉한 수직 리듬입니다.

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 히어로)를 위한 깔끔한 현대적 기하학적 sans-serif와 본문을 위한 휴머니스트 sans를 중심으로 뛰어난 가독성을 보장합니다. 중요한 디자인 규칙에는 다음이 포함됩니다: 절대 흰색 배경을 사용하지 않을 것; 엄격한 모노크롬-플러스-원-컬러 팔레트를 유지할 것; 넉넉한 간격(섹션 간 124px 패딩)을 확보할 것; 그리고 테두리를 rgba(255, 255, 255, 0.08)를 사용하여 미세하게 유지할 것. 전체적인 느낌은 프리미엄, 데이터 중심, 권위적이면서도 접근 가능합니다.

이 감각을 당신의 에이전트에

이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.

OpenDesign 스킬 ↗ · 이 팩 (에이전트용) ↗

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