Chipotle

브릭 레드 액션과 원형 칠리 페퍼 봉인으로 완성한 따뜻한 주문 경험

서양식품소비자따뜻한modern-minimalretro-craft고딕comfortablesoftflat라이트한글 지원출시 2009개정 2009

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

Brand DNA

브랜드 DNA

브랜드명: Chipotle (Chipotle Mexican Grill)
한 줄 정체성: 신선하고 정직하게 조달한 재료로 눈앞에서 만드는 캐주얼 멕시칸 그릴
공식 디자인 철학: "Food With Integrity" — 윤리적·지속가능한 조달, 가공을 최소화한 재료, 과장 없는 소박한 표현
시그니처 요소 1개: 브릭 레드(#A81612)와 딥 브라운(#451400)의 2색 조합 + 원형 칠리 페퍼 봉인 + 정직한 재료를 바로 고르는 주문 빌더

Tone & Mood

톤 & 무드

핵심 키워드 3개: 정직함, 소박함, 강렬함
무드 설명: 따뜻한 크림 화이트와 크래프트 계열 표면 위에 브릭 레드 액션이 선명하게 놓인다. 광택 없는 무광 톤과 큼직한 메뉴 타이포, 재료 선택을 보여주는 정돈된 카드가 중심이다. 패스트푸드 특유의 원색 대신 흙빛(earthy) 팔레트로 '진짜 음식' 인상을 준다.
비주얼 스타일: 모던 미니멀 + 레트로 크래프트 (재생지·포일·수공 질감)
밀도(Density): Comfortable — 여백을 살려 재료 사진과 카피가 숨 쉬게 함
모서리 성향: Soft (6~12px) — 로고의 라운드 사각형과 동일한 부드러운 각
평면성: Flat — 무광 인쇄물 감성, 그림자는 극도로 절제

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - Chipotle Red (브릭 레드) */
  --color-primary-50:  #FBEAE9;   /* 옅은 배경 틴트 */
  --color-primary-100: #F5C9C6;   /* subtle 배지 배경 */
  --color-primary-200: #E89A95;
  --color-primary-300: #D96A63;
  --color-primary-400: #C33E34;   /* hover 라이트 */
  --color-primary-500: #A81612;   /* Chipotle Red - 기본 */
  --color-primary-600: #8E120F;   /* 버튼 hover */
  --color-primary-700: #6F0E0C;   /* active */
  --color-primary-800: #520A08;
  --color-primary-900: #380705;

  /* Secondary - Chipotle Brown (딥 마룬/카카오) */
  --color-secondary-50:  #F3E9E2;
  --color-secondary-100: #E0CBBA;
  --color-secondary-300: #A9764F;
  --color-secondary-500: #451400;   /* Chipotle Brown - 로고 배경/헤더 */
  --color-secondary-700: #2E0D00;
  --color-secondary-900: #1A0700;

  /* Accent - Cilantro Green (재료 신호색, 절제 사용) */
  --color-accent-cilantro: #3A7A2E;
  --color-accent-corn:     #E8B33D;

  /* Neutral - Warm Kraft (크래프트 종이 계열) */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #FBF5EA;   /* 카드/표면 */
  --color-neutral-100:  #F2E7D5;   /* page bg — 크래프트 캔버스 */
  --color-neutral-200:  #E4D3B8;   /* border */
  --color-neutral-300:  #D9C7A8;
  --color-neutral-500:  #A8916F;
  --color-neutral-700:  #6E573C;   /* text tertiary */
  --color-neutral-800:  #4A3626;
  --color-neutral-900:  #2C1B0E;   /* text primary(다크 브라운) */
  --color-neutral-1000: #000000;

  /* Semantic - 흙빛 톤에 맞춘 채도 */
  --color-success-bg: #E6F0DE;
  --color-success-fg: #3A7A2E;   /* Cilantro */
  --color-warning-bg: #FBEED2;
  --color-warning-fg: #B5801B;   /* Corn */
  --color-error-bg:   #FBEAE9;
  --color-error-fg:   #A81612;   /* Chipotle Red */
  --color-info-bg:    #E4E9EA;
  --color-info-fg:    #4A6B6E;

  /* Surface (배경 위계) */
  --bg-base:     #F2E7D5;   /* 크래프트 종이 */
  --bg-subtle:   #FBF5EA;   /* 섹션 구분 */
  --bg-elevated: #FFFFFF;   /* 카드 */
  --bg-overlay:  rgba(44,27,14,0.55);   /* 모달/드롭다운 */

  /* Text 위계 */
  --text-primary:    #2C1B0E;   /* 본문 - 다크 브라운 */
  --text-secondary:  #4A3626;   /* 보조 */
  --text-tertiary:   #6E573C;   /* 캡션 */
  --text-on-primary: #FBF5EA;   /* 레드/브라운 위 - 크림 */
  --text-disabled:   #A8916F;

  /* Border */
  --border-default: #E4D3B8;
  --border-subtle:  #F2E7D5;
  --border-strong:  #D9C7A8;
  --border-focus:   #A81612;
}

