Procreate

작품을 감싸는 최소 UI + 양손 도구 레일 + 컬러 디스크가 만드는 iPad 캔버스

서양크리에이티브 도구중립modern-minimal고딕spaciousroundlayered라이트다크한글 지원출시 2011개정 2024

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

Brand DNA

브랜드 DNA

브랜드명: Procreate
한 줄 정체성: iPad 전용 페인팅·일러스트 앱 — Apple Pencil의 표준 캔버스
공식 디자인 철학: "Disappear so the work doesn't" — UI가 사라지는 캔버스 중심 톤
시그니처 요소 1개: 작품 가장자리로 물러난 최소 툴바와 양손 조작 레일, 브러시·레이어·컬러 디스크가 캔버스를 감싸는 편집 문법

Tone & Mood

톤 & 무드

핵심 키워드 3개: 아이패드, 브러시, 캔버스미니멀
무드 설명: 밝은 작업 환경용 Light와 작품에 집중하는 숯빛 Dark를 모두 제공한다. 어느 모드든 작은 SF 계열 라벨, 가장자리 툴, 둥근 플로팅 패널만 남겨 작품 자체가 화면의 주인공이 된다.
비주얼 스타일: 모던 미니멀
밀도(Density): Spacious
모서리 성향: Round (8~14px)
평면성: Layered — 갤러리 카드 그림자

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - Procreate Black */
  --color-primary-50:  #F7F7F7;
  --color-primary-100: #E5E5E5;
  --color-primary-200: #BFBFBF;
  --color-primary-300: #8A8A8A;
  --color-primary-400: #4A4A4A;
  --color-primary-500: #000000;
  --color-primary-600: #000000;
  --color-primary-700: #000000;
  --color-primary-800: #000000;
  --color-primary-900: #000000;

  /* Secondary - Brush rainbow (작품 그라데이션 톤) */
  --color-brush-coral:  #E73F58;
  --color-brush-amber:  #F5A623;
  --color-brush-mint:   #7AC4D5;
  --color-brush-plum:   #5A2A8C;
  --color-brush-sand:   #F5E5C8;

  /* Neutral */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #FAFAFA;
  --color-neutral-100:  #F2F2F3;
  --color-neutral-200:  #E4E4E6;
  --color-neutral-300:  #C9C9CC;
  --color-neutral-500:  #8B8B90;
  --color-neutral-700:  #66666B;
  --color-neutral-800:  #353537;
  --color-neutral-900:  #18181A;
  --color-neutral-1000: #000000;

  /* Semantic */
  --color-success-bg: #E8F7ED;
  --color-success-fg: #19733A;
  --color-warning-bg: #FFF3D9;
  --color-warning-fg: #8A5400;
  --color-error-bg:   #FCE9ED;
  --color-error-fg:   #B52D4C;
  --color-info-bg:    #E8F2FF;
  --color-info-fg:    #0066CC;

  /* Surface - Light interface */
  --bg-base:     #E9E9EA;
  --bg-subtle:   #F2F2F3;
  --bg-elevated: #FFFFFF;
  --bg-canvas:   #FFFFFF;
  --bg-overlay:  rgba(0,0,0,0.62);

  /* Text */
  --text-primary:    #18181A;
  --text-secondary:  #4F4F54;
  --text-tertiary:   #77777C;
  --text-on-primary: #FFFFFF;
  --text-disabled:   #AEAEB2;

  /* Border */
  --border-default: #C9C9CC;
  --border-subtle:  #DEDEE0;
  --border-strong:  #A8A8AC;
  --border-focus:   #0A84FF;
}

Typography

타이포그래피

폰트 페어링:
- 영문: SF Pro Display / SF Pro Text (Apple Native)
- 한글: Apple SD Gothic Neo / Pretendard
위계:
- Display: 36px / 700 / 1.15 / -0.01em
- H1: 22px / 600 / 1.2 / -0.005em
- H2: 17px / 600 / 1.3 / 0
- H3: 14px / 600 / 1.35 / 0
- Body Large: 15px / 400 / 1.5 / 0
- Body: 13px / 400 / 1.45 / 0
- Body Small: 12px / 500 / 1.4 / 0
- Caption: 11px / 600 / 1.3 / 0.02em
- Numeric: 13px / 500 tabular-nums

Spacing

스페이싱

Base unit: 4px
토큰: ``css --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 36px; --space-2xl: 56px; --space-3xl: 80px; ``
Container: iPad 풀스크린 (1024~1366), 좌우 패딩 20px

Border Radius

--radius-none: 0;
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 14px;
--radius-xl: 22px;
--radius-full: 9999px;

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
--shadow-md: 0 8px 20px rgba(0,0,0,0.16);
--shadow-lg: 0 16px 34px rgba(0,0,0,0.20);
--shadow-xl: 0 24px 56px rgba(0,0,0,0.24);

Iconography

