Runway

모노크롬 캔버스 + Gen-4.5 프롬프트 컴포저 + 보라색 Generate 액션

서양AI크리에이티브 도구차가운modern-minimal고딕compactsoftsubtle다크한글 지원출시 2018개정 2025

갤러리에서 열기 — 적용 예시 · 가이드 다운로드

Brand DNA

브랜드 DNA

브랜드명: Runway
한 줄 정체성: Gen-4.5, Apps, Agent, Workflows를 한 작업 공간에 묶은 AI 영상·이미지 크리에이티브 스위트
공식 디자인 철학: "Building Real-World Intelligence" — 세계를 이해하고 시뮬레이션하는 모델로 창작자와 조직의 실행 범위를 넓힌다.
시그니처 요소 1개: 거의 검정인 작업 캔버스 위에 따뜻한 아이보리 타이포와 시네마틱 결과물을 놓고, 보라색 Generate 버튼만 행동의 초점으로 남기는 프롬프트 중심 스튜디오

Tone & Mood

톤 & 무드

핵심 키워드 3개: 영상감독, 정밀, 미래
무드 설명: 프롬프트 입력, 모델·비율·길이 설정, 생성 결과가 한 화면에 이어지는 다크 크리에이티브 스튜디오. 인터페이스는 무채색으로 물러나고 영상 프레임이 색을 담당하며, 보라색은 Generate 같은 핵심 행동에만 제한한다.
비주얼 스타일: 모던 미니멀
밀도(Density): Compact — 모델과 생성 옵션을 짧은 동선 안에 모은 도구형 워크플로우
모서리 성향: Soft (6~10px)
평면성: Subtle

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - 제품 UI의 Generate 액션 보라 */
  --color-primary-50:  #F1EFFF;
  --color-primary-100: #E4E0FF;
  --color-primary-200: #C9C1FF;
  --color-primary-300: #AA9CFF;
  --color-primary-400: #8875F5;
  --color-primary-500: #6C5CE7;  /* Generate 기본 */
  --color-primary-600: #5947D4;
  --color-primary-700: #4737AE;
  --color-primary-800: #352985;
  --color-primary-900: #251D5E;

  /* Secondary - 공식 흑백 브랜드 팔레트의 아이보리 */
  --color-secondary-500: #EEEEE8;

  /* Neutral - Runway Ink / Ivory */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F7F7F4;
  --color-neutral-100:  #EEEEE8;
  --color-neutral-300:  #B8B8B3;
  --color-neutral-500:  #777775;
  --color-neutral-700:  #343434;
  --color-neutral-800:  #1B1B1B;
  --color-neutral-900:  #0C0C0C;
  --color-neutral-1000: #000000;

  /* Semantic */
  --color-success-bg: #14271F;
  --color-success-fg: #55D49B;
  --color-warning-bg: #2A2415;
  --color-warning-fg: #F2C94C;
  --color-error-bg:   #2D1717;
  --color-error-fg:   #FF6B6B;
  --color-info-bg:    #1D1A36;
  --color-info-fg:    #AA9CFF;

  /* Surface */
  --bg-base:     #0C0C0C;
  --bg-subtle:   #121212;
  --bg-elevated: #1B1B1B;
  --bg-overlay:  rgba(0,0,0,0.88);

  /* Text */
  --text-primary:    #F7F7F4;
  --text-secondary:  #B8B8B3;
  --text-tertiary:   #777775;
  --text-on-primary: #FFFFFF;
  --text-disabled:   #555552;

  /* Border */
  --border-default: #2A2A2A;
  --border-subtle:  #202020;
  --border-strong:  #484848;
  --border-focus:   #8875F5;
}

Typography

타이포그래피

폰트 페어링:
- UI(영문): ABC Normal / Helvetica Neue 폴백
- 한글: Pretendard / Noto Sans KR
- 모델·크레딧 수치: ui-monospace / SFMono-Regular
위계:
- Display: 56px / 400 / 0.98 / -0.045em
- H1: 36px / 400 / 1.05 / -0.035em
- H2: 24px / 400 / 1.15 / -0.025em
- H3: 15px / 500 / 1.35 / -0.01em
- Body Large: 16px / 400 / 1.5 / -0.01em
- Body: 13px / 400 / 1.5 / 0
- Body Small: 11px / 400 / 1.45 / 0
- Caption: 10px / 500 / 1.4 / 0.04em

Spacing

스페이싱

Base unit: 4px
토큰: ``css --space-xs: 2px; --space-sm: 4px; --space-md: 8px; --space-lg: 12px; --space-xl: 16px; --space-2xl: 24px; --space-3xl: 40px; ``
Container: 풀스크린 NLE 레이아웃

Border Radius

--radius-none: 0;
--radius-sm: 4px;       /* 작은 상태 칩 */
--radius-md: 7px;       /* 버튼·입력 기본 */
--radius-lg: 10px;      /* 프롬프트 컴포저 */
--radius-xl: 14px;      /* 미디어 카드 */
--radius-full: 9999px;

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.35);      /* 칩·작은 팝오버 */
--shadow-md: 0 8px 24px rgba(0,0,0,0.42);     /* 생성 결과 hover */
--shadow-lg: 0 20px 56px rgba(0,0,0,0.58);    /* 모델 선택 패널 */
--shadow-focus: 0 0 0 2px rgba(136,117,245,.42); /* 포커스 링 */

Iconography

