Sulwhasoo (설화수)

백자빛 달항아리 곡선과 용기 하단의 볼드한 얼시 앰버 로고

한국라이프스타일소비자이커머스따뜻한modern-minimalhumanism명조spacioussharpflat라이트한글 지원출시 1997개정 2024

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

Brand DNA

브랜드 DNA

브랜드명: Sulwhasoo (설화수)
한 줄 정체성: 아모레퍼시픽의 프리미엄 한방(韓方) 스킨케어 — 60년 인삼 과학과 달항아리 미학의 럭셔리 헤리티지
공식 디자인 철학: "Borderless Design" — 달항아리(月壺)를 세계관의 중심축으로, 전통 서화(書畵)에서 얻은 형태·컬러·여백을 과거와 현재를 관통해 재해석
시그니처 요소 1개: 백자빛 아이보리 캔버스 위 달항아리에서 출발한 여백 많은 용기 곡선 + 용기 전면 하단의 볼드한 얼시 앰버(Earthy Amber) 로고. 전통 서화의 유려한 선과 현대적인 로고 배치가 한 화면에서 공존하는 보더리스 럭셔리

Tone & Mood

톤 & 무드

핵심 키워드 3개: 고요한품격, 한방헤리티지, 골드럭셔리
무드 설명: 종이·비단을 닮은 아이보리 캔버스에 딥 잉크 세리프 본문. 강조는 얼시 앰버 골드 하나로만 절제하며, 제품 사진과 문양은 정중앙 대칭에 가깝게 배치한다. 넓은 여백이 '의례(ritual)'와 정적을 만들고, 얇은 골드 괘선과 한자 낙관 같은 디테일이 한방 헤리티지를 전한다.
비주얼 스타일: 모던 미니멀 + 휴머니즘(전통 공예 감성)
밀도(Density): Spacious — 여백이 곧 럭셔리. 섹션 상하 여백 64~96px, 본문 line-height 1.7
모서리 성향: Sharp (0~2px) — 정제된 에디토리얼 톤, 라운드는 배지에만 최소 사용
평면성: Flat — 그림자 극도로 절제, 위계는 골드 괘선과 여백으로 구분

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - Earthy Amber (설화수 골드) */
  --color-primary-50:  #F7F1E3;   /* 골드 틴트 배경 */
  --color-primary-100: #EBDDBC;   /* 서브틀 골드 필 */
  --color-primary-200: #DBC48A;   /* 보더/디바이더 골드 */
  --color-primary-300: #C9A957;   /* 라이트 골드 강조 */
  --color-primary-400: #B79338;   /* 호버 전 골드 */
  --color-primary-500: #A6802A;   /* Earthy Amber — 워드마크/기본 강조 */
  --color-primary-600: #8C6A20;   /* 버튼 호버 */
  --color-primary-700: #6F5318;   /* 골드 텍스트 온 아이보리 */
  --color-primary-800: #513C10;   /* 딥 골드 */
  --color-primary-900: #33260A;   /* 최심도 골드 */

  /* Secondary - Deep Ink / Ginseng (딥 잉크·인삼 브라운) */
  --color-secondary-500: #3A342E;  /* 딥 잉크 (헤드라인/배경 반전) */
  --color-secondary-700: #6B4A2E;  /* 인삼 브라운 (보조 톤) */

  /* Neutral - Warm Ivory tones */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #FBF9F4;   /* 아이보리 서페이스 */
  --color-neutral-100:  #F4EFE6;   /* page bg — 크림 캔버스 */
  --color-neutral-200:  #E7DFD1;   /* border */
  --color-neutral-300:  #D8CDBA;
  --color-neutral-500:  #A89C86;
  --color-neutral-700:  #6E6455;   /* text tertiary */
  --color-neutral-800:  #453F36;
  --color-neutral-900:  #26221C;   /* text primary — 딥 잉크 */
  --color-neutral-1000: #000000;

  /* Semantic - 톤다운된 따뜻한 채도 */
  --color-success-bg: #E9EEE0;
  --color-success-fg: #5A6E3A;
  --color-warning-bg: #F7ECCF;
  --color-warning-fg: #8C6A20;
  --color-error-bg:   #F3DED8;
  --color-error-fg:   #A5432E;
  --color-info-bg:    #E4E5DE;
  --color-info-fg:    #5B6169;

  /* Surface (배경 위계) */
  --bg-base:     #F4EFE6;          /* 크림 캔버스 */
  --bg-subtle:   #FBF9F4;          /* 섹션 구분 아이보리 */
  --bg-elevated: #FFFFFF;          /* 카드 */
  --bg-overlay:  rgba(38,34,28,0.55); /* 모달/드롭다운 */

  /* Text 위계 */
  --text-primary:    #26221C;      /* 본문 딥 잉크 */
  --text-secondary:  #453F36;      /* 보조 */
  --text-tertiary:   #6E6455;      /* 캡션 */
  --text-on-primary: #FBF9F4;      /* 골드 위 아이보리 텍스트 */
  --text-disabled:   #A89C86;

  /* Border */
  --border-default: #E7DFD1;       /* 기본 보더 */
  --border-subtle:  #F4EFE6;       /* 미세 구분 */
  --border-strong:  #D8CDBA;       /* 강조 보더 */
  --border-focus:   #A6802A;       /* 포커스 골드 */
  --border-gold:    #C9A957;       /* 시그니처 골드 괘선 */
}

