큐레이션 · 오픈 · 무료

Motion

일정 관리와 작업 관리를 자동화하여 생산성을 두 배로 높여주는 AI 기반 생산성 플랫폼입니다.

productivitysaas
Motion 스크린샷
↓ 디자인 시스템 다운로드 (21 MB)OpenDesign 에서 열기

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

📦 팩 내용 보기 →

01

디자인 DNA

생산성AI효율성자동화워크플로우

캘린더, 노트, 작업을 하나의 AI 기반 허브로 통합한 매끄럽고 효율적인 디지털 워크스페이스입니다.

02

컬러

#2c77e7Accent
#101828Ink
#475467Ink soft
#ffffffBG
#f0f4f8BG soft
#f7f8fbBG quiet
#787f86Muted
rgba(71, 84, 103, 0.1)Line

은은한 그레이 액센트와 선명한 블루 프라이머리 액션 컬러를 사용한 깨끗한 흰색 배경을 지향합니다.

03

타이포그래피

humanist-sans · monospace

본문 텍스트와 UI 요소에는 Inter를 사용합니다 · 대형 디스플레이 헤드라인에는 Albert Sans를 사용합니다 · 디스플레이 텍스트에는 타이트한 자간을 유지합니다 · 강조와 레이블에는 세미볼드 웨이트를 사용합니다

04

여백

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

가독성을 위한 넉넉한 화이트스페이스와 일관된 4px 그리드 시스템을 사용합니다

05

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

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

1px solid rgba(71, 84, 103, 0.1)

0 4px 6px -1px rgba(0, 0, 0, 0.05) · 0 2px 4px -2px rgba(0, 0, 0, 0.05) · 0 4px 6px -1px rgba(0, 0, 0, 0.1) · 0 2px 4px -2px rgba(0, 0, 0, 0.1) · 0 20px 25px -5px rgba(0, 0, 0, 0.1) · 0 8px 10px -6px rgba(0, 0, 0, 0.1)

06

레이아웃

1200container
12columns
24pxgutter
768 / 1024 / 1280breakpoints

히어로 섹션은 중앙 정렬 싱글칼럼 레이아웃을 사용하며, 기능 섹션은 멀티칼럼으로 전환합니다

07

모션과 인터랙션

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

모든 인터랙티브 요소에 부드러운 트랜지션 (150ms) · hover 상태를 위한 컬러 트랜지션 · 스케일 및 이동을 위한 transform 트랜지션 · 깊이감 효과를 위한 box-shadow 트랜지션

은은한 컬러 진해짐과 그림자 강화 · 버튼의 미세한 스케일 축소 (0.98)

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

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

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

11

System Prompt

이것은 프리미엄 SaaS 생산성 플랫폼인 Motion으로, 생산성을 두 배로 높여주는 AI 기반 워크스페이스로 포지셔닝됩니다. 핵심 디자인 요소에는 깨끗한 흰색 배경(#ffffff)에 은은한 그레이 액센트(#f0f4f8, #787f86)와 선명한 블루 프라이머리 컬러(#2c77e7)가 포함됩니다. 타이포그래피는 humanist sans-serif 폰트(Inter와 Albert Sans)를 사용하며, 크고 굵은 헤드라인(64px, 웨이트 700)과 깔끔한 본문 텍스트(16px, 웨이트 400)를 적용합니다. 중요한 디자인 제약 사항: 무거운 그림자나 테두리 사용을 지양하고, 넉넉한 화이트스페이스를 유지하며, CTA를 두드러지게 하지만 과장되지 않게 구성하고, 모든 텍스트에 강력한 대비율을 확보합니다. 디자인은 명확성과 전문성을 강조하되, 핵심 이점 문구에 그라디언트 텍스트 효과를 절제하여 사용합니다.

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

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

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

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