LG Electronics (LG전자)

헤리티지 레드 얼굴 로고와 액티브 레드 #FD312E 강조, 웜 그레이 바탕 위 알약형 버튼의 「Life's Good」 톤

한국소비자이커머스엔터프라이즈따뜻한modern-minimalhumanism고딕comfortableroundsubtle라이트다크공식한글 지원출시 2023개정 2025

Brand DNA

브랜드 DNA

브랜드명: LG Electronics (LG전자) — 한국 공식 온라인 브랜드숍 lge.co.kr, 글로벌 lg.com, 스마트홈 앱 LG ThinQ
한 줄 정체성: TV·가전·노트북부터 B2B 사이니지·공조까지 만드는 가전 기업이 「Life's Good」 한 문장으로 모든 접점을 묶는 브랜드
공식 디자인 철학: 「Emotionally Intelligent Design(감성 지능 디자인)」 — 사람다움(humanity)과 지능(intelligence)을 두 기둥으로 삼는다. 로고는 1995년 도입된 워드마크 + 원형 얼굴 심볼("A Smile in Technology")이고, 2023년 리뉴얼에서 이 얼굴이 인사·끄덕임·회전·윙크 등 8가지로 움직이는 다이내믹 로고(Digital Logo Play, "미래의 얼굴")가 되었다. 슬로건 「Life's Good.」(2005~)은 캠페인을 여는 첫 문장이나 닫는 마지막 문장으로 쓴다.
시그니처 요소 1개: 헤리티지 레드 #A50034 얼굴 심볼 + 액티브 레드 #FD312E — 로고는 짙은 자홍빛 헤리티지 레드로 고정하고, 디지털 화면의 에너지(슬로건·강조·가격·활성 상태)는 한결 밝은 액티브 레드가 맡는 「두 개의 빨강」 구조. 바탕은 흰색과 웜 그레이 #F0ECE4.

> 현행 기준 메모: 2023년 이전 LG 는 헤리티지 레드 하나를 쓰고 글꼴은 LG Smart / LG Smart UI 였다. 현행 공식 아이덴티티(lg.com/global/our-identity)는 액티브 레드 · 헤리티지 레드 · 웜 그레이 · 흰색 · 검정 다섯 색과 전용 글꼴 LG EI Headline / LG EI Text(LG Smart 계열 대체)를 정본으로 둔다. 흔히 "LG 레드 = #A50034" 로 알려진 값은 헤리티지 레드이고, 공식 액티브 레드는 #FD312E 이다.

Tone & Mood

톤 & 무드

핵심 키워드 3개: 따뜻함, 명료함, 친근함
무드 설명: 흰 바탕과 웜 그레이 면 위에 제품 사진을 크게 두고, 빨강은 로고·가격·활성 상태처럼 꼭 필요한 곳에만 짧게 찍는다. 버튼·탭 칩은 알약형으로 둥글고, 카드는 16~28px 로 크게 굴려 LG 제품(TV 베젤·세탁기 다이얼·냉장고 문 모서리)의 둥근 형태를 옮겨 온다. 문장은 짧고 긍정적이다("가전 구독도 남다르게", "필터 교체, 이제 잊고 사세요").
비주얼 스타일: 모던 미니멀 + 휴머니즘 (웃는 얼굴 로고·둥근 EI 도형이 기계적인 차가움을 덜어 준다)
밀도(Density): Comfortable — 쇼핑몰이라 제품 카드·혜택 배지·가격이 촘촘하지만 본문 14px·카드 간격 16~24px 로 숨 쉴 틈을 둔다.
모서리 성향: Round (카드·배너 16~20px, 버튼·칩은 알약형 999px, 작은 요소 4~8px)
평면성: Subtle — 선 대신 1px 헤어라인 그림자 + 옅은 8px 퍼짐 그림자로 카드를 띄운다.

Color System

컬러 시스템 (CSS 변수)

공식 아이덴티티 색(액티브 레드·헤리티지 레드·웜 그레이, lg.com/global/our-identity/color) + lge.co.kr 실측 CSS 변수(--color-set--*) 기준. 표시가 없는 값은 실측, (추정) 은 보간.

