HubSpot

스프로킷 로고의 선명한 오렌지 하나와 차분한 남색 글자, 따뜻한 크림 바탕의 CRM 대시보드

서양마케팅엔터프라이즈따뜻한modern-minimalhumanism복합comfortablesoftsubtle라이트한글 지원출시 2017개정 2025

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

Brand DNA

브랜드 DNA

브랜드명: HubSpot (허브스팟)
한 줄 정체성: 마케팅·영업·고객 서비스를 한 CRM 위에 묶어, 중소기업이 "더 잘 성장하도록" 돕는 인바운드 마케팅 플랫폼
공식 디자인 철학: 사내 디자인 시스템 Canvas(2017 공개)는 "고객을 위해 더 쓰기 쉬운 경험"을 목표로 색·타이포부터 React 컴포넌트·데이터 시각화까지 한 벌로 묶었다. 앱 확장(UI Extensions) 가이드는 "한 화면에 주요 동작은 하나"라는 위계 원칙을 강조한다. (Canvas 공개 사이트는 현재 닫혀 블로그로 연결됨)
시그니처 요소 1개: 스프로킷(톱니바퀴) 로고의 오렌지 한 색. 앱 전체에서 오렌지는 "지금 누를 가장 중요한 버튼"과 브랜드 표시에만 아껴 쓰고, 나머지는 남색 글자와 회청색 선으로 조용히 정리한다.

Tone & Mood

톤 & 무드

핵심 키워드 3개: 친근함, 실용적, 성장
무드 설명: 영업 담당자가 하루 종일 켜 두는 업무 화면이라 차분한 남색(Obsidian)과 옅은 회청색 바탕이 대부분을 차지한다. 그 위에 오렌지 버튼 하나가 할 일을 짚어 준다. 2025년 브랜드 개편 뒤 웹사이트는 따뜻한 크림 바탕과 세리프 제목을 더해 사람 냄새를 키웠다.
비주얼 스타일: 모던 미니멀 + 휴머니즘
밀도(Density): Comfortable — 표·보드·기록 패널을 동시에 보여 주지만 행 높이와 여백은 넉넉하게 유지한다.
모서리 성향: Soft (3~8px) — 버튼·입력은 3~4px, 카드·패널은 6~8px
평면성: Subtle — 선(hairline) 중심, 드롭다운·모달에만 옅은 그림자

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - HubSpot Orange (2025 브랜드 개편값 #FF4800, 이전 앱 오렌지 #FF5C35·로고 코랄 Lorax #FF7A59) */
  --color-primary-50:  #FFF3EE;  /* 선택된 행·오렌지 옅은 면 */
  --color-primary-100: #FFE1D6;  /* 사이드 내비 활성 아이콘 바탕 */
  --color-primary-200: #FFC2AD;
  --color-primary-300: #FF9C7A;
  --color-primary-400: #FF7A59;  /* 레거시 Lorax 코랄 (추정 계승) */
  --color-primary-500: #FF4800;  /* 기본 — 주요 버튼·로고 */
  --color-primary-600: #E03F00;  /* hover */
  --color-primary-700: #C93700;  /* pressed */
  --color-primary-800: #9F2800;
  --color-primary-900: #6B1B00;

  /* Secondary - Obsidian 남색 (글자·상단 바) */
  --color-secondary-500: #213343;  /* 상단 글로벌 바·제목 */
  --color-accent-calypso: #00A4BD; /* 링크 보조·진행 표시 */

  /* Neutral - 회청색 계열 (앱 UI) */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F5F8FA;  /* 앱 페이지 바탕 (Gypsum 계열) */
  --color-neutral-100:  #EAF0F6;  /* 보드 열·표 머리 */
  --color-neutral-200:  #DFE3EB;  /* 약한 구분선 */
  --color-neutral-300:  #CBD6E2;  /* 입력 테두리 */
  --color-neutral-500:  #7C98B6;  /* 아이콘·비활성 */
  --color-neutral-700:  #516F90;  /* 보조 글자 */
  --color-neutral-800:  #33475B;  /* 본문 글자 */
  --color-neutral-900:  #213343;  /* 제목 */
  --color-neutral-1000: #000000;

  /* Semantic (앱 상태 색, 추정 포함) */
  --color-success-bg: #E5F8F6;
  --color-success-fg: #00826F;   /* Oz 계열 */
  --color-warning-bg: #FEF8F0;
  --color-warning-fg: #B36B00;   /* Marigold 계열 */
  --color-error-bg:   #FDEDEE;
  --color-error-fg:   #D9002B;   /* Candy Apple 계열 */
  --color-info-bg:    #E5F5F8;
  --color-info-fg:    #0091AE;   /* Calypso 계열 */

  /* Surface */
  --bg-base:     #F5F8FA;   /* 앱 페이지 */
  --bg-subtle:   #EAF0F6;   /* 섹션·보드 열 */
  --bg-elevated: #FFFFFF;   /* 카드·기록 패널 */
  --bg-overlay:  #FFFFFF;   /* 모달·드롭다운 */
  --bg-marketing: #F8F5EE;  /* 웹사이트 크림 바탕 (2025 개편) */

  /* Text */
  --text-primary:    #33475B;
  --text-secondary:  #516F90;
  --text-tertiary:   #7C98B6;
  --text-on-primary: #FFFFFF;
  --text-disabled:   #B0C1D4;

  /* Border */
  --border-default: #CBD6E2;
  --border-subtle:  #DFE3EB;
  --border-strong:  #7C98B6;
  --border-focus:   #00A4BD;   /* 포커스 링은 청록 */
}

