큐레이션 · 오픈 · 무료

Deepgram

가장 정확하고 비용 효율적인 실시간 API를 사용하여 Speech-to-Text, Text-to-Speech 및 음성 에이전트를 구축하세요.

aivoice

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

원본 사이트: https://deepgram.com

📦 팩 내용 보기 →

디자인 DNA

Voice AISpeech-to-TextEnterpriseInfrastructureAPIs

Stripe가 결제 분야의 기반이 되는 것처럼, 음성 지능을 위한 기반 인프라 계층입니다.

컬러

#00F099Accent

#FFFFFFInk

#E1E1E5Ink soft

#0F0F13BG

#1F1F24BG soft

#88888CMuted

rgba(44, 44, 51, 1)Line

혁신과 개발자 중심 도구를 강조하기 위한 밝은 틸 악센트를 사용한 다크 모드 중심의 팔레트입니다.

타이포그래피

geometric-sans · humanist-sans · monospace

display56px · 700
body-lg18px · 400
body-sm14px · 400
mono14px · 400

디스플레이 크기는 효과를 위해 타이트한 트래킹(-1.2px)을 사용합니다. · 본문 텍스트는 가독성을 위해 넉넉한 line-height(1.55)를 유지합니다. · 폰트 웨이트는 엄격하게 400, 500, 600, 700만 사용합니다. · 헤드라인용 기하학적 sans-serif는 현대적이고 정밀한 기술성을 전달합니다.

여백

4px

8px

16px

24px

32px

48px

64px

96px

일관된 4px 그리드 시스템을 사용하며, 명확한 콘텐츠 블록을 구분하기 위해 넉넉한 수직 간격(32px, 48px, 64px)을 둡니다.

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

sm · 4px

md · 8px

lg · 12px

pill · 999px

1px solid rgba(44, 44, 51, 1)

0px 24px 48px -12px rgba(38, 44, 52, 0.25) · 6px 0px 15px 0px rgba(56, 237, 172, 0.2) · -6px 0px 15px 0px rgba(20, 154, 251, 0.2)

레이아웃

1280container

12columns

24pxgutter

768 / 1024breakpoints

명확한 섹션 구분이 있는 중앙 정렬 콘텐츠입니다. 히어로 섹션은 전체 너비에 중앙 정렬 텍스트를 사용하며, 기능 및 파트너 섹션으로 넘어가며 다열 그리드로 전환됩니다.

모션과 인터랙션

150msmicro

200mssmall

300msmedium

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

hover 시 부드러운 색상 및 배경 전환(0.15초-0.2초). · 인터랙티브 요소에 대한 미세한 불투명도 및 필터 변화. · 핵심 구문에 대한 시각적 강조를 위한 그라데이션 애니메이션.

버튼과 링크에 대한 미세한 배경색 변화와 텍스트 색상 변경. · 상태 변화를 통한 즉각적인 시각적 피드백(예: 버튼 눌림 또는 색상 변화).

컴포넌트

button 주요 버튼은 진한 텍스트가 있는 단색 화이트이며, 보조 버튼은 밝은 틸 테두리가 있는 투명 버튼입니다. 둘 다 둥근 알약 형태의 radius를 사용합니다.
card 미세한 테두리, 둥근 모서리(8-12px), 그리고 일관된 내부 padding(32px)을 가진 다크 그레이 카드(#1F1F24)입니다.
chip 카테고리나 기능을 위한 알약 형태의 뱃지로, 활성 상태에 틸 악센트 색상을 사용합니다.
input 다크 테마 미학에 맞춰 미세한 테두리와 밝은 텍스트를 가진 다크 입력 필드입니다.
hero 거대하고 중앙 정렬된 헤드라인은 밝은 틸 그라데이션 텍스트('Powered by Deepgram')로 시작하며, 그 뒤에 설명 텍스트와 두 개의 두드러진 CTA가 옵니다.

보이스와 금지 목록

톤 자신감 있고 기술적이며 미래 지향적입니다.
헤드라인 시장 리더십과 기술적 우수성을 강조하는 굵고 선언적인 문장입니다.
CTA 직접적이고 행동 지향적입니다('무료로 가입하기', '구축 시작하기', 'Playground').

밝은 배경이나 파스텔 배경을 사용하지 마세요. 스크린샷은 주요 캔버스로 깊은 다크 테마(#0F0F13)를 보여줍니다.
모든 요소에 그라데이션을 적용하지 마세요. 스크린샷은 밝은 틸 그라데이션을 메인 헤드라인 텍스트에만 절제하여 사용합니다.
작거나 지저분한 타이포그래피를 사용하지 마세요. 스크린샷은 넉넉한 line-height를 가진 크고 굵은 디스플레이 크기(56px+)를 특징으로 합니다.
모든 요소에 둥근 모서리를 사용하지 마세요. 스크린샷은 카드와 버튼에 날카롭거나 미세하게 둥근 모서리(4-12px)를 사용하며, 알약 뱃지를 제외하고 완전히 원형으로 만들지 않습니다.
다색 팔레트를 사용하지 마세요. 스크린샷은 어두운 톤, 화이트 텍스트, 그리고 단일한 밝은 틸 악센트 색상이 지배적입니다.
주요 행동을 숨기지 마세요. 스크린샷은 히어로 섹션에서 '무료로 가입하기'와 'Playground'를 크고 고대비 CTA로 두드러지게 표시합니다.
피하기: 캐주얼하거나 과도하게 장난스러운 언어.
피하기: 명확한 맥락 없이 과도하게 사용되는 전문 용어.
피하기: 수동적이거나 망설이는 표현.

팩 안의 실제 스크린샷

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

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

System Prompt

Deepgram의 디자인 시스템은 다크 모드 우선, 개발자 중심의 SaaS 미학입니다. 이는 브랜드를 Voice AI를 위한 프리미엄, 기술 기반 인프라 제공자로 포지셔닝합니다. 주요 색상은 깊은 차콜 배경(#0F0F13), 선명한 화이트(#FFFFFF), 그리고 강조를 위한 밝은 틸 악센트(#00F099)입니다. 타이포그래피는 기하학적 및 휴머니스트 sans-serif 계열에 크게 의존하며, 헤드라인에는 큰 디스플레이 크기(56px+)와 타이트한 트래킹을 사용합니다. 필수 주의사항: 밝은 배경을 절대 사용하지 말고, 과도한 그라데이션을 피하세요(핵심 헤드라인에만 사용). CTA를 축소하지 마세요—크고 두드러지게 유지해야 합니다. 레이아웃은 깔끔하고 중앙 정렬되며, 12열 그리드와 넉넉한 간격을 사용하여 규모감과 기술적 정교함을 유지합니다.

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

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

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

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