Krispy Kreme

Krispy Kreme 그린 보타이 배너 + 레드 라운드 필기체 워드마크 + 'Hot Now' 레트로 아메리칸 도넛

서양식품소비자복합retro-craftmodern-minimal디자인폰트comfortableroundlayered라이트출시 1937개정 2017

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

Brand DNA

브랜드 DNA

브랜드명: Krispy Kreme (크리스피 크림)
한 줄 정체성: 1937년 노스캐롤라이나에서 시작한 미국 도넛 브랜드 — 붉은 라운드 필기체와 초록 보타이 배너, 그리고 "Hot Now" 네온이 만드는 갓 튀긴 글레이즈드의 즐거움
공식 디자인 철학: "Hot Now" — 컨베이어에서 갓 나온 오리지널 글레이즈드의 순간을 파는 극장형 경험. 향수 어린 아메리칸 다이너 감성과 즐거움(Joy)을 브랜드 자산으로 관리
시그니처 요소 1개: 초록(#00764F) 보타이/배너 위·아래로 놓인 레드(#CC083E) 라운드 필기체 워드마크 조합 + 매장 유리창의 붉은 "Hot Now" 네온 사인

Tone & Mood

톤 & 무드

핵심 키워드 3개: 레트로, 경쾌, 달콤
무드 설명: 베이커리 업계의 흔한 갈색·핑크·오렌지를 피해, 예상 밖의 레드+그린 조합으로 각인된다. 둥글둥글한 손글씨 로고, 흰 바탕의 넉넉한 여백, 붉은 네온의 온기가 1950년대 미국 다이너의 향수를 부른다. 글레이즈의 광택과 스프링클의 알록달록함이 즐거운 물성을 더한다.
비주얼 스타일: 레트로 크래프트(필기체·네온·헤리티지) + 모던 미니멀(현행 패키지·디지털 시스템)
밀도(Density): Comfortable — 흰 여백을 넉넉히 두고 로고와 도넛 비주얼이 주인공이 되게 함
모서리 성향: Round (보타이 배너·버튼·칩 모두 둥근 12~16px, 태그·네온 배지는 캡슐)
평면성: Layered — 글레이즈 광택, 네온 글로우, 배너의 입체 그림자

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - Krispy Kreme Green (Bangladesh Green / PMS 341 C) */
  --color-primary-50:  #E4F3EC;
  --color-primary-100: #BCE0CF;
  --color-primary-200: #8ECBB0;
  --color-primary-300: #59B48E;
  --color-primary-400: #2A9A6E;
  --color-primary-500: #00764F;  /* Krispy Kreme Green (기본) */
  --color-primary-600: #006241;
  --color-primary-700: #024E35;
  --color-primary-800: #063B29;
  --color-primary-900: #08281D;

  /* Secondary - Utah Crimson (레드 워드마크·Hot Now 네온, PMS 1935 C) */
  --color-secondary-50:  #FCE3EA;
  --color-secondary-100: #F7B6C7;
  --color-secondary-500: #CC083E;
  --color-secondary-600: #B00534;
  --color-secondary-700: #8E0329;

  /* Neutral - Warm glaze tones (따뜻한 화이트~잉크) */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #FBF7F0;   /* glaze cream — bg-subtle */
  --color-neutral-100:  #F2EDE4;   /* border-subtle */
  --color-neutral-200:  #E4DDD1;   /* border */
  --color-neutral-300:  #CBC3B4;
  --color-neutral-500:  #938C7E;
  --color-neutral-700:  #5C574D;
  --color-neutral-800:  #33302A;
  --color-neutral-900:  #1B1A16;   /* ink */
  --color-neutral-1000: #000000;

  /* Semantic */
  --color-success-bg: #E4F3EC;
  --color-success-fg: #006241;   /* 브랜드 그린과 통일 */
  --color-warning-bg: #FCEFD4;
  --color-warning-fg: #A9760C;
  --color-error-bg:   #FCE3EA;
  --color-error-fg:   #CC083E;   /* 브랜드 레드와 통일 */
  --color-info-bg:    #E1EDEC;
  --color-info-fg:    #2C6E68;

  /* Surface (배경 위계) */
  --bg-base:     #FFFFFF;          /* 페이지 기본 */
  --bg-subtle:   #FBF7F0;          /* 섹션 구분 — 글레이즈 크림 */
  --bg-elevated: #FFFFFF;          /* 카드 */
  --bg-overlay:  rgba(18,36,28,0.55);

  /* Text 위계 */
  --text-primary:    #1B1A16;
  --text-secondary:  #5C574D;
  --text-tertiary:   #938C7E;
  --text-on-primary: #FFFFFF;      /* 그린/레드 위 흰 텍스트 */
  --text-disabled:   #CBC3B4;

  /* Border */
  --border-default: #E4DDD1;
  --border-subtle:  #F2EDE4;
  --border-strong:  #CBC3B4;
  --border-focus:   #00764F;
}

