Stibee (스티비)

코랄 #FF6464 버튼 하나와 차콜 #202124 글자, 연회색 면 위 흰 카드로 짜인 담백한 이메일 마케팅 대시보드

한국마케팅생산성따뜻한modern-minimal고딕comfortablesoftsubtle라이트한글 지원출시 2016개정 2023

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

Brand DNA

브랜드 DNA

브랜드명: Stibee (스티비, 주식회사 스티비)
한 줄 정체성: 디자이너 없이도 뉴스레터를 만들고 보내고 성과를 확인할 수 있게 한 한국형 이메일 마케팅·뉴스레터 서비스. 이메일 에디터, 주소록(구독자) 관리, 자동 이메일, A/B 테스트, 통계, 그리고 *.stibee.com 뉴스레터 아카이브·구독 페이지까지 한 곳에서 다룬다.
공식 디자인 철학 (브랜드가 명시한 표어/가치):
- 현행 슬로건: "고객이 좋아하는 이메일 스티비로 보내세요" · "쉽고 빠른 이메일 제작부터 구독자 데이터 분석과 성과 개선까지 고객과 가까워지는 이메일 마케팅" (stibee.com 첫 화면·OG 문구).
- 창업기 미션(린브랜딩, 슬로워크 2016 전후): "누구나 스스로 퀄리티 있는 이메일을 작성해 이메일을 유용한 마케팅 채널로 재발견한다", 약속 "모바일에 딱 맞는 새로운 뉴스레터".
- 이름의 뜻: Stick + Bee. 꿀벌이 8자 꼬리춤으로 먹이의 방향과 거리를 정확히 전하듯 콘텐츠를 정확히 전달하고(Bee), 메시지가 받는 사람에게 착 달라붙게(Stick) 한다는 뜻이다. 초기 로고타입의 'S' 가 8자 춤을 형상화했다.
- ⚠️ 현행 심볼은 초기 벌 모티프와 다르다. 지금 쓰는 마크는 한 모서리만 각진 코랄 말풍선(물방울) 원 + 흰 사선 두 줄이며, 사선 두 줄의 공식 의미 설명은 확인하지 못했다 (편지 틈·빗금 인용 부호로 읽히는 건 (추정)).
시그니처 요소 1개: 코랄 #FF6464 — 화면에서 이 색은 사실상 "시작하기·저장·발송" 버튼과 체크 표시, 통계 그래프의 주 데이터 선에만 쓴다. 나머지는 차콜 #202124~회색 #F4F5F9 단계로 담백하게 비워 둔다. 통계 그래프도 코랄(오픈)과 차콜(클릭) 두 색만으로 그린다.

Tone & Mood

톤 & 무드