:root {
  /* Primary - Active Red (디지털 에너지) */
  --color-primary-50:  #FFF5F8;  /* 실측 --color-set--red-light — 혜택 강조 행 배경 */
  --color-primary-100: #FEE3E2;  /* (추정) 보간 — 배지 subtle 면 */
  --color-primary-200: #FDC0BE;  /* (추정) 보간 */
  --color-primary-300: #FE8A87;  /* (추정) 보간 */
  --color-primary-400: #FF5F5B;  /* (추정) 보간 — 다크 모드 hover */
  --color-primary-500: #FD312E;  /* 공식 Active Red (PMS 2034C) — 슬로건·강조·다크 모드 기본 */
  --color-primary-600: #EA1917;  /* 실측 --color-set--red / lg.com 버튼 hover·활성 페이지네이션 — 흰 글자 대비용 채움색 */
  --color-primary-700: #C4110F;  /* (추정) pressed */
  --color-primary-800: #8E0E0C;  /* (추정) 보간 */
  --color-primary-900: #5C0907;  /* (추정) 보간 */

  /* Secondary - Heritage Red (로고 전용) + Warm Grey */
  --color-secondary-500: #A50034;  /* 공식 Heritage Red (PMS 207C) — 로고 얼굴 심볼, 헤리티지 문구 */
  --color-warm-100: #F6F3EB;       /* 실측 lg.com — 가장 옅은 웜 면 */
  --color-warm-200: #F0ECE4;       /* 공식 Warm Grey — lg.com body 배경 */
  --color-warm-300: #E6E1D6;       /* 실측 lg.com bg-darkwarmgray, 구분선 */
  --color-warm-500: #CBC8C2;       /* 실측 lg.com 테두리·스크롤바 */
  --logo-wordmark: #707070;        /* 공식 로고 SVG 워드마크 회색 */

  /* Neutral - lge.co.kr navy 계열 실측 */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F9FAFB;  /* navy12 */
  --color-neutral-100:  #F3F5F7;  /* navy11 — 제품 이미지 영역·섹션 배경 */
  --color-neutral-200:  #ECEEF0;  /* navy10 */
  --color-neutral-300:  #DEE1E5;  /* navy09 — 카드 구분선 */
  --color-neutral-500:  #8F9298;  /* navy05 */
  --color-neutral-600:  #767980;  /* navy04 — 모델명 등 캡션 */
  --color-neutral-700:  #43474D;  /* navy03 */
  --color-neutral-800:  #212731;  /* navy02 */
  --color-neutral-900:  #111111;  /* black111 — 본문·선택 칩·스위치 on */
  --color-neutral-1000: #000000;

  /* Semantic */
  --color-success-bg: #E7F6EC;  /* (추정) */
  --color-success-fg: #08A53A;  /* 실측 lge.co.kr */
  --color-warning-bg: #FFF6D6;  /* (추정) */
  --color-warning-fg: #B26A00;  /* (추정) 노랑 #FFD600(실측)은 글자 대비 부족 → 짙게 */
  --color-error-bg:   #FEF3F3;  /* 실측 */
  --color-error-fg:   #EA1917;  /* 실측 — 쇼핑몰에선 가격 강조와 같은 빨강 */
  --color-info-bg:    #EAF5FF;  /* (추정) */
  --color-info-fg:    #0C9AFF;  /* 실측 --color-set--sky-blue */

  /* Surface (배경 위계) */
  --bg-base: #FFFFFF;      /* lge.co.kr 페이지 기본 */
  --bg-subtle: #F3F5F7;    /* 섹션·제품 이미지 영역 */
  --bg-warm: #F0ECE4;      /* lg.com 페이지 기본(웜 그레이) */
  --bg-elevated: #FFFFFF;  /* 카드 */
  --bg-overlay: #FFFFFF;   /* 모달·툴팁 */
  --bg-inverse: #111111;   /* 타임딜 바·선택 칩 */

  /* Text 위계 */
  --text-primary: #111111;    /* 본문·제목 */
  --text-secondary: #666666;  /* gray700 — 보조 설명 */
  --text-tertiary: #8F8F8F;   /* gray600 — 캡션·모델명 */
  --text-on-primary: #FFFFFF; /* 빨강·검정 위 */
  --text-disabled: #BBBBBB;   /* silver */
  --text-price: #EA1917;      /* 최대혜택가 */

  /* Border */
  --border-default: #DDDDDD;  /* gray500 — 입력·칩 테두리 */
  --border-subtle: #EEEEEE;   /* gray300 — 목록 구분선 */
  --border-strong: #111111;   /* 선택 칩·선택 탭 */
  --border-focus: #000000;    /* 실측 outline 2px solid #000 */
}

Typography

타이포그래피