각 토큰은 아이보리 캔버스 + 골드 단일 강조 원칙을 지킨다. 골드는 강조·괘선·워드마크에만, 본문은 딥 잉크로만.

Typography

타이포그래피

폰트 페어링:
- 한글: 본명조(Noto Serif KR) (SIL OFL) — 세리프 본문·헤드라인, 워드마크 톤
- 영문: Noto Serif / Times New Roman 폴백 (넓은 자간의 럭셔리 세리프)
- UI 보조(캡션·라벨): Pretendard / Noto Sans KR (아주 제한적으로만)
위계 (font-size / weight / line-height / letter-spacing):
- Display: 48px / 500 / 1.2 / 0.04em (워드마크·캠페인 헤드라인, 대칭 배치)
- H1: 34px / 500 / 1.3 / 0.02em
- H2: 26px / 500 / 1.35 / 0.02em
- H3: 20px / 600 / 1.4 / 0.01em
- Body Large: 17px / 400 / 1.75 / 0.01em
- Body: 15px / 400 / 1.7 / 0.01em
- Body Small: 13px / 400 / 1.6 / 0.01em
- Caption: 11px / 500 / 1.5 / 0.28em (골드·대문자 라벨, 넓은 자간)

Spacing

스페이싱

Base unit: 8px (Spacious — 여백이 럭셔리)
토큰: ``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 1200px, 좌우 패딩 24px (모바일 20px)

Border Radius

--radius-none: 0;
--radius-sm: 2px;      /* 카드·버튼 기본 (거의 각짐) */
--radius-md: 4px;
--radius-lg: 6px;
--radius-xl: 10px;
--radius-full: 9999px; /* 배지/필에만 */

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(38,34,28,0.04);      /* 미세 카드 */
--shadow-md: 0 6px 18px rgba(140,106,32,0.10);   /* 제품 카드 hover — 골드 틴트 */
--shadow-lg: 0 14px 34px rgba(38,34,28,0.10);    /* 모달/오버레이 */
--shadow-xl: 0 24px 60px rgba(38,34,28,0.14);    /* 풀스크린 dialog */

Iconography

스타일: Outline (얇은 선, 세리프 획을 닮은 정제된 라인)
Stroke 굵기: 1.25px
모서리 처리: Round (아주 미세)
추천 라이브러리: Phosphor Thin / Lucide (얇은 웨이트만 사용)

Component Guide

컴포넌트 가이드

Button

.btn { font: 500 13px/1 'Noto Serif', 'Nanum Myeongjo', serif; letter-spacing: 0.06em;
       border-radius: var(--radius-sm); padding: 15px 32px; border: 0; cursor: pointer;
       display: inline-flex; align-items: center; justify-content: center; gap: 8px;
       transition: background 280ms ease, color 280ms ease, border-color 280ms 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); }
.btn-primary:disabled { background: var(--border-strong); color: var(--text-disabled); cursor: not-allowed; }

.btn-secondary { background: transparent; color: var(--text-primary); border: 1px solid var(--color-primary-500); }
.btn-secondary:hover { background: var(--color-primary-50); border-color: var(--color-primary-600); }

.btn-ghost { background: transparent; color: var(--color-primary-700); padding: 15px 8px; letter-spacing: 0.18em; text-transform: uppercase; font-size: 11px; }
.btn-ghost:hover { color: var(--color-primary-800); }
.btn-ghost::after { content:''; display:block; }