[data-theme="dark"] {
  /* 로스팅된 다크 브라운 캔버스 */
  --bg-base:     #2A1207;
  --bg-subtle:   #331810;
  --bg-elevated: #3A1C0E;
  --bg-overlay:  rgba(0,0,0,0.65);

  --text-primary:    #F2E7D5;
  --text-secondary:  #D9C7A8;
  --text-tertiary:   #C4A987;
  --text-on-primary: #FBF5EA;
  --text-disabled:   #8A6A4A;

  --border-default: #5A3418;
  --border-subtle:  #43230F;
  --border-strong:  #6E573C;
  --border-focus:   #D6392E;

  /* 다크에선 레드를 한 단계 밝게 (대비 확보) */
  --color-primary-500: #D6392E;
  --color-primary-600: #C33E34;
  --color-secondary-500: #E4D3B8;
}

Typography

타이포그래피

폰트 페어링:
- 영문 헤드/UI: Gotham (Hoefler & Co., 상용) — 공식 대문자 워드마크와 원형 봉인은 커스텀 레터링, UI 폴백은 Arial Narrow / -apple-system
- 영문 에디토리얼: Adobe Garamond 계열 세리프 (마케팅 롱카피, 추정) / Georgia 폴백
- 한글 헤드/UI: Pretendard / Noto Sans KR (기하학적 산세리프로 Gotham 톤 근사)
- 한글 본문: Pretendard
위계 (헤드는 굵고 강렬, 대문자 트래킹 활용):
- Display: 56px / 800 / 1.02 / -0.01em (UPPERCASE 옵션)
- H1: 40px / 800 / 1.08 / -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.6 / 0
- Body Small: 14px / 400 / 1.5 / 0
- Overline: 12px / 700 / 1.3 / 0.14em (UPPERCASE, 라벨/카테고리)
- Caption: 12px / 500 / 1.4 / 0.02em

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: max-width 1200px, 좌우 패딩 20px (mobile) / 48px (desktop)

Border Radius

--radius-none: 0;
--radius-sm: 4px;
--radius-md: 8px;      /* 버튼/인풋 */
--radius-lg: 12px;     /* 카드 - 로고 라운드 사각과 동일 톤 */
--radius-xl: 20px;
--radius-full: 9999px; /* pill 버튼/태그 */

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(44,27,14,0.06);   /* 미세 구분 */
--shadow-md: 0 4px 12px rgba(44,27,14,0.10);  /* 카드 hover */
--shadow-lg: 0 10px 24px rgba(44,27,14,0.14); /* 모달/드롭다운 */
--shadow-xl: 0 20px 40px rgba(44,27,14,0.20); /* 풀스크린 dialog */
--shadow-red: 0 6px 16px rgba(168,22,18,0.28);/* Primary 버튼 강조 */

Iconography

스타일: Filled + Outline 혼합 — 재료·픽토그램은 Filled, UI 컨트롤은 Outline
Stroke 굵기: 2px (Outline)
모서리 처리: Round (친근한 손맛)
추천 라이브러리: Phosphor (Fill/Regular) / Lucide