폰트 페어링:
- 한글: Pretendard (SIL OFL) — lge.co.kr 실측 --font-family--pretendard: "Pretendard","맑은 고딕","malgun gothic","돋움",dotum,sans-serif. 숫자 배너 일부에 D-DIN Condensed.
- 영문: LG EI Headline(제목·키비주얼) / LG EI Text(본문·UI) (LG 전용 서체, 비공개 라이선스) — lg.com 실측 "LGEI Headline", "LGEI Text", 폴백 Segoe UI. 대체 권장: Pretendard 또는 Inter.
위계 (font-size / font-weight / line-height / letter-spacing, lg.com·lge.co.kr 실측 크기 기반):
- Display: 48px / 700 / 1.2 / -0.8px (추정, 키비주얼)
- H1: 36px / 700 / 1.3 / -0.6px
- H2: 28px / 700 / 1.35 / -0.4px
- H3: 20px / 700 / 1.4 / -0.4px
- Body Large: 16px / 500 / 1.5 / -0.2px
- Body: 14px / 400 / 1.5 / -0.2px (lge.co.kr 최다 사용)
- Body Small: 13px / 400 / 1.45 / -0.2px
- Caption: 11px / 500 / 1.4 / 0 (배지·모델명)
- 가격: 19px / 600 / 26px / -0.4px (실측 product-card-price)

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 1284px (추정, lge.co.kr PC), 좌우 패딩 PC 40px / 모바일 16px (추정)

Border Radius

:root {
  --radius-none: 0;
  --radius-sm: 4px;      /* 실측 --br-radius--4 — 작은 배지 */
  --radius-md: 8px;      /* 실측 --br-radius--8 — 제품 썸네일·타임딜 바 */
  --radius-lg: 16px;     /* 실측 --br-radius--16 — 카드·배너 (lge.co.kr) */
  --radius-xl: 20px;     /* 실측 lg.com 1.25rem — 카드·툴팁 / 넓은 배너는 28px(1.75rem) */
  --radius-full: 9999px; /* 실측 62.4375rem·100px — 버튼·탭 칩(알약형) */
}

Shadow / Elevation

:root {
  --shadow-none: none;
  --shadow-sm: 0 0 1px 0 rgba(33,39,49,.28), 0 2px 8px 0 rgba(33,39,49,.05);   /* 실측 — 기본 카드 */
  --shadow-md: 0 2px 8px 0 rgba(33,39,49,.078), 0 0 1px 0 rgba(33,39,49,.361); /* 실측 — 카드 hover·드롭다운 */
  --shadow-lg: 2px 4px 12px 0 rgba(0,0,0,.16);                                 /* 실측 --box-shadow--base — 플로팅 버튼 */
  --shadow-xl: 0 12px 64px 0 rgba(0,0,0,.141), 0 0 1px 0 rgba(0,0,0,.078);     /* 실측 — 모달·검색 레이어 */
}

Iconography

스타일: Outline (GNB 검색·장바구니·마이페이지, 20·24px 그리드) + 기능 아이콘 일부 Filled
Stroke 굵기: 1.5px (추정)
모서리 처리: Round
추천 라이브러리: Lucide (둥근 끝처리가 LG 의 EI 도형과 잘 맞는다)

Component Guide

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

Button — lg.com .c-button 실측: 알약형, 기본은 흰 바탕 + #646464 1px 테두리, hover 하면 빨강으로 채워진다.

