v0 by Vercel

Geist 모노크롬 + AI 에이전트·에디터·라이브 프리뷰가 결합된 앱 제작 워크스페이스

서양AI개발 도구중립modern-minimal고딕compactsoftflat라이트다크한글 지원출시 2023개정 2026

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

Brand DNA

브랜드 DNA

브랜드명: v0 (Vercel)
한 줄 정체성: 자연어 → React/Next.js 컴포넌트를 즉시 생성하는 AI UI 빌더
공식 디자인 철학: Vercel의 "Less, but better" — 무채색 위에 한 줄 콘텐츠
시그니처 요소 1개: Geist 모노크롬 워크스페이스 안에 AI 에이전트, 전체 코드 에디터, 프로덕션급 라이브 프리뷰를 한 화면에 결합하고 반전된 단색 버튼만 액션에 사용

Tone & Mood

톤 & 무드

핵심 키워드 3개: 미니멀, 정밀, 모노
무드 설명: Vercel 디자인 언어의 연장. 그라데이션, 채도 있는 강조색을 모두 배제하고 그레이스케일 10단계만으로 위계를 만든다. AI라는 미래적 도구를 가장 조용한 형태로 제시.
비주얼 스타일: 모던 미니멀
밀도(Density): Compact — 코드/UI 정보 밀도가 높음
모서리 성향: Soft (6~8px)
평면성: Flat

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - Mono grayscale (라이트 캔버스 위 검정이 brand action) */
  --color-primary-50:  #FAFAFA;
  --color-primary-100: #F4F4F5;
  --color-primary-200: #E4E4E7;
  --color-primary-300: #D4D4D8;
  --color-primary-400: #A1A1AA;
  --color-primary-500: #000000;
  --color-primary-600: #18181B;
  --color-primary-700: #27272A;
  --color-primary-800: #3F3F46;
  --color-primary-900: #52525B;

  /* Secondary - 없음. 단색 원칙 */

  /* Neutral */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #FAFAFA;
  --color-neutral-100:  #F4F4F5;
  --color-neutral-300:  #D4D4D8;
  --color-neutral-500:  #71717A;
  --color-neutral-700:  #3F3F46;
  --color-neutral-900:  #18181B;
  --color-neutral-1000: #000000;

  /* Semantic - 라이트 톤 */
  --color-success-bg: #DCFCE7;
  --color-success-fg: #16A34A;
  --color-warning-bg: #FEF3C7;
  --color-warning-fg: #D97706;
  --color-error-bg:   #FEE2E2;
  --color-error-fg:   #DC2626;
  --color-info-bg:    #DBEAFE;
  --color-info-fg:    #2563EB;

  /* Surface */
  --bg-base:     #FFFFFF;
  --bg-subtle:   #FAFAFA;
  --bg-elevated: #F4F4F5;
  --bg-overlay:  rgba(0,0,0,0.50);

  /* Text */
  --text-primary:    #000000;
  --text-secondary:  #52525B;
  --text-tertiary:   #A1A1AA;
  --text-on-primary: #FFFFFF;
  --text-disabled:   #D4D4D8;

  /* Border */
  --border-default: #E4E4E7;
  --border-subtle:  #F4F4F5;
  --border-strong:  #D4D4D8;
  --border-focus:   #000000;
}

[data-theme="dark"] {
  --color-primary-50: #18181B;
  --color-primary-100: #27272A;
  --color-primary-200: #3F3F46;
  --color-primary-300: #52525B;
  --color-primary-400: #71717A;
  --color-primary-500: #FAFAFA;
  --color-primary-600: #E4E4E7;
  --color-primary-700: #D4D4D8;
  --color-primary-800: #A1A1AA;
  --color-primary-900: #71717A;
  --color-neutral-0: #000000;
  --color-neutral-50: #0A0A0A;
  --color-neutral-100: #18181B;
  --color-neutral-300: #3F3F46;
  --color-neutral-500: #71717A;
  --color-neutral-700: #A1A1AA;
  --color-neutral-900: #E4E4E7;
  --color-neutral-1000: #FAFAFA;
  --color-success-bg: #052E16;
  --color-success-fg: #4ADE80;
  --color-warning-bg: #422006;
  --color-warning-fg: #FBBF24;
  --color-error-bg: #450A0A;
  --color-error-fg: #F87171;
  --color-info-bg: #172554;
  --color-info-fg: #60A5FA;
  --bg-base: #000000;
  --bg-subtle: #0A0A0A;
  --bg-elevated: #18181B;
  --bg-overlay: rgba(0,0,0,0.85);
  --text-primary: #FAFAFA;
  --text-secondary: #A1A1AA;
  --text-tertiary: #71717A;
  --text-on-primary: #000000;
  --text-disabled: #52525B;
  --border-default: #27272A;
  --border-subtle: #18181B;
  --border-strong: #3F3F46;
  --border-focus: #FAFAFA;
}

