디자인 시스템 갤러리 Olive Young (올리브영)

Olive Young (올리브영)

13° 올리브 모티프와 올리브 그린·코럴 오렌지의 건강한 에너지

한국이커머스라이프스타일복합modern-minimalhumanism고딕comfortableroundsubtle라이트한글 지원출시 1999개정 2024

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

Brand DNA

브랜드 DNA

  • 브랜드명: Olive Young (올리브영)
  • 한 줄 정체성: 한국을 대표하는 Beauty & Health 옴니채널 큐레이션 플랫폼
  • 공식 디자인 철학: 브랜드명에는 모두가 언제나 건강하고 아름답게 살아가기를 바라는 “ALL LIVE YOUNG” 철학이 담겨 있으며, 브랜드 슬로건은 “ALL LIVE BETTER”이다.
  • 시그니처 요소 1개: 건강·자연·풍요를 상징하는 13° 기울기의 올리브 심볼과 Olive Green(#82DC28)·Coral Orange(#FF7878)의 선명한 조합

Tone & Mood

톤 & 무드

  • 핵심 키워드 3개: 건강함, 생기 있음, 위트
  • 무드 설명: 흰 쇼핑 캔버스 위에서 올리브 그린과 코럴 오렌지가 프로모션과 발견의 순간을 선명하게 만든다. 13°로 기울어진 타원 그래픽과 제품 중심의 넉넉한 여백이 활기와 신뢰를 동시에 전달한다.
  • 비주얼 스타일: 모던 미니멀 + 휴머니즘
  • 밀도(Density): Comfortable — 많은 상품 정보를 빠르게 비교하되 이미지와 가격 위계가 숨 쉴 여백을 유지한다.
  • 모서리 성향: Round (12~16px)
  • 평면성: Subtle — 평평한 컬러 면을 기본으로, 상품 카드와 플로팅 액션에만 얕은 깊이를 준다.

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary — 공식 Olive Green */
  --color-primary-50: #F4FCE9;
  --color-primary-100: #E4F8C8;
  --color-primary-200: #CBF294;
  --color-primary-300: #ADEB5B;
  --color-primary-400: #96E23A;
  --color-primary-500: #82DC28;
  --color-primary-600: #68BC1A;
  --color-primary-700: #4F9414;
  --color-primary-800: #3D7216;
  --color-primary-900: #315B17;

  /* Secondary — 공식 Coral Orange */
  --color-secondary-50: #FFF1F1;
  --color-secondary-100: #FFDADA;
  --color-secondary-300: #FFA7A7;
  --color-secondary-500: #FF7878;
  --color-secondary-700: #D9474F;

  /* Neutral */
  --color-neutral-0: #FFFFFF;
  --color-neutral-50: #FAFAFA;
  --color-neutral-100: #F5F5F5;
  --color-neutral-200: #EEEEEE;
  --color-neutral-300: #DEDEDE;
  --color-neutral-500: #A2A2A2;
  --color-neutral-700: #666666;
  --color-neutral-900: #131518;
  --color-neutral-1000: #000000;

  /* Semantic */
  --color-success-bg: #F0F9E7;
  --color-success-fg: #4F9414;
  --color-warning-bg: #FFF4D6;
  --color-warning-fg: #9A6200;
  --color-error-bg: #FFF1F1;
  --color-error-fg: #D9474F;
  --color-info-bg: #EDF5FF;
  --color-info-fg: #2767B2;

  /* Surface */
  --bg-base: #FFFFFF;
  --bg-subtle: #F7F7F7;
  --bg-elevated: #FFFFFF;
  --bg-overlay: rgba(19, 21, 24, 0.52);

  /* Text */
  --text-primary: #131518;
  --text-secondary: #666666;
  --text-tertiary: #888888;
  --text-on-primary: #17300B;
  --text-disabled: #BDBDBD;

  /* Border */
  --border-default: #EBEBEB;
  --border-subtle: #F3F3F3;
  --border-strong: #D4D4D4;
  --border-focus: #68BC1A;
}

Typography

타이포그래피

  • 폰트 페어링:
    • 한글: Pretendard (SIL Open Font License)
    • 영문: 시스템 산세리프(-apple-system, BlinkMacSystemFont, Segoe UI)
  • 위계:
    • Display: 40px / 900 / 1.12 / -0.045em
    • H1: 32px / 900 / 1.18 / -0.04em
    • H2: 24px / 800 / 1.25 / -0.035em
    • H3: 18px / 750 / 1.35 / -0.025em
    • Body Large: 16px / 500 / 1.6 / -0.015em
    • Body: 14px / 500 / 1.55 / -0.01em
    • Body Small: 13px / 500 / 1.45 / -0.01em
    • Caption: 11px / 700 / 1.35 / 0

Spacing

스페이싱

  • Base unit: 4px
  • 토큰:
--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(모바일) / 32px(데스크톱)

Border Radius

Border Radius

--radius-none: 0;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-xl: 22px;
--radius-full: 9999px;