Typography

타이포그래피

폰트 페어링:
- 한글: Pretendard (OFL) / Noto Sans KR 폴백
- 영문 UI·본문: HubSpot Sans (사내 전용, 이전 앱 폰트 Lexend Deca — OFL)
- 영문 마케팅 제목: HubSpot Serif (사내 전용, 웹사이트 헤드라인)
위계 (앱 기준, 마케팅 Display 별도):
- Display: 64px / 300 / 1.05 / -0.02em (웹사이트 세리프 헤드라인)
- H1: 32px / 600 / 1.25 / -0.01em
- H2: 24px / 600 / 1.3 / 0
- H3: 18px / 600 / 1.4 / 0
- Body Large: 16px / 400 / 1.6 / 0
- Body: 14px / 400 / 1.5 / 0
- Body Small: 12px / 400 / 1.5 / 0
- Caption: 11px / 600 / 1.4 / 0.04em

Spacing

스페이싱

Base unit: 4px (앱 여백은 8의 배수 위주)
토큰: ``css --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; ``
Container: 앱은 폭 100%(좌측 내비 제외) + 좌우 24px, 마케팅 페이지는 max-width 1240px + 좌우 24px

Border Radius

--radius-none: 0;
--radius-sm: 3px;     /* 태그·필터 칩 */
--radius-md: 4px;     /* 버튼·입력 */
--radius-lg: 8px;     /* 카드·패널 */
--radius-xl: 16px;    /* 마케팅 페이지 대형 카드 */
--radius-full: 9999px; /* 아바타 */

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 1px 3px rgba(33,51,67,0.08);   /* 보드 카드 */
--shadow-md: 0 2px 8px rgba(33,51,67,0.12);   /* 카드 hover·드롭다운 */
--shadow-lg: 0 8px 24px rgba(33,51,67,0.16);  /* 모달·측면 패널 */
--shadow-xl: 0 16px 48px rgba(33,51,67,0.22); /* 풀스크린 편집기 */

Iconography

스타일: Outline 위주, 활성 상태만 Filled
Stroke 굵기: 1.5px
모서리 처리: Round
추천 라이브러리: Lucide / Tabler (자체 아이콘 세트의 둥근 선 느낌과 가장 가까움)

Component Guide

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

Button