스타일: Outline (얇은 선) + SF Symbols
Stroke 굵기: 1.5px
모서리 처리: Round
추천 라이브러리: SF Symbols / Phosphor 폴백

Component Guide

컴포넌트 가이드

Button

.btn { min-height: 38px; padding: 0 17px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; border-radius: var(--radius-full); font: 600 13px/1 -apple-system, 'SF Pro Text', sans-serif; cursor: pointer; transition: transform var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); }
.btn-primary { background: var(--color-primary-500); color: var(--text-on-primary); }
.btn-primary:hover { background: var(--color-primary-800); transform: translateY(-1px); }
.btn-primary:active { transform: scale(.97); }
.btn-secondary { background: var(--bg-elevated); color: var(--text-primary); border-color: var(--border-default); }
.btn-secondary:hover { background: var(--bg-subtle); }
.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-danger { background: var(--color-error-fg); color: #FFFFFF; }
.btn:disabled { opacity: .36; cursor: default; transform: none; }
.btn.is-loading::before { content: ""; width: 12px; height: 12px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.btn-tool { width: 40px; height: 40px; padding: 0; border-radius: 50%; background: var(--bg-elevated); color: var(--text-primary); border-color: var(--border-default); box-shadow: var(--shadow-sm); }
@keyframes spin { to { transform: rotate(360deg); } }

Input

.input { width: 100%; background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-full); padding: 10px 16px; color: var(--text-primary); font: 400 14px/1.3 inherit; }
.input::placeholder { color: var(--text-tertiary); }
.input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--color-info-bg); }
.input.is-error { border-color: var(--color-error-fg); }
.input:disabled { background: var(--bg-subtle); color: var(--text-disabled); cursor: not-allowed; }

Card (Artwork)

.card { background: var(--bg-elevated); border-radius: var(--radius-lg); padding: 18px; border: 1px solid var(--border-default); }
.card-emphasis { box-shadow: var(--shadow-md); border-color: transparent; }
.card-outlined { background: transparent; border-color: var(--border-strong); }
.artwork { position: relative; overflow: hidden; border-radius: var(--radius-md); background: var(--bg-elevated); cursor: pointer; transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
.artwork:hover { transform: scale(1.015); box-shadow: var(--shadow-md); }
.artwork .img { aspect-ratio: 4/3; background: linear-gradient(135deg, var(--color-brush-amber), var(--color-brush-coral) 50%, var(--color-brush-plum)); }
.brush-chip { padding: 10px 12px; display: flex; align-items: center; gap: 10px; border-radius: var(--radius-md); background: var(--bg-subtle); color: var(--text-primary); }
.brush-chip:hover { background: var(--border-subtle); }
.brush-chip .opt { margin-left: auto; color: var(--text-tertiary); font: 500 11px/1 inherit; font-variant-numeric: tabular-nums; }

Badge / Tag

.tag { padding: 4px 10px; border-radius: var(--radius-full); font: 650 11px/1.4 inherit; }
.tag-solid     { background: var(--color-primary-500); color: var(--text-on-primary); }
.tag-subtle    { background: var(--bg-subtle); color: var(--text-secondary); }
.tag-outline   { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-default); }
.tag-imported  { background: var(--color-info-bg); color: var(--color-info-fg); }
.tag-time-lapse{ background: var(--color-warning-bg); color: var(--color-warning-fg); }
.tag-shared    { background: var(--color-success-bg); color: var(--color-success-fg); }
.tag-dream     { background: linear-gradient(90deg, var(--color-brush-coral), var(--color-brush-plum)); color: #fff; }

Navigation (Top bar)

.topbar { min-height: 48px; padding: 8px 20px; display: flex; align-items: center; gap: 18px; background: var(--bg-elevated); border-bottom: 1px solid var(--border-default); font: 600 13px/1 inherit; }
.topbar .nav-link { color: var(--text-secondary); cursor: pointer; }
.topbar .nav-link:hover, .topbar .nav-link.active { color: var(--text-primary); }
.topbar .tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.topbar .tool { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--text-primary); }
.topbar .tool:hover { background: var(--bg-subtle); }

Motion

--duration-fast: 150ms;
--duration-base: 280ms;
--duration-slow: 450ms;
--ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

Anti-patterns

1. 인터페이스 면적을 과도하게 늘려 작품보다 도구 패널이 먼저 보이게 하지 않기 2. Light와 Dark에서 작품 색까지 함께 반전하거나 저채도로 바꾸지 않기 3. 툴 버튼을 각진 데스크톱 리본 UI로 만들지 않기 — 원형·라운드 플로팅 컨트롤 유지 4. 브러시·레이어·컬러 상태를 텍스트 메뉴만으로 표현하지 않기 5. iPad 가장자리 조작과 SF 계열의 작고 정밀한 라벨을 웹 대시보드식 대형 내비게이션으로 대체하지 않기

Procreate

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

출처