Laneige (라네즈)

워터 블루 그라데이션 + 이슬 맺힌 글래시 제품 컷의 수분 K-뷰티 톤

한국라이프스타일소비자이커머스차가운modern-minimalglassmorphism고딕comfortablesoftsubtle라이트한글 지원출시 1994개정 2023

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

Brand DNA

브랜드 DNA

브랜드명: Laneige (라네즈)
한 줄 정체성: 아모레퍼시픽의 수분 특화 K-뷰티 — "물"과 "빛"을 테마로 한 슬리핑 케어의 대명사
공식 디자인 철학: "OPEN TO WONDER" — 물·빛·투명함으로 피부의 경이를 여는 감각. 리브랜딩에서 블랙 로고를 소프트 워터 블루로 전환
시그니처 요소 1개: 워터 블루 그라데이션 캔버스 + 이슬(dew) 맺힌 글래시(glassy) 제품 컷 + 넓은 자간의 라이트 산세리프 워드마크(LANEIGE). 올리브영의 컬러풀 그리드나 이니스프리의 자연/그린 톤과 정반대의 "물방울·투명·청량" 정체성

Tone & Mood

톤 & 무드

핵심 키워드 3개: 수분, 청량, 투명
무드 설명: 옅은 하늘빛에서 워터 블루로 흐르는 그라데이션 위, 물방울·유리병처럼 반투명한 제품 실루엣. 화이트 하이라이트와 글래스모피즘 카드로 "이슬 맺힌 수분감"을 재현한다. 여백이 넉넉하고 채도는 절제되어 청량하고 깨끗하다.
비주얼 스타일: 모던 미니멀 + 글래스모피즘(반투명·블러 강조)
밀도(Density): Comfortable — 제품 컷을 돋보이게 하는 넉넉한 여백, 카드 패딩 14~18px
모서리 성향: Soft (12~16px) — 물방울처럼 부드러운 라운드
평면성: Subtle — 유리 질감의 옅은 그림자·inset 하이라이트로 입체감 최소 부여

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - Laneige Water Blue (9단계) */
  --color-primary-50:  #EAF3FF;   /* 최연한 배경 틴트 */
  --color-primary-100: #CFE4FB;   /* 섹션 배경 */
  --color-primary-200: #9EC8F5;   /* 그라데이션 하단 */
  --color-primary-300: #6BA6EE;   /* 보조 강조 */
  --color-primary-400: #4285DE;   /* hover 전 단계 */
  --color-primary-500: #1E63C4;   /* Laneige Water Blue - 기본 */
  --color-primary-600: #1751A6;   /* 버튼 hover */
  --color-primary-700: #123F82;   /* 강조 텍스트 */
  --color-primary-800: #0E2E5C;   /* 딥 네이비 헤드라인 */
  --color-primary-900: #081D3A;   /* 최암 */

  /* Secondary - Aqua Mist (수분/청량 보조) */
  --color-secondary-500: #63C6D8;

  /* Neutral - Cool white/gray */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F7FAFD;
  --color-neutral-100:  #EEF3F8;
  --color-neutral-200:  #E1E8F0;
  --color-neutral-300:  #CDD7E2;
  --color-neutral-500:  #94A3B4;
  --color-neutral-700:  #5C6B7C;
  --color-neutral-800:  #3A4653;
  --color-neutral-900:  #1B2530;
  --color-neutral-1000: #000000;

  /* Semantic */
  --color-success-bg: #E3F4EC;
  --color-success-fg: #1E9A62;
  --color-warning-bg: #FBF0D9;
  --color-warning-fg: #B27A1F;
  --color-error-bg:   #FBE4E4;
  --color-error-fg:   #D8453F;
  --color-info-bg:    #E4F1FB;
  --color-info-fg:    #1E63C4;

  /* Surface (배경 위계) */
  --bg-base:     #FFFFFF;                    /* 페이지 기본 */
  --bg-subtle:   #F7FAFD;                    /* 섹션 구분 */
  --bg-elevated: #FFFFFF;                    /* 카드 */
  --bg-glass:    rgba(255,255,255,0.55);     /* 글래스 카드 */
  --bg-overlay:  rgba(14,46,92,0.45);        /* 모달/드롭다운 */

  /* Text 위계 */
  --text-primary:    #0E2E5C;   /* 본문 - 딥 네이비 */
  --text-secondary:  #3A4653;   /* 보조 */
  --text-tertiary:   #5C6B7C;   /* 캡션 */
  --text-on-primary: #FFFFFF;   /* Primary 위 */
  --text-disabled:   #94A3B4;

  /* Border */
  --border-default: #E1E8F0;
  --border-subtle:  #EEF3F8;
  --border-strong:  #CDD7E2;
  --border-focus:   #1E63C4;
  --border-glass:   rgba(255,255,255,0.8);   /* 유리 하이라이트 테두리 */
}