핵심 키워드 3개: 산뜻함, 실용적, 친근함
무드 설명: 연회색(#F4F5F9, 랜딩은 #F5F5F5) 바탕에 흰 카드와 1px 회색 선으로 구역을 나누고, 코랄은 행동을 요구하는 단 한 곳에만 둔다. 일러스트도 코랄 원·차콜 원·연회색 사각형 같은 기하 도형으로 단순하게 그린다. 뉴스레터를 처음 보내는 마케터·1인 발행인이 겁먹지 않도록 설명형 문장("~하세요", "~할 수 있습니다")으로 말한다.
비주얼 스타일: 모던 미니멀 (평면 기하 일러스트, 두 가지 색 차트)
밀도(Density): Comfortable — 관리 화면은 목록·표가 많지만 13~14px 본문과 넉넉한 행 높이로 숨 쉴 틈을 둔다.
모서리 성향: Soft (버튼·입력·카드 4px 기본, 배지 2px, 둥근 버튼 변형만 50em)
평면성: Subtle — 테두리 #DFE0E4 1px 가 기본이고 그림자는 드롭다운·하단 고정 바에만 rgba(0,0,0,.1) 한 겹.

Color System

컬러 시스템 (CSS 변수)

stibee.com 실측(/assets/css/style.css·/assets/index-*.css 의 :root 팔레트 변수)을 옮겼다. 원본 이름은 --red-*·--gray-*·--green-* 이며, 브랜드 색은 --brand-primary: var(--red-300) = #FF6464 로 선언돼 있다. 기본 버튼 .btn.primary{background:#ff6464} 의 hover 가 #ff5252(--red-400) 이고, 이 #FF5252 가 로고 심볼 색과 같다.

:root {
  /* Primary - Stibee Coral (원본 --red-* 스케일을 9단계로 재배치) */
  --color-primary-50:  #FFF8F8;  /* --red-30 · 오류 배경(--color-error-back) */
  --color-primary-100: #FFEAEA;  /* --red-80 · 선택 행·강조 면 */
  --color-primary-200: #FFDCDC;  /* --red-100 */
  --color-primary-300: #FFAEAE;  /* --red-200 · 비활성 코랄 버튼 */
  --color-primary-400: #FF8989;  /* (추정) 200~300 보간 */
  --color-primary-500: #FF6464;  /* --red-300 = --brand-primary · 기본 버튼·체크·차트 주 선 */
  --color-primary-600: #FF5252;  /* --red-400 · 버튼 hover · 로고 심볼 · NEW 배지 */
  --color-primary-700: #F73536;  /* --red-600 · 오류 글자(--color-error-fore) */
  --color-primary-800: #D72028;  /* --red-800 */
  --color-primary-900: #C8111C;  /* --red-900 */

  /* Secondary - 링크·정보 블루 (에디터 안내 링크, 단계 아이콘) */
  --color-secondary-500: #3E81F6;  /* --blue-600 · 에디터 링크·단계 아이콘 (style.css 최다 빈도 262회) */
  --color-secondary-50:  #E4F1FF;  /* --blue-50 */

  /* Neutral - --gray-* 실측 */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F9FAFE;  /* --gray-50 */
  --color-neutral-100:  #F4F5F9;  /* --gray-100 · 앱 바탕 */
  --color-neutral-200:  #EDEEF2;  /* --gray-200 · 기본(회색) 버튼 면 */
  --color-neutral-300:  #DFE0E4;  /* --gray-300 · 기본 테두리 */
  --color-neutral-400:  #BCBDC1;  /* --gray-400 · 비활성 아이콘 */
  --color-neutral-500:  #9D9EA2;  /* --gray-500 · 캡션 */
  --color-neutral-600:  #747579;  /* --gray-600 */
  --color-neutral-700:  #606165;  /* --gray-700 · 보조 글자·차트 보조 선·회색 버튼 */
  --color-neutral-800:  #414245;  /* --gray-800 · 기본 버튼 글자 */
  --color-neutral-900:  #202124;  /* --gray-900 · 제목·본문·로고타입 */
  --color-neutral-1000: #000000;

  /* Semantic */
  --color-success-bg: #E4F6EC;  /* --green-50 */
  --color-success-fg: #00A75B;  /* --green-600 · 상승 수치는 #00B766 */
  --color-warning-bg: #FFF9E0;  /* --yellow-50 */
  --color-warning-fg: #FF9400;  /* --yellow-800 · 노란 면 강조는 #FFC800 */
  --color-error-bg:   #FFF8F8;  /* --color-error-back */
  --color-error-fg:   #F73536;  /* --color-error-fore */
  --color-info-bg:    #E4F1FF;  /* --blue-50 */
  --color-info-fg:    #3E81F6;  /* --blue-600 */

  /* Surface (배경 위계) */
  --bg-base:     #F4F5F9;             /* 앱 바탕 (랜딩 히어로 면은 #F5F5F5) */
  --bg-subtle:   #F9FAFE;             /* 섹션 구분·표 머리 */
  --bg-elevated: #FFFFFF;             /* 카드·모달·헤더 */
  --bg-overlay:  rgba(32, 33, 36, 0.5); /* (추정) 모달 딤 */

  /* Text 위계 */
  --text-primary:    #202124;  /* 제목·본문 */
  --text-secondary:  #606165;  /* 설명 문장 */
  --text-tertiary:   #9D9EA2;  /* 날짜·캡션 */
  --text-on-primary: #FFFFFF;
  --text-disabled:   #BCBDC1;

  /* Border */
  --border-default: #DFE0E4;
  --border-subtle:  #EDEEF2;
  --border-strong:  #BCBDC1;
  --border-focus:   #FF6464;  /* (추정) 입력 포커스 */
}

> 참고: 새 CSS 번들에 html.dark{--background:var(--gray-900)…} 블록이 있지만 테두리·입력 색이 라이트 값 그대로이고 설정에서 켜는 토글을 확인하지 못했다. 그래서 이 문서는 라이트 단일 테마로 둔다.

Typography

타이포그래피

폰트 페어링:
- 한글: Pretendard Variable (SIL OFL) — stibee.com 이 jsDelivr 에서 불러온다. 구 관리 화면 스택은 Pretendard, Lato, Noto Sans KR, nanum gothic
- 영문: Pretendard 에 포함된 라틴 글리프 (구 화면은 Lato, SIL OFL)
- 굵기 토큰 실측: --font-weight-bold: 600, --font-weight-medium: 500, --font-weight-normal: 400
위계 (랜딩·관리 화면 관찰. 크기는 (추정)):
- Display: 44px / 700 / 1.4 / -0.02em (랜딩 "고객이 좋아하는 이메일 스티비로 보내세요")
- H1: 36px / 700 / 1.4 / -0.02em
- H2: 28px / 700 / 1.45 / -0.01em
- H3: 20px / 600 / 1.5 / 0
- Body Large: 16px / 400 / 1.7 / 0 (랜딩 설명 문장)
- Body: 14px / 400 / 1.6 / 0 (관리 화면 기본, 큰 버튼 글자 14px 실측)
- Body Small: 13px / 400 / 1.5 / 0
- Caption: 12px / 400 / 1.4 / 0 (작은 버튼 .btn.small 12px 실측·배지·날짜)

Spacing

스페이싱

Base unit: 4px (버튼 패딩 실측 8px 14px·12px 20px, 랜딩 섹션 간격은 80~120px (추정))
토큰: ``css --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 80px; /* (추정) 랜딩 섹션 위아래 */ ``
Container: 랜딩 max-width 1200px (추정) · 좌우 30px, 관리 화면은 좌측 메뉴 + 본문 최대 1080px (추정)

Border Radius

--radius-none: 0;
--radius-sm: 2px;      /* 배지·체크박스 (index.css 최다 2px) */
--radius-md: 4px;      /* 버튼·입력·카드 — .btn 실측 */
--radius-lg: 10px;     /* (추정) 모달·큰 패널 (style.css 10px 18회) */
--radius-xl: 16px;     /* (추정) 랜딩 일러스트 박스 */
--radius-full: 9999px; /* .btn.round 50em·아바타·그래프 점 */

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 2px 6px 0 rgba(0, 0, 0, 0.10);     /* 카드 hover·툴팁·작은 팝오버 (style.css 42회) */
--shadow-md: rgba(0, 0, 0, 0.09) 0 4px 20px 0;    /* 드롭다운 (--shadow-drop-down 실측) */
--shadow-lg: 0 -2px 12px 0 rgba(0, 0, 0, 0.10);   /* 에디터 하단 고정 바 (위로 드리우는 그림자) */
--shadow-xl: 0 3px 6px -4px rgba(0,0,0,.12), 0 6px 16px rgba(0,0,0,.08), 0 9px 28px 8px rgba(0,0,0,.05); /* 모달 (Ant Design 기반 새 화면) */

Iconography

스타일: Outline 중심 (Font Awesome 6 Pro Regular fa-regular + 자체 아이콘 폰트 stibeeicon10 의 stb-* 글리프). 체크·라디오 선택 상태만 채운 모양으로 바뀌고 코랄로 칠한다.
Stroke 굵기: 약 1.5px 상당 (FA Regular)
모서리 처리: Round
추천 라이브러리: Lucide (FA Regular 와 두께·모서리가 가장 가깝다), Font Awesome Regular

Component Guide

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

Button — 실측 .btn: border-radius:4px; transition:all .3s; background:#edeef2; color:#414245

.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:40px; padding:0 20px; border:0; border-radius:var(--radius-md); font:500 14px/1 Pretendard, sans-serif; transition:all .3s; cursor:pointer; }
.btn.small { height:32px; padding:0 14px; font-size:12px; }
/* Primary */
.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-primary:disabled { background:var(--color-primary-300); cursor:not-allowed; }
.btn-primary.is-loading { color:transparent; position:relative; } /* 가운데 흰 스피너 (stb-loading) */
/* Secondary (기본 회색) */
.btn-secondary { background:var(--color-neutral-200); color:var(--color-neutral-800); }
.btn-secondary:hover { background:var(--color-neutral-300); }
.btn-secondary:disabled { color:var(--text-disabled); }
/* Ghost (흰 버튼, 테두리) */
.btn-ghost { background:#FFFFFF; color:var(--text-primary); box-shadow:inset 0 0 0 1px var(--border-default); }
.btn-ghost:hover { color:var(--color-secondary-500); } /* 에디터 헤더 .btn.white:hover 실측 */
/* Danger */
.btn-danger { background:#FFFFFF; color:var(--color-error-fg); box-shadow:inset 0 0 0 1px var(--color-error-fg); }
.btn-danger:hover { background:var(--color-error-bg); }
/* Dark (.btn.gray 실측) */
.btn-dark { background:var(--color-neutral-700); color:#FFFFFF; }

Input

.input { height:40px; padding:0 12px; border:1px solid var(--border-default); border-radius:var(--radius-md); background:#FFFFFF; font-size:14px; color:var(--text-primary); }
.input::placeholder { color:var(--text-tertiary); }
.input:focus { outline:0; border-color:var(--border-focus); }
.input.is-error { border-color:var(--color-error-fg); background:var(--color-error-bg); } /* 아래 12px 오류 문장 + fa-circle-exclamation */
.input:disabled { background:var(--color-neutral-100); color:var(--text-disabled); }

Card

.card { background:var(--bg-elevated); border:1px solid var(--border-default); border-radius:var(--radius-md); padding:20px; }
.card-stat .value { font-size:24px; font-weight:700; }          /* 통계 숫자 */
.card-stat .delta.up { color:#00B766; } .card-stat .delta.down { color:var(--color-error-fg); }
.card-accent { border-color:var(--color-primary-500); }          /* 선택된 템플릿·A/B 승자 */
.card-outlined { background:transparent; border:1px dashed var(--border-strong); } /* 빈 칸·추가 자리 */

Badge / Tag

.badge { display:inline-flex; align-items:center; height:20px; padding:0 6px; border-radius:var(--radius-sm); font-size:11px; font-weight:600; }
.badge-solid   { background:var(--color-primary-600); color:#FFFFFF; }     /* 템플릿 NEW 실측 #ff5252 */
.badge-subtle  { background:var(--color-success-bg); color:var(--color-success-fg); } /* 발송 완료 */
.badge-outline { border:1px solid var(--color-secondary-500); color:var(--color-secondary-500); } /* 일반 주소록 .title-type.normal */

Navigation (관리 화면 상단 헤더)

.gnb { height:64px; padding:0 40px; background:#FFFFFF; box-shadow:0 1px 0 var(--border-default); display:flex; align-items:center; gap:40px; }
.gnb .logo { width:107px; height:24px; }
.gnb a { font-size:15px; color:var(--text-primary); }
.gnb a.is-active { font-weight:600; box-shadow:inset 0 -2px 0 var(--color-primary-500); }
.gnb .cta { margin-left:auto; } /* 오른쪽 끝 "무료로 시작하기" 코랄 버튼 */

Motion

--duration-fast: 150ms;   /* (추정) 체크·토글 */
--duration-base: 300ms;   /* .btn transition:all .3s 실측 */
--duration-slow: 600ms;   /* .lbtn transition:all .6s 실측 · 랜딩 Lottie 일러스트는 별도 */
--ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);   /* (추정) */
--ease-in-out: ease;                                /* 실측 transition 기본값 */

Anti-patterns

1. 코랄을 넓은 배경 면에 깔지 않는다 — 코랄은 버튼·체크·그래프 선처럼 작은 면에만 쓰고, 넓은 면은 #F4F5F9/#F5F5F5 회색. 2. 한 화면에 코랄 버튼을 두 개 이상 두지 않는다 — 나머지 행동은 회색 #EDEEF2 버튼이나 텍스트 링크로 낮춘다. 3. 통계 그래프에 무지개 팔레트를 쓰지 않는다 — 코랄(주 지표)과 차콜 #606165(보조 지표) 두 색으로 끝낸다. 4. 카드에 큰 그림자·그라디언트를 겹치지 않는다 — 1px #DFE0E4 선이 기본, 그림자는 떠 있는 요소에만. 5. 로고 심볼을 다른 붉은색으로 칠하거나 사선 두 줄을 빼지 않는다 — 심볼은 #FF5252 고정, 옆 워드마크는 #202124.

Stibee (스티비)

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

출처