Typography

타이포그래피

폰트 페어링:
- UI(영문): Geist (OFL, Vercel) / Inter 폴백
- 코드: Geist Mono / JetBrains Mono
- 한글: Pretendard / Noto Sans KR
위계:
- Display: 48px / 600 / 1.1 / -0.04em
- H1: 32px / 600 / 1.2 / -0.03em
- H2: 20px / 600 / 1.3 / -0.02em
- H3: 14px / 600 / 1.4 / -0.01em
- Body: 14px / 400 / 1.5 / 0
- Body Small: 12px / 400 / 1.5 / 0
- Code: 13px / 400 / 1.6 mono
- Caption: 11px / 500 / 1.4 / 0.01em

Spacing

스페이싱

Base unit: 4px
토큰: ``css --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-2xl: 40px; --space-3xl: 64px; ``
Container: max-width 1280px, 좌우 패딩 24px

Border Radius

--radius-none: 0;
--radius-sm: 4px;
--radius-md: 6px;     /* 기본 */
--radius-lg: 8px;
--radius-xl: 12px;
--radius-full: 9999px;

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
--shadow-md: 0 4px 12px rgba(0,0,0,0.5);
--shadow-lg: 0 16px 40px rgba(0,0,0,0.6);
--shadow-focus: 0 0 0 2px rgba(250,250,250,0.4);

Iconography

스타일: Outline (1.5px)
Stroke 굵기: 1.5px
모서리 처리: Round
추천 라이브러리: Lucide / Vercel Geist Icons

Component Guide

컴포넌트 가이드

Button

.btn { font: 500 13px/1 Geist, Inter, sans-serif; padding: 8px 14px; border-radius: 6px; border: 1px solid var(--border-default); background: transparent; color: var(--text-primary); transition: background 150ms ease, border-color 150ms ease; }
.btn:hover { background: var(--bg-elevated); }
.btn-primary { background: var(--text-primary); color: var(--text-on-primary); border-color: transparent; }
.btn-primary:hover { background: #E4E4E7; }
.btn-ghost { border-color: transparent; color: var(--text-secondary); }

Input (Prompt)

.prompt { background: var(--bg-subtle); border: 1px solid var(--border-default); border-radius: 8px; padding: 14px 16px; font: 400 14px/1.5 Geist, sans-serif; color: var(--text-primary); width: 100%; resize: none; }
.prompt:focus { outline: none; border-color: var(--border-focus); }
.prompt::placeholder { color: var(--text-tertiary); }

Card (Preview frame)

.preview { background: var(--bg-base); border: 1px solid var(--border-default); border-radius: 8px; padding: 0; overflow: hidden; aspect-ratio: 16/10; }
.preview .head { padding: 8px 12px; border-bottom: 1px solid var(--border-default); font: 500 11px/1 inherit; color: var(--text-tertiary); display: flex; gap: 6px; align-items: center; }

Badge

.tag { display: inline-flex; padding: 2px 8px; border-radius: 9999px; font: 500 11px/1.4 Geist, sans-serif; border: 1px solid var(--border-default); color: var(--text-secondary); background: transparent; }
.tag-version { font-family: 'Geist Mono', monospace; }

Navigation (Top bar)

.topbar { background: var(--bg-base); border-bottom: 1px solid var(--border-default); padding: 10px 16px; display: flex; align-items: center; gap: 12px; }
.topbar .logo { width: 18px; height: 18px; background: var(--text-primary); clip-path: polygon(50% 0,100% 100%,0 100%); }
.topbar .crumb { font: 500 13px/1 Geist, sans-serif; color: var(--text-secondary); }
.topbar .crumb.active { color: var(--text-primary); }

Motion

--duration-fast: 100ms;
--duration-base: 200ms;
--duration-slow: 400ms;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

Anti-patterns

1. 그라데이션 배경 금지 — 흑백 솔리드만 (Vercel 본가 hero gradient 와 차별) 2. 채도 있는 액센트 색 UI 사용 금지 — 흰색이 유일한 강조 3. AI 응답에 형광 보색 강조 금지 4. 카드 모서리 12px 초과 금지 — 컴포넌트 시각 일관성 5. 다단 그림자 금지 — 1단계 미세 그림자만

v0 by Vercel

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

출처