Lindt

크림 부티크 위 골드 이탤릭 워드마크와 레드 LINDOR 포일 트러플

서양식품소비자따뜻한retro-craftmodern-minimal명조comfortablesoftlayered라이트출시 1845개정 2020

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

Brand DNA

브랜드 DNA

브랜드명: Lindt (린트 / Lindt & Sprüngli)
한 줄 정체성: 1845년 스위스에서 시작된 프리미엄 초콜릿 메종 — 밝은 크림 부티크와 골드 워드마크, 초콜릿 브라운이 만드는 장인의 럭셔리 헤리티지
공식 디자인 철학: "Master Chocolatier since 1845" / 콘칭(conching) 기법이 낳은 부드러움 — 스위스 정밀함과 장인정신을 골드 워드마크로 응축
시그니처 요소 1개: 크림색 부티크 캔버스 위 흐르는 듯한 골드 이탤릭 워드마크와, 붉은 포일·레이스 문양으로 즉시 식별되는 LINDOR 트러플

Tone & Mood

톤 & 무드

핵심 키워드 3개: 럭셔리, 헤리티지, 정교함
무드 설명: 크림·화이트의 밝은 쇼핑 캔버스에 따뜻한 골드와 카카오 브라운을 절제해 배치한다. 골드 이탤릭 워드마크가 스위스 제과 헤리티지를, 붉은 LINDOR 포일과 섬세한 레이스 문양이 선물의 설렘과 부드러운 초콜릿 경험을 전달한다.
비주얼 스타일: 레트로 크래프트(세리프·씰·헤리티지) + 모던 미니멀(현행 패키지·디지털 시스템)
밀도(Density): Comfortable — 골드 텍스트와 브라운 여백을 넉넉히 두어 고급감을 확보
모서리 성향: Soft (6~10px) — 프리미엄 카드·버튼의 절제된 라운드, 씰만 원형
평면성: Layered — 포일 광택·골드 그라데이션·엠보싱 그림자의 물성 표현

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - Lindt Gold */
  --color-primary-50:  #FBF5EA;   /* 골드 틴트 배경 */
  --color-primary-100: #F4E7C9;   /* subtle 강조 배경 */
  --color-primary-200: #EAD3A2;
  --color-primary-300: #E1C182;
  --color-primary-400: #DCBC74;
  --color-primary-500: #DBB86E;   /* Lindt Gold (기본) */
  --color-primary-600: #C39F52;   /* Old Gold, hover */
  --color-primary-700: #A07F3B;   /* active */
  --color-primary-800: #7A5F2A;
  --color-primary-900: #52401B;

  /* Secondary - Chocolate Brown (딥 카카오) */
  --color-secondary-50:  #F3EBE3;
  --color-secondary-100: #E3D2C2;
  --color-secondary-300: #A9866B;
  --color-secondary-500: #5A3A22;   /* Milk Chocolate */
  --color-secondary-700: #3B2414;   /* Dark Chocolate */
  --color-secondary-900: #241109;   /* Cacao Black */

  /* Neutral - Warm cream & cocoa */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #FBF8F2;    /* 크림 */
  --color-neutral-100:  #F3EDE2;    /* border-subtle */
  --color-neutral-200:  #E7DCC8;    /* border */
  --color-neutral-300:  #D3C4AC;
  --color-neutral-500:  #9C8A72;
  --color-neutral-700:  #5F5140;    /* text tertiary */
  --color-neutral-800:  #3A2E20;
  --color-neutral-900:  #241A12;    /* text primary (dark cocoa) */
  --color-neutral-1000: #100A05;

  /* Semantic - 톤다운된 따뜻한 채도 */
  --color-success-bg: #E7EEDD;
  --color-success-fg: #4E6E2E;
  --color-warning-bg: #F8ECCF;
  --color-warning-fg: #A07526;
  --color-error-bg:   #F3DED6;
  --color-error-fg:   #A63B26;
  --color-info-bg:    #E3E7E2;
  --color-info-fg:    #4A5D52;

  /* Surface (배경 위계) — 공식 쇼핑 경험은 라이트가 기본 */
  --bg-base:     #FBF8F2;          /* 페이지 기본(크림) */
  --bg-subtle:   #F3EDE2;          /* 섹션 구분 */
  --bg-elevated: #FFFFFF;          /* 카드 */
  --bg-overlay:  rgba(36,17,9,0.55);

  /* Text 위계 */
  --text-primary:    #241A12;      /* 다크 코코아 */
  --text-secondary:  #5F5140;
  --text-tertiary:   #9C8A72;
  --text-on-primary: #2A1B10;      /* 골드 위는 초콜릿 텍스트 */
  --text-disabled:   #C3B49C;

  /* Border */
  --border-default: #E7DCC8;
  --border-subtle:  #F3EDE2;
  --border-strong:  #D3C4AC;
  --border-focus:   #C39F52;
}

