Orion (오리온)

오리온 레드 패키지 + 골드 情(정) + 초콜릿 브라운, 그리고 지구·별 심볼의 정감·신뢰 톤

한국식품소비자따뜻한retro-crafthumanism고딕comfortablesoftsubtle라이트한글 지원출시 1974개정 2024

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

Brand DNA

브랜드 DNA

브랜드명: Orion (오리온, 오리온제과 / 舊 동양제과)
한 줄 정체성: 1956년 출발, 초코파이 情으로 60여 개국에 "정(情)을 나누는 마음"을 파는 한국 대표 종합 제과 브랜드
공식 디자인 철학: "정(情) — 마음을 나누는 과자". 지구와 별을 형상화한 심볼로 세계 무대에서의 국제성과 글로벌 기업으로의 미래 의지를 표현. CI는 심볼과 로고타입을 항상 함께 조합해 사용
시그니처 요소 1개: 오리온 레드(DIC 157 계열, #E52521) 패키지 + 골드 情(정) 캘리그래피 + 초콜릿 브라운의 헤리티지 톤 + 지구·별(별자리) 심볼. 1974년 청색 포장을 2002년 레드로 전환(중국 수출 조사에서 레드 선호 확인) 후 레드가 매대 각인의 핵심이 됨

Tone & Mood

톤 & 무드

핵심 키워드 3개: 정감, 신뢰, 풍성함
무드 설명: 강렬한 오리온 레드 위에 금색 情 캘리그래피와 초콜릿 브라운이 어우러져, 세대를 잇는 따뜻함과 정겨움을 즉시 각인시킨다. 트렌디한 미니멀보다 오랜 신뢰가 쌓인 레트로-크래프트 톤 — 진하고 포근하며 손에 잡히는 풍성함.
비주얼 스타일: 레트로-크래프트(오랜 헤리티지 패키지 감성) + 휴머니즘(정·나눔의 정서)
밀도(Density): Comfortable — 제품·情 캘리그래피가 주인공, 여백은 넉넉하되 정보는 촘촘히
모서리 성향: Soft (6~12px, 파이의 둥근 실루엣과 정겨운 톤)
평면성: Subtle — 단색 레드 블록 기반이되, 초콜릿의 광택·정 캘리그래피의 입체감으로 약한 깊이

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - Orion Red (DIC 157 계열, 패키지 시그니처) */
  --color-primary-50:  #FDE8E7;   /* 옅은 레드 배경/태그 */
  --color-primary-100: #FAC4C1;
  --color-primary-200: #F2938E;
  --color-primary-300: #EC635C;
  --color-primary-400: #E84038;
  --color-primary-500: #E52521;   /* Orion Red — 기본 */
  --color-primary-600: #C51C1A;   /* hover */
  --color-primary-700: #9E1615;   /* active */
  --color-primary-800: #761110;
  --color-primary-900: #4E0B0A;

  /* Secondary - Jeong Gold (情 캘리그래피 금색) */
  --color-secondary-50:  #FAF1DA;
  --color-secondary-100: #F2DFAE;
  --color-secondary-200: #E7C878;
  --color-secondary-300: #DBB149;
  --color-secondary-400: #D0A02E;
  --color-secondary-500: #C8901E;   /* Jeong Gold */
  --color-secondary-600: #A97912;
  --color-secondary-700: #8F640F;
  --color-secondary-800: #6B4A0A;
  --color-secondary-900: #473106;

  /* Tertiary - Choco Brown (초콜릿 헤리티지 톤) */
  --color-choco-300: #8A5A32;
  --color-choco-500: #5A3620;   /* 초콜릿 브라운 */
  --color-choco-700: #3E2416;

  /* Neutral - Warm cream / kraft 톤 */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #FBF4EC;    /* 크림/크래프트 배경 */
  --color-neutral-100:  #F4E9DB;
  --color-neutral-200:  #E7D9C7;    /* border */
  --color-neutral-300:  #D3C0A9;
  --color-neutral-500:  #A08974;    /* caption */
  --color-neutral-700:  #7A6357;    /* 보조 텍스트 */
  --color-neutral-800:  #45352C;
  --color-neutral-900:  #241712;    /* 본문 텍스트 (진한 초코) */
  --color-neutral-1000: #000000;

  /* Semantic */
  --color-success-bg: #E7EFDD;
  --color-success-fg: #4F7A2E;
  --color-warning-bg: #FAF1DA;
  --color-warning-fg: #8F640F;
  --color-error-bg:   #FDE8E7;
  --color-error-fg:   #C51C1A;
  --color-info-bg:    #E3EAEF;
  --color-info-fg:    #2E5C78;

  /* Surface (배경 위계) */
  --bg-base:     #FFFFFF;              /* 페이지 기본 */
  --bg-subtle:   #FBF4EC;             /* 섹션 구분 (크림) */
  --bg-elevated: #FFFFFF;             /* 카드 */
  --bg-overlay:  rgba(36,23,18,0.55); /* 모달/드롭다운 */

  /* Text 위계 */
  --text-primary:    #241712;         /* 진한 초코 본문 */
  --text-secondary:  #45352C;
  --text-tertiary:   #7A6357;
  --text-on-primary: #FFFFFF;         /* 레드 위 흰 텍스트 */
  --text-disabled:   #A08974;

  /* Border */
  --border-default: #E7D9C7;
  --border-subtle:  #F4E9DB;
  --border-strong:  #D3C0A9;
  --border-focus:   #E52521;
}

