Klaviyo

차콜 #1D1E20 한 색과 깃발 워드마크, 흰 노드가 이어지는 플로우 빌더 캔버스

서양마케팅이커머스엔터프라이즈중립modern-minimal복합comfortablesoftsubtle라이트출시 2022개정 2025

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

Brand DNA

브랜드 DNA

브랜드명: Klaviyo (클라비요)
한 줄 정체성: 쇼핑몰 고객 데이터를 한곳에 모아 이메일·SMS·푸시를 자동으로 보내는 이커머스 마케팅 자동화 플랫폼. 2025~2026년에는 「자율형 B2C CRM(The Autonomous B2C CRM)」과 AI 에이전트(Composer·Customer Agent)를 앞세운다.
공식 디자인 철학: 2022년 3월 리브랜딩에서 정한 「소유(Ownership)」가 중심이다. 로고의 깃발은 데이터 소유·커뮤니티·길 안내·속도와 성공을 뜻하고, 워드마크 끝에 붙어 지수(exponent) 처럼 고객의 기하급수적 성장을 나타낸다. 서체는 "100년 뒤에도 유효할 클래식하고 유기적인 세리프를 현대적으로 해석"한 것이다. 문구 원칙은 "Klaviyo 는 주인공이 아니라 촉매다". 제품 쪽은 내부 디자인 시스템 「Ascent」(Figma 키트·React 라이브러리·style-dictionary 토큰)를 쓰지만 외부에 공개되지 않았다.
시그니처 요소 1개: 차콜(#1D1E20) 한 색으로 칠한 세리프 워드마크와 깃발 — 제품 안에서도 주 버튼·로고·텍스트를 전부 이 차콜 하나로 처리하고, 흰 노드 카드가 선으로 이어지는 플로우 빌더가 대표 화면이다.

Tone & Mood

톤 & 무드

핵심 키워드 3개: 단단함, 담백함, 데이터 중심
무드 설명: 흰 바탕과 차콜 글자, 옅은 회색 캔버스(#F3F6F7)가 기본이다. 색은 거의 쓰지 않고, 마케팅 사이트에서만 포피 레드(#FF4B32) 띠·곡선과 라벤더(#CCC0EA)·하이라이터 옐로(#DEFF00)를 "중성색 위의 밝은 포인트"로 넣는다. 제품 화면은 숫자(오픈율·클릭률·매출)가 주인공이라 장식이 없다.
비주얼 스타일: 모던 미니멀
밀도(Density): Comfortable — 앱 기본 글자가 14px(UI2)·행간 20px 이고 4px 배수 여백으로 표·플로우 노드를 넉넉히 띄운다.
모서리 성향: Soft (앱 버튼·입력 4~8px, 카드 8~12px. 마케팅 사이트 버튼은 2~4px 로 더 각지다)
평면성: Subtle — 테두리 대신 0 0 0 1px 5% 링 + 짧은 드롭 그림자(elevation-shadow-100)로 노드와 카드를 띄운다.

Color System

컬러 시스템 (CSS 변수)

앱(static-app.klaviyo.com/fender) 번들의 시맨틱 토큰과 마케팅 사이트 CSS 의 원색 팔레트(charcoal·poppy·violet·cotton 등)를 실측해 옮겼다. primary 9단계는 앱 회색 램프(oklch)와 마케팅 charcoal 램프를 합쳐 정리한 값이다 (일부 단계 (추정)).

:root {
  /* Primary — 차콜. 앱 background-primary-base, 로고·주 버튼·본문 */
  --color-primary-50: #F3F6F7;   /* 캔버스·비활성 배경 (disabled bg 실측) */
  --color-primary-100: #EAEDEF;  /* neutral-subtle 배경·구분 면 (실측) */
  --color-primary-200: #C4C9CF;  /* 기본 테두리 (border-default 실측) */
  --color-primary-300: #939495;  /* 테두리 hover·focus (실측) */
  --color-primary-400: #5D5E60;  /* 보조 텍스트·neutral-emphasis (실측) */
  --color-primary-500: #1D1E20;  /* 기본 — 주 버튼·로고·본문 (실측) */
  --color-primary-600: #161718;  /* 버튼 hover (마케팅 charcoal-600 실측) */
  --color-primary-700: #0F0F10;  /* 버튼 active (charcoal-700 실측) */
  --color-primary-800: #080808;  /* (charcoal-800 실측) */
  --color-primary-900: #020202;  /* (charcoal-900 실측) */

  /* Secondary — 브랜드 포인트 (마케팅 사이트 전용) */
  --color-secondary-500: #FF4B32;   /* Poppy — 고객사 로고 띠·곡선·로그인 화면 우측 면 (core-poppy 실측) */
  --color-accent-lavender: #CCC0EA; /* 플로우 강조 노드·지표 박스 (violet-200 실측) */
  --color-accent-highlighter: #DEFF00; /* 공지 바·하이라이트 (core-highlighter-yellow 실측) */
  --color-accent-cotton: #F4EDE2;   /* 따뜻한 베이지 배경 (cotton-700 실측) */

  /* Neutral */
  --color-neutral-0: #FFFFFF;
  --color-neutral-50: #F3F6F7;
  --color-neutral-100: #EAEDEF;
  --color-neutral-300: #C4C9CF;
  --color-neutral-500: #939495;
  --color-neutral-700: #5D5E60;
  --color-neutral-900: #1D1E20;
  --color-neutral-1000: #000000;

  /* Semantic (앱 positive/negative/caution/info 토큰 실측) */
  --color-success-bg: #DAFBE4;
  --color-success-fg: #25935C;
  --color-warning-bg: #FFFCCC;
  --color-warning-fg: #947814;
  --color-error-bg: #FFEDEB;
  --color-error-fg: #C72326;
  --color-info-bg: #E0F2FF;
  --color-info-fg: #155FEA;

  /* Surface (배경 위계) */
  --bg-base: #FFFFFF;      /* 페이지·표 */
  --bg-subtle: #F3F6F7;    /* 플로우 캔버스·섹션 구분 */
  --bg-elevated: #FFFFFF;  /* 노드·카드 (그림자로 띄움) */
  --bg-overlay: #FFFFFF;   /* 모달·드롭다운 */

  /* Text 위계 */
  --text-primary: #1D1E20;     /* 본문·제목 */
  --text-secondary: #5D5E60;   /* 보조·입력 placeholder (foreground-input 실측) */
  --text-tertiary: #939495;    /* 캡션·타임스탬프 (추정) */
  --text-on-primary: #FFFFFF;  /* 차콜 버튼 위 */
  --text-disabled: #C4C9CF;    /* neutral-subtle-disabled 실측 */

  /* Border */
  --border-default: #C4C9CF;   /* 입력·아웃라인 버튼 */
  --border-subtle: #EAEDEF;    /* 표 구분선·헤더 하단 */
  --border-strong: #939495;    /* hover·focus 테두리 */
  --border-focus: #155FEA;     /* 포커스 링 — 로그인 입력 파란 링 (추정: info 블루와 동일) */
}

Typography

타이포그래피

폰트 페어링:
- 한글: 공식 한글 서체 없음. 앱이 system-ui 스택이라 Windows 에서는 맑은 고딕, macOS 에서는 Apple SD 산돌고딕 Neo 로 렌더된다. 대체 서체로는 Pretendard (SIL OFL) 권장 (추정)
- 영문: 마케팅 사이트 — 제목 Klaviyo Degular(전용 커스텀, 비공개), 본문 Instrument Sans(SIL OFL), 인용·에디토리얼 Reckless Neue(상용), 라벨 DM Mono(SIL OFL). 제품 앱 — system-ui, -apple-system, BlinkMacSystemFont 시스템 스택. 로고는 전용 세리프 워드마크.
위계 (앱 typography 토큰 실측. Body Large·Caption 행간 일부 (추정)):
- Display: 80px / 400 / 88px / -0.02em (display1)
- H1: 40px / 500 / 48px / -0.01em (heading1)
- H2: 32px / 500 / 40px / -0.01em (추정)
- H3: 24px / 500 / 32px / 0 (추정)
- Body Large: 16px / 400 / 24px / 0 (UI1)
- Body: 14px / 400 / 20px / 0 (UI2, 강조 600)
- Body Small: 12px / 400 / 16px / 0 (UI3, 강조 600)
- Caption: 11px / 500 / 14px / 0.02em (추정)
굵기: 400·500·600 세 단계. 마케팅 사이트 대형 제목은 400 으로 얇게 둔다.

Spacing

스페이싱

Base unit: 4px (앱 --unit-space-25 = 0.25rem 부터 25 단위 증가, 0.125rem 반단계 존재)
토큰: ``css --space-xs: 4px; /* unit-space-25 */ --space-sm: 8px; /* unit-space-50 */ --space-md: 16px; /* unit-space-100 */ --space-lg: 24px; /* unit-space-150 */ --space-xl: 32px; /* unit-space-200 */ --space-2xl: 48px; /* unit-space-300 */ --space-3xl: 64px; /* unit-space-400 */ ``
Container: 앱 본문 max 70rem(1120px, unit-container-width-lg), 메인 영역 61.25rem·45rem·33rem 3단, 사이드바 20/14/8rem. 좌측 내비는 펼침 240px·접힘 레일 60px. 마케팅 사이트는 12컬럼 그리드.

Border Radius

앱 --unit-border-radius-* 실측값.

--radius-none: 0;
--radius-xs: 2px;      /* 마케팅 버튼·태그 */
--radius-sm: 4px;      /* 앱 버튼·배지·플로우 노드 */
--radius-md: 8px;      /* 입력·카드 기본 */
--radius-lg: 12px;     /* 모달·큰 카드 */
--radius-xl: 16px;     /* 패널 */
--radius-2xl: 20px;
--radius-full: 9999px; /* pill — 대기 시간 칩·토글 */

Shadow / Elevation

앱 --elevation-shadow-* 실측. 회청색 rgb(55,63,71) 한 가지를 알파만 바꿔 쓴다.

--shadow-none: none;
--shadow-sm: 0 0 0 1px rgba(55,63,71,.05), 0 1px 4px rgba(55,63,71,.16);   /* 100 — 플로우 노드·카드 기본 */
--shadow-md: 0 2px 8px rgba(55,63,71,.08), 0 1px 2px rgba(55,63,71,.12);   /* 200 — 카드 hover */
--shadow-lg: 0 0 0 1px rgba(55,63,71,.15), 0 8px 16px rgba(55,63,71,.15);  /* 400 — 드롭다운·팝오버 */
--shadow-xl: 0 0 0 2px rgba(55,63,71,.08), 0 12px 24px rgba(55,63,71,.14); /* 700 — 모달 */

Klaviyo AI(토큰 이름 kai) 영역은 같은 구조에 남보라 rgb(58,66,172) 그림자를 쓴다.

Iconography

스타일: Outline (플로우 빌더 트리거 번개·조건 분기·봉투·말풍선 아이콘이 모두 선형)
Stroke 굵기: 1.5~2px (추정)
모서리 처리: Round
추천 라이브러리: Lucide (선 굵기·둥근 끝이 가장 가깝다) (추정)

Component Guide

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

Button (Primary / Secondary / Ghost / Danger)

.kl-btn { height: 36px; padding: 0 16px; border-radius: var(--radius-sm); font: 600 14px/20px system-ui, -apple-system, 'Segoe UI', sans-serif; display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; cursor: pointer; transition: background var(--duration-fast) var(--ease-out); }
.kl-btn--primary { background: var(--color-primary-500); color: var(--text-on-primary); }
.kl-btn--primary:hover { background: var(--color-primary-600); }
.kl-btn--primary:active { background: var(--color-primary-700); }
.kl-btn--primary:disabled { background: var(--color-primary-50); color: var(--text-disabled); cursor: not-allowed; }
.kl-btn--primary.is-loading { color: transparent; position: relative; }
.kl-btn--primary.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: kl-spin 700ms linear infinite; }
.kl-btn--secondary { background: var(--bg-base); color: var(--text-primary); border-color: var(--border-default); }
.kl-btn--secondary:hover { border-color: var(--border-strong); background: var(--color-primary-50); }
.kl-btn--secondary:active { background: var(--color-primary-100); }
.kl-btn--secondary:disabled { color: var(--text-disabled); border-color: var(--border-subtle); }
.kl-btn--ghost { background: transparent; color: var(--text-primary); }
.kl-btn--ghost:hover { background: var(--color-primary-50); }
.kl-btn--ghost:active { background: var(--color-primary-100); }
.kl-btn--danger { background: var(--color-error-fg); color: #fff; }
.kl-btn--danger:hover { background: #A81E21; }
.kl-btn--danger:disabled { background: var(--color-error-bg); color: #F0A6A2; }
.kl-btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
@keyframes kl-spin { to { transform: rotate(360deg); } }

Input

.kl-input { height: 40px; padding: 0 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-base); color: var(--text-primary); font: 400 14px/20px system-ui, sans-serif; }
.kl-input::placeholder { color: var(--text-secondary); }
.kl-input:hover { border-color: var(--border-strong); }
.kl-input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 1px var(--border-focus); }
.kl-input.is-error { border-color: var(--color-error-fg); }
.kl-input:disabled { background: var(--color-primary-50); color: var(--text-disabled); }

Card

.kl-card { background: var(--bg-elevated); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 20px; }
.kl-card:hover { box-shadow: var(--shadow-md); }
.kl-card--emphasis { background: var(--color-accent-lavender); box-shadow: none; }   /* 플로우 강조 노드·지표 박스 */
.kl-card--outlined { box-shadow: none; border: 1px solid var(--border-subtle); }
.kl-node { background: #fff; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); padding: 10px 14px; display: flex; gap: 10px; align-items: center; } /* 플로우 빌더 노드 */

Badge / Tag

.kl-badge { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border-radius: var(--radius-sm); font: 600 12px/16px system-ui, sans-serif; }
.kl-badge--solid { background: var(--color-primary-500); color: #fff; }
.kl-badge--subtle { background: var(--color-success-bg); color: var(--color-success-fg); }   /* 「라이브」 상태 */
.kl-badge--outline { border: 1px solid var(--border-default); color: var(--text-secondary); }

Navigation (좌측 앱 내비 — 펼침 240px / 접힘 레일 60px)

.kl-nav { width: 240px; background: var(--bg-base); box-shadow: 1px 0 0 var(--border-subtle); padding: 12px 14px; display: flex; flex-direction: column; gap: 1px; transition: width 250ms cubic-bezier(0.32, 0.72, 0, 1); }
.kl-nav.is-rail { width: 60px; }
.kl-nav__item { height: 32px; padding: 0 6px; border-radius: var(--radius-sm); display: flex; align-items: center; gap: 10px; color: var(--text-secondary); font: 400 14px/20px system-ui, sans-serif; }
.kl-nav__item:hover { background: var(--color-primary-50); color: var(--text-primary); }
.kl-nav__item.is-active { background: var(--color-primary-100); color: var(--text-primary); font-weight: 600; }
.kl-nav__item:active { transform: scale(0.985); }

Motion

앱 --motion-duration-* 실측(25ms 단위 사다리)과 내비·Composer 패널 이징.

--duration-fast: 150ms;  /* motion-duration-500 — hover·press */
--duration-base: 250ms;  /* 내비 펼침·Composer 패널 등장 */
--duration-slow: 450ms;  /* motion-duration-700 — 모달·토스트 */
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);     /* app-shell-composer-panel-easing */
--ease-in-out: cubic-bezier(0.32, 0.72, 0, 1);  /* desktop-navigation-easing */

Anti-patterns

1. 주 버튼을 포피 레드나 보라로 칠하지 않는다 — 제품·사이트 모두 행동 버튼은 차콜(#1D1E20) 한 색이다. 포피는 브랜드 띠·곡선 같은 면 포인트 전용이다. 2. 깃발을 워드마크에서 떼어 장식 아이콘으로 흩뿌리지 않는다 — 깃발은 글자 오른쪽 위 「지수」 자리에서만 의미가 있다. 3. 플로우 노드에 두꺼운 색 테두리나 컬러 헤더를 두르지 않는다 — 흰 카드 + 5% 링 그림자, 강조가 필요하면 라벤더 면 하나만 쓴다. 4. 지표 화면에 그라디언트·사진 배경을 깔지 않는다 — 숫자가 주인공이라 흰 바탕·회색 캔버스만 쓴다(그라디언트는 Klaviyo AI 영역 전용). 5. 고객 사진을 연출된 스톡처럼 쓰지 않는다 — 리브랜딩 원칙상 사진은 따뜻한 다큐멘터리 톤이고, Klaviyo 가 아닌 고객 브랜드가 주인공이다.

Klaviyo

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

출처