큐레이션 · 오픈 · 무료

Synthesia

아바타와 성우 더빙으로 스튜디오 품질의 비디오 제작을 간소화하는 비즈용 올인원 AI 비디오 플랫폼.

aivideo
Synthesia 스크린샷
↓ 디자인 시스템 다운로드 (25 MB)OpenDesign 에서 열기

원본 사이트: https://www.synthesia.io

📦 팩 내용 보기 →

01

디자인 DNA

AIVideoPlatformBusinessEnterprise

AI를 사용하여 비디오 제작을 간소화하는 깨끗한 엔터프라이즈급 도구.

02

컬러

#3E57DAAccent
#0D0F2CInk
#333B52Ink soft
#F5F8FFBG
#FFFFFFBG soft
#EBF6DFBG quiet
#656C86Muted
rgba(230, 234, 244, 1)Line

부드러운 쿨 그레이 배경에 주요 블루 액센트를 사용하는 고대비, 접근 가능한 팔레트입니다.

03

타이포그래피

geometric-sans · monospace

모든 텍스트에 기하학적 산세리프를 사용합니다(헤드라인, 본문, UI 요소). · 2개 이상의 폰트 웨이트(400과 500)를 사용하지 않습니다. · 헤드라인은 컴팩트한_look을 위해 네거티브 letter-spacing를 적용합니다.

04

여백

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

4px 기본 그리드와 일관된 24px gutter, 카드용 32px padding을 사용합니다.

05

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

sm · 4px
md · 8px
lg · 12px
pill · 999px

1px solid rgb(230, 234, 244)

0px 6px 20px 0px rgba(16, 24, 40, 0.08) · 0px 2px 16px 0px rgba(16, 24, 40, 0.08) · 0px 0px 0px 1px rgb(230, 234, 244)

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

12컬럼 그리드와 24px gutter를 갖춘 중앙 정렬 고정 폭 컨테이너(1280px)로, 모바일 우선 브레이크포인트에 적응합니다.

07

모션과 인터랙션

220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

hover 및 click 시 단순한 색상과 transform 전환. · 로딩 상태를 위한 미묘한 불투명도 변화. · 복잡하거나 산만한 애니메이션 사용 금지.

텍스트 링크의 색상 변화와 버튼의 미묘한 배경 변화. · 인터랙티브 요소에서 scale 또는 transform 마이크로 인터랙션.

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

Synthesia — 桌面首屏（hero）
桌面首屏（hero）
Synthesia — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Synthesia — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Synthesia — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Synthesia — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Synthesia — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Synthesia — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Synthesia — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Synthesia — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Synthesia — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Synthesia — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Synthesia — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Synthesia — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Synthesia — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Synthesia — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Synthesia — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Synthesia — 移动首屏
移动首屏

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

11

System Prompt

Synthesia는 AI 기반 비디오 제작을 위한 엔터프라이즈급 SaaS 플랫폼입니다. 디자인은 primary blue accent(#3E57DA)와 부드러운 쿨 그레이 배경(#F5F8FF)을 특징으로 하는 깨끗하고 전문적인 미학을 가지고 있습니다. 타이포그래피는 일관된 기하학적 산세리프 폰트(웨이트 400과 500 사용)로 크고 컴팩트한 헤드라인을 특징으로 합니다. 주요 인터랙션 패턴은 미묘한 그림자와 12px 둥근 모서리를 포함합니다. 중요한 주의사항: 순수 블랙 텍스트, 날카로운 모서리, 무겁고 어두운 배경, 복잡한 그라데이션, 장식적 폰트를 피합니다. 레이아웃은 중앙 정렬되고 넓으며, 비즈니스 사용자를 위한 명확성과 탐색 용이성을 우선시합니다.

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

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

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

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