Cursor

VS Code DNA 위에 겹친 예측형 Tab 편집 + 우측 Agent 패널의 모노톤 IDE

서양AI개발 도구차가운modern-minimal고딕compactsoftflat라이트다크한글 지원출시 2023개정 2025

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

Brand DNA

브랜드 DNA

브랜드명: Cursor (Anysphere)
한 줄 정체성: VS Code를 fork해 AI를 깊게 통합한 AI-first 코드 에디터
공식 디자인 철학: "The AI Code Editor" — 개발자 워크플로우의 흐름을 끊지 않는 인라인 AI
시그니처 요소 1개: VS Code의 익숙한 편집 그리드 위에 얹힌 회색 인라인 Tab 제안과 우측 Agent 패널. 밝고 어두운 테마 모두에서 얇은 1px 디바이더와 절제된 모노톤 크롬이 코드 흐름을 유지함.

Tone & Mood

톤 & 무드

핵심 키워드 3개: 집중, 기민, 미래적
무드 설명: 라이트와 다크 테마를 모두 지원하는 익숙한 IDE 캔버스. UI 크롬은 무채색으로 물리고, 색은 신택스·diff·상태처럼 의미가 있는 지점에만 사용해 시선을 코드와 AI 변경 사항에 묶어둠.
비주얼 스타일: 모던 미니멀
밀도(Density): Compact — IDE 표준, 줄 간격 1.5
모서리 성향: Soft (4~6px)
평면성: Flat

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - Cursor Ink (모노톤 그레이스케일 · light 기본) */
  --color-primary-50:  #FAFAFA;
  --color-primary-100: #F4F4F5;
  --color-primary-200: #E4E4E7;
  --color-primary-300: #D4D4D8;
  --color-primary-400: #A1A1AA;
  --color-primary-500: #737373;
  --color-primary-600: #525252;
  --color-primary-700: #404040;
  --color-primary-800: #262626;
  --color-primary-900: #0A0A0A;

  /* Secondary - Syntax accents (코드용만) */
  --color-syntax-keyword: #7C3AED;
  --color-syntax-function: #2563EB;
  --color-syntax-string: #65A30D;
  --color-syntax-error: #E11D48;
  --color-syntax-comment: #737373;

  /* Neutral */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #FAFAFA;
  --color-neutral-100:  #F4F4F5;
  --color-neutral-300:  #D4D4D8;
  --color-neutral-500:  #737373;
  --color-neutral-700:  #404040;
  --color-neutral-900:  #0A0A0A;
  --color-neutral-1000: #000000;

  /* Semantic */
  --color-success-bg: #DCFCE7;
  --color-success-fg: #166534;
  --color-warning-bg: #FEF3C7;
  --color-warning-fg: #92400E;
  --color-error-bg:   #FFE4E6;
  --color-error-fg:   #BE123C;
  --color-info-bg:    #E0E7FF;
  --color-info-fg:    #4338CA;

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

  /* Text */
  --text-primary:    #0A0A0A;
  --text-secondary:  #404040;
  --text-tertiary:   #737373;
  --text-on-primary: #FAFAFA;
  --text-disabled:   #A1A1AA;

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

[data-theme="dark"] {
  /* Cursor Dark · 공식 테마 선택 시 재정의 */
  --color-primary-50: #0A0A0A;
  --color-primary-100: #171717;
  --color-primary-200: #262626;
  --color-primary-300: #404040;
  --color-primary-400: #525252;
  --color-primary-500: #737373;
  --color-primary-600: #A1A1AA;
  --color-primary-700: #D4D4D8;
  --color-primary-800: #E4E4E7;
  --color-primary-900: #FAFAFA;
  --color-syntax-keyword: #C4B5FD;
  --color-syntax-function: #60A5FA;
  --color-syntax-string: #A3E635;
  --color-syntax-error: #FB7185;
  --color-syntax-comment: #737373;
  --color-neutral-0: #0A0A0A;
  --color-neutral-50: #111111;
  --color-neutral-100: #1F1F1F;
  --color-neutral-300: #404040;
  --color-neutral-500: #737373;
  --color-neutral-700: #D4D4D8;
  --color-neutral-900: #FAFAFA;
  --color-neutral-1000: #FFFFFF;
  --color-success-bg: #052E16;
  --color-success-fg: #BEF264;
  --color-warning-bg: #422006;
  --color-warning-fg: #FBBF24;
  --color-error-bg: #450A0A;
  --color-error-fg: #FB7185;
  --color-info-bg: #1E1B4B;
  --color-info-fg: #A5B4FC;
  --bg-base: #0A0A0A;
  --bg-subtle: #111111;
  --bg-elevated: #1F1F1F;
  --bg-overlay: rgba(0,0,0,0.80);
  --text-primary: #FAFAFA;
  --text-secondary: #D4D4D8;
  --text-tertiary: #737373;
  --text-on-primary: #0A0A0A;
  --text-disabled: #525252;
  --border-default: #262626;
  --border-subtle: #171717;
  --border-strong: #404040;
  --border-focus: #60A5FA;
}

