Coca-Cola
Coca-Cola Red 위 스펜서리안 필기체 워드마크와 다이내믹 리본(웨이브)
Brand DNA
브랜드 DNA
- 브랜드명: Coca-Cola (코카콜라)
- 한 줄 정체성: 1886년부터 이어진 세계에서 가장 유명한 청량음료 — 붉은 색과 필기체 하나로 즉시 식별되는 글로벌 아이콘
- 공식 디자인 철학: "One Iconic Brand. One Iconic Look." — 200개 이상 시장에서 한눈에 코카콜라로 인식되는 일관된 경험을 만들고, 낙관과 진정성을 현대적으로 확장
- 시그니처 요소 1개: Coca-Cola Red(#F40009)와 화이트로 구성한 아든 스퀘어(Arden Square) 안에서 스펜서리안 워드마크를 받쳐 올리는 다이내믹 리본(Dynamic Ribbon)
Tone & Mood
톤 & 무드
- 핵심 키워드 3개: 활기, 상징적, 클래식
- 무드 설명: 강렬한 단일 레드가 화면을 지배하고, 아든 스퀘어 안의 흰 필기체 로고와 위로 솟는 리본 곡선이 낙관적인 에너지를 만든다. 유리병의 광택·탄산 방울처럼 촘촘한 하이라이트와 그림자로 "차갑고 상쾌한" 물성을 연출한다. 2026 글로벌 리프레시는 100년 넘은 헤리티지 자산을 더 선명하고 일관된 디지털 시스템으로 확장한다.
- 비주얼 스타일: 레트로 크래프트(필기체·헤리티지) + 모던 미니멀(현행 캠페인 시스템)
- 밀도(Density): Comfortable — 레드 배경에 흰 여백을 넉넉히 두어 로고와 카피가 숨 쉬게 함
- 모서리 성향: Pill (버튼·칩은 캡슐형 9999px, 카드·병은 리본 곡선에 맞춰 둥글게)
- 평면성: Layered — 병 광택·리본 그림자·탄산 하이라이트의 물성 표현
Color System
컬러 시스템 (CSS 변수)
:root {
/* Primary - Coca-Cola Red */
--color-primary-50: #FFE9EA;
--color-primary-100: #FFC4C7;
--color-primary-200: #FB8E92;
--color-primary-300: #F85559;
--color-primary-400: #F62A30;
--color-primary-500: #F40009; /* Coca-Cola Red (기본) */
--color-primary-600: #D2000A;
--color-primary-700: #A80309;
--color-primary-800: #7C0709;
--color-primary-900: #4E0607;
/* Secondary - 헤리티지 골드(연말·오리지널 라벨) */
--color-secondary-500: #B8901E;
/* Neutral - 잉크 블랙 & 화이트 */
--color-neutral-0: #FFFFFF;
--color-neutral-50: #F7F4F4;
--color-neutral-100: #EDE8E8; /* border-subtle */
--color-neutral-200: #DAD3D3; /* border */
--color-neutral-300: #BDB4B4;
--color-neutral-500: #8A8080;
--color-neutral-700: #5A5252;
--color-neutral-800: #333030;
--color-neutral-900: #1E1E1E; /* Coca-Cola Black */
--color-neutral-1000: #000000;
/* Semantic */
--color-success-bg: #E3F3E6;
--color-success-fg: #1E7B34;
--color-warning-bg: #FFF2D6;
--color-warning-fg: #A6740B;
--color-error-bg: #FFE1E2;
--color-error-fg: #C1000A;
--color-info-bg: #E1EDF7;
--color-info-fg: #1B5C9B;
/* Surface (배경 위계) */
--bg-base: #FFFFFF; /* 페이지 기본 */
--bg-subtle: #F7F4F4; /* 섹션 구분 */
--bg-elevated: #FFFFFF; /* 카드 */
--bg-overlay: rgba(30,30,30,0.55);
/* Text 위계 */
--text-primary: #1E1E1E;
--text-secondary: #5A5252;
--text-tertiary: #8A8080;
--text-on-primary: #FFFFFF; /* 레드 위 흰 텍스트 */
--text-disabled: #BDB4B4;
/* Border */
--border-default: #DAD3D3;
--border-subtle: #EDE8E8;
--border-strong: #BDB4B4;
--border-focus: #F40009;
}
각 토큰은 화면(RGB/HEX)용 값이며 인쇄 시 PMS(코카콜라 레드 계열)로 대체 (추정).
Typography
타이포그래피
- 폰트 페어링:
- 로고(영문): Coca-Cola Script — Frank M. Robinson의 1887 스펜서리안 손글씨(상표, 재현 금지)
- UI/헤드라인(영문): TCCC Unity (Brody Associates 제작, 자체 폰트) / 폴백 Gotham, Helvetica Neue
- 본문(영문): TCCC Unity Text / Arial 폴백
- 한글: Pretendard / Noto Sans KR (공식 한글 가족 없음, 폴백) (추정)
- 위계 (font-size / weight / line-height / letter-spacing):
- Display: 64px / 800 / 1.02 / -0.02em
- H1: 40px / 800 / 1.1 / -0.01em
- H2: 28px / 700 / 1.2 / -0.005em
- H3: 20px / 700 / 1.3 / 0
- Body Large: 18px / 400 / 1.55 / 0
- Body: 16px / 400 / 1.5 / 0
- Body Small: 14px / 400 / 1.45 / 0
- Caption: 12px / 600 / 1.3 / 0.04em (대문자 트래킹)
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, 좌우 패딩 24px (mobile) / 40px (desktop)
Border Radius
Border Radius
--radius-none: 0;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px; /* 카드 */
--radius-xl: 28px; /* 히어로·병 카드 */
--radius-full: 9999px; /* 버튼·칩 캡슐(시그니처) */Shadow / Elevation
Shadow / Elevation
--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(30,30,30,0.10); /* 인풋·태그 */
--shadow-md: 0 6px 16px rgba(30,30,30,0.14); /* 카드 hover */
--shadow-lg: 0 14px 32px rgba(30,30,30,0.20); /* 모달 */
--shadow-xl: 0 24px 60px rgba(124,7,9,0.30); /* 병·풀스크린(레드 캐스트) */Iconography
Iconography
- 스타일: Filled (볼드·솔리드, 병·리본 실루엣과 조화)
- Stroke 굵기: 채움형 기본, 아웃라인 사용 시 2px
- 모서리 처리: Round
- 추천 라이브러리: Phosphor(Fill) / Material Symbols(Rounded, Filled)
Component Guide
컴포넌트 가이드 (상태별 CSS)
Button
.btn {
font: 700 15px/1 'TCCC Unity', Gotham, 'Helvetica Neue', Arial, sans-serif;
letter-spacing: 0.01em;
border-radius: var(--radius-full); /* 캡슐 시그니처 */
padding: 12px 24px;
border: 0; cursor: pointer;
display: inline-flex; align-items: center; gap: 8px;
transition: background 150ms ease, transform 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); }
.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 'TCCC Unity', 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(244,0,9,0.15); }
.input.is-error { border-color: var(--color-error-fg); box-shadow: 0 0 0 3px rgba(193,0,10,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-red { 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: 600 12px/1.4 'TCCC Unity', Arial, sans-serif; letter-spacing: 0.02em;
}
.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); }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: 'Coca-Cola Script', 'Brush Script MT', cursive;
font-style: italic; font-size: 26px; color: #fff;
}
.navbar .nav-link {
font: 600 15px/1 'TCCC Unity', 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
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
Anti-patterns
1. 스펜서리안 필기체 로고를 다른 스크립트 폰트로 재현·기울기 변형·재배치 금지 — 상표 자산은 원형 그대로만 2. Coca-Cola Red 외 경쟁 채도의 원색(파랑·초록)을 브랜드 액션에 병치 금지 — 단일 레드 지배 원칙 3. 필기체 워드마크를 저대비 배경(밝은 회색·파스텔) 위에 흰색으로 배치 금지 — 레드 또는 충분한 대비 배경만 4. 다이내믹 리본 웨이브를 각진 직선/지그재그로 대체 금지 — 흐르는 곡선이 리본의 정체성 5. 레드 배경을 그라데이션 남용이나 이미지로 흐리게 하지 말 것 — 솔리드 레드의 즉시 식별성 훼손 금지