Ladurée
파스텔 피스타치오/셀라돈 그린 위 골드 세리프 워드마크 + 벨 에포크 파티스리 감성
Brand DNA
브랜드 DNA
- 브랜드명: Ladurée (라뒤레)
- 한 줄 정체성: 1862년 파리 루아얄 거리에서 시작된 마카롱의 원조 메종 — 파스텔 그린 상자와 골드 세리프 하나로 식별되는 벨 에포크 럭셔리 파티스리
- 공식 디자인 철학: "beauty, comfort, and above all, delicacy(아름다움·안락함, 그리고 무엇보다 섬세함)" — 폼폼·금박·몰딩·실크·대리석·크리스털의 벨 에포크 장식미. 마담 드 퐁파두르·외제니 황후·마들렌 카스탱의 시대를 초월한 우아함에서 영감
- 시그니처 요소 1개: 파스텔 피스타치오/셀라돈 그린(Ladurée Green, #A8C3A5) 캔버스 위 골드 세리프 필기체 워드마크 + 파티시에 케루빔(아기 천사) 엠블럼 + 파스텔 마카롱 팔레트. 원래 루아얄 살롱 벽의 카키 그린이 시간이 지나며 더 부드럽고 여성스러운 톤으로 순화됨
Tone & Mood
톤 & 무드
- 핵심 키워드 3개: 우아함, 파스텔, 벨에포크
- 무드 설명: 물을 탄 듯 옅은 셀라돈-피스타치오 그린이 화면을 지배하고, 그 위에 골드 세리프 워드마크가 얇은 금박 테두리와 함께 놓인다. 파스텔 마카롱의 로즈·라벤더·민트가 포인트로 흩어지며, 크림색 여백과 가는 금선(gilt)이 살롱의 몰딩처럼 화면을 감싼다. 유행을 좇지 않는 시대 초월적 우아함이 톤의 핵심.
- 비주얼 스타일: 레트로 크래프트(벨 에포크 장식·금박·세리프) + 모던 미니멀(현행 패키지·이커머스의 절제된 여백)
- 밀도(Density): Spacious — 넉넉한 여백과 가는 금선으로 살롱 같은 여유. 요소를 촘촘히 채우지 않음
- 모서리 성향: Soft (4~8px) — 상자·카드·버튼 모두 완만하게. 지나친 라운드나 각진 모서리를 피함
- 평면성: Subtle — 금박 라인·옅은 그림자로 살짝의 입체감만, 무겁지 않게
Color System
컬러 시스템 (CSS 변수)
:root {
/* Primary - Ladurée Green (파스텔 셀라돈/피스타치오) */
--color-primary-50: #F3F7F1; /* 살롱 배경 틴트 */
--color-primary-100: #E4EDE0; /* 옅은 표면 */
--color-primary-200: #D2E0CD; /* border-subtle */
--color-primary-300: #BFD2B9; /* 태그 배경 */
--color-primary-400: #B2C9AB; /* 보조 강조 */
--color-primary-500: #A8C3A5; /* Ladurée Green (기본, 시그니처 상자) (추정) */
--color-primary-600: #8FAE8B; /* hover */
--color-primary-700: #74926F; /* active·본문 위 텍스트 */
--color-primary-800: #576E53; /* 딥 세이지 */
--color-primary-900: #3C4B39; /* 가장 어두운 그린 */
/* Secondary - Ladurée Gold (금박·케루빔·워드마크) */
--color-secondary-50: #F7F0E2;
--color-secondary-500: #B8925A; /* Ladurée Gold (추정) */
--color-secondary-700: #8A6A34;
/* Neutral - Ivory & warm gray */
--color-neutral-0: #FFFFFF;
--color-neutral-50: #FBF9F4; /* 아이보리 페이지 */
--color-neutral-100: #F4F1E8; /* 섹션 구분 */
--color-neutral-200: #E7E2D6; /* border */
--color-neutral-300: #D6D0C2;
--color-neutral-500: #A29B8B;
--color-neutral-700: #6B6558;
--color-neutral-800: #423E36;
--color-neutral-900: #2A2721; /* 잉크 브라운블랙 */
--color-neutral-1000: #000000;
/* Semantic - 파스텔로 톤다운 */
--color-success-bg: #E6EFE2;
--color-success-fg: #55823F;
--color-warning-bg: #F7ECD5;
--color-warning-fg: #A9822F;
--color-error-bg: #F3DFDD;
--color-error-fg: #A9503F;
--color-info-bg: #E2EAEC;
--color-info-fg: #4C7379;
/* Surface (배경 위계) */
--bg-base: #FBF9F4; /* 아이보리 페이지 */
--bg-subtle: #F3F7F1; /* 옅은 그린 섹션 */
--bg-elevated: #FFFFFF; /* 카드 */
--bg-overlay: rgba(42,39,33,0.45);
/* Text 위계 */
--text-primary: #2A2721; /* 본문 */
--text-secondary: #6B6558; /* 보조 */
--text-tertiary: #A29B8B; /* 캡션 */
--text-on-primary: #2A2721; /* 파스텔 그린 위 잉크 텍스트 */
--text-disabled: #C4BEB0;
/* Border */
--border-default: #E7E2D6;
--border-subtle: #F4F1E8;
--border-strong: #D6D0C2;
--border-focus: #B8925A; /* 골드 포커스 링 */
}
각 토큰은 화면(RGB/HEX)용 값이며, Ladurée는 공식 브랜드 컬러 가이드 HEX를 공개하지 않아 패키지·스토어 관찰에 기반한 근사치(추정)다.
Typography
타이포그래피
- 폰트 페어링:
- 워드마크(영문): Ladurée 전용 세리프 — 이탤릭 골드 필기 로만체(상표, 재현 금지)
- 헤드라인(영문): Cormorant Garamond / Playfair Display 폴백 — 하이 콘트라스트 세리프
- 본문(영문): EB Garamond / Georgia 폴백 — 가독성 있는 올드스타일 세리프
- UI/라벨(영문): 대문자 트래킹된 소형 산세리프 (Futura / 폴백 Segoe UI)
- 한글 헤드라인: Noto Serif KR / 본명조 (공식 한글 가족 없음, 폴백) (추정)
- 한글 본문/UI: Pretendard / Noto Sans KR
- 위계 (font-size / font-weight / line-height / letter-spacing):
- Display: 56px / 500 / 1.1 / 0.01em (이탤릭 세리프)
- H1: 40px / 500 / 1.15 / 0.005em (세리프)
- H2: 28px / 500 / 1.25 / 0.01em (세리프)
- H3: 20px / 600 / 1.35 / 0.01em (세리프)
- Body Large: 18px / 400 / 1.7 / 0 (세리프)
- Body: 16px / 400 / 1.7 / 0 (세리프)
- Body Small: 14px / 400 / 1.6 / 0 (세리프)
- Overline/Label: 11px / 600 / 1.3 / 0.24em (대문자 산세리프 트래킹 — 시그니처)
- Caption: 12px / 400 / 1.4 / 0.02em (이탤릭)
Spacing
스페이싱
- Base unit: 8px (8pt 그리드, Spacious 톤)
- 토큰: ``
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 1160px, 좌우 패딩 24px (mobile) / 48px (desktop) — 넉넉한 살롱형 여백
Border Radius
Border Radius
--radius-none: 0;
--radius-sm: 4px; /* 버튼·태그 */
--radius-md: 8px; /* 카드·인풋 (기본 Soft) */
--radius-lg: 12px; /* 상자·강조 카드 */
--radius-xl: 16px; /* 히어로 패널 */
--radius-full: 9999px; /* 케루빔 원형 뱃지·아바타에 한정 */Shadow / Elevation
Shadow / Elevation
--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(42,39,33,0.06); /* 인풋·태그 */
--shadow-md: 0 6px 18px rgba(42,39,33,0.10); /* 카드 hover */
--shadow-lg: 0 16px 36px rgba(42,39,33,0.14); /* 모달 */
--shadow-xl: 0 28px 64px rgba(87,110,83,0.22); /* 풀스크린(세이지 캐스트) */
--shadow-gilt: 0 0 0 1px rgba(184,146,90,0.55); /* 금박 테두리 링 */- sm = 인풋·태그, md = 카드 hover, lg = 모달, xl = 풀스크린 dialog, gilt = 살롱 몰딩 같은 금선 테두리
Iconography
Iconography
- 스타일: Outline (얇고 우아한 선) — 세리프 톤과 조화. 케루빔·리본 등 장식 모티프는 Duotone 라인 일러스트
- Stroke 굵기: 1.25px (섬세하게)
- 모서리 처리: Round
- 추천 라이브러리: Phosphor(Thin/Light) / Feather — 장식 모티프는 커스텀 라인 아트
Component Guide
컴포넌트 가이드 (상태별 CSS)
Button
.btn {
font: 600 12px/1 'Futura', 'Segoe UI', sans-serif;
letter-spacing: 0.18em; text-transform: uppercase;
border-radius: var(--radius-sm);
padding: 13px 28px; border: 1px solid transparent; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
}
.btn-primary { background: var(--color-primary-500); color: var(--text-on-primary); border-color: var(--color-primary-600); }
.btn-primary:hover { background: var(--color-primary-600); }
.btn-primary:active { background: var(--color-primary-700); color: #fff; }
.btn-primary:disabled { background: var(--color-primary-100); color: var(--text-disabled); border-color: transparent; cursor: not-allowed; }
.btn-primary.is-loading { color: transparent; position: relative; }
/* Secondary = 골드 아웃라인 (시그니처) */
.btn-secondary { background: transparent; color: var(--color-secondary-700); border-color: var(--color-secondary-500); }
.btn-secondary:hover { background: var(--color-secondary-50); }
.btn-ghost { background: transparent; color: var(--text-primary); border-color: transparent; }
.btn-ghost:hover { background: var(--bg-subtle); }
.btn-danger { background: var(--color-error-fg); color: #fff; border-color: var(--color-error-fg); }
.btn-danger:hover { filter: brightness(0.94); }Input
.input {
width: 100%;
background: var(--bg-elevated);
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
padding: 13px 16px;
font: 400 16px/1.5 'EB Garamond', Georgia, serif;
color: var(--text-primary);
}
.input::placeholder { color: var(--text-tertiary); font-style: italic; }
.input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(184,146,90,0.16); }
.input.is-error { border-color: var(--color-error-fg); box-shadow: 0 0 0 3px rgba(169,80,63,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: 24px; }
.card-basic { border: 1px solid var(--border-default); box-shadow: var(--shadow-sm); }
.card-emphasis { border: 0; box-shadow: var(--shadow-md); border-top: 3px solid var(--color-secondary-500); }
.card-outlined { border: 1px solid var(--color-secondary-500); box-shadow: var(--shadow-gilt); } /* 금박 테두리 */
.card-green { background: var(--color-primary-500); color: var(--text-on-primary); box-shadow: var(--shadow-md); } /* 시그니처 상자 */Badge / Tag
.tag {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 12px; border-radius: var(--radius-sm);
font: 600 11px/1.5 'Futura', 'Segoe UI', 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-secondary-700); border: 1px solid var(--color-secondary-500); } /* 골드 아웃라인 */Navigation (Top bar)
.navbar {
background: var(--bg-base);
color: var(--text-primary);
padding: 0 48px; height: 76px;
display: flex; align-items: center; gap: 32px;
border-bottom: 1px solid var(--border-default);
}
.navbar .brand {
font-family: 'Cormorant Garamond', 'Hoefler Text', Georgia, serif;
font-style: italic; font-weight: 600; font-size: 28px; color: var(--color-secondary-700);
letter-spacing: 0.01em;
}
.navbar .nav-link {
font: 600 12px/1 'Futura', 'Segoe UI', sans-serif; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--text-secondary); text-decoration: none; padding: 8px 0;
border-bottom: 1px solid transparent;
}
.navbar .nav-link:hover,
.navbar .nav-link.active { color: var(--color-secondary-700); border-bottom-color: var(--color-secondary-500); }
.navbar .spacer { margin-left: auto; }Motion
Motion
--duration-fast: 150ms;
--duration-base: 280ms;
--duration-slow: 520ms;
--ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* 실크가 풀리듯 부드러운 도착 */
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* 상자 뚜껑 여닫는 우아한 전환 */Anti-patterns
Anti-patterns
1. 시그니처 파스텔 그린을 채도 높은 원색 그린(라임·에메랄드)으로 대체 금지 — 물을 탄 듯 부드러운 셀라돈만이 Ladurée의 정체성 2. 골드 세리프 워드마크를 굵은 산세리프나 각진 폰트로 대체 금지 — 얇은 하이 콘트라스트 세리프의 우아함 유지 3. 파스텔 그린 위에 흰색 본문 텍스트 직접 배치 금지 — 대비 부족. 잉크 브라운블랙(--text-on-primary) 또는 골드만 4. 네온·비비드 그라데이션이나 요란한 배경 패턴 금지 — 크림 아이보리 여백과 가는 금선의 절제된 살롱 미감 유지 5. 모서리를 풀필(9999px)로 둥글리거나 0px 각지게 처리 금지 — 카드·상자는 4~12px Soft, 원형은 케루빔 뱃지/아바타에 한정