.btn-danger { background: var(--color-error-fg); color: #fff; }
.btn-loading { position: relative; color: transparent; pointer-events: none; }
.btn-loading::after { content:''; position:absolute; width:14px; height:14px; border:1.5px solid var(--text-on-primary); border-top-color: transparent; border-radius:50%; animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

Input

.input { background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-sm);
         padding: 14px 16px; font: 400 15px/1.5 'Noto Serif', serif; color: var(--text-primary);
         transition: border-color 280ms ease, box-shadow 280ms ease; }
.input::placeholder { color: var(--text-tertiary); }
.input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(166,128,42,0.12); }
.input.error { border-color: var(--color-error-fg); }
.input:disabled { background: var(--bg-base); color: var(--text-disabled); }

Card

.card { background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 28px; }
.card--elevated { border: 0; box-shadow: var(--shadow-md); }
.card--outlined { background: transparent; border: 1px solid var(--border-gold); }

.product { background: var(--bg-elevated); border: 1px solid var(--border-subtle); text-align: center; padding: 0 0 24px; cursor: pointer; transition: box-shadow 280ms ease, transform 280ms ease; }
.product:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.product .img { aspect-ratio: 3/4; background: linear-gradient(160deg, #FBF9F4, #EFE7D6); position: relative; }
.product .img .line { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 40px; height: 1px; background: var(--border-gold); }
.product .label { font: 500 10px/1.4 'Noto Serif', serif; letter-spacing: 0.28em; text-transform: uppercase; color: var(--color-primary-700); margin: 20px 0 8px; }
.product h3 { font: 500 17px/1.4 'Noto Serif', serif; color: var(--text-primary); margin: 0 0 10px; }
.product .price { font: 400 14px/1 'Noto Serif', serif; color: var(--text-secondary); letter-spacing: 0.04em; }

Badge / Tag

.tag { padding: 4px 12px; font: 500 10px/1.5 'Noto Serif', serif; letter-spacing: 0.16em; text-transform: uppercase; border-radius: var(--radius-sm); }
.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-700); border: 1px solid var(--border-gold); }
.tag-best    { background: var(--color-secondary-500); color: #F7F1E3; }

Navigation (Header)

.topbar { background: var(--bg-subtle); padding: 22px 24px; display: flex; align-items: center; gap: 40px; border-bottom: 1px solid var(--border-default); }
.topbar .brand { font: 500 24px/1 'Noto Serif', serif; letter-spacing: 0.18em; color: var(--color-primary-600); }
.topbar .nav { display: flex; gap: 32px; font: 400 14px/1 'Noto Serif', serif; letter-spacing: 0.04em; color: var(--text-primary); }
.topbar .nav .item { cursor: pointer; padding-bottom: 4px; border-bottom: 1px solid transparent; transition: border-color 280ms ease; }
.topbar .nav .item:hover, .topbar .nav .item.active { border-bottom-color: var(--color-primary-500); }
.topbar .right { margin-left: auto; display: flex; gap: 20px; align-items: center; font-size: 13px; color: var(--text-secondary); }

Motion

--duration-fast: 180ms;
--duration-base: 280ms;   /* 한 호흡 느리게 — 정적인 럭셔리 톤 */
--duration-slow: 520ms;
--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);      /* 부드러운 도착 */
--ease-in-out: cubic-bezier(0.45, 0, 0.15, 1);

Anti-patterns

1. 채도 높은 원색·네온 강조 금지 — 강조는 얼시 앰버 골드 단 하나 2. 굵은 산세리프 헤드라인 금지 — 헤드라인·본문 모두 세리프(본명조/Noto Serif) 유지 3. 좁은 밀도·빽빽한 그리드 금지 — 여백이 곧 브랜드 자산(Spacious) 4. 라운드 12px 이상 카드/버튼 금지 — 정제된 각짐(0~4px), 풀필은 배지에만 5. 다크·컬러풀 그라데이션 캔버스 금지 — 아이보리·크림 단색 배경 유지

Sulwhasoo (설화수)

Brand DNA

브랜드 DNA

Tone & Mood

톤 & 무드

Color System

컬러 시스템 (CSS 변수)

Typography

타이포그래피

Spacing

스페이싱

Border Radius

Border Radius

Shadow / Elevation

Shadow / Elevation

Iconography

Iconography

Component Guide

컴포넌트 가이드

Motion

Motion

Anti-patterns

Anti-patterns

Sources

출처