각 토큰은 화면(RGB/HEX)용이며 인쇄 시 PMS(그린 341 C / 레드 1935 C)로 대체 (추정). 공식 브랜드 가이드가 비공개라 HEX는 로고 분석 출처 기반 (추정).

Typography

타이포그래피

폰트 페어링:
- 로고(영문): Krispy Kreme Custom Script — 커스텀 드로잉 라운드 필기체(상표, 재현 금지) / 근사 폴백 Lobster
- 서브 워드마크(영문): Futura Bold — "DOUGHNUTS" 대문자 지오메트릭 산세리프
- UI/헤드라인(영문): Futura / Avenir Next / Poppins 폴백 (지오메트릭 라운드 산세리프로 로고 톤 유지)
- 본문(영문): Arial / Helvetica Neue
- 한글: Pretendard / Noto Sans KR (공식 한글 가족 없음, 폴백) (추정)
위계 (font-size / weight / line-height / letter-spacing):
- Display: 60px / 800 / 1.02 / -0.01em (지오메트릭 산세리프, 또는 스크립트 로고)
- H1: 40px / 800 / 1.1 / -0.005em
- H2: 28px / 700 / 1.2 / 0
- H3: 20px / 700 / 1.3 / 0
- Body Large: 18px / 400 / 1.6 / 0
- Body: 16px / 400 / 1.55 / 0
- Body Small: 14px / 400 / 1.5 / 0
- Caption: 12px / 700 / 1.3 / 0.16em (대문자 트래킹 — "HOT NOW" 톤)

Spacing

스페이싱

Base unit: 8px (8pt 그리드)
토큰: ``css --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; ``
Container: max-width 1200px, 좌우 패딩 20px (mobile) / 40px (desktop)

Border Radius

--radius-none: 0;
--radius-sm: 6px;
--radius-md: 12px;    /* 인풋·기본 카드 */
--radius-lg: 16px;    /* 카드 시그니처 */
--radius-xl: 28px;    /* 히어로·배너 카드 */
--radius-full: 9999px; /* 버튼·칩·네온 배지 캡슐 */

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(27,26,22,0.10);    /* 인풋·태그 */
--shadow-md: 0 6px 16px rgba(27,26,22,0.14);   /* 카드 hover */
--shadow-lg: 0 14px 32px rgba(27,26,22,0.20);  /* 모달 */
--shadow-xl: 0 24px 60px rgba(8,40,29,0.32);   /* 풀스크린(그린 캐스트) */
--shadow-neon: 0 0 16px rgba(204,8,62,0.55);   /* Hot Now 네온 글로우 */

sm = 태그/인풋, md = 카드 hover, lg = 모달/드롭다운, xl = 풀스크린 dialog, neon = "Hot Now" 배지·CTA 글로우

Iconography

스타일: Filled (볼드·둥근 솔리드 — 라운드 로고 톤과 조화)
Stroke 굵기: 채움형 기본, 아웃라인 사용 시 2px
모서리 처리: Round
추천 라이브러리: Phosphor(Fill) / Material Symbols(Rounded, Filled)

Component Guide

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

Button

.btn {
  font: 800 15px/1 Futura, 'Avenir Next', Poppins, sans-serif;
  letter-spacing: 0.01em;
  border-radius: var(--radius-full);   /* 캡슐 */
  padding: 12px 26px;
  border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.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); transform: translateY(1px); }
.btn-primary:disabled { background: var(--border-default); color: var(--text-disabled); cursor: not-allowed; }
.btn-primary.is-loading { color: transparent; position: relative; }