Typography

타이포그래피

폰트 페어링:
- 한글: Pretendard (SIL OFL) / Noto Sans KR 폴백
- 영문(워드마크·헤드라인): 넓은 자간의 라이트 산세리프 — Pretendard Light / Montserrat Light 폴백
위계 (각 항목: font-size / font-weight / line-height / letter-spacing):
- Display: 44px / 300 / 1.2 / 0.02em (LANEIGE 워드마크 톤, 넓은 자간)
- H1: 32px / 500 / 1.25 / 0.01em
- H2: 24px / 500 / 1.3 / 0
- H3: 18px / 600 / 1.4 / 0
- Body Large: 16px / 400 / 1.7 / 0
- Body: 15px / 400 / 1.65 / 0
- Body Small: 13px / 500 / 1.5 / 0
- Caption: 11px / 600 / 1.4 / 0.04em
워드마크·라벨은 자간을 크게(0.16~0.22em) 벌려 청량·미니멀 인상을 강조

Spacing

스페이싱

Base unit: 4px
토큰: ``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 (모바일 16px)

Border Radius

--radius-none: 0;
--radius-sm: 6px;
--radius-md: 12px;      /* 버튼·인풋 */
--radius-lg: 16px;      /* 카드 시그니처 */
--radius-xl: 24px;      /* 히어로 글래스 패널 */
--radius-full: 9999px;  /* pill 배지·CTA */

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 1px 3px rgba(30,99,196,0.06);                                  /* 인풋·태그 */
--shadow-md: 0 6px 18px rgba(30,99,196,0.12);                                 /* 카드 기본 */
--shadow-lg: 0 14px 32px rgba(30,99,196,0.18);                                /* 카드 hover·모달 */
--shadow-xl: 0 22px 48px rgba(14,46,92,0.22);                                 /* 풀스크린 dialog */
--shadow-glass: 0 10px 30px rgba(30,99,196,0.22), inset 0 2px 8px rgba(255,255,255,0.8); /* 유리 제품 카드 */

Iconography

스타일: Outline (얇고 깨끗한 선)
Stroke 굵기: 1.5px
모서리 처리: Round
추천 라이브러리: Lucide / Phosphor (Thin~Light 웨이트)

Component Guide

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

Button

.btn { font: 600 14px/1 Pretendard, -apple-system, sans-serif; letter-spacing: 0.04em; border-radius: var(--radius-md); padding: 13px 24px; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background 200ms ease, box-shadow 200ms ease, transform 200ms ease; }
.btn-primary { background: var(--color-primary-500); color: var(--text-on-primary); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--color-primary-600); box-shadow: var(--shadow-md); }
.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(--bg-glass); color: var(--color-primary-700); border: 1px solid var(--border-glass); backdrop-filter: blur(6px); }
.btn-secondary:hover { background: var(--color-primary-50); }
.btn-ghost { background: transparent; color: var(--color-primary-600); padding: 13px 12px; }
.btn-ghost:hover { color: var(--color-primary-800); }
.btn-danger { background: var(--color-error-fg); color: #fff; }

Input

.input { background: var(--bg-base); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 12px 16px; font: 400 15px/1.4 Pretendard, sans-serif; color: var(--text-primary); transition: border-color 200ms ease, box-shadow 200ms ease; }
.input::placeholder { color: var(--text-tertiary); }
.input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(30,99,196,0.14); }
.input.is-error { border-color: var(--color-error-fg); box-shadow: 0 0 0 3px rgba(216,69,63,0.12); }
.input:disabled { background: var(--bg-subtle); color: var(--text-disabled); cursor: not-allowed; }

