Warp

고정폭 글꼴 위에 명령·출력을 한 덩어리로 묶는 「블록」과 에이전트 입력창 — 검은 캔버스와 전기 파랑

서양개발 도구AI생산성차가운modern-minimal고정폭compactsharpflat다크라이트출시 2022개정 2026

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

Brand DNA

브랜드 DNA

브랜드명: Warp (워프, Warp.dev)
한 줄 정체성: 터미널에서 출발해 「에이전트 개발 환경(ADE, Agentic Development Environment)」으로 자란 개발 도구. 명령 실행과 코딩 에이전트 지휘를 한 창에서 한다. 2026년 8월에는 클라우드 「소프트웨어 팩토리」 플랫폼인 Warp Factories를 따로 내놓았고, 터미널은 별도 제품(Warp Terminal)으로 계속 나온다. 2026년 4월 저장소를 오픈소스로 공개했다(Rust).
공식 디자인 철학: "모든 개발자는 일할 때 더 강해진다고 느끼게 해 주는 소비자급 도구를 누려야 한다" · "가장 좋은 도구는 쓰기 쉽고, 방해하지 않는다"(World of Warp, 2024-10). 로고 글리프는 "엄청난 속도를 못 이겨 금이 간 터미널 창"이다. 2024년 10월 리브랜딩 때 글리프는 그대로 두고 워드마크만 새로 그렸다. 브랜드의 뿌리는 「다시 상상하기(reimagination)」이고, 비주얼은 공개 미술 작품을 가공해 세계관을 만드는 방식을 쓴다. 기본 테마 「Phenomenon」의 배경 이미지도 이 흐름이다.
현행 표기 (2026-09 실측): 제품 페이지(/terminal·/press)는 기울어진 두 사각형 글리프에 소문자 워드마크 warp를 쓴다. 새 홈(Factories 랜딩)은 같은 글리프를 픽셀로 다시 그린 warp-pixel-icon.svg를 쓰고, 본문 전체를 고정폭 글꼴로 조판한다. 대표 팔레트 토큰 이름은 --p-8bit: #2A1EFF다.
시그니처 요소 1개: 고정폭 글꼴(Hack 13px)로 명령과 출력을 한 덩어리로 묶는 「블록(Block)」, 그리고 그 아래 붙은 에이전트 겸 명령 입력창. 경로·브랜치·변경 줄 수가 칩으로 붙는다.

Tone & Mood

톤 & 무드

