큐레이션 · 오픈 · 무료

Tella

전문적인 팀 및 크리에이터 워크플로를 위해 설계된 올인원 화면 녹화기 및 비디오 편집기.

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

원본 사이트: https://www.tella.com

📦 팩 내용 보기 →

01

디자인 DNA

화면 녹화비디오 편집팀 커뮤니케이션전문적올인원

전문적인 유용성과 접근 가능한 디자인을 균형 있게 맞춘 세련된 현대 비디오 제작 도구.

02

컬러

#5E51F8Accent
#0F172AInk
#64748BInk soft
#FFFFFFBG
#F1F5F9BG soft
#F8FAFCBG quiet
#94A3B8Muted
rgba(226, 232, 240, 1)Line

주의와 행동을 유도하기 위한 단 하나의 생동감 있는 보라색 포인트가 있는 깔끔한 슬레이트 팔레트.

03

타이포그래피

grotesque-sans · humanist-sans · monospace

큰 디스플레이 사이즈에서 좁은 네거티브 트래킹을 사용합니다 · 가독성을 위해 본문 텍스트는 일관된 450 웨이트를 유지합니다 · 기능과 장점을 구분하기 위해 명확한 타이포그래피 계층을 사용합니다

04

여백

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

緊密하고 예측 가능한 컴포넌트 간격과 패딩을 위한 일관된 4px 그리드 시스템.

05

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

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

1px solid rgba(226, 232, 240, 1)

0px 1px 2px 0px rgba(0, 0, 0, 0.05) · 0px 4px 16px 0px rgba(0, 0, 0, 0.06) · 0px 8px 32px 4px rgba(0, 0, 0, 0.15)

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

히어로 섹션을 강조하기 위해 충분한 여백을 둔 중앙 정렬 열 레이아웃.

07

모션과 인터랙션

150msmicro
300mssmall
600msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

인터랙티브 요소에서의 부드러운 0.15초 색상 및 배경 트랜지션 · UI 상태 변경 시의 미묘한 불투명도 트랜지션

상호작용을 나타내기 위해 버튼과 링크에서의 미묘한 배경 또는 색상 변화. · 약간의 스케일 또는 불투명도 변화로 즉각적인 시각적 피드백.

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

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

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

11

System Prompt

Tella는 화면 녹화 및 비디오 편집을 위한 전문 SaaS 제품으로, 팀과 콘텐츠 크리에이터를 대상으로 합니다. 디자인은 깔끔한 흰색과 슬레이트 팔레트(#FFFFFF, #F1F5F9, #0F172A)에 주요 CTA를 위한 단 하나의 생동감 있는 보라색 포인트(#5E51F8)를 사용합니다. 타이포그래피는 높은 가독성을 위해 깔끔하고 현대적인 휴머니스트 및 그로테스크 산세리프 계열에 의존합니다. 핵심 중요 피해야 할 점: 어지러운 레이아웃 사용 금지, 과도하게 장식적인 폰트 사용 금지, 그리고 프리미엄스럽고 도구 중심의 느낌을 유지하기 위한 충분한 여백의 중요성을 절대 무시하지 마세요. 전체적인 톤은 전문적이고 직접적이며 사용 편의성을 강조합니다.

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

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

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

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