Card

.card { background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-md); transition: box-shadow 240ms ease, transform 240ms ease; }
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
/* 강조형 - 워터 블루 글래스 */
.card-glass { background: linear-gradient(160deg, rgba(234,243,255,0.9), rgba(158,200,245,0.55)); border: 1px solid var(--border-glass); border-radius: var(--radius-lg); box-shadow: var(--shadow-glass); backdrop-filter: blur(6px); }
/* Outlined */
.card-outline { background: transparent; border: 1px solid var(--border-strong); box-shadow: none; }
/* 제품 카드 내부 */
.product .img { aspect-ratio: 1; border-radius: var(--radius-md); background: linear-gradient(150deg, #EAF3FF, #9EC8F5); position: relative; overflow: hidden; }
.product .img::after { content:''; position:absolute; left:16%; top:12%; width:14px; height:46%; border-radius:9999px; background:linear-gradient(180deg,rgba(255,255,255,0.9),rgba(255,255,255,0.1)); }
.product .line { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--color-primary-500); margin-top: 10px; }
.product h3 { font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--text-primary); margin: 3px 0 6px; }
.product .price { font-size: 15px; font-weight: 800; color: var(--color-primary-700); }

Badge / Tag

.tag { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 9999px; font: 700 11px/1.4 Pretendard, sans-serif; letter-spacing: 0.04em; }
.tag-solid   { background: var(--color-primary-500); color: #fff; }
.tag-subtle  { background: var(--color-primary-50); color: var(--color-primary-700); }
.tag-outline { background: transparent; border: 1px solid var(--border-strong); color: var(--text-secondary); }
.tag-hydra   { background: var(--color-secondary-500); color: #fff; }   /* 수분/슬리핑 라인 */
.tag-best    { background: var(--color-primary-800); color: #fff; }     /* 베스트셀러 */

Navigation (Header)

.topnav { background: rgba(255,255,255,0.72); border-bottom: 1px solid var(--border-subtle); backdrop-filter: blur(10px); padding: 16px 24px; display: flex; align-items: center; gap: 32px; position: sticky; top: 0; z-index: 200; }
.topnav .brand { font: 300 22px/1 Pretendard, sans-serif; letter-spacing: 0.22em; color: var(--color-primary-500); }
.topnav .menu { display: flex; gap: 26px; font: 500 14px/1 Pretendard, sans-serif; letter-spacing: 0.02em; color: var(--text-secondary); }
.topnav .menu a { cursor: pointer; padding-bottom: 4px; border-bottom: 2px solid transparent; transition: color 180ms ease, border-color 180ms ease; }
.topnav .menu a:hover, .topnav .menu a.active { color: var(--color-primary-600); border-color: var(--color-primary-500); }
.topnav .right { margin-left: auto; display: flex; gap: 18px; align-items: center; color: var(--text-tertiary); font-size: 18px; }

Motion

--duration-fast: 150ms;
--duration-base: 240ms;
--duration-slow: 420ms;
--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);       /* 물 흐르듯 부드러운 도착 */
--ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);

Anti-patterns

1. 워터 블루 외 채도 높은 원색(레드·오렌지)을 주 강조로 사용 금지 — 청량한 블루/아쿠아 단일 계열 유지 2. 무거운 딥 다크 배경·다크 모드 캔버스 사용 금지 — 밝고 투명한 화이트~하늘빛이 정체성 3. 워드마크(LANEIGE) 자간을 좁히거나 볼드/이탤릭 처리 금지 — 넓은 자간 라이트 산세리프 보존 4. 제품 컷을 불투명한 플랫 색면으로 처리 금지 — 이슬·유리 하이라이트(inset·반투명)로 수분감 유지 5. 카드 모서리를 sharp(0px)로 각지게 처리 금지 — 물방울처럼 12~16px Soft 라운드

Laneige (라네즈)

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

출처