.btn { font: 600 14px/1 "HubSpot Sans","Lexend Deca","Pretendard",sans-serif; padding: 10px 16px; border-radius: var(--radius-md); border: 1px solid transparent; transition: background var(--duration-fast) var(--ease-out); cursor: pointer; }
.btn-primary { background: var(--color-primary-500); color: var(--text-on-primary); }
.btn-primary:hover { background: var(--color-primary-600); }
.btn-primary:active { background: var(--color-primary-700); }
.btn-secondary { background: var(--bg-elevated); color: var(--color-primary-500); border-color: var(--color-primary-500); }
.btn-secondary:hover { background: var(--color-primary-50); }
.btn-ghost { background: transparent; color: var(--color-info-fg); padding-inline: 4px; }
.btn-ghost:hover { text-decoration: underline; }
.btn-danger { background: var(--color-error-fg); color: #fff; }
.btn-danger:hover { background: #B00023; }
.btn:disabled { background: var(--bg-subtle); color: var(--text-disabled); border-color: var(--border-subtle); cursor: not-allowed; }
.btn[aria-busy="true"] { color: transparent; position: relative; }
.btn[aria-busy="true"]::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 14px; height: 14px; margin: -7px; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: var(--radius-full); animation: spin 700ms linear infinite; }

> 앱 확장(UI Extensions)에서는 오렌지 버튼 변형을 제공하지 않는다. 오렌지는 HubSpot 제품 자체의 최상위 동작 전용이고, 확장의 주요 버튼은 남색을 쓴다.

Input

.input { background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 9px 12px; font-size: 14px; color: var(--text-primary); }
.input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 2px rgba(0,164,189,.25); }
.input[aria-invalid="true"] { border-color: var(--color-error-fg); }
.input:disabled { background: var(--bg-subtle); color: var(--text-disabled); }

Card

.card { background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-md); }
.card-emphasis { border-top: 3px solid var(--color-primary-500); box-shadow: var(--shadow-sm); }
.card-outlined { background: transparent; border-color: var(--border-default); }
.card:hover { box-shadow: var(--shadow-md); }

Badge / Tag

.tag { display: inline-block; padding: 2px 6px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 600; }
.tag-solid   { background: var(--color-secondary-500); color: #fff; }
.tag-subtle  { background: var(--color-success-bg); color: var(--color-success-fg); }
.tag-outline { border: 1px solid var(--border-strong); color: var(--text-secondary); }

Navigation (글로벌 상단 바 + 좌측 아이콘 내비)

.global-bar { height: 48px; background: var(--color-secondary-500); display: flex; align-items: center; gap: 12px; padding: 0 16px; }
.global-bar .search { flex: 1; max-width: 480px; height: 32px; border-radius: var(--radius-md); background: #2E475D; color: #99AFC4; }
.side-nav { width: 56px; background: var(--bg-elevated); border-right: 1px solid var(--border-subtle); display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 12px 0; }
.side-nav a { color: var(--text-tertiary); }
.side-nav a[aria-current="page"] { color: var(--color-primary-500); background: var(--color-primary-100); border-radius: var(--radius-md); }

Motion

--duration-fast: 120ms;
--duration-base: 200ms;
--duration-slow: 320ms;
--ease-out: cubic-bezier(0.2, 0, 0, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

측면 기록 패널은 오른쪽에서 --duration-slow 로 밀려 들어오고, 드롭다운은 --duration-fast 페이드만 쓴다. (추정)

Anti-patterns

1. 한 화면에 오렌지 버튼을 두 개 이상 두지 않는다 — 주요 동작은 하나 2. 본문 글자를 순검정(#000)으로 쓰지 않는다 — 글자는 남색(#33475B·#213343) 3. 오렌지를 넓은 배경 면으로 깔지 않는다 — 버튼·로고·강조선에만 4. 앱 화면에 세리프 제목을 쓰지 않는다 — HubSpot Serif 는 웹사이트 헤드라인 전용 5. 굵은 그림자로 카드를 띄우지 않는다 — 기본은 선, 그림자는 떠 있는 층에만

HubSpot

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

출처