Component Guide

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

Button

.btn {
  font: 700 15px/1 'Gotham', Montserrat, 'Pretendard', sans-serif;
  letter-spacing: 0.02em;
  border-radius: var(--radius-full);
  padding: 12px 24px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; cursor: pointer;
  transition: background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.btn-primary { background: var(--color-primary-500); color: var(--text-on-primary); box-shadow: var(--shadow-red); }
.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-strong); color: var(--text-disabled); box-shadow: none; cursor: not-allowed; }
.btn-primary.is-loading { color: transparent; position: relative; }

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

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

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

Input

.input {
  font: 400 15px/1.4 'Pretendard', sans-serif;
  background: var(--bg-elevated);
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  color: var(--text-primary);
  width: 100%;
}
.input::placeholder { color: var(--text-tertiary); }
.input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(168,22,18,0.14); }
.input.is-error { border-color: var(--color-error-fg); box-shadow: 0 0 0 3px rgba(168,22,18,0.14); }
.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; border: 1px solid var(--border-subtle); }
.card-elevated { box-shadow: var(--shadow-md); border: 0; }
.card-outlined { box-shadow: none; border: 1.5px solid var(--border-default); }
.card-kraft { background: var(--bg-base); border: 1px dashed var(--border-strong); }  /* 크래프트지 질감 카드 */
.menu-card .photo { aspect-ratio: 4/3; border-radius: var(--radius-md); background: var(--bg-base); }
.menu-card h3 { font: 700 18px/1.3 'Gotham', Montserrat, sans-serif; margin: 12px 0 4px; color: var(--text-primary); }
.menu-card .price { font: 800 16px/1 'Gotham', sans-serif; color: var(--color-primary-500); }

Badge / Tag

.tag { padding: 4px 12px; border-radius: var(--radius-full); font: 700 12px/1.4 'Gotham', Montserrat, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 4px; }
.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 { border: 1.5px solid var(--border-strong); color: var(--text-secondary); }
.tag-veg     { background: var(--color-success-bg); color: var(--color-success-fg); }   /* 채식 재료 신호 */

Navigation (헤더)

.topnav { display: flex; align-items: center; gap: 24px; padding: 14px 48px; background: var(--color-secondary-500); color: var(--text-on-primary); }
.topnav .brand { color: var(--color-primary-500); font: 800 22px/1 'Gotham', Montserrat, sans-serif; letter-spacing: 0.06em; }
.topnav .link { font: 700 14px/1 'Gotham', Montserrat, sans-serif; color: var(--text-on-primary); text-decoration: none; opacity: 0.85; letter-spacing: 0.02em; }
.topnav .link:hover { opacity: 1; }
.topnav .order { margin-left: auto; background: var(--color-primary-500); color: var(--text-on-primary); padding: 10px 22px; border-radius: var(--radius-full); font-weight: 800; }

Motion

--duration-fast: 120ms;
--duration-base: 200ms;
--duration-slow: 360ms;
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

Anti-patterns

1. 브릭 레드/브라운 외의 원색(파랑·형광 등) 남발 금지 — 팔레트는 흙빛 2색이 정본, 초록·옥수수색은 재료 신호로만 절제 사용 2. 광택 있는 그라데이션·글로시 버튼 금지 — 무광 크래프트 인쇄 톤 유지 3. 원형 칠리 페퍼 봉인의 비율이나 외곽 링을 임의로 변형하지 말 것 — 워드마크와 함께 사용할 때는 공식 대문자 표기 유지 4. 밝은 UI에서 차가운 청백색을 넓게 사용하지 말 것 — 크림 화이트와 크래프트 베이지로 음식이 돋보이는 온기를 유지 5. 칠리 페퍼 심볼을 회전·변형하거나 레드 배경 위에 레드 로고를 얹지 말 것 — 심볼과 이중 원형 봉인의 대비를 유지

Chipotle

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

출처