각 토큰은 화면(RGB/HEX)용 값이며, 인쇄 시 Lindt Gold는 Pantone 7508 C / 7751 C 계열로 대체 (추정).

Typography

타이포그래피

폰트 페어링:
- 로고(영문): Lindt Serif — 이탤릭 커스텀 세리프 워드마크("흐르는 초콜릿", 상표 자산·재현 금지)
- 헤드라인(영문): Playfair Display / Cormorant Garamond 폴백 (하이 콘트라스트 세리프, 럭셔리 톤)
- 본문(영문): Freight Text / Georgia 폴백
- UI/라벨(영문): Neue Haas / Helvetica Neue (대문자 트래킹) 폴백
- 한글 헤드라인: Noto Serif KR / 본명조 (공식 한글 가족 없음, 폴백) (추정)
- 한글 본문·UI: Pretendard / Noto Sans KR
위계 (font-size / weight / line-height / letter-spacing):
- Display: 60px / 700 / 1.05 / 0.005em italic serif
- H1: 40px / 700 / 1.15 / 0 serif
- H2: 28px / 600 / 1.25 / 0 serif
- H3: 20px / 600 / 1.35 / 0.005em serif
- Body Large: 18px / 400 / 1.65 / 0 serif
- Body: 16px / 400 / 1.6 / 0 serif
- Body Small: 14px / 400 / 1.5 / 0 sans
- Caption: 12px / 600 / 1.3 / 0.18em (대문자 골드 트래킹)

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 1180px, 좌우 패딩 20px (mobile) / 40px (desktop)

Border Radius

--radius-none: 0;
--radius-sm: 4px;
--radius-md: 8px;      /* 버튼·인풋 기본 */
--radius-lg: 12px;     /* 카드 */
--radius-xl: 20px;     /* 히어로·패키지 카드 */
--radius-full: 9999px; /* 씰·아바타 원형 */

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(36,17,9,0.10);    /* 인풋·태그 */
--shadow-md: 0 6px 18px rgba(36,17,9,0.14);   /* 카드 hover */
--shadow-lg: 0 16px 36px rgba(36,17,9,0.22);  /* 모달 */
--shadow-xl: 0 26px 64px rgba(59,36,20,0.34); /* 패키지·풀스크린(브라운 캐스트) */
--shadow-gold: 0 8px 22px rgba(219,184,110,0.35); /* 골드 강조 CTA */

sm = 인풋·태그, md = 카드 hover, lg = 모달, xl = 풀스크린 다이얼로그, gold = 골드 CTA 글로우

Iconography

스타일: Outline (얇은 선, 절제된 럭셔리) — 씰·문장류만 Filled
Stroke 굵기: 1.5px
모서리 처리: Round
추천 라이브러리: Phosphor(Regular/Thin) / Feather

Component Guide

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

Button

