Leeshfield 디자인 시스템

시네마틱 다크 스튜디오 — 토큰, 컴포넌트, 모션 규칙 문서

컬러 토큰 · 계층

bg
surface
panel
card
overlay
hover
CTA(앰버) / 위험(레드) 분리 규칙 · 상태 컬러
CTA위험성공경고정보중립

Button

변형 — CTA와 위험 작업은 색상 규칙이 분리된다
크기 · 상태
Icon Button

Form

워크스페이스 내에서 고유해야 합니다

이미 사용 중인 이름입니다

0 / 2000
8초
네이티브 음향·음악 포함

Overlay

Tooltip · Popover · Context Menu · Command Palette · Modal
우클릭 영역

크레딧 차감 확인

이 작업은 크레딧 원장에 기록됩니다. 계속하시겠습니까?

Feedback — 로딩·진행·성공·실패 모션 규칙

Skeleton (로딩)
업로드62%
생성 대기 (indeterminate)

아직 생성된 영상이 없습니다

첫 프롬프트를 입력하고 시네마틱 영상을 만들어 보세요.

Cards — 영상 썸네일이 최우선 시각 요소

Timeline Clip

마이크로인터랙션

드래그 목적지 강조 — 파일을 끌어다 놓아보세요
드롭 존
생성 시작 시네마틱 전환 (620ms 1회)
크레딧 예상값 부드러운 갱신
1,240 CR

모든 전환은 100~250ms(--duration-fast/base/slow)를 사용하며, prefers-reduced-motion 환경에서는 자동으로 비활성화됩니다.