Shadow / Elevation

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 1px 3px rgba(19,21,24,0.06);    /* 상품 썸네일 */
--shadow-md: 0 8px 24px rgba(19,21,24,0.09);   /* 카드 hover */
--shadow-lg: 0 16px 40px rgba(19,21,24,0.13);  /* 드롭다운·바텀시트 */
--shadow-xl: 0 24px 60px rgba(19,21,24,0.18);  /* 모달 */

Iconography

Iconography

  • 스타일: Outline 중심, 상태 강조에만 Filled
  • Stroke 굵기: 1.8~2px
  • 모서리 처리: Round
  • 추천 라이브러리: Lucide 또는 Phosphor — 카테고리 아이콘은 동일한 라인 굵기의 커스텀 일러스트 권장

Component Guide

컴포넌트 가이드

Button

.btn {
  min-height: 44px;
  padding: 0 var(--space-md);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font: 750 14px/1 Pretendard, sans-serif;
  transition: transform var(--duration-fast) var(--ease-out),
              background var(--duration-base) var(--ease-out);
  cursor: pointer;
}
.btn-primary { background: var(--color-primary-500); color: var(--text-on-primary); }
.btn-primary:hover { background: var(--color-primary-400); }
.btn-primary:active { background: var(--color-primary-600); transform: scale(.98); }
.btn-secondary { background: var(--bg-subtle); color: var(--text-primary); border-color: var(--border-default); }
.btn-ghost { background: transparent; color: var(--text-primary); }
.btn-danger { background: var(--color-error-fg); color: #FFFFFF; }
.btn:disabled { background: var(--color-neutral-100); color: var(--text-disabled); cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { color: transparent; position: relative; pointer-events: none; }
.btn[aria-busy="true"]::after { content: ""; position: absolute; inset: 0; margin: auto; width: 15px; height: 15px; border: 2px solid var(--text-on-primary); border-right-color: transparent; border-radius: 50%; }

Input

.input {
  min-height: 46px;
  padding: 0 14px;
  background: var(--bg-subtle);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font: 500 14px/1 Pretendard, sans-serif;
}
.input:focus { outline: 0; background: var(--bg-base); border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--color-primary-100); }
.input[aria-invalid="true"] { border-color: var(--color-error-fg); }
.input:disabled { color: var(--text-disabled); background: var(--color-neutral-100); }

Card

.card {
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card-emphasis { background: var(--color-primary-50); }
.card-outlined { border: 1px solid var(--border-default); }
.product-card__visual { aspect-ratio: 1 / .88; background: var(--bg-subtle); border-radius: var(--radius-lg); overflow: hidden; position: relative; }
.product-card__brand { margin-top: 12px; color: var(--text-tertiary); font-size: 11px; font-weight: 700; }
.product-card__title { margin: 4px 0 8px; min-height: 42px; color: var(--text-primary); font-size: 14px; font-weight: 600; line-height: 1.45; }
.product-card__price { font-size: 18px; font-weight: 900; }
.product-card__discount { margin-right: 6px; color: var(--color-secondary-700); }

Badge / Tag

.tag { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: var(--radius-full); font-size: 11px; font-weight: 800; }
.tag-solid { background: var(--color-primary-500); color: var(--text-on-primary); }
.tag-subtle { background: var(--color-primary-50); color: var(--color-primary-800); }
.tag-outline { border: 1px solid var(--border-default); color: var(--text-secondary); }
.tag-benefit { background: var(--color-secondary-500); color: #FFFFFF; }

Navigation

.topnav { height: 68px; background: var(--bg-base); border-bottom: 1px solid var(--border-default); display: flex; align-items: center; gap: var(--space-xl); }
.topnav__logo { display: flex; align-items: center; color: var(--text-primary); font-weight: 950; letter-spacing: -0.055em; }
.topnav__link { height: 68px; display: inline-flex; align-items: center; color: var(--text-secondary); font-size: 14px; font-weight: 700; border-bottom: 3px solid transparent; }
.topnav__link[aria-current="page"] { color: var(--text-primary); border-color: var(--color-primary-500); }

Motion

Motion

--duration-fast: 120ms;
--duration-base: 220ms;
--duration-slow: 420ms;
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  • 13° 타원과 상품 오브젝트는 8~16px의 짧은 부유 이동만 사용한다.
  • 장바구니·찜 피드백은 120ms 축소 후 복귀하며, 과도한 바운스는 피한다.

Anti-patterns

Anti-patterns

1. 공식 Olive Green을 어둡고 청색인 일반 커머스 그린으로 대체하지 않는다. 2. Coral Orange를 오류 전용 색으로 한정하지 않는다. 브랜드의 아름다움·생기 표현에도 사용한다. 3. 13° 올리브 타원 모티프를 수직 원이나 잎사귀 아이콘으로 임의 변형하지 않는다. 4. 상품 이미지보다 할인 배지와 장식 그래픽이 더 크게 보이게 만들지 않는다. 5. 그린·코럴·라임·바이올렛을 동일 면적으로 경쟁시키지 않는다. 한 화면에서는 주조색 하나와 보조색 하나만 우세하게 사용한다.

Sources

출처

  1. https://www.oliveyoung.co.kr/
  2. https://corp.oliveyoung.com/ko/company/brand