.btn {
  font: 700 15px/1 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: 0.04em; text-transform: uppercase;
  border-radius: var(--radius-md);
  padding: 13px 26px; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background 200ms ease, box-shadow 200ms ease, transform 150ms ease;
}
.btn-primary { background: linear-gradient(180deg, var(--color-primary-500), var(--color-primary-600)); color: var(--text-on-primary); box-shadow: var(--shadow-gold); }
.btn-primary:hover { background: linear-gradient(180deg, #E4C888, var(--color-primary-600)); }
.btn-primary:active { background: var(--color-primary-700); transform: translateY(1px); box-shadow: var(--shadow-sm); }
.btn-primary:disabled { background: var(--border-default); color: var(--text-disabled); box-shadow: none; cursor: not-allowed; }
.btn-primary.is-loading { color: transparent; position: relative; }

.btn-secondary { background: var(--color-secondary-700); color: var(--color-primary-500); }
.btn-secondary:hover { background: var(--color-secondary-900); }

.btn-ghost { background: transparent; color: var(--color-secondary-700); border: 1px solid var(--border-strong); }
.btn-ghost:hover { background: var(--bg-subtle); border-color: var(--color-primary-600); }

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

Input

.input {
  width: 100%;
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 13px 16px;
  font: 400 16px/1.5 'Freight Text', Georgia, 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(195,159,82,0.18); }
.input.is-error { border-color: var(--color-error-fg); box-shadow: 0 0 0 3px rgba(166,59,38,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: 24px; }
.card-basic { border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); }
.card-emphasis { border: 0; box-shadow: var(--shadow-md); border-top: 3px solid var(--color-primary-500); }
.card-outlined { border: 1px solid var(--color-primary-500); box-shadow: none; }
.card-luxe { background: linear-gradient(165deg, var(--color-secondary-700), var(--color-secondary-900)); color: var(--color-primary-500); box-shadow: var(--shadow-xl); }

Badge / Tag

.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px; border-radius: var(--radius-sm);
  font: 700 11px/1.4 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.tag-solid   { background: var(--color-primary-500); color: var(--text-on-primary); }
.tag-subtle  { background: var(--color-primary-100); color: var(--color-primary-800); }
.tag-outline { background: transparent; color: var(--color-primary-700); border: 1px solid var(--color-primary-500); }

Navigation (Top bar)

.navbar {
  background: var(--bg-elevated);
  color: var(--text-primary);
  padding: 0 40px; height: 68px;
  display: flex; align-items: center; gap: 32px;
  border-bottom: 1px solid var(--border-default);
}
.navbar .brand {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic; font-weight: 700; font-size: 28px; color: var(--color-primary-500);
}
.navbar .nav-link {
  font: 600 13px/1 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-secondary); text-decoration: none; padding: 8px 0;
  border-bottom: 2px solid transparent;
}
.navbar .nav-link:hover,
.navbar .nav-link.active { color: var(--color-secondary-700); border-bottom-color: var(--color-primary-600); }
.navbar .spacer { margin-left: auto; }

Motion

--duration-fast: 140ms;
--duration-base: 260ms;
--duration-slow: 520ms;
--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. 밝은 배경의 작은 본문에 Lindt Gold를 직접 사용해 대비를 떨어뜨리지 않기 — 골드는 워드마크·장식·큰 제목에 쓰고 정보 텍스트는 카카오 브라운으로 3. 채도 높은 원색(빨강·파랑·네온)을 브랜드 강조에 병치 금지 — 골드+브라운 단일 럭셔리 팔레트 유지 4. 공식 워드마크·LINDOR 레이스·Gold Bunny 실루엣을 임의의 빈티지 씰이나 장식 문장으로 대체 금지 — 실제 브랜드 자산의 식별 구조 유지 5. 값싼 광택·무지개 그라데이션·플랫한 노랑으로 골드를 대체 금지 — 포일의 은은한 메탈릭 골드 물성만 사용

Lindt

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

출처