큐레이션 · 오픈 · 무료

Vapi

대규모로 엔터프라이즈 음성 AI 에이전트를 구축 및 배포하기 위한 개발자 중심 플랫폼입니다.

aivoice

↓ 디자인 시스템 다운로드 (18 MB)OpenDesign 에서 열기

원본 사이트: https://vapi.ai

📦 팩 내용 보기 →

디자인 DNA

엔터프라이즈음성 AI플랫폼개발자확장 가능

소비자 앱처럼 접근 가능하게 느껴지면서도 하이엔드 에디토리얼 사진과 깔끔한 기술 문서를 결합한 엔터프라이즈급 개발자 플랫폼입니다.

컬러

#FA5E53Accent

#1F1F23Ink

#4B5563Ink soft

#FFFAEABG

#FAFAFABG soft

#F3F4F6BG quiet

#9CA3AFMuted

rgba(0,0,0,0.1)Line

고대비 다크 인크와 단일 고채도 레드 강조색을 기본으로 한 따뜻하고 크리미한 베이스 팔레트입니다.

타이포그래피

geometric-sans · humanist-sans · monospaced

display56px · 500
h240px · 500
h324px · 500
body16px · 400
caption14px · 400

대형 디스플레이 텍스트의 좁은 자간(네거티브)으로 현대적이고 강렬한 느낌을 연출합니다. · 카테고리 레이블과 '에이브로우' 텍스트의 대문자 및 넓은 자간 스타일을 적용합니다. · 헤드라인에 일관된 기본 기하학적 산세리프를 사용하여 강렬하고 기술적인 아이덴티티를 확립합니다.

여백

4px

8px

16px

24px

32px

40px

48px

64px

72px

96px

밀도 높은 기능 그리드의 명확성을 유지하기 위해 24px 및 40px 간격을 우선적으로 사용하는 넉넉하고 균일한 간격입니다.

표면 (라운드 / 그림자 / 경계선)

sm · 6px

md · 8px

lg · 12px

pill · 999px

미세한 영역 구분과 카드 정의를 위해 사용되는 최소한의 1px 실선 테두리입니다.

rgb(204, 204, 204) 0px 0px 2px 2px · 0px 4px 6px -1px rgba(0, 0, 0, 0.1)

레이아웃

1280container

12columns

24pxgutter

768 / 1024breakpoints

넉넉한 외부 패딩을 사용하는 표준 12열 그리드 시스템이며, 모바일에서는 단일 열 스택으로 축소됩니다.

모션과 인터랙션

150msmicro

220mssmall

400msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

인터랙티브 요소의 부드러운 색상 및 배경 전환. · 드롭다운 및 오버레이 표시를 위한 불투명도 및 가시성 페이드. · 상태 변화를 위한 미세한 변환 이동.

버튼 및 링크의 미세한 색상 전환 및 배경 변화. · 약간의 변환 또는 불투명도 변화로 즉각적인 시각적 피드백을 제공합니다.

컴포넌트

button 주요 버튼은 화이트 텍스트가 포함된 다크 필 모양이며, 보조 버튼은 미세한 테두리가 있는 투명 고스트 버튼입니다.
card 넉넉한 여백과 미세한 수평 구분선으로 분리된 깔끔하고 거의 테두리 없는 섹션입니다.
chip 미세한 회색 테두리와 6px~8px 테두리 반경을 가진 기능적 드롭다운 및 상태 필입니다.
input 8px 테두리 반경, 미세한 테두리 및 내부 패딩을 갖는 표준 텍스트 입력란입니다.
hero 화이트 디스플레이 텍스트의 높은 가독성을 보장하기 위해 다크 그라디언트 오버레이가 적용된 전체 폭 시네마틱 사진입니다.

보이스와 금지 목록

톤 자신감 있고 기술적이며 엔터프라이즈에 초점을 맞춘 어조입니다.
헤드라인 짧고 강렬하며 인간 중심적입니다(예: '모든 고객과 인간적으로 대화하세요').
CTA 직설적이고 행동 지향적입니다(예: '시작하기', '통화 시작').

순백(#FFFFFF) 배경을 사용하지 마세요 — 스크린샷에서는 따뜻하고 크리미한 오프화이트(#FFFAEA)를 사용합니다.
장식용 세리프 폰트를 사용하지 마세요 — 스크린샷은 깔끔하고 기하학적이며 휴머니스트 산세리프 카테고리에만 의존합니다.
밝은 네온 또는 다색 그라디언트를 사용하지 마세요 — 팔레트는 크림, 블랙, 단일 레드 강조색으로 엄격히 제한됩니다.
무거운 드롭 섀도우를 사용하지 마세요 — 스크린샷은 깊이감을 위해 거의 보이지 않을 정도로 미세한 box-shadow를 사용합니다.
테두리로 레이아웃을 어지럽히지 마세요 — 스크린샷은 분리를 위해 넉넉한 여백과 수평선을 사용합니다.
크고 여러 줄짜리 블록 인용문을 사용하지 마세요 — 스크린샷은 최대한의 임팩트를 위해 압축된 큰 디스플레이 타입을 사용합니다.
피하기: 지나치게 장난스럽거나 캐주얼한 언어
피하기: 명확한 맥락 없는 전문 용어
피하기: 시각적으로 복잡한 레이아웃

팩 안의 실제 스크린샷

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

실제 페이지에서 캡처 · 실 computed styles

System Prompt

Vapi는 개발자를 위해 설계된 엔터프라이즈 음성 AI 플랫폼입니다. 따뜻한 크림 배경(#FFFAEA), 강렬한 블랙 타이포그래피(#1F1F23), 주요 행동을 위한 단일 레드 강조색(#FA5E53)으로 구축된 정교하면서도 높은 가독성을 갖춘 미학을 특징으로 합니다. 타이포그래피 시스템은 헤드라인을 위한 좁은 자간의 굵고 기하학적인 디스플레이 폰트와 본문을 위한 깔끔한 휴머니스트 산세리프를 사용하는 엄격한 산세리프입니다. 레이아웃은 넉넉한 패딩을 사용하는 12열 그리드로 넓습니다. 주요 디자인 제약 사항에는 순백 배경 사용 회피, 장식용 세리프 사용 회피, 시각적 혼잡 사용 회피, 가독성과 엔터프라이즈 신뢰를 우선시하는 엄격하고 전문적인 팔레트 유지가 포함됩니다.

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

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

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

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