핵심 키워드 3개: 정밀함, 속도감, 개발자다움
무드 설명: 앱 기본은 거의 검은 캔버스(#121212)에 따뜻한 흰 글자(#FAF9F6)를 얹고, 강조는 파랑 한 가지로 한다. 새 웹사이트는 반대로 흰 바탕에 점 격자, 1px 괘선, [ fig. 1 — the factory ] 같은 도면식 캡션, 소문자 고정폭 문장으로 "설계도" 느낌을 낸다. 두 면 모두 장식을 빼고 글자와 선으로만 위계를 만든다.
비주얼 스타일: 모던 미니멀. 도면·터미널 문법을 따르며 그림자와 그라디언트는 쓰지 않는다
밀도(Density): Compact. 기본 글자 13px(앱 모노)·12px(앱 UI)·13px(웹 본문)이고, 한 화면에 명령 출력이 최대한 많이 들어가야 한다.
모서리 성향: Sharp (웹 --radius: .125rem = 2px, 버튼 --btn-radius: 0. 앱 블록은 직각이고 칩·입력만 3~4px (추정))
평면성: Flat. 웹 --shadow: none. 구획은 1px 괘선과 면 명도 차이로만 나눈다

Color System

컬러 시스템 (CSS 변수)

1차 테마는 다크다. 신규 사용자에게 기본으로 걸리는 테마 「Phenomenon」(소스 phenomenon.rs 주석: "for new users … default theme to Phenomenon")의 실제 값으로 썼다. 번들 테마에는 「Dark」(#050505 · 강조 #19AAD8)와 「Light」(#FFFFFF · 글자 #111111 · 강조 #00C2FF)가 들어 있다. 설정에 「시스템 테마 따르기」(appearance.themes.system_theme)가 있어 OS의 라이트/다크에 테마를 하나씩 짝지을 수 있다. 라이트 토큰은 번들 「Light」 테마 값이다. Primary 9단계는 웹 브랜드 팔레트 --p-8bit #2A1EFF를 500으로, --accent-2 #7267FF를 400으로, --p-night #0D0A3D를 900으로 두고 나머지는 보간했다(추정).

:root {
  /* Primary - Warp 8-bit Blue (웹 브랜드 팔레트) */
  --color-primary-50:  #EEEDFF;  /* (추정) 선택 행 옅은 면 */
  --color-primary-100: #DCD9FF;  /* (추정) */
  --color-primary-200: #B9B3FF;  /* (추정) */
  --color-primary-300: #9189FF;  /* (추정) */
  --color-primary-400: #7267FF;  /* --accent-2 실측 — 다크 위 링크 */
  --color-primary-500: #2A1EFF;  /* --p-8bit 실측 — 브랜드 대표색, 번호·링크·서브내비 */
  --color-primary-600: #2016D6;  /* (추정) hover */
  --color-primary-700: #1910A8;  /* (추정) pressed */
  --color-primary-800: #120B7A;  /* (추정) */
  --color-primary-900: #0D0A3D;  /* --p-night 실측 */

  /* Secondary - 앱 테마 강조색 / 웹 보조 */
  --color-secondary-500: #3780E9;  /* Phenomenon blue — 버튼 hover·강조 테두리 */
  --color-accent-500:    #2E5D9E;  /* Phenomenon accent — 기본 버튼·커서 */
  --color-yield-500:     #EEF17C;  /* --p-yield 실측 — 웹 「book a demo」 노랑 */
  --color-lilac-500:     #B7A4F2;  /* --p-lilac 실측 */

  /* Neutral */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #FAF9F6;  /* Phenomenon foreground */
  --color-neutral-100:  #E6E6E6;  /* modal feature title */
  --color-neutral-300:  #9B9B9B;  /* modal feature description */
  --color-neutral-500:  #616161;  /* ANSI black (dark) */
  --color-neutral-700:  #2A2A2A;  /* modal background */
  --color-neutral-900:  #121212;  /* Phenomenon background */
  --color-neutral-1000: #050505;  /* Dark 테마 배경 */

  /* Semantic - Phenomenon ANSI */
  --color-success-bg: #1CA05A26;
  --color-success-fg: #1CA05A;   /* ANSI green */
  --color-warning-bg: #E5A01A26;
  --color-warning-fg: #E5A01A;   /* ANSI yellow */
  --color-error-bg:   #D22D1E26;
  --color-error-fg:   #D22D1E;   /* ANSI red */
  --color-info-bg:    #3780E926;
  --color-info-fg:    #3780E9;   /* ANSI blue */

  /* Surface */
  --bg-base:     #121212;  /* 터미널 캔버스 */
  --bg-subtle:   #1C1C1C;  /* (추정) 탭 사이드바·선택 블록 */
  --bg-elevated: #232323;  /* (추정) 칩·팝오버 */
  --bg-overlay:  #2A2A2A;  /* 모달 배경 실측 */

  /* Text (FAF9F6 알파를 #121212에 합성) */
  --text-primary:    #FAF9F6;  /* foreground */
  --text-secondary:  #E2E1DE;  /* body_text 90% */
  --text-tertiary:   #9D9C9A;  /* label_text 60% */
  --text-on-primary: #FAF9F6;  /* primary_button_text */
  --text-disabled:   #868584;  /* disabled_label 50% */

  /* Border */
  --border-default: #333333;  /* (추정) */
  --border-subtle:  #404040;  /* subtle_border 20% 합성 */
  --border-strong:  #5A5A5A;  /* (추정) */
  --border-focus:   #3780E9;  /* surface_border = blue */
}

[data-theme="light"] {
  /* 번들 「Light」 테마 + 웹 라이트 팔레트 */
  --color-secondary-500: #00C2FF;  /* Light 테마 accent */
  --color-accent-500:    #2A1EFF;
  --color-success-fg: #10A778;  /* Light ANSI green */
  --color-warning-fg: #A89C14;  /* Light ANSI yellow */
  --color-error-fg:   #C30771;  /* Light ANSI red */
  --color-info-fg:    #008EC4;  /* Light ANSI blue */
  --color-success-bg: #10A7781F;
  --color-warning-bg: #A89C141F;
  --color-error-bg:   #C307711F;
  --color-info-bg:    #008EC41F;

  --bg-base:     #FFFFFF;  /* Light 배경 */
  --bg-subtle:   #F6F5FB;  /* --p-cool-white 웹 패널 */
  --bg-elevated: #FFFFFF;
  --bg-overlay:  #FFFFFF;

  --text-primary:    #111111;  /* Light foreground (17,17,17) */
  --text-secondary:  #5D5966;  /* 웹 --muted */
  --text-tertiary:   #918D9A;  /* 웹 --muted-2 */
  --text-on-primary: #FFFFFF;
  --text-disabled:   #B3B0BA;  /* (추정) */

  --border-default: #0D0A3D29;  /* 웹 --line */
  --border-subtle:  #0D0A3D12;  /* 웹 --line-soft */
  --border-strong:  #1A1522;    /* 웹 --p-space */
  --border-focus:   #2A1EFF;
}

Typography

타이포그래피

폰트 페어링:
- 한글: 공식 한글 서체 없음. 앱은 OS 글꼴로 폴백한다(font_fallback.rs). 고정폭 한글은 D2Coding(OFL)을 권장 (추정)
- 영문(앱 모노): Hack (MIT/Bitstream Vera) — 앱 번들 기본 글꼴 DEFAULT_MONOSPACE_FONT_NAME = "Hack", 13px
- 영문(앱 UI): Roboto (Apache 2.0) — 앱 번들, UI 기본 12px
- 영문(웹): Matter Mono·Matter (Displaay, 상용) — 새 홈은 본문 전체가 Matter Mono 13px/1.65. 구 페이지 헤딩은 The Future(상용), 버튼은 모노 대문자
위계 (웹 Factories 실측 + 앱 상수):
- Display: 56px / 400 / 1.05 / -0.035em (모노, 모바일 32px)
- H1: 40px / 400 / 1.1 / -0.02em (추정)
- H2: 32px / 400 / 1.15 / -0.02em (추정)
- H3: 18px / 500 / 1.3 / 0 (앱 HEADER_FONT_SIZE 18)
- Body Large: 14px / 400 / 1.6 / 0 (앱 명령 팔레트 14)
- Body: 13px / 400 / 1.65 / 0 (앱 모노 기본·웹 본문)
- Body Small: 12px / 400 / 1.5 / 0 (앱 UI 기본·웹 버튼)
- Caption: 10.5px / 400 / 1.4 / 0.1em 대문자 (웹 fig-bar, 앱 overline 10px)

Spacing

스페이싱

Base unit: 4px (웹 --space-* = 0.25rem × density)
토큰: ``css --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; /* --space-section */ ``
Container: 웹 --maxw: 1180px, 좌우 패딩 24px. 구 페이지는 --layout-max-width: 80rem. 앱 블록 안쪽 여백은 좌우 16px 안팎 (추정)

Border Radius

--radius-none: 0;      /* 버튼(--btn-radius:0)·블록·패널 */
--radius-sm: 2px;      /* --radius .125rem — 이미지·카드 */
--radius-md: 4px;      /* (추정) 앱 칩·입력 */
--radius-lg: 8px;      /* (추정) 팝오버·모달 */
--radius-xl: 12px;     /* (추정) 앱 창 모서리 */
--radius-full: 9999px; /* 상태 점·웹 chip(20px) 전용 */

Shadow / Elevation

--shadow-none: none;                              /* 기본 — 웹 --shadow: none */
--shadow-sm: 0 0 0 1px var(--border-default);     /* 괘선형 구획(그림자 대신 선) */
--shadow-md: 0 4px 12px rgba(0,0,0,0.24);         /* (추정) 드롭다운·명령 팔레트 */
--shadow-lg: 0 8px 30px rgba(0,0,0,0.12);         /* 웹 --img-shadow 실측 — 제품 스크린샷 */
--shadow-xl: 0 24px 64px rgba(0,0,0,0.45);        /* (추정) 앱 창 전체 */

Iconography

스타일: Outline 중심. 웹은 Phosphor(256 그리드, 새 창 화살표 등 실측), 앱은 자체 단색 아이콘
Stroke 굵기: 1.5px (24px 기준) (추정)
모서리 처리: Square 쪽. 끝이 곧고 기계적인 인상
추천 라이브러리: Phosphor (Regular). 그 밖에 >_·⌗·[ ] 같은 글자 기호를 아이콘처럼 쓴다(웹 fig-bar 실측)

Component Guide

컴포넌트 가이드 (상태별 CSS)

Button (웹: 소문자 모노, 직각)

.wp-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid var(--border-default); border-radius: 0; font: 600 12px/1 'Matter Mono', Hack, ui-monospace, monospace; text-transform: lowercase; cursor: pointer; transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.wp-btn--primary { background: var(--text-primary); color: var(--bg-base); border-color: var(--text-primary); }
.wp-btn--primary:hover { background: var(--color-primary-500); border-color: var(--color-primary-500); color: #fff; }
.wp-btn--primary:active { background: var(--color-primary-700); border-color: var(--color-primary-700); }
.wp-btn--secondary { background: var(--color-yield-500); color: #1A1522; border-color: var(--color-yield-500); }  /* book a demo */
.wp-btn--secondary:hover { filter: brightness(0.95); }
.wp-btn--ghost { background: var(--bg-base); color: var(--text-primary); }
.wp-btn--ghost:hover { border-color: var(--color-primary-500); color: var(--color-primary-500); }
.wp-btn--danger { background: var(--color-error-fg); color: #fff; border-color: var(--color-error-fg); }
.wp-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.wp-btn.is-loading { pointer-events: none; }
.wp-btn.is-loading::after { content: "▍"; animation: wp-blink 1s steps(1) infinite; }  /* 커서 깜빡임 */
@keyframes wp-blink { 50% { opacity: 0; } }

Input (앱 에이전트 입력창)

.wp-input { width: 100%; height: 40px; padding: 0 12px; border: 0; border-radius: var(--radius-md); background: var(--bg-subtle); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--border-default); font: 400 13px/1.4 Hack, 'D2Coding', ui-monospace, monospace; caret-color: var(--color-secondary-500); }
.wp-input::placeholder { color: var(--text-tertiary); }
.wp-input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--border-focus); }
.wp-input.is-error { box-shadow: inset 0 0 0 1px var(--color-error-fg); }
.wp-input:disabled { color: var(--text-disabled); background: var(--bg-base); }

Card (블록 · 도면 패널)

.wp-block { padding: 10px 16px; background: var(--bg-base); box-shadow: inset 0 -1px 0 var(--border-default); font: 400 13px/1.5 Hack, ui-monospace, monospace; }
.wp-block__meta { font-size: 11px; color: var(--text-tertiary); }
.wp-block--selected { background: var(--bg-subtle); box-shadow: inset 2px 0 0 var(--color-secondary-500), inset 0 -1px 0 var(--border-default); }
.wp-block--error { box-shadow: inset 2px 0 0 var(--color-error-fg), inset 0 -1px 0 var(--border-default); }
.wp-panel { border: 1px solid var(--border-default); border-radius: 0; background: var(--bg-base); }
.wp-panel__bar { display: flex; align-items: center; gap: 14px; padding: 8px 12px; border-bottom: 1px solid var(--border-default); font: 400 10.5px/1 'Matter Mono', Hack, monospace; letter-spacing: 0.1em; color: var(--text-tertiary); }

Badge / Tag

.wp-badge { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border-radius: var(--radius-md); font: 400 11px/1 Hack, ui-monospace, monospace; }
.wp-badge--solid { background: var(--color-primary-500); color: #fff; }
.wp-badge--subtle { background: var(--bg-elevated); color: var(--text-secondary); }
.wp-badge--outline { box-shadow: inset 0 0 0 1px var(--border-default); color: var(--text-secondary); }  /* 경로·브랜치 칩 */
.wp-tag { font: 400 11px/1 'Matter Mono', monospace; color: var(--color-primary-500); text-transform: lowercase; }
.wp-tag::before { content: "# "; }

Navigation (앱 세로 탭)

.wp-tabs { width: 200px; background: var(--bg-subtle); box-shadow: inset -1px 0 0 var(--border-default); padding: 8px; display: flex; flex-direction: column; gap: 4px; font: 400 12px/1.4 Roboto, -apple-system, sans-serif; }
.wp-tab { padding: 6px 8px; border-radius: var(--radius-md); color: var(--text-tertiary); }
.wp-tab:hover { background: var(--bg-elevated); color: var(--text-secondary); }
.wp-tab.is-active { background: var(--bg-base); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--border-default); }

Motion

웹 실측 토큰(--duration-* × --motion-speed)

--duration-fast: 100ms;   /* 호버 색 전환 */
--duration-base: 200ms;   /* 드롭다운·탭 */
--duration-slow: 400ms;   /* 섹션 전환·스크롤 서브내비(.25s) */
--ease-out: cubic-bezier(0.4, 0, 0.2, 1);     /* --easing 실측 */
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);  /* 같은 곡선 재사용 */

Anti-patterns

1. 명령 출력과 코드를 비례폭 글꼴로 쓰지 않는다. 터미널·에이전트 출력은 반드시 고정폭이다. 2. 카드에 큰 라운드와 떠 있는 그림자를 주지 않는다. 구획은 1px 괘선과 면 명도로 나누고, 버튼은 직각이다. 3. 강조색을 여러 개 섞지 않는다. 앱은 테마 강조색 하나, 웹은 8-bit 블루 하나다. 초록·빨강은 ANSI 상태(통과·실패)에만 쓴다. 4. 웹 버튼·내비를 대문자 산세리프 굵은 글씨로 쓰지 않는다. 새 사이트는 소문자 모노가 목소리다. 5. 에이전트를 말풍선 채팅 UI로 그리지 않는다. 에이전트 대화도 명령처럼 블록 단위로 쌓인다.

Warp

Brand DNA

브랜드 DNA

Tone & Mood

톤 & 무드

Color System

컬러 시스템 (CSS 변수)

Typography

타이포그래피

Spacing

스페이싱

Border Radius

Border Radius

Shadow / Elevation

Shadow / Elevation

Iconography

Iconography

Component Guide

컴포넌트 가이드 (상태별 CSS)

Motion

Motion

Anti-patterns

Anti-patterns

Sources

출처