스타일: Outline 중심, 활성 상태만 제한적으로 Filled
Stroke 굵기: 1.5px
모서리 처리: Round
추천 라이브러리: Lucide / Phosphor

Component Guide

컴포넌트 가이드

Button

.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:32px; padding:0 12px; border:1px solid var(--border-default); border-radius:var(--radius-md); background:var(--bg-elevated); color:var(--text-primary); font:500 12px/1 'ABC Normal','Helvetica Neue',sans-serif; transition:background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); cursor:pointer; }
.btn:hover { background:#252525; border-color:var(--border-strong); }
.btn:active { transform:translateY(1px); }
.btn:disabled { opacity:.42; cursor:not-allowed; transform:none; }
.btn-primary { background:var(--color-primary-500); color:var(--text-on-primary); border-color:transparent; }
.btn-primary:hover { background:var(--color-primary-400); border-color:transparent; }
.btn-secondary { background:var(--color-secondary-500); color:#0C0C0C; border-color:transparent; }
.btn-ghost { background:transparent; border-color:transparent; color:var(--text-secondary); }
.btn-danger { background:var(--color-error-bg); color:var(--color-error-fg); border-color:rgba(255,107,107,.3); }
.btn.is-loading { color:transparent; position:relative; pointer-events:none; }
.btn.is-loading::after { content:""; position:absolute; width:12px; height:12px; color:var(--text-on-primary); border:1.5px solid currentColor; border-right-color:transparent; border-radius:50%; animation:rw-spin .7s linear infinite; }

Input / Prompt Composer

.input { width:100%; min-height:36px; padding:9px 11px; border:1px solid var(--border-default); border-radius:var(--radius-md); background:var(--bg-subtle); color:var(--text-primary); font:400 12px/1.45 'ABC Normal','Helvetica Neue',sans-serif; }
.input::placeholder { color:var(--text-tertiary); }
.input:focus { outline:none; border-color:var(--border-focus); box-shadow:var(--shadow-focus); }
.input[aria-invalid="true"] { border-color:var(--color-error-fg); }
.input:disabled { background:#151515; color:var(--text-disabled); cursor:not-allowed; }
.prompt-composer { padding:12px; border:1px solid var(--border-default); border-radius:var(--radius-lg); background:var(--bg-elevated); box-shadow:var(--shadow-sm); }

Card (Generation Result)

.generation-card { overflow:hidden; border:1px solid var(--border-default); border-radius:var(--radius-xl); background:var(--bg-subtle); box-shadow:var(--shadow-none); transition:transform var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); }
.generation-card:hover { transform:translateY(-2px); border-color:var(--border-strong); box-shadow:var(--shadow-md); }
.generation-card.is-featured { border-color:rgba(136,117,245,.65); }
.generation-card.is-outlined { background:transparent; }
.generation-card .media { aspect-ratio:16/9; position:relative; overflow:hidden; background:var(--bg-base); }
.generation-card .meta { padding:10px; color:var(--text-secondary); font-size:11px; }

Badge

.tag { display:inline-flex; align-items:center; min-height:22px; padding:0 7px; border-radius:var(--radius-full); font:500 10px/1 'ABC Normal',sans-serif; }
.tag-solid { background:var(--color-primary-500); color:var(--text-on-primary); }
.tag-subtle { background:var(--bg-elevated); color:var(--text-secondary); }
.tag-outline { background:transparent; color:var(--text-secondary); border:1px solid var(--border-default); }

Navigation (Workspace Rail)

.workspace-rail { width:64px; padding:10px 8px; border-right:1px solid var(--border-default); background:var(--bg-base); display:flex; flex-direction:column; align-items:center; gap:6px; }
.workspace-rail .nav-item { width:40px; height:40px; border:0; border-radius:var(--radius-md); background:transparent; color:var(--text-tertiary); display:grid; place-items:center; cursor:pointer; }
.workspace-rail .nav-item:hover { background:var(--bg-elevated); color:var(--text-primary); }
.workspace-rail .nav-item.active { background:var(--bg-elevated); color:var(--text-primary); box-shadow:inset 0 0 0 1px var(--border-default); }

Motion

--duration-fast: 80ms;
--duration-base: 150ms;
--duration-slow: 300ms;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
@keyframes rw-spin { to { transform:rotate(360deg); } }

Anti-patterns

1. 앱 크롬 전체를 보라 그라데이션으로 채우지 않는다 — 보라는 Generate와 선택 상태에만 쓴다. 2. 형광 그린·타임라인·REC 표시를 시그니처처럼 사용하지 않는다 — 현재 핵심은 생성 세션과 프롬프트 컴포저다. 3. 인터페이스 장식이 생성 이미지보다 강해지지 않게 한다 — 색과 질감의 주연은 결과물이다. 4. 타이포를 과도하게 굵게 쓰지 않는다 — ABC Normal 계열의 regular/medium 대비를 유지한다. 5. 큰 캡슐 버튼과 과장된 그림자를 반복하지 않는다 — 작은 소프트 모서리와 얕은 표면 위계를 우선한다.

Runway

Brand DNA

브랜드 DNA

Tone & Mood

톤 & 무드

Color System

컬러 시스템 (CSS 변수)

Typography

타이포그래피

Spacing

스페이싱

Border Radius

Border Radius

Shadow / Elevation

Shadow / Elevation

Iconography

Iconography

Component Guide

컴포넌트 가이드

Motion

Motion

Anti-patterns

Anti-patterns

Sources

출처