Typography

타이포그래피

폰트 페어링:
- UI(영문): Inter (OFL) / -apple-system 폴백
- 코드: JetBrains Mono / Fira Code / Cascadia Code
- 한글: Pretendard / Noto Sans KR
위계:
- Display: 32px / 600 / 1.2 / -0.02em
- H1: 22px / 600 / 1.3 / -0.015em
- H2: 16px / 600 / 1.35 / -0.01em
- H3: 13px / 600 / 1.4 / 0
- Body: 13px / 400 / 1.5 / 0
- Body Small: 12px / 400 / 1.5 / 0
- Code: 13px / 400 / 1.6 mono
- Caption: 11px / 500 / 1.4 / 0.02em

Spacing

스페이싱

Base unit: 4px (Compact)
토큰: ``css --space-xs: 2px; --space-sm: 4px; --space-md: 8px; --space-lg: 12px; --space-xl: 16px; --space-2xl: 24px; --space-3xl: 40px; ``
Container: 풀스크린 IDE 레이아웃, 사이드바 240px, AI 패널 380px

Border Radius

--radius-none: 0;
--radius-sm: 3px;
--radius-md: 4px;     /* 입력/버튼 기본 */
--radius-lg: 6px;
--radius-xl: 8px;
--radius-full: 9999px;

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
--shadow-md: 0 8px 24px rgba(0,0,0,0.08);
--shadow-lg: 0 18px 48px rgba(0,0,0,0.12);
--shadow-glow: 0 0 0 1px rgba(37,99,235,0.35);  /* 포커스 외곽선 */

Iconography

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

Component Guide

컴포넌트 가이드

Button

.btn { font: 500 12px/1 Inter,sans-serif; padding: 6px 12px; border-radius: 4px; border: 1px solid var(--border-default); background: var(--bg-elevated); color: var(--text-primary); transition: background 120ms ease; }
.btn:hover { background: var(--bg-subtle); border-color: var(--border-strong); }
.btn-primary { background: var(--text-primary); color: var(--text-on-primary); border-color: transparent; }
.btn-primary:hover { background: var(--color-primary-800); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-secondary); }

Input

.input { background: var(--bg-subtle); border: 1px solid var(--border-default); border-radius: 4px; padding: 6px 10px; font: 400 12px/1.5 Inter,sans-serif; color: var(--text-primary); width: 100%; }
.input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 2px rgba(96,165,250,0.2); }

Card (AI Suggestion)

.card { background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: 6px; padding: 12px; font-size: 12px; line-height: 1.5; }
.card .header { font: 500 10px/1 Inter,sans-serif; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); margin-bottom: 8px; }

Badge

.tag { display: inline-block; padding: 2px 6px; border-radius: 3px; font: 500 10px/1.4 'JetBrains Mono',monospace; }
.tag-cmd { background: var(--bg-elevated); color: var(--text-secondary); border: 1px solid var(--border-default); }
.tag-ai { background: var(--color-info-bg); color: var(--color-info-fg); border: 1px solid var(--border-default); }

Navigation (Activity Bar)

.actbar { background: var(--bg-base); border-right: 1px solid var(--border-default); width: 48px; padding: 8px 0; display: flex; flex-direction: column; gap: 4px; }
.actbar .item { width: 32px; height: 32px; margin: 0 8px; border-radius: 4px; display: grid; place-items: center; color: var(--text-tertiary); cursor: pointer; }
.actbar .item:hover { background: var(--bg-elevated); color: var(--text-primary); }
.actbar .item.active { background: var(--bg-elevated); color: var(--text-primary); }

Motion

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

Anti-patterns

1. AI 응답 강조에 단색 화려한 배경 사용 금지 — 모노톤 카드만 2. 코드 영역에 둥근 모서리(>8px) 금지 — IDE 그리드 깨짐 3. 코발트 블루 액센트 UI 크롬 금지 — VS Code와 차별화 (블루는 신택스에만) 4. 인라인 AI suggestion 위에 그림자 강조 금지 — flat ghost text가 시그니처 5. 다국어 폰트 fallback 누락 금지 — 한글 코드 주석 가독성 필수

Cursor

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

출처