Tiffany & Co.
흰 여백 위 Tiffany Blue 상자 하나 + 흰 새틴 리본 + 검정 대문자 세리프 워드마크
Brand DNA
브랜드 DNA
- 브랜드명: Tiffany & Co. (티파니)
- 한 줄 정체성: 1837년 뉴욕에서 시작된 주얼리 하우스. 흰 새틴 리본을 두른 파란 상자 하나로 세계 어디서나 알아보게 만드는 브랜드
- 공식 디자인 철학: 공개된 디자인 시스템은 없다. 브랜드가 직접 밝힌 가치는 Tiffany Blue® 에 대한 설명이다 — "색 이상의 것(more than a color)"이며 "Tiffany Blue Box® 에서 나오는 것은 언제나 기쁨을 준다는 약속". 1998년 색상 상표로 등록했고, 2001년 팬톤이 티파니 전용 비공개 색 「1837 Blue」로 표준화했다(번호는 창립 연도)
- 시그니처 요소 1개: 넓은 흰 여백 위에 놓인 Tiffany Blue 상자(#81D8D0) 하나와 흰 새틴 리본. 화면의 나머지는 검정 대문자 세리프와 흰색으로 비워 두고, 청록은 상자·띠 배너·강조 한 곳에만 쓴다
Tone & Mood
톤 & 무드
- 핵심 키워드 3개: 기품, 절제, 설렘
- 무드 설명: 흰 캔버스와 검정 글자가 기본이고, 옅은 로빈에그 청록이 선물을 여는 순간처럼 한 점만 등장한다. 제품 사진은 흰 배경 위 은빛·다이아몬드로 차갑고 맑게 찍히며, 장식은 가는 선과 대문자 트래킹 정도로 줄인다. 오래된 하우스의 품위와 선물 받는 설렘이 함께 느껴지는 것이 톤의 핵심이다.
- 비주얼 스타일: 모던 미니멀(흰 여백·직각·검정 버튼) + 레트로 크래프트(디돈 계열 세리프 워드마크·1837 헤리티지 표기)
- 밀도(Density): Spacious — 상품 하나에 화면을 넓게 내주고 요소 사이를 크게 띄운다
- 모서리 성향: Sharp (0~2px) — 버튼·카드·입력 모두 직각. 둥근 것은 반지·아이콘뿐
- 평면성: Flat — 그림자는 상자 사진 아래 정도에만, UI 면은 1px 선으로 나눈다
Color System
컬러 시스템 (CSS 변수)
:root {
/* Primary - Tiffany Blue (Pantone 1837 Blue, 화면용 통용값 #81D8D0) */
--color-primary-50: #EFFAF9; /* 아주 옅은 배경 틴트 (추정) */
--color-primary-100: #DDF4F2; /* 선택 행·배너 옅은 면 (추정) */
--color-primary-200: #C0EBE7; /* border-subtle 청록 (추정) */
--color-primary-300: #A4E2DC; /* 태그 배경 (추정) */
--color-primary-400: #92DDD6; /* 상자 뚜껑 하이라이트 (추정) */
--color-primary-500: #81D8D0; /* Tiffany Blue 기본 — 상자·띠 배너·강조 */
--color-primary-600: #5FC3BA; /* hover (추정) */
--color-primary-700: #3FA29A; /* active·아이콘 (추정) */
--color-primary-800: #2C7A74; /* 흰 배경 위 청록 텍스트·링크 (추정, 대비 약 5:1) */
--color-primary-900: #1D524E; /* 가장 어두운 청록 (추정) */
/* Secondary - Sterling Silver (제품·은색 포인트) */
--color-secondary-50: #F4F5F6;
--color-secondary-500: #BFC5C9; /* 스털링 실버 (추정) */
--color-secondary-700: #8A9096;
/* Neutral - 흰색과 순검정 사이의 무채색 */
--color-neutral-0: #FFFFFF; /* 페이지 캔버스 */
--color-neutral-50: #F6F6F4; /* 제품 사진 스테이지 (추정) */
--color-neutral-100: #EFEFEC; /* 섹션 구분 */
--color-neutral-200: #E6E6E3; /* 기본 hairline */
--color-neutral-300: #CFCFCB;
--color-neutral-500: #9A9A96;
--color-neutral-700: #6B6B6B; /* 보조 텍스트 */
--color-neutral-800: #333333;
--color-neutral-900: #1A1A1A;
--color-neutral-1000: #000000; /* 워드마크·본문·주 버튼 */
/* Semantic - 채도를 낮춰 청록과 부딪히지 않게 (전부 추정) */
--color-success-bg: #E7F3EC;
--color-success-fg: #2E6B47;
--color-warning-bg: #FBF3E2;
--color-warning-fg: #8A5A12;
--color-error-bg: #FBEAEA;
--color-error-fg: #A3262A;
--color-info-bg: #EFFAF9;
--color-info-fg: #2C7A74;
/* Surface (배경 위계) */
--bg-base: #FFFFFF; /* 페이지 기본 */
--bg-subtle: #F6F6F4; /* 제품 스테이지·섹션 구분 */
--bg-elevated: #FFFFFF; /* 카드 (선으로 구분) */
--bg-overlay: #FFFFFF; /* 모달·드롭다운 */
/* Text 위계 */
--text-primary: #000000; /* 본문·제목 */
--text-secondary: #6B6B6B; /* 가격 보조·설명 */
--text-tertiary: #9A9A96; /* 캡션 */
--text-on-primary: #000000; /* Tiffany Blue 위 — 흰 글자는 대비 부족(약 1.7:1)이라 검정 */
--text-disabled: #BDBDB9;
/* Border */
--border-default: #E6E6E3;
--border-subtle: #EFEFEC;
--border-strong: #000000; /* 보조 버튼·선택 테두리 */
--border-focus: #2C7A74;
}HEX 값은 화면(sRGB)용이다. 티파니는 1837 Blue 의 공식 HEX 를 공개하지 않으며, #81D8D0 은 위키백과·피그마 등에서 통용되는 화면 값이다(HSL 약 174.5° / 53% / 68%). 일부 자료는 브랜드 가이드상 더 탁한 값(#81C7C2 전후)을 언급하나 1차 출처로 확인하지 못했다. 나머지 단계는 이 값에서 뽑은 근사치(추정)다.
Typography
타이포그래피
- 폰트 페어링:
- 워드마크(영문): TIFFANY & Co. 전용 로고타입 — 고대비 디돈 계열 대문자 세리프(상표, 재현 금지). 1974년 에드 벤귀엇의 ITC Tiffany 기원설과 커스텀 드로잉설이 엇갈린다
- 헤드라인(영문): 전용 디스플레이 세리프 (추정) / 폴백 Didot → Bodoni 72 → Baskerville → Times New Roman
- 본문·UI(영문): 비례 산세리프 (추정) / 폴백 Helvetica Neue → Segoe UI → Arial
- 한글 헤드라인: Noto Serif KR / 본명조 (공식 한글 가족 없음, 폴백)
- 한글 본문/UI: Pretendard / Noto Sans KR (폴백)
- 위계 (font-size / font-weight / line-height / letter-spacing):
- Display: 56px / 400 / 1.08 / 0.01em (세리프)
- H1: 40px / 400 / 1.15 / 0.01em (세리프)
- H2: 28px / 400 / 1.25 / 0.01em (세리프)
- H3: 20px / 400 / 1.35 / 0.02em (세리프)
- Body Large: 17px / 400 / 1.65 / 0 (산세리프)
- Body: 15px / 400 / 1.6 / 0.005em (산세리프)
- Body Small: 13px / 400 / 1.55 / 0.01em (산세리프)
- Label/Button: 11px / 500 / 1.2 / 0.14em (대문자 트래킹 — 시그니처)
- Caption: 12px / 400 / 1.4 / 0.02em (산세리프)
제목은 굵게 만들지 않는다. 무게 대신 크기·여백·대문자 트래킹으로 위계를 만든다.
Spacing
스페이싱
- Base unit: 8px
- 토큰: ``
css --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px;`` - Container: max-width 1440px, 좌우 패딩 20px (mobile) / 48px (desktop). 상품 그리드는 넓게, 본문 텍스트 블록은 560px 안쪽으로 좁게 (추정)
Border Radius
Border Radius
--radius-none: 0; /* 기본값 — 버튼·카드·입력·배너 전부 */
--radius-sm: 0; /* 태그도 직각 */
--radius-md: 2px; /* 드롭다운·토스트에 한해 (추정) */
--radius-lg: 2px;
--radius-xl: 4px; /* 모달 (추정) */
--radius-full: 9999px; /* 수량 점·아바타·반지 사이즈 칩 한정 */Shadow / Elevation
Shadow / Elevation
--shadow-none: none; /* 기본 — 카드·버튼은 선으로 구분 */
--shadow-sm: 0 1px 2px rgba(0,0,0,.06); /* sticky 헤더 스크롤 시 */
--shadow-md: 0 6px 16px rgba(0,0,0,.08); /* 드롭다운·메가 메뉴 */
--shadow-lg: 0 16px 40px rgba(0,0,0,.12); /* 모달·미니 장바구니 */
--shadow-xl: 0 24px 60px rgba(29,82,78,.18); /* Blue Box 제품 연출 전용 (추정) */Iconography
Iconography
- 스타일: Outline
- Stroke 굵기: 1.25~1.5px (가늘게)
- 모서리 처리: Round (끝 처리만 둥글게, 형태는 단순한 기하)
- 추천 라이브러리: Lucide (stroke-width 1.5 로 낮춰 사용). 검색·위시리스트·쇼핑백·계정·매장 찾기 5종이 헤더 기본
Component Guide
컴포넌트 가이드 (상태별 CSS)
Button
.tf-btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-sm); min-height:48px; padding:0 var(--space-lg); border:1px solid transparent; border-radius:var(--radius-none); font:500 11px/1 'Helvetica Neue','Segoe UI',Arial,sans-serif; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; transition:background var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); }
/* Primary — 검정 직사각형 (티파니 웹의 기본 CTA) */
.tf-btn--primary { background:var(--color-neutral-1000); color:var(--color-neutral-0); }
.tf-btn--primary:hover { background:var(--color-neutral-800); }
.tf-btn--primary:active { background:var(--color-neutral-900); }
.tf-btn--primary:disabled { background:var(--color-neutral-200); color:var(--text-disabled); cursor:not-allowed; }
.tf-btn--primary.is-loading { color:transparent; position:relative; }
.tf-btn--primary.is-loading::after { content:""; position:absolute; width:14px; height:14px; border:1.5px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:var(--radius-full); animation:tf-spin .8s linear infinite; }
/* Secondary — 흰 바탕 검정 테두리 */
.tf-btn--secondary { background:var(--bg-base); color:var(--text-primary); border-color:var(--border-strong); }
.tf-btn--secondary:hover { background:var(--color-neutral-1000); color:var(--color-neutral-0); }
.tf-btn--secondary:active { background:var(--color-neutral-900); color:var(--color-neutral-0); }
.tf-btn--secondary:disabled { border-color:var(--border-default); color:var(--text-disabled); background:var(--bg-base); }
.tf-btn--secondary.is-loading { opacity:.6; pointer-events:none; }
/* Ghost — 밑줄 텍스트 링크형 */
.tf-btn--ghost { min-height:auto; padding:0 0 4px; background:none; color:var(--text-primary); border-bottom:1px solid currentColor; }
.tf-btn--ghost:hover { color:var(--color-primary-800); }
.tf-btn--ghost:active { color:var(--color-primary-900); }
.tf-btn--ghost:disabled { color:var(--text-disabled); }
.tf-btn--ghost.is-loading { opacity:.5; }
/* Danger — 장바구니 삭제 등 */
.tf-btn--danger { background:var(--bg-base); color:var(--color-error-fg); border-color:var(--color-error-fg); }
.tf-btn--danger:hover { background:var(--color-error-bg); }
.tf-btn--danger:active { background:#F5D6D7; }
.tf-btn--danger:disabled { color:var(--text-disabled); border-color:var(--border-default); background:var(--bg-base); }
.tf-btn--danger.is-loading { opacity:.6; pointer-events:none; }
/* Tiffany Blue 버튼 — 선물 포장·Blue Box 관련 한 곳만 (추정) */
.tf-btn--blue { background:var(--color-primary-500); color:var(--text-on-primary); }
.tf-btn--blue:hover { background:var(--color-primary-600); }
@keyframes tf-spin { to { transform:rotate(360deg); } }Input
.tf-input { width:100%; height:48px; padding:0 var(--space-md); background:var(--bg-base); color:var(--text-primary); border:1px solid var(--border-default); border-radius:var(--radius-none); font:400 15px/1.4 'Helvetica Neue','Segoe UI',Arial,sans-serif; transition:border-color var(--duration-fast) var(--ease-out); }
.tf-input::placeholder { color:var(--text-tertiary); }
.tf-input:hover { border-color:var(--color-neutral-500); }
.tf-input:focus { outline:none; border-color:var(--border-focus); } /* 한 겹: 테두리 색만 바꾼다 */
.tf-input.is-error { border-color:var(--color-error-fg); }
.tf-input.is-error + .tf-help { color:var(--color-error-fg); }
.tf-input:disabled { background:var(--bg-subtle); color:var(--text-disabled); border-color:var(--border-subtle); }
.tf-label { display:block; margin-bottom:var(--space-sm); font:500 11px/1.2 'Helvetica Neue','Segoe UI',sans-serif; letter-spacing:.14em; text-transform:uppercase; }Card
/* 기본형 — 상품 카드: 스테이지 이미지 + 이름 + 가격, 테두리 없음 */
.tf-card { background:var(--bg-elevated); border-radius:var(--radius-none); }
.tf-card__media { aspect-ratio:1/1; background:var(--bg-subtle); display:grid; place-items:center; }
.tf-card__name { margin:var(--space-md) 0 var(--space-xs); font:400 15px/1.4 'Helvetica Neue','Segoe UI',sans-serif; }
.tf-card__price { color:var(--text-secondary); font-size:13px; }
.tf-card:hover .tf-card__media { background:var(--color-neutral-100); }
/* 강조형 — Tiffany Blue 면 (페이지당 1곳) */
.tf-card--featured { background:var(--color-primary-500); color:var(--text-on-primary); padding:var(--space-xl); }
/* Outlined — 서비스·안내 카드 */
.tf-card--outlined { border:1px solid var(--border-default); padding:var(--space-lg); }Badge / Tag
.tf-badge { display:inline-flex; align-items:center; height:22px; padding:0 var(--space-sm); border-radius:var(--radius-none); font:500 10px/1 'Helvetica Neue','Segoe UI',sans-serif; letter-spacing:.14em; text-transform:uppercase; }
.tf-badge--solid { background:var(--color-neutral-1000); color:var(--color-neutral-0); } /* NEW */
.tf-badge--subtle { background:var(--color-primary-100); color:var(--color-primary-900); } /* 온라인 단독 */
.tf-badge--outline { border:1px solid var(--border-strong); color:var(--text-primary); } /* 각인 가능 */Navigation (Top bar)
.tf-promo { height:32px; display:flex; align-items:center; justify-content:center; background:var(--color-primary-500); color:var(--text-on-primary); font:500 11px/1 'Helvetica Neue','Segoe UI',sans-serif; letter-spacing:.12em; text-transform:uppercase; }
.tf-header { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:72px; padding:0 var(--space-xl); background:var(--bg-base); border-bottom:1px solid var(--border-default); }
.tf-wordmark { font-family:Didot,'Bodoni 72',Baskerville,'Times New Roman',serif; font-size:26px; letter-spacing:.14em; color:var(--text-primary); text-decoration:none; white-space:nowrap; }
.tf-nav { display:flex; justify-content:center; gap:var(--space-xl); height:48px; align-items:center; border-bottom:1px solid var(--border-default); }
.tf-nav a { position:relative; color:var(--text-primary); text-decoration:none; font:500 11px/1 'Helvetica Neue','Segoe UI',sans-serif; letter-spacing:.14em; text-transform:uppercase; padding:17px 0; }
.tf-nav a::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; transform:scaleX(0); transition:transform var(--duration-base) var(--ease-out); }
.tf-nav a:hover::after, .tf-nav a[aria-current="page"]::after { transform:scaleX(1); }Motion
Motion
--duration-fast: 150ms; /* hover 색 변화 */
--duration-base: 250ms; /* 밑줄·버튼 반전 */
--duration-slow: 500ms; /* 메가 메뉴·이미지 페이드 */
--ease-out: cubic-bezier(.25,.1,.25,1);
--ease-in-out: cubic-bezier(.45,0,.2,1);움직임은 느리고 조용하게. 튀는 스프링·바운스는 쓰지 않고 페이드와 선 그리기 정도로 끝낸다. prefers-reduced-motion 에서는 전부 즉시 전환한다. (전부 추정)
Anti-patterns
Anti-patterns
1. Tiffany Blue 를 넓은 캔버스로 깔지 않는다 — 청록은 상자·띠 배너·강조 한 곳의 색이다. 페이지 전체가 청록이면 상자가 묻힌다 2. Tiffany Blue 위에 흰 글자를 올리지 않는다 — 대비가 약 1.7:1 로 읽히지 않는다. 청록 면 위 글자는 검정 3. 둥근 버튼·필 모양 칩을 쓰지 않는다 — 버튼·카드·배지는 직각. 둥근 형태는 반지와 아이콘에만 남긴다 4. 워드마크 서체를 흉내 낸 굵은 세리프로 제목을 채우지 않는다 — 제목은 가는 무게(400)에 여백으로 품위를 만든다. 볼드 세리프 헤드라인은 싸 보인다 5. 청록 계열 색을 섞지 않는다 — 민트·터키석·아쿠아를 보조색으로 추가하면 1837 Blue 의 고유성이 흐려진다. 보조색은 은색과 무채색으로만