큐레이션 · 오픈 · 무료

Rive

모든 곳에서 디자인하고, 애니메이션하고, 배포하는 인터랙티브 경험 엔진입니다.

designmotiontool
Rive 스크린샷
↓ 디자인 시스템 다운로드 (7 MB)OpenDesign 에서 열기

원본 사이트: https://rive.app

📦 팩 내용 보기 →

01

디자인 DNA

인터랙티브엔진애니메이션디자인코드

모든 플랫폼에서 인터랙티브 애니메이션을 구축하기 위한 세련되고 전문적인 워크스페이스입니다.

02

컬러

#f1f1f1Ink
#999999Ink soft
#000000BG
#121212BG soft
#1d1d1dBG quiet
#666666Muted
rgba(255,255,255,0.1)Line

높은 대비의 흰색 텍스트와 미묘한 그레이 악센트가 있는 깊은 어두운 캔버스입니다.

03

타이포그래피

grotesque-sans · humanist-sans · monospace

디스플레이 헤드라인은 대문자 사용과 좁은 자간을 적용합니다. · 본문 텍스트는 가독성을 위해 약간 확장된 행간을 사용합니다. · 버튼 텍스트는 대문자 사용과 넓은 자간을 적용합니다.

04

여백

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

표준 4px 기본 단위를 사용하며, 8px 및 16px 증분을 일관되게 적용합니다.

05

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

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

낮은 불투명도의 흰색을 사용한 미묘한 1px 실선 테두리입니다.

rgba(0, 0, 0, 0) 0px 0px 0px 1px inset

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

중앙 정렬된 콘텐츠 블록과 12칼럼 그리드가 있는 전체 너비 어두운 배경입니다.

07

모션과 인터랙션

220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

인터랙티브 요소에 대한 hover 전환 효과. · 섹션 간 부드러운 스크롤.

버튼과 링크에 미묘한 색상 또는 불투명도 변화. · 즉각적인 시각적 피드백.

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

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

11

System Prompt

이 사이트는 인터랙티브 애니메이션을 만드는 하이엔드 개발자 도구로, 주요 브랜드를 위한 '인터랙티브 경험 엔진'으로 포지셔닝됩니다. 순수 블랙 배경(#000000), 부드러운 어두운 표면(#121212), 고대비 흰색 텍스트(#f1f1f1)의 세련된 다크 모드 미학이 특징입니다. 타이포그래피는 디스플레이용 깔끔한 기하학적 grotesque-sans와 본문용 humanist-sans를 사용하여 전문적이고 권위 있는 느낌을 줍니다. 레이아웃은 중앙 정렬되어 여유로우며, 골드 아웃라인이 있는 대형 헤드라인과 두드러진 CTA 버튼을 강조합니다. 핵심 디자인 원칙은 절제, 명확성, 그리고 대비를 통한 시각적 임팩트입니다. 주요 금지 사항으로는 밝은 배경, 장난스러운 타이포그래피, 복잡한 레이아웃, 미묘한 버튼, 복잡한 다칼럼 히어로 섹션, 그리고 깊이감을 위한 드롭 섀도우 의존 피하기가 포함됩니다.

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

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

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

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