큐레이션 · 오픈 · 무료

AssemblyAI

개발자를 위한 깔끔하고 전문적인 음성 AI 인프라

01

디자인 DNA

음성 애플리케이션 구축을 위한 정밀 도구

02

컬러

기본 액션을 위한 단일 강렬한 악센트가 더해진 깔끔하고 고대비 베이스입니다.

03

타이포그래피

transitional-serif · geometric-sans · monospace

• display64px · 400
• body16px · 400
• mono14px · 400

큰 디스플레이 헤드라인에는 트랜지션 세리프 사용 · 본문과 내비게이션에는 기하학산스 사용 · 코드 스니펫과 기술 UI 요소에는 모노스페이스 사용

04

여백

명확성을 위한 넉넉한 여백과 일관된 8px 기본 그리드입니다.

05

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

무거움 없이 컨테이너를 정의하기 위해 은은한 다크 컬러의 미묘하고 가느다란 테두리입니다.

0px 4px 20px 4px rgba(29, 27, 22, 0.12)

06

레이아웃

내비게이션, 히어로, 콘텐츠 섹션 간의 명확한 계층 구조를 갖춘 넉넉한 간격입니다.

07

모션과 인터랙션

상호작용 요소의 hover 및 focus 시 미묘한 트랜지션 · UI 컴포넌트의 매끄러운 상태 변화

버튼과 내비게이션 링크의 미묘한 색상 또는 불투명도 변화입니다. · 상태 변화를 통한 즉각적인 시각적 피드백입니다.

08

컴포넌트

• button 채워진(액센트) 변형과 외곽선 변형 간의 높은 대비를 가진 굵고 대문자 버튼입니다.
• card 상호작용하거나 기술적인 콘텐츠를 담는 경우가 많으며, 가느다란 테두리와 미묘한 그림자를 가진 깔끔한 컨테이너입니다.
• chip API 카테고리에 사용되는, 가느다란 테두리를 가진 대문자 모노스페이스 레이블입니다.
• input 기능에 초점을 맞춘 깔끔한 테두리와 최소한의 스타일링입니다.
• hero 간결한 산세리프 부제목과 명확한 행동 유도와 함께 배치된 크고 굵은 세리프 헤드라인입니다.

09

보이스와 금지 목록

• 톤 전문적이고 권위적이며, 개발자 중심입니다.
• 헤드라인 규모와 중요성을 전달하는 크고 임팩트 있는 세리프 헤드라인입니다.
• CTA 직접적이고, 대문자이며, 행동 지향적입니다.

• 장난스럽거나 둥근 서체를 사용하지 마세요 — 스크린샷은 트랜지션 세리프와 기하학산스의 혼합을 보여줍니다.
• 밝고 다채로운 그라디언트를 사용하지 마세요 — 스크린샷은 단일 악센트가 더해진 깔끔하고 거의 단색 팔레트를 보여줍니다.
• 너무 많은 요소로 인터페이스를 복잡하게 만들지 마세요 — 스크린샷은 넉넉한 여백과 명확한 계층 구조를 보여줍니다.
• 기본 행동 유도(CTA)에 소문자를 사용하지 마세요 — 스크린샷은 버튼과 기술 레이블에 모든 대문자를 사용합니다.
• 본문 텍스트에 무겁고 굵은 가중치를 사용하지 마세요 — 스크린샷은 대부분의 텍스트에 일관된 400 가중치를 보여줍니다.
• 복잡하고 겹쳐진 그림자를 사용하지 마세요 — 스크린샷은 높은 요소에 단일하고 미묘한 박스 그림자를 보여줍니다.
• 피하기: 비격식적인 언어
• 피하기: 과도한 장식
• 피하기: 애매한 용어

10

팩 안의 실제 스크린샷

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

11

System Prompt

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