.btn { height: 48px; padding: 0 24px; border-radius: var(--radius-full); font: 700 16px/1 Pretendard, sans-serif; border: 1px solid transparent; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast); }
.btn-primary { background: var(--color-primary-600); border-color: var(--color-primary-600); color: var(--text-on-primary); }   /* .highlight */
.btn-primary:hover { background: var(--color-primary-700); border-color: var(--color-primary-700); }
.btn-primary:active { background: var(--color-primary-800); }
.btn-primary:disabled { background: var(--color-neutral-300); border-color: var(--color-neutral-300); color: var(--text-disabled); }
.btn-primary.is-loading { color: transparent; position: relative; } /* 가운데 흰 스피너 */
.btn-secondary { background: var(--bg-base); border-color: #646464; color: var(--text-primary); }                              /* 기본 */
.btn-secondary:hover { background: var(--color-primary-600); border-color: var(--color-primary-600); color: #fff; }             /* 실측 hover */
.btn-secondary:disabled { color: var(--color-warm-500); border-color: var(--color-warm-500); }
.btn-ghost { background: transparent; color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }
.btn-ghost:hover { color: var(--color-primary-600); }
.btn-black { background: var(--bg-inverse); color: #fff; }  /* lge.co.kr 타임딜·선택 칩 */
.btn-danger { background: var(--bg-base); border-color: var(--color-error-fg); color: var(--color-error-fg); }
.btn-danger:hover { background: var(--color-error-bg); }

Input

.input { height: 48px; padding: 0 16px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-base); font-size: 14px; color: var(--text-primary); }
.input:focus { border-color: var(--border-strong); outline: none; }
.input.is-error { border-color: var(--color-error-fg); }   /* 아래 12px 빨강 안내문 */
.input:disabled { background: var(--color-neutral-100); color: var(--text-disabled); }

Card

.card { background: var(--bg-elevated); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }       /* 기본 */
.card-product .thumb { background: var(--bg-subtle); border-radius: var(--radius-md); aspect-ratio: 1; }                           /* 제품 카드 */
.card-warm { background: var(--bg-warm); border-radius: var(--radius-xl); box-shadow: none; }                                      /* 강조형(lg.com) */
.card-outlined { background: var(--bg-base); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: none; }

Badge / Tag — 제품 카드 혜택 배지("닷컴 ONLY", "포인트 적립", "다품목할인")

.badge { height: 20px; padding: 0 6px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; }
.badge-solid { background: var(--color-primary-600); color: #fff; }
.badge-subtle { background: var(--color-neutral-100); color: var(--color-neutral-700); }
.badge-outline { border: 1px solid var(--color-primary-600); color: var(--color-primary-600); }
.chip { height: 36px; padding: 0 16px; border-radius: var(--radius-full); border: 1px solid var(--border-default); font-size: 14px; }
.chip[aria-selected="true"] { background: var(--bg-inverse); border-color: var(--bg-inverse); color: var(--bg-base); font-weight: 600; }   /* 실측 */

Navigation — lge.co.kr GNB: 로고 · 대메뉴(제품/소모품·가전 구독·고객지원·혜택/이벤트·스토리·베스트샵·LG AI) · 검색/장바구니/마이페이지

.gnb { height: 72px; display: flex; align-items: center; gap: 32px; padding: 0 40px; background: var(--bg-base); border-bottom: 1px solid var(--border-subtle); }
.gnb a { font-size: 16px; font-weight: 500; color: var(--text-primary); height: 72px; display: flex; align-items: center; }
.gnb a[aria-current="page"] { font-weight: 700; box-shadow: inset 0 -2px 0 var(--border-strong); }
.gnb .count { min-width: 16px; height: 16px; border-radius: 100px; background: var(--color-primary-600); color: #fff; font-size: 10px; font-weight: 600; }  /* 장바구니 개수 — 실측 */

Motion

:root {
  --duration-fast: 150ms;   /* (추정) 버튼 색 전환 */
  --duration-base: 300ms;   /* (추정) 드롭다운·탭 */
  --duration-slow: 600ms;   /* (추정) 배너 슬라이드·로고 모션 */
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);    /* (추정) */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* (추정) */
}

다이내믹 로고(인사·끄덕임·회전·윙크 등 8동작)와 EI 도형은 스크롤·hover 에 반응해 흐르듯 움직인다(공식). prefers-reduced-motion 에서는 정지 상태로 둔다.

Anti-patterns

1. 로고 얼굴 심볼을 액티브 레드나 다른 색으로 바꾸지 않는다 — 심볼은 헤리티지 레드 #A50034(또는 흑·백 단색 변형)만 쓴다. 2. 빨강을 넓은 면이나 본문 글자에 쓰지 않는다 — 가격·배지·활성 상태·슬로건처럼 점으로만 찍는다. 3. 버튼을 각진 사각형으로 만들지 않는다 — LG 웹 버튼과 탭 칩은 알약형이다. 4. 공식 그라디언트(흰→분홍, 헤리티지 레드→검정 등) 위에 긴 본문을 얹지 않는다 — 그라디언트는 히어로·키비주얼 배경 전용이며 공식 문서상 라이트 모드 전용이다. 5. 차갑고 중립적인 말투를 쓰지 않는다 — 「Life's Good」 보이스는 웃음(Smile)·통찰(Insight)·디자인(Design) 세 원칙으로, 기능을 생활의 이득으로 바꿔 짧게 말한다.

LG Electronics (LG전자)

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

출처