.btn-secondary { background: transparent; color: var(--color-primary-600); border: 2px solid var(--color-primary-500); }
.btn-secondary:hover { background: var(--color-primary-50); }

.btn-ghost { background: transparent; color: var(--text-primary); }
.btn-ghost:hover { background: var(--bg-subtle); }

/* Hot Now — 레드 네온 CTA */
.btn-hotnow { background: var(--color-secondary-500); color: #fff; box-shadow: var(--shadow-neon); }
.btn-hotnow:hover { background: var(--color-secondary-600); }

.btn-danger { background: var(--color-error-fg); color: #fff; }
.btn-danger:hover { filter: brightness(0.92); }

Input

.input {
  width: 100%;
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font: 400 16px/1.4 Futura, 'Avenir Next', Arial, sans-serif;
  color: var(--text-primary);
}
.input::placeholder { color: var(--text-tertiary); }
.input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(0,118,79,0.15); }
.input.is-error { border-color: var(--color-error-fg); box-shadow: 0 0 0 3px rgba(204,8,62,0.15); }
.input:disabled { background: var(--bg-subtle); color: var(--text-disabled); cursor: not-allowed; }

Card

.card { background: var(--bg-elevated); border-radius: var(--radius-lg); padding: 20px; }
.card-basic    { border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); }
.card-emphasis { border: 0; box-shadow: var(--shadow-md); border-top: 4px solid var(--color-primary-500); }
.card-outlined { border: 2px solid var(--color-primary-500); box-shadow: none; }
.card-green    { background: var(--color-primary-500); color: var(--text-on-primary); box-shadow: var(--shadow-xl); }

Badge / Tag

.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px; border-radius: var(--radius-full);
  font: 800 12px/1.4 Futura, 'Avenir Next', Arial, sans-serif; letter-spacing: 0.06em; text-transform: uppercase;
}
.tag-solid   { background: var(--color-primary-500); color: var(--text-on-primary); }
.tag-subtle  { background: var(--color-primary-50); color: var(--color-primary-700); }
.tag-outline { background: transparent; color: var(--color-primary-600); border: 1px solid var(--color-primary-500); }
.tag-hotnow  { background: var(--color-secondary-500); color: #fff; box-shadow: var(--shadow-neon); }

Navigation (Top bar)

.navbar {
  background: var(--color-primary-500);
  color: var(--text-on-primary);
  padding: 0 40px; height: 64px;
  display: flex; align-items: center; gap: 28px;
}
.navbar .brand {
  font-family: 'Lobster', 'Brush Script MT', cursive;
  font-style: italic; font-size: 26px; color: #fff;
  text-shadow: 1px 1px 0 rgba(0,0,0,.18);
}
.navbar .nav-link {
  font: 700 15px/1 Futura, 'Avenir Next', Arial, sans-serif;
  color: rgba(255,255,255,0.88); text-decoration: none; padding: 8px 0;
  border-bottom: 3px solid transparent;
}
.navbar .nav-link:hover,
.navbar .nav-link.active { color: #fff; border-bottom-color: #fff; }
.navbar .spacer { margin-left: auto; }

Motion

--duration-fast: 120ms;
--duration-base: 240ms;
--duration-slow: 480ms;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* 컨베이어에서 도넛이 미끄러지듯 도착 */
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* 네온 점멸·글레이즈 흐름 */

Anti-patterns

1. 커스텀 라운드 필기체 로고를 임의 스크립트 폰트로 재현·기울기 변형·자간 조정 금지 — 상표 자산은 원형 그대로만 2. 그린·레드 외 경쟁 채도의 원색(파랑·보라)을 브랜드 액션에 병치 금지 — 레드+그린+화이트 3색 원칙 유지 3. 베이커리 클리셰인 갈색·파스텔 핑크·오렌지를 배경 주색으로 사용 금지 — 크리스피 크림의 차별점을 훼손 4. "Hot Now" 붉은 네온을 옅은 회색·저채도로 표현 금지 — 온기 있는 네온 글로우(shadow-neon)가 정체성 5. 레드 필기체와 그린 배너의 위·아래 조합을 좌우 나열·색 반전으로 바꾸지 말 것 — 보타이 배너 위계가 로고의 골격

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

출처