Typography

타이포그래피

폰트 페어링:
- 로고: 오리온 커스텀 워드마크(ORION/오리온) + 情 붓글씨 캘리그래피 (bespoke, 배포 폰트 아님)
- 한글: Pretendard (OFL) / Noto Sans KR 폴백 — 헤드라인 800~900, 본문 500
- 영문: 볼드 지오메트릭 산세리프 — Pretendard(라틴) / Inter (OFL) 폴백
- 강조/전통 포인트: 情 등 붓글씨 캘리그래피 이미지 자산 (본문 폰트 아님)
위계 (font-size / weight / line-height / letter-spacing):
- Display: 46px / 900 / 1.10 / -0.03em
- H1: 33px / 900 / 1.16 / -0.025em
- H2: 25px / 800 / 1.26 / -0.02em
- H3: 20px / 800 / 1.3 / -0.015em
- Body Large: 17px / 500 / 1.62 / -0.01em
- Body: 15px / 500 / 1.62 / -0.01em
- Body Small: 13px / 500 / 1.5 / 0
- Caption: 11px / 700 / 1.4 / 0.02em

Spacing

스페이싱

Base unit: 4px
토큰:

:root {
  --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 (모바일 16px)

Border Radius

:root {
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;      /* 카드/버튼 기본 */
  --radius-lg: 12px;     /* 카드 시그니처 */
  --radius-xl: 20px;
  --radius-full: 9999px; /* 심볼·태그·pill 버튼 */
}

Shadow / Elevation

:root {
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(36,23,18,0.06);    /* 입력/구분 */
  --shadow-md: 0 4px 14px rgba(36,23,18,0.10);   /* 카드 hover */
  --shadow-lg: 0 12px 28px rgba(36,23,18,0.14);  /* 모달 */
  --shadow-xl: 0 18px 40px rgba(229,37,33,0.26); /* 레드 강조 CTA/풀스크린 */
}

sm = 인풋/구분선, md = 카드 hover, lg = 모달/드롭다운, xl = 레드 CTA·풀스크린 dialog

Iconography

스타일: Filled + 굵은 Outline 혼합 (레트로 패키지 톤과 조화)
Stroke 굵기: 2px
모서리 처리: Round
추천 라이브러리: Phosphor (Bold/Fill) / Lucide + 별(★)·情 브랜드 자산 보조

Component Guide

컴포넌트 가이드

Button

.btn {
  font: 800 15px/1 Pretendard, -apple-system, sans-serif;
  letter-spacing: -0.01em;
  border-radius: var(--radius-full);
  padding: 13px 22px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; cursor: pointer;
  transition: background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.btn-primary { background: var(--color-primary-500); color: var(--text-on-primary); }
.btn-primary:hover { background: var(--color-primary-600); box-shadow: var(--shadow-xl); }
.btn-primary:active { background: var(--color-primary-700); transform: translateY(1px); }
.btn-primary:disabled { background: var(--border-default); color: var(--text-disabled); box-shadow: none; }
.btn-secondary { background: var(--color-secondary-500); color: #241712; }
.btn-secondary:hover { background: var(--color-secondary-600); color: #fff; }
.btn-ghost { background: transparent; color: var(--color-primary-600); border: 1.5px solid var(--border-default); }
.btn-ghost:hover { border-color: var(--color-primary-500); background: var(--color-primary-50); }
.btn-danger { background: var(--color-error-fg); color: #fff; }
.btn[data-loading="true"] { color: transparent; position: relative; }

Input

.input {
  background: var(--bg-base);
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font: 500 15px/1.4 Pretendard, sans-serif;
  color: var(--text-primary);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.input::placeholder { color: var(--text-tertiary); }
.input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(229,37,33,0.14); }
.input[aria-invalid="true"] { border-color: var(--color-error-fg); box-shadow: 0 0 0 3px rgba(197,28,26,0.14); }
.input:disabled { background: var(--bg-subtle); color: var(--text-disabled); }

Card

.card { background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 18px; }
.card-featured { border: 0; box-shadow: var(--shadow-md); }
.card-featured:hover { box-shadow: var(--shadow-lg); }
.card-outlined { box-shadow: none; border: 1.5px solid var(--border-strong); }

Badge / Tag

.tag { padding: 4px 12px; border-radius: var(--radius-full); font: 800 11px/1.4 Pretendard, sans-serif; letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 4px; }
.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; color: var(--text-primary); border: 1.5px solid var(--border-default); }
.tag-gold    { background: var(--color-secondary-50); color: var(--color-secondary-700); }

Navigation (헤더)

.topnav { display: flex; align-items: center; gap: 20px; padding: 14px 20px; background: var(--bg-base); border-bottom: 1px solid var(--border-default); }
.topnav .brand { display: inline-flex; align-items: center; gap: 8px; font: 900 20px/1 Pretendard, sans-serif; color: var(--color-primary-500); letter-spacing: -0.02em; }
.topnav .brand .mark { width: 34px; height: 34px; border-radius: var(--radius-full); background: var(--color-primary-500); color: var(--color-secondary-300); display: grid; place-items: center; font: 900 15px/1 sans-serif; }
.topnav a { font: 700 14px/1 Pretendard, sans-serif; color: var(--text-secondary); text-decoration: none; }
.topnav a:hover, .topnav a.active { color: var(--color-primary-500); }
.topnav .spacer { margin-left: auto; }

Motion

:root {
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

Anti-patterns

1. 오리온 레드를 파스텔/저채도로 희석 금지 — 매대 각인력은 강렬한 원색 레드에서 나온다(2002년 청→레드 전환이 정체성) 2. 情(정) 캘리그래피를 일반 산세리프 텍스트로 대체 금지 — 붓글씨 情은 전통·정감을 담는 브랜드 자산 3. 지구·별 심볼을 로고타입 없이 단독으로, 또는 임의 변형해서 사용 금지 — CI는 심볼+로고타입 조합이 원칙 4. 레드+골드+브라운의 위계를 무너뜨리기 금지 — 레드가 주역, 골드는 情 포인트, 브라운은 초콜릿 헤리티지 보조 5. 본문 폰트 weight 400 이하 사용 금지 — 정겹고 풍성한 톤은 500~900 굵기에서 유지

Orion (오리온)

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

출처