LG전자

---
name: LG전자
design_system_name: LG EI Design
slug: lg-electronics
category: etc
last_updated: "2026-10-05"
created_at: "2026-10-05"
lang: ko
logo: https://getdesign.kr/logos/lg-electronics.png
colors:
  ## (a) EI 브랜드 — 발행 5색 (lg.com/global/our-identity/color)
  active-red: oklch(0.644 0.237 28)   # #FD312E · 발행 · R253 G49 B46 · PMS 2034C
  heritage-red: oklch(0.459 0.183 15)   # #A50034 · 발행 · R165 G0 B52 · PMS 207C
  warm-grey: oklch(0.944 0.012 85)   # #F0ECE4 · 발행 · R240 G236 B228 · PMS Cool Gray 1 C
  white: oklch(1.000 0.000 0)   # #FFFFFF · 발행
  black: oklch(0.000 0.000 0)   # #000000 · 발행
  ## (b) EI 커머스 — lg.com/us 관측(미발행)
  us-cta-red: oklch(0.595 0.234 29)   # #EA1917 · 관측 · Shop Now·Add to Cart 채움 · Active Red 아님
  us-promo-bar: oklch(0.321 0.000 0)   # #333333 · 관측 · 맨 위 프로모 띠
  us-strip-bg: oklch(0.911 0.016 86)   # #E6E1D6 · 관측 · 혜택 띠·브레드크럼 · Warm Grey 단계 아님
  us-tab-row-bg: oklch(0.976 0.008 91)   # #F9F7F1 · 관측 · PDP 탭 행
  us-ink-strong: oklch(0.221 0.008 297)   # #1B1A1E · 관측 · 글자·짙은 면
  us-ink-muted: oklch(0.503 0.000 0)   # #646464 · 관측 · 보조 글자
  us-reward-bg: oklch(0.949 0.014 156)   # #E7F1EA · 관측 · 리워드 칩·패널 바탕(프로모 맥락)
  us-reward-ink: oklch(0.589 0.120 148)   # #439053 · 관측 · 리워드 칩 글자(프로모 맥락)
  ## (c) 국내 — lge.co.kr :root --color-set--* (국내 운영 CSS 이름)
  kr-black: oklch(0.000 0.000 0)   # #000000 · 국내 운영 CSS --color-set--black
  kr-white: oklch(1.000 0.000 0)   # #FFFFFF · 국내 운영 CSS --color-set--white
  kr-gray800: oklch(0.321 0.000 0)   # #333333 · 국내 운영 CSS --color-set--gray800
  kr-gray700: oklch(0.510 0.000 0)   # #666666 · 국내 운영 CSS --color-set--gray700
  kr-gray650: oklch(0.670 0.000 0)   # #959595 · 국내 운영 CSS --color-set--gray650
  kr-gray600: oklch(0.650 0.000 0)   # #8F8F8F · 국내 운영 CSS --color-set--gray600
  kr-gray500: oklch(0.898 0.000 0)   # #DDDDDD · 국내 운영 CSS --color-set--gray500
  kr-gray400: oklch(0.937 0.000 0)   # #EAEAEA · 국내 운영 CSS --color-set--gray400
  kr-gray300: oklch(0.949 0.000 0)   # #EEEEEE · 국내 운영 CSS --color-set--gray300
  kr-gray200: oklch(0.964 0.000 0)   # #F3F3F3 · 국내 운영 CSS --color-set--gray200
  kr-gray100: oklch(0.976 0.000 0)   # #F7F7F7 · 국내 운영 CSS --color-set--gray100
  kr-gray50: oklch(0.982 0.000 0)   # #F9F9F9 · 국내 운영 CSS --color-set--gray50
  kr-red: oklch(0.595 0.234 29)   # #EA1917 · 국내 운영 CSS --color-set--red
  kr-red-light: oklch(0.979 0.011 357)   # #FFF5F8 · 국내 운영 CSS --color-set--red-light
  kr-red-orange: oklch(0.650 0.236 30)   # #FF3723 · 국내 운영 CSS --color-set--red-orange
  kr-emerald: oklch(0.539 0.092 199)   # #007E82 · 국내 운영 CSS --color-set--emerald
  kr-trendy-green: oklch(0.596 0.119 120)   # #76892D · 국내 운영 CSS --color-set--trendy-green
  kr-violet: oklch(0.514 0.248 287)   # #6835EA · 국내 운영 CSS --color-set--violet
  kr-black111: oklch(0.178 0.000 0)   # #111111 · 국내 운영 CSS --color-set--black111
  kr-navy01: oklch(0.203 0.025 259)   # #101722 · 국내 운영 CSS --color-set--navy01
  kr-navy02: oklch(0.271 0.021 261)   # #212731 · 국내 운영 CSS --color-set--navy02
  kr-navy03: oklch(0.396 0.011 258)   # #43474D · 국내 운영 CSS --color-set--navy03
  kr-navy04: oklch(0.576 0.011 267)   # #767980 · 국내 운영 CSS --color-set--navy04
  kr-navy05: oklch(0.659 0.010 265)   # #8F9298 · 국내 운영 CSS --color-set--navy05
  kr-navy06: oklch(0.738 0.011 248)   # #A5ABB1 · 국내 운영 CSS --color-set--navy06
  kr-navy07: oklch(0.807 0.011 244)   # #BAC1C7 · 국내 운영 CSS --color-set--navy07
  kr-navy08: oklch(0.855 0.009 248)   # #CBD0D5 · 국내 운영 CSS --color-set--navy08
  kr-navy09: oklch(0.909 0.006 255)   # #DEE1E5 · 국내 운영 CSS --color-set--navy09
  kr-navy10: oklch(0.948 0.003 248)   # #ECEEF0 · 국내 운영 CSS --color-set--navy10
  kr-navy11: oklch(0.969 0.003 248)   # #F3F5F7 · 국내 운영 CSS --color-set--navy11
  kr-navy12: oklch(0.985 0.002 248)   # #F9FAFB · 국내 운영 CSS --color-set--navy12
  kr-charcoal: oklch(0.387 0.000 0)   # #444444 · 국내 운영 CSS --color-set--charcoal
  kr-matterhorn: oklch(0.450 0.000 0)   # #555555 · 국내 운영 CSS --color-set--matterhorn
  kr-grey: oklch(0.569 0.000 0)   # #777777 · 국내 운영 CSS --color-set--grey
  kr-dark-grey: oklch(0.738 0.000 0)   # #AAAAAA · 국내 운영 CSS --color-set--dark-grey
  kr-silver: oklch(0.792 0.000 0)   # #BBBBBB · 국내 운영 CSS --color-set--silver
  kr-very-light-grey: oklch(0.845 0.000 0)   # #CCCCCC · 국내 운영 CSS --color-set--very-light-grey
  kr-storm-grey: oklch(0.568 0.015 262)   # #727780 · 국내 운영 CSS --color-set--storm-grey
  kr-neutral-grey: oklch(0.946 0.000 0)   # #EDEDED · 국내 운영 CSS --color-set--neutral-grey
  kr-eclipse: oklch(0.337 0.000 0)   # #373737 · 국내 운영 CSS --color-set--eclipse
  kr-whisper: oklch(0.949 0.000 0)   # #EEEEEE · 국내 운영 CSS --color-set--whisper
  kr-white-smoke: oklch(0.967 0.000 0)   # #F4F4F4 · 국내 운영 CSS --color-set--white-smoke
  kr-snow1: oklch(0.975 0.011 24)   # #FEF4F3 · 국내 운영 CSS --color-set--snow1
  kr-snow2: oklch(0.985 0.000 0)   # #FAFAFA · 국내 운영 CSS --color-set--snow2
  kr-solitude: oklch(0.955 0.003 265)   # #EFF0F2 · 국내 운영 CSS --color-set--solitude
  kr-scarlet: oklch(0.614 0.240 30)   # #F31E11 · 국내 운영 CSS --color-set--scarlet
  kr-orange-red: oklch(0.656 0.232 33)   # #FF3F18 · 국내 운영 CSS --color-set--orange-red
  kr-red-orange2: oklch(0.644 0.237 28)   # #FD312E · 국내 운영 CSS --color-set--red-orange2
  kr-royal-brown: oklch(0.539 0.115 48)   # #A3572C · 국내 운영 CSS --color-set--royal-brown
  kr-light-brown: oklch(0.661 0.080 85)   # #A98F58 · 국내 운영 CSS --color-set--light-brown
  kr-cobalt-purple: oklch(0.530 0.267 279)   # #593CFF · 국내 운영 CSS --color-set--cobalt-purple
  kr-sky-blue: oklch(0.672 0.182 249)   # #0C9AFF · 국내 운영 CSS --color-set--sky-blue
  kr-eastern-blue: oklch(0.553 0.101 222)   # #067F9D · 국내 운영 CSS --color-set--eastern-blue
  kr-dazzle-rose: oklch(0.685 0.286 339)   # #FF21D3 · 국내 운영 CSS --color-set--dazzle-rose
fonts:
  ei-headline: '"LGEI Headline", sans-serif'   # 발행명 LG EI Headline · 웹 CSS 패밀리 문자열(공백 없음) · 재배포 허락 없음
  ei-text: '"LGEI Text", sans-serif'   # 발행명 LG EI Text · 웹 CSS 패밀리 문자열(공백 없음) · 재배포 허락 없음
  kr-sans: '"Pretendard", "맑은 고딕", "malgun gothic", "돋움", "dotum", sans-serif'   # 국내 운영 CSS --font-family 원문 순서
typography:
  ## (a) EI 브랜드 — lg.com/global 관측(미발행)
  ei-hero: # 관측(미발행) · lg.com/global @1425 · h1.cmp-title__text · @360 28/32/600
    fontFamily: '"LGEI Headline", sans-serif'
    fontSize: 56px
    fontWeight: 600
    lineHeight: 60px
    letterSpacing: 0em
  ei-page-title: # 관측(미발행) · lg.com/global @1425 · h1.cmp-title__text · @360 28/32/300 · 히어로 카드 제목에도
    fontFamily: '"LGEI Text", sans-serif'
    fontSize: 36px
    fontWeight: 300
    lineHeight: 42px
    letterSpacing: 0em
  ei-footer-depth1: # 관측(미발행) · lg.com/global @1425 · a.c-footer__depth1 · @360 같음
    fontFamily: '"LGEI Text", sans-serif'
    fontSize: 20px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0em
  ei-nav: # 관측(미발행) · lg.com/global @1425 · a.cmp-navigation__item-link
    fontFamily: '"LGEI Text", sans-serif'
    fontSize: 18px
    fontWeight: 400
    lineHeight: 22px
    letterSpacing: 0em
  ei-body: # 관측(미발행) · lg.com/global @1425 · p·a·span 혼합 · @360 16/18/400
    fontFamily: '"LGEI Text", sans-serif'
    fontSize: 16px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0em
  ei-button: # 관측(미발행) · lg.com/global @1425 · span.cmp-button__text · @360 14/14/600
    fontFamily: '"LGEI Text", sans-serif'
    fontSize: 16px
    fontWeight: 600
    lineHeight: 16px
    letterSpacing: 0em
  ## (b) EI 커머스 — lg.com/us 관측(미발행)
  us-section-title: # 관측(미발행) · lg.com/us @1425 · 섹션 대제목 strong · @360 28/33.04/700 자간 normal
    fontFamily: '"LGEI Headline", sans-serif'
    fontSize: 40px
    fontWeight: 700
    lineHeight: 43.2px
    letterSpacing: -0.4px
  us-subtitle1: # 관측(미발행) · lg.com/us PDP @1425 · MuiTypography-subtitle1 가격 · @360 22/26.84/500 -0.56px
    fontFamily: '"LGEI Text", sans-serif'
    fontSize: 28px
    fontWeight: 500
    lineHeight: 34.16px
    letterSpacing: -0.56px
  us-subtitle3: # 관측(미발행) · lg.com/us @1425 · MuiTypography-subtitle3 · 카테고리 카드 라벨에도 · @360 18/21.6/500 -0.4px
    fontFamily: '"LGEI Text", sans-serif'
    fontSize: 20px
    fontWeight: 500
    lineHeight: 24px
    letterSpacing: -0.4px
  us-button-medium: # 관측(미발행) · lg.com/us @1425 · MuiTypography-buttonMedium 탭 라벨
    fontFamily: '"LGEI Text", sans-serif'
    fontSize: 18px
    fontWeight: 500
    lineHeight: 21.6px
    letterSpacing: 0em
  us-body1: # 관측(미발행) · lg.com/us @1425 · MuiTypography-body1 푸터 링크
    fontFamily: '"LGEI Text", sans-serif'
    fontSize: 18px
    fontWeight: 400
    lineHeight: 24.84px
    letterSpacing: 0em
  us-body2: # 관측(미발행) · lg.com/us @1425 · MuiTypography-body2 기본 · 문맥별 변형이 많다
    fontFamily: '"LGEI Text", sans-serif'
    fontSize: 16px
    fontWeight: 400
    lineHeight: 22.08px
    letterSpacing: 0em
  us-body2-menu: # 관측(미발행) · lg.com/us @1425 · MuiTypography-body2 메뉴 span · @360 같음
    fontFamily: '"LGEI Text", sans-serif'
    fontSize: 14px
    fontWeight: 400
    lineHeight: 19.32px
    letterSpacing: -0.24px
  us-pdp-button: # 관측(미발행) · lg.com/us PDP @1425 · 구매 박스 MuiButton(Add to Cart·Find a Retailer) · @360 같음
    fontFamily: '"LGEI Text", sans-serif'
    fontSize: 18px
    fontWeight: 700
    lineHeight: 18px
    letterSpacing: 0em
  us-body3: # 관측(미발행) · lg.com/us PDP @1425 · MuiTypography-body3
    fontFamily: '"LGEI Text", sans-serif'
    fontSize: 14px
    fontWeight: 400
    lineHeight: 16.8px
    letterSpacing: 0em
  us-chip-small: # 관측(미발행) · lg.com/us PDP @1425 · MuiChip-labelSmall
    fontFamily: '"LGEI Text", sans-serif'
    fontSize: 13px
    fontWeight: 500
    lineHeight: 15.86px
    letterSpacing: 0em
  us-caption: # 관측(미발행) · lg.com/us @1425 · MuiTypography-caption 슬라이드 카운터
    fontFamily: '"LGEI Text", sans-serif'
    fontSize: 12px
    fontWeight: 400
    lineHeight: 14.64px
    letterSpacing: 0em
  us-overline: # 관측(미발행) · lg.com/us @1425 · MuiTypography-overline 히어로 오버라인
    fontFamily: '"LGEI Text", sans-serif'
    fontSize: 12px
    fontWeight: 600
    lineHeight: 13.44px
    letterSpacing: 0.12px
  ## (c) 국내 — lge.co.kr Pretendard 관측(미발행)
  kr-pdp-display: # 관측(미발행) · lge.co.kr PDP @1440 · 에디토리얼 대제목 h2
    fontFamily: '"Pretendard", "맑은 고딕", "malgun gothic", "돋움", "dotum", sans-serif'
    fontSize: 48px
    fontWeight: 700
    lineHeight: 66px
    letterSpacing: 0em
  kr-pdp-subtitle: # 관측(미발행) · lge.co.kr PDP @1440 · 기능 소제목 h2
    fontFamily: '"Pretendard", "맑은 고딕", "malgun gothic", "돋움", "dotum", sans-serif'
    fontSize: 32px
    fontWeight: 700
    lineHeight: 52px
    letterSpacing: 0em
  kr-hero: # 관측(미발행) · lge.co.kr/home @1440 · HomePcBannerHero 라이브 헤드라인 · @375 24/32/600 · 큰 할인 문구는 이미지 속 글자
    fontFamily: '"Pretendard", "맑은 고딕", "malgun gothic", "돋움", "dotum", sans-serif'
    fontSize: 36px
    fontWeight: 700
    lineHeight: 50px
    letterSpacing: -0.5px
  kr-section-title: # 관측(미발행) · lge.co.kr/home @1440 · h2.title-home_tit · @375 19/26/600 -0.4px
    fontFamily: '"Pretendard", "맑은 고딕", "malgun gothic", "돋움", "dotum", sans-serif'
    fontSize: 24px
    fontWeight: 700
    lineHeight: 32px
    letterSpacing: -0.5px
  kr-hero-desc: # 관측(미발행) · lge.co.kr/home @1440 · 히어로 설명 · @375 14/20/500 자간 normal
    fontFamily: '"Pretendard", "맑은 고딕", "malgun gothic", "돋움", "dotum", sans-serif'
    fontSize: 22px
    fontWeight: 500
    lineHeight: 30px
    letterSpacing: -0.5px
  kr-price: # 관측(미발행) · lge.co.kr/home @1440 · strong.price · @375 14/20/600 자간 normal
    fontFamily: '"Pretendard", "맑은 고딕", "malgun gothic", "돋움", "dotum", sans-serif'
    fontSize: 19px
    fontWeight: 600
    lineHeight: 26px
    letterSpacing: -0.4px
  kr-pdp-feature: # 관측(미발행) · lge.co.kr PDP @1440 · 기능 본문 p.text
    fontFamily: '"Pretendard", "맑은 고딕", "malgun gothic", "돋움", "dotum", sans-serif'
    fontSize: 18px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: 0em
  kr-gnb: # 관측(미발행) · lge.co.kr/home @1440 · a.CommonPcGnb_item · /m/home @375 같음
    fontFamily: '"Pretendard", "맑은 고딕", "malgun gothic", "돋움", "dotum", sans-serif'
    fontSize: 16px
    fontWeight: 600
    lineHeight: 22px
    letterSpacing: -0.2px
  kr-card-title: # 관측(미발행) · lge.co.kr/home @1440 · 상품 카드 제목
    fontFamily: '"Pretendard", "맑은 고딕", "malgun gothic", "돋움", "dotum", sans-serif'
    fontSize: 16px
    fontWeight: 500
    lineHeight: 22px
    letterSpacing: -0.2px
  kr-segment: # 관측(미발행) · lge.co.kr/home @1440 · 구매/구독 토글 · 선택 600 · 비선택 400 · 모바일 세그먼트 14/20 같은 규칙
    fontFamily: '"Pretendard", "맑은 고딕", "malgun gothic", "돋움", "dotum", sans-serif'
    fontSize: 16px
    fontWeight: 600
    lineHeight: 22px
    letterSpacing: 0em
  kr-pdp-body: # 관측(미발행) · lge.co.kr PDP @1440 · p.body-copy
    fontFamily: '"Pretendard", "맑은 고딕", "malgun gothic", "돋움", "dotum", sans-serif'
    fontSize: 16px
    fontWeight: 400
    lineHeight: 26px
    letterSpacing: 0em
  kr-quickmenu: # 관측(미발행) · lge.co.kr/home @1440 · 퀵메뉴 제목 · @375 12/16/400
    fontFamily: '"Pretendard", "맑은 고딕", "malgun gothic", "돋움", "dotum", sans-serif'
    fontSize: 15px
    fontWeight: 400
    lineHeight: 22px
    letterSpacing: -0.2px
  kr-promo: # 관측(미발행) · lge.co.kr/home @1440 · 프로모션 문구 · @375 13/18/400
    fontFamily: '"Pretendard", "맑은 고딕", "malgun gothic", "돋움", "dotum", sans-serif'
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0em
  kr-timedeal: # 관측(미발행) · lge.co.kr/home @1440 · 타임딜 라벨
    fontFamily: '"Pretendard", "맑은 고딕", "malgun gothic", "돋움", "dotum", sans-serif'
    fontSize: 14px
    fontWeight: 600
    lineHeight: 20px
    letterSpacing: 0em
  kr-sku: # 관측(미발행) · lge.co.kr/home @1440 · 상품 SKU · @375 11/14/400
    fontFamily: '"Pretendard", "맑은 고딕", "malgun gothic", "돋움", "dotum", sans-serif'
    fontSize: 13px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: 0em
  kr-rank-chip: # 관측(미발행) · lge.co.kr/home @1440 · 베스트 랭킹 숫자 칩
    fontFamily: '"Pretendard", "맑은 고딕", "malgun gothic", "돋움", "dotum", sans-serif'
    fontSize: 13px
    fontWeight: 600
    lineHeight: 18px
    letterSpacing: 0em
  kr-footer-sns: # 관측(미발행) · lge.co.kr/home @1440 · span.sns-name
    fontFamily: '"Pretendard", "맑은 고딕", "malgun gothic", "돋움", "dotum", sans-serif'
    fontSize: 9px
    fontWeight: 500
    lineHeight: 12px
    letterSpacing: 0em
spacing:
  ## (a) EI 브랜드 — lg.com/global 관측(미발행)
  ei-pill-padding-x: 20px   # 관측(미발행) · lg.com/global @1425 · c-button 좌우 · @360 16px
  ei-gnb-link-padding-y: 27px   # 관측(미발행) · lg.com/global @1425 · GNB 링크 상하(좌우 16px)
  ## (b) EI 커머스 — lg.com/us 관측(미발행)
  us-cta-padding-y: 12px   # 관측(미발행) · lg.com/us @1425 · Shop Now 상하 · @360 같음
  us-cta-padding-x: 16px   # 관측(미발행) · lg.com/us @1425 · Shop Now 좌우 · @360 같음
  us-tab-padding-x: 24px   # 관측(미발행) · lg.com/us @1425 · 홈 MuiTab 좌우(상하 12px) · PDP 서브 탭은 8px 0
  us-card-padding: 16px   # 관측(미발행) · lg.com/us @1425 · 추천 카드 안쪽 · @360 14px · 외부 주입 위젯일 수 있어 근거 약함
  ## (c) 국내 — lge.co.kr 관측(미발행)
  kr-section-gutter: 40px   # 관측(미발행) · lge.co.kr/home @1440 · 섹션 좌우 거터
  kr-section-padding-y: 80px   # 관측(미발행) · lge.co.kr/home @1440 · 섹션 상하 · /m/home @375 16·40px
  kr-card-image-padding: 36px   # 관측(미발행) · lge.co.kr/home @1440 · 상품 카드 이미지 면 · @375 16px
rounded:
  ## (a) EI 브랜드 — lg.com/global 관측(미발행)
  ei-pill: 999px   # 관측(미발행) · lg.com/global @1425·@360 · c-button 알약
  ei-hero-card: 28px   # 관측(미발행) · lg.com/global @1425 · c-hero-banner 카드
  ei-hero-card-sm: 20px   # 관측(미발행) · lg.com/global @360 · c-hero-banner 카드 모바일
  ei-carousel-capsule: 99px   # 관측(미발행) · lg.com/global @1425 · 이전·일시정지·다음 캡슐
  ei-hotline-card: 6px   # 관측(미발행) · lg.com/global @1425 · 푸터 윤리경영 핫라인 카드
  ## (b) EI 커머스 — lg.com/us 관측(미발행)
  us-cta: 32px   # 관측(미발행) · lg.com/us 홈·PDP @1425·@360 · Shop Now·MuiButton
  us-card: 24px   # 관측(미발행) · lg.com/us 홈·PDP @1425 · 카테고리 카드·PDP 갤러리 카드
  us-pdp-image: 16px   # 관측(미발행) · lg.com/us PDP @1425 · 갤러리 메인 이미지
  us-promo-tag: 6px   # 관측(미발행) · lg.com/us @1425 · 프로모 태그
  ## (c) 국내 — lge.co.kr :root --br-radius--* (국내 운영 CSS 이름)
  kr-radius-4: 4px   # 국내 운영 CSS --br-radius--4
  kr-radius-6: 6px   # 국내 운영 CSS --br-radius--6
  kr-radius-8: 8px   # 국내 운영 CSS --br-radius--8
  kr-radius-10: 10px   # 국내 운영 CSS --br-radius--10
  kr-radius-12: 12px   # 국내 운영 CSS --br-radius--12
  kr-radius-14: 14px   # 국내 운영 CSS --br-radius--14 · 상위 관측 표본에 없음
  kr-radius-16: 16px   # 국내 운영 CSS --br-radius--16
  kr-radius-18: 18px   # 국내 운영 CSS --br-radius--18
  kr-radius-20: 20px   # 국내 운영 CSS --br-radius--20
  kr-radius-24: 24px   # 국내 운영 CSS --br-radius--24 · 상위 관측 표본에 없음
  kr-radius-50: 50px   # 국내 운영 CSS --br-radius--50
  kr-radius-60: 60px   # 국내 운영 CSS --br-radius--60
elevation:
  kr-box-shadow-base: 2px 4px 12px 0 oklch(0 0 0 / 0.16)   # 국내 운영 CSS --box-shadow--base = 2px 4px 12px 0 rgba(0,0,0,.16) · 쓰는 컴포넌트 미확인
---

## Brand & Style

LG전자는 에너지의 Active Red와 로고를 받치는 Heritage Red, 두 빨강을 Warm Grey·흰색·검정의 중립 위에 올리고, 제품의 둥근 형태에서 온 EI 폼과 자체 서체 LG EI로 "기술에 미소를 담는" Emotionally Intelligent Design을 그리는 가전 브랜드다 [src:1][src:3][src:4][src:5].

**범위.** 이 항목은 LG전자 하나만 다룬다. 지주사 ㈜LG의 CI나 LG U+ 같은 계열사는 범위 밖이다. 로고 페이지는 얼굴 마크가 1995년에 도입됐다고만 적고 그 마크의 디자인 주체·연혁이 어디에 속하는지 서술하지 않으므로, 이 항목도 그 역사를 LG전자 고유의 것이라고 단정하지 않는다 [src:2]. 같은 회사 안에서도 표면이 둘로 갈린다. **lg.com** 은 LG EI 아이덴티티를 적용한 글로벌 사이트이고(브랜드 면 lg.com/global, 커머스 면 lg.com/us), **lge.co.kr** 은 Pretendard만 로드하고 `--color-set--*`·`--br-radius--*`·`--fw--*` 라는 자체 이름 체계를 쓰는 별도 플랫폼이다 [src:12][src:13][src:15]. 그래서 토큰은 세 그룹으로 갈라 두었다 — (a) EI 브랜드는 발행물과 lg.com/global 관측, (b) EI 커머스는 lg.com/us 관측(`us-` 접두), (c) 국내는 lge.co.kr 운영 CSS 이름과 관측(`kr-` 접두)이다. 관측값은 2026-10-03에 lg.com 1425·360폭, lge.co.kr 1440폭과 모바일 웹 375폭에서 잰 것이고, 발행되지 않은 값이다.

**철학.** 디자인 철학 Emotionally Intelligent Design은 Emotionally(We bring warmth), Intelligent(and innovation), Design(to all we design) 세 낱말로 풀리고, 목적은 기술에 미소를 담아 모든 LG 경험이 지적이면서 인간적으로 느껴지게 하는 것이다 [src:1]. 국내 VI는 같은 철학을 "기술에 미소를 담고, 감성과 이성의 균형을 이루며"로 옮긴다 [src:10]. 아이덴티티 인덱스는 시스템을 Logo, Color & Gradients, Photography, Typography, Slogan, Voice, Design System 일곱 요소로 나열한다 [src:1]. 2023-04-12 뉴스룸 발표가 이 새 아이덴티티를 공개하며 시그니처 'LG Red' 에 'LG Active Red' 를 더해 모든 고객 접점에 쓴다고 했고 [src:21], 국내 새 VI 소개 스토리도 새 색을 'LG 액티브 레드' 하나로 소개한다 [src:26].

**얼굴.** 로고는 워드마크와 원형 얼굴 마크(face mark)로 이루어지고, 웃는 로고가 인간성과 지성이라는 두 기둥을 신호한다 [src:2]. 국내 BI는 이 심볼을 미소 짓는 '미래의 얼굴' 이라 부르고, 원 안의 L과 G가 사람이 기업이념의 중심에 있음을 상징한다고 쓴다 [src:11]. 로고는 Digital Logo Play로 까딱이고 인사하고 윙크한다(Appearing, Bobbing to music, Bowing, Look around, Amazed, Spinning, Nodding, Wink 8종) [src:2][src:10].

**화면의 결.** 세 표면의 밀도가 다르다. lg.com/global은 `{colors.warm-grey}` 헤더 띠와 바탕 위에 풀블리드 사진 캐러셀과 28px 둥근 카드 두 장을 놓는, 여백이 큰 브랜드 면이다 [src:12]. lg.com/us는 MUI 기반이라 같은 Warm Grey 위에서도 프로모 띠·혜택 띠·빨간 알약 CTA가 이어지는 정보 밀도 높은 커머스 면이다 [src:13]. lge.co.kr는 바탕이 흰색이고 두 줄 GNB, 풀블리드 히어로, 원형 아이콘 14개 퀵메뉴, 프로모 배너와 상품 카드가 빽빽하게 이어지는 한국 커머스형 밀도다 [src:15].

**사진과 말투.** 사진은 세 역할(Everyday Life, Energy/Passion/Interests, Products)과 여섯 원칙(authenticity, positive and joyful, warmth, breathing space, diversity, attention to detail)이 이름으로 발행돼 있고, 인물 사진은 Active Red 배경, 제품 사진은 Warm Grey 배경 위 예시가 실려 있다 [src:6]. 보이스는 "We write with a Smile", "We write with Insight", "We write with Design" 세 원칙이고, 축하할 때는 Smile, 설명할 때는 Insight, 디지털 안내에는 Design 쪽으로 비율을 바꾼다 [src:7]. 관측 카피도 그렇게 갈린다 — 글로벌 면은 "Free up your mind for the stuff that matters." 같은 마침표로 끝나는 두 줄 문장형이고 [src:12], US 버튼은 Shop Now·Add to Cart 같은 두세 단어 명령형이며 [src:13][src:14], 국내 홈은 "놓치기 아쉬운 특별한 가격" 같은 명사구 부제와 '최대혜택가'·'타임딜 D-3' 같은 명사 라벨+숫자를 쓴다 [src:15]. 국내 보이스 가이드는 발행되지 않았다 [src:10][src:11].

## Colors

**발행 팔레트는 정확히 다섯이다.** color 페이지가 이름 붙여 발행한 색은 `{colors.active-red}`·`{colors.heritage-red}`·`{colors.warm-grey}`·`{colors.white}`·`{colors.black}` 다섯이고, 틴트나 상태색은 없다 [src:3]. 페이지는 "At our core, LG has always been a red brand." 라고 쓰고, Active Red가 에너지와 설렘을, Heritage Red가 레거시 브랜드 마크(로고)를 받치며, Warm Grey·White·Black이 중립으로 균형을 되찾는다고 역할을 나눈다 [src:3]. 국문 VI도 같은 다섯 값을 싣고 "우리의 브랜드 색상은 항상 Red였습니다" 라고 쓴다 [src:10]. 뉴스룸은 베이스 레드를 'Heritage Red' 가 아니라 'LG Red' 로 부른다 [src:21]. 코어 팔레트는 Adaptable Color System으로 "calm and minimal" 에서 "bold and immersive" 까지 확장되고 접점마다 colorway 비율을 쓰지만, 비율 수치는 서술로 발행되지 않았고 페이지의 색 칩 막대 폭으로만 있다 — 토큰이 아니다 [src:3].

**빨강이 다섯 갈래로 갈린다.** 이 항목에서 가장 틀리기 쉬운 자리다. 커머스 CTA 채움과 국내 `--color-set--red` 는 발행 Active Red가 아니라 그보다 어둡고 채도가 낮은 다른 값이고, 국내 CSS에서 Active Red와 같은 값을 갖는 변수는 `--color-set--red-orange2` 다 [src:3][src:13][src:15]. 두 사이트의 그 커머스 레드가 같은 출처라는 것은 확인되지 않은 해석이다(lg.com/us의 서드파티 Sprinklr 위젯도 같은 값으로 테마돼 있다) [src:13].

| 토큰 | 근거 등급 | 관측된 쓰임 |
| --- | --- | --- |
| `{colors.active-red}` | 발행 | 브랜드의 에너지 레드 — 인물 사진 배경, 슬로건 Active Red 컬러웨이 [src:3][src:6][src:8] |
| `{colors.heritage-red}` | 발행 | 로고 심볼 · lg.com/global 헤더 로고 심볼, 사이트 아이콘 원판 [src:3][src:12][src:20] |
| `{colors.us-cta-red}` | 관측(미발행) | lg.com/us 'Shop Now'·'Add to Cart' 알약 채움 [src:13][src:14] |
| `{colors.kr-red}` | 국내 운영 CSS 이름 | 국내 홈 카드 가격·'최대혜택가' 로 보인다(개수 짝짓기에 기댄 해석) [src:15] |
| `{colors.kr-red-orange2}` | 국내 운영 CSS 이름 | 국내 PDP '최대혜택가' 금액·'D-3' 글자(관측) [src:17] |

`{colors.active-red}` 와 `{colors.kr-red-orange2}`, `{colors.us-cta-red}` 와 `{colors.kr-red}` 처럼 값이 같은 토큰이 그룹마다 따로 있는 것은 의도다. 값이 같아도 근거와 표면이 다르므로 한 이름으로 합치지 않았다. 국내 PDP '닷컴 ONLY' 원형 뱃지 면이 `{colors.kr-red-orange2}` 라는 것도 픽셀이 단색으로 같다는 데서 나온 해석이다 [src:17]. 국내에는 `--color-set--*` 어디에도 없는 레드도 두 값 있다(PDP 글자 14건, 홈 글자 1건) — 토큰으로 만들지 않았다 [src:15][src:17].

**중립은 그룹마다 다르다.** lg.com 두 사이트는 헤더와 섹션 바탕에 `{colors.warm-grey}` 를 쓰고, US는 그 위에 맨 위 프로모 띠 `{colors.us-promo-bar}`, 혜택 띠·브레드크럼 `{colors.us-strip-bg}`, PDP 탭 행 `{colors.us-tab-row-bg}` 를 더한다 [src:12][src:13][src:14]. `{colors.us-strip-bg}` 는 Warm Grey와 이웃한 값이지만 발행 Warm Grey의 단계가 아니므로 그렇게 이름 붙이지 않았다 [src:13]. US 글자는 `{colors.us-ink-strong}`·`{colors.us-ink-muted}` 가 관측됐다 [src:13][src:14]. 국내는 바탕이 `{colors.kr-white}` 이고 lg.com의 Warm Grey 바탕을 쓰지 않는다 [src:15]. 국내 글자에서 가장 많이 관측된 값은 `{colors.kr-black111}` 이고, `{colors.kr-navy*}` 12단계 중 navy11은 GNB 브랜드 알약과 배경에, navy12는 PDP 타임딜 박스에 쓰인다 [src:15][src:17]. 국내 `:root` 의 `--color-set--*` 은 LG가 운영 CSS에 이름 붙인 값일 뿐 문서로 발행되지 않았고, `{colors.kr-gray300}` 과 `{colors.kr-whisper}` 처럼 값이 같은 별칭도 원 이름 그대로 둘 다 실었다 [src:15].

**프로모 색은 상태색이 아니다.** US PDP의 리워드 칩·패널은 `{colors.us-reward-bg}` 면에 `{colors.us-reward-ink}` 글자이고, '0% APR' 배지의 인디고는 서드파티 Affirm 위젯 값이다 [src:14]. 둘 다 프로모 맥락의 관측이라 success 같은 시맨틱 상태로 승격하지 않았다. 상태색(error/success/warning/info)은 발행물에도 국내 운영 CSS 이름에도 없다 [src:3][src:15]. 이 항목은 `primary` 토큰도 두지 않는다 — 어느 빨강을 대표로 삼을지는 별칭으로 고정하지 않았다.

**그라디언트는 넷이지만 값은 없다.** 네 그라디언트는 JPG 자산으로만 발행돼 CSS 스톱이 없고, 그래서 이 항목은 `gradients:` 맵을 두지 않는다 [src:3]. 서술과 사용 모드만 옮긴다.

| 이름 | 서술 | 사용 모드 |
| --- | --- | --- |
| Gradient 01 | 흰 바탕 위 Active Red 톤의 연한 빛→분홍 | Light Mode Usage Only |
| Gradient 02 | Active Red 톤의 중간 톤 분홍→빨강 | Light & Dark Mode Usage |
| Gradient 03 | Active Red 톤의 대담한 빨강→분홍 | Dark & Light Mode Usage |
| Gradient 04 | 짙은 `{colors.heritage-red}` → `{colors.black}` | Dark Mode Usage Only |

사용 모드 태그는 슬라이더 스크립트가 슬라이드마다 바꾸므로, 정적 마크업의 "Light Mode Usage Only" 만 보고 넷 모두 라이트 전용이라고 읽으면 틀린다 [src:3]. 국문 VI의 대체 텍스트는 01 흰색에 연한 분홍, 02 흰색에 연한 붉은색, 03 붉은색에 흰색, 04 짙은 붉은색에 검정으로 적는다 [src:10]. 재현한다면 "근사" 라고 표기해야 한다.

**로고 색 변형은 넷이다.** Heritage Red on grey(붉은 심볼 + 회색 워드마크, 밝은 배경용 — 회색 배경이라는 뜻이 아니다), Heritage Red on white(붉은 심볼 + 흰 워드마크), mono black, mono white다 [src:2][src:9]. 로고 페이지 슬라이더는 light background에 Heritage Red on grey, dark·dark gradient·dark image에 mono white, light gradient·light image에 mono black을 짝짓고, Heritage Red on white에는 짝이 없다 [src:2]. 국내 BI 이미지의 여섯 짝도 같다 [src:11]. 로고 SVG의 회색 워드마크 채움은 자산 채움일 뿐 토큰이 아니다 [src:2][src:19].

## Typography

**브랜드 서체는 LG EI 두 갈래다.** LG EI Headline은 캠페인 헤드라인·히어로 키 비주얼·옥외 광고의 임팩트를, LG EI Text는 본문·UI의 가독성을 맡는다 [src:4]. 페이지는 이 둘을 "two weights" 라고 쓰지만 실제로는 별개의 두 서체다 [src:4]. 서체의 성격은 바깥은 기하학적 외곽(혁신 기술), 안쪽은 둥근 모서리와 손글씨에서 온 획(따뜻함·감성)으로 서술된다 [src:4]. Headline은 레거시 LG Smart를 이어받아 기하를 현대화했고 "100% OpenType compatible" 이며, Text는 LG Smart UI 서체를 대체한다 [src:4]. 발행 굵기는 두 서체 모두 Light·Regular·Semibold·Bold 네 이름뿐이고 숫자 굵기는 없다 [src:4]. 산돌의 LG EI Headline 다국어 개발 보도는 다섯 고정 웨이트와 베리어블 폰트로 만들었다고 쓰지만, 굵기 이름이 없고 발행된 네 단계와 어긋나 해석으로만 둔다 [src:23]. 산돌 포트폴리오는 LG EI Headline을 EN·VN·GREEK 지원, Released 2023으로 소개한다(KR 라벨 없음) [src:22]. 서체 파일 name 테이블은 Headline이 산돌, Text가 윤디자인 제작이고, Text의 저작권 연도(2019)가 아이덴티티 발표(2023)보다 앞선다 [src:18][src:21].

**웹 패밀리 문자열은 발행명과 철자가 다르다.** lg.com은 공백 없는 `"LGEI Headline"`·`"LGEI Text"` 로 로드하므로 토큰 값은 CSS 문자열(`{fonts.ei-headline}`·`{fonts.ei-text}`)로 쓰고 발행명은 줄 주석에 두었다 [src:12]. lg.com/global은 Headline 600과 Text 300·400·600을, lg.com/us는 Headline 500·700과 Text 400·500·700을 로드해 두 사이트의 굵기 집합이 다르다 — 한 타입 스케일을 공유한다고 볼 수 없다(해석) [src:12][src:13]. 그래서 (a)와 (b)를 따로 실었다.

**국내는 Pretendard다.** lge.co.kr는 Pretendard 400·500·600·700만 로드하고 LG EI를 쓰지 않으며, 그 사유는 발행되지 않았다 [src:15]. 스택은 국내 `--font-family` 원문 순서 그대로 `{fonts.kr-sans}` 이고, 굵기 변수 `--fw--400`~`--fw--700` 은 있지만 크기·줄높이·자간 변수는 없다 [src:15]. (c) 국내형 화면의 한글은 이 스택을 쓴다 — LG EI 두 서체의 한글 글리프 범위는 확인되지 않았다 [src:4][src:18]. (a)·(b) 표면에서 한글을 어느 스택으로 그리는지는 관측하지 않았다.

**스케일은 전부 관측이다.** frontmatter `typography:` 는 세 그룹으로 나뉘고 각 스타일 줄 주석에 페이지·폭·클래스와 모바일 값을 적었다. 줄높이와 자간은 관측 px 그대로이고 자간 normal은 `0em` 이다.

- (a) 글로벌은 `{typography.ei-hero}` 56/60 Headline 히어로, `{typography.ei-page-title}` 36/42 Text 300 페이지 제목(카드 제목에도), `{typography.ei-nav}`·`{typography.ei-body}`·`{typography.ei-button}` 으로 이어지고 자간은 전부 normal이다 [src:12]. AEM 래퍼 클래스 `font-w-*`·`font-m-*` 가 웹/모바일 크기 짝을 단다. 클래스 이름의 'light' 는 히어로의 계산 굵기 600과 어긋나므로 굵기 근거가 아니다 [src:12].
- (b) US는 `{typography.us-section-title}` 40/43.2 Headline 700 -0.4px를 정점으로 MUI 변형 이름을 따른다. body3·subtitle3·buttonMedium은 MUI 기본에 없는 이름이라 LG가 테마에서 확장한 것으로 보이고, body2는 문맥별로 여러 값으로 나와 변형 이름만으로 토큰을 정하면 안 된다(해석) [src:13][src:14]. 폭별 자간 값 자체는 관측이지만, 자간이 em 비례가 아니라 px 고정이라는 규칙은 20→18·28→22 짝에서 끌어낸 해석이다 [src:13][src:14].
- (c) 국내는 PDP 에디토리얼 `{typography.kr-pdp-display}` 48/66부터 푸터 SNS 라벨 `{typography.kr-footer-sns}` 9/12까지이고, 제목·가격 계열에 -0.5~-0.2px 음수 자간을 준다 [src:15][src:17]. `{typography.kr-hero}` 는 히어로의 라이브 헤드라인이다. 국내 히어로의 큰 할인 문구("남다르게 ~59% SALE")는 이미지 속 글자라서 라이브 텍스트 스케일이 아니다 [src:15].

**프리뷰와 소비자 코드는 서체 파일을 싣지 않는다.** LG EI 서체 zip에는 LICENSE/EULA가 없고 name 테이블이 All rights reserved이며 [src:18], 산돌 보도는 "exclusively for LG Electronics" 라고 쓰고 [src:24], 국내 브랜드 자산 페이지도 일반 저작권 고지뿐이다 [src:25]. 재배포·웹 자체 호스팅을 허락한 근거가 없으므로 `font-display-src` 를 두지 않았고, LG EI 자리는 폴백 스택으로 렌더된다.

**슬로건은 조판하지 않는다.** 'Life's Good.' 은 2005년부터의 브랜드 슬로건이고 [src:8], LG EI가 아니라 제품 실루엣을 재해석한 자체 글자꼴의 세리프 락업이며 서체 이름은 발행되지 않았다 [src:9][src:10]. 컬러웨이는 Active Red(디지털 에너지)·Black(프리미엄·에디토리얼)·White(그라디언트·이미지 위)이고 승인 조합 여섯이 발행돼 있으며, 국문 VI의 네 번째 조합은 배경이 글로벌과 다르다 [src:8][src:10].

## Spacing

어느 표면에도 이름 붙은 spacing 체계는 없다. 국내 운영 CSS에도 `--sp`·`--gap` 류 변수가 없다 [src:15]. frontmatter `spacing:` 은 그래서 스케일이 아니라 컴포넌트에서 잰 패딩 몇 개다.

- (a) 글로벌 알약 버튼 좌우 `{spacing.ei-pill-padding-x}` 20px(@360 16px), GNB 링크 상하 `{spacing.ei-gnb-link-padding-y}` 27px·좌우 16px [src:12].
- (b) US CTA `{spacing.us-cta-padding-y}`·`{spacing.us-cta-padding-x}` 12px 16px(두 폭 동일), 홈 탭 좌우 `{spacing.us-tab-padding-x}` 24px, 추천 카드 안쪽 `{spacing.us-card-padding}` 16px(@360 14px) [src:13][src:14]. 마지막 값은 외부 주입 위젯일 수 있는 카드의 것이라 근거가 약하다 [src:13].
- (c) 국내 섹션 좌우 거터 `{spacing.kr-section-gutter}` 40px, 섹션 상하 `{spacing.kr-section-padding-y}` 80px(@375 16·40px), 상품 카드 이미지 면 `{spacing.kr-card-image-padding}` 36px(@375 16px) [src:15][src:16].

글로벌 첫 화면 카드 열의 좌우 여백 약 24px과 캐러셀–카드 사이 약 95px은 픽셀 스캔 해석이다 [src:12]. 관측은 padding·gap만 모았고 margin과 섹션 간격은 수집하지 않았다 [src:12][src:15].

발행된 간격 규칙은 로고 클리어스페이스뿐이다. 기준 X는 얼굴 심볼 지름이고, 심볼–워드마크 간격 0.225X, 워드마크 높이 0.65X(위아래 0.175X), 사방 클리어스페이스 0.15X다 [src:2]. 다이어그램의 '4mm/16px' 콜아웃을 최소 크기로 읽는 것은 해석이다 [src:2].

## Rounded

**국내만 반경 스케일을 이름 붙여 가진다.** lge.co.kr `:root` 의 `--br-radius--*` 12단계가 `{rounded.kr-radius-4}` 부터 `{rounded.kr-radius-60}` 까지다 [src:15]. 관측된 국내 반경 4·6·8·10·12·16·18·20·50·60px은 이 단계 값과 같다 — 팝업 16px, 모바일 프로모 배너 8px, 검은 토글 50px, 바텀시트 상단 20px이 그 예다. 다만 같은 값이라는 것이지 클래스가 변수를 참조한다는 명시적 매핑은 아니다(해석) [src:15][src:16]. 단계 밖의 국내 관측값도 있다: PDP 하단 에디토리얼 영역(visual-area) 25px, 문의 입력창 56px, 칩·흰 버튼 100px, GNB 브랜드 알약 999px [src:15][src:17].

**lg.com 반경은 전부 관측이다.** 글로벌은 알약 `{rounded.ei-pill}`, 히어로 카드 `{rounded.ei-hero-card}`(@360 `{rounded.ei-hero-card-sm}`), 캐러셀 캡슐 `{rounded.ei-carousel-capsule}`, 핫라인 카드 `{rounded.ei-hotline-card}` 이다 [src:12]. US는 CTA `{rounded.us-cta}`, 카드 `{rounded.us-card}`, PDP 메인 이미지 `{rounded.us-pdp-image}`, 프로모 태그 `{rounded.us-promo-tag}` 이다 [src:13][src:14]. MUI 기본값(Paper 8px, IconButton 4px)과 서드파티 위젯 반경(Sprinklr·Qualtrics·onetrust·Affirm)은 LG 값이 아니라 싣지 않았다 [src:12][src:13][src:14].

**'알약' 은 한 이름에 담기지 않는다.** 글로벌 버튼 999px, US CTA 32px, 국내 토글 50px, 국내 칩 100px로 그룹마다 값이 다르고, 카드도 글로벌 28→20px, US 24px, 국내 배너 16→8px로 다르다 [src:12][src:13][src:15][src:16]. 원형 버튼·뱃지·퀵메뉴 이미지의 `%` 반경(50%·100%)은 `rounded:` 에 넣지 않고 여기 산문으로만 적는다 [src:13][src:15].

## Elevation & Depth

그림자 근거는 국내 운영 CSS의 `{elevation.kr-box-shadow-base}` 한 줄뿐이고, 어느 컴포넌트가 이 값을 쓰는지는 확인하지 못했다 [src:15]. lg.com 관측은 box-shadow를 수집하지 않았으므로 lg.com에 그림자가 없다는 증거로 읽으면 안 된다 [src:12].

관측된 깊이는 그림자보다 면의 층으로 만들어진다. 글로벌은 풀블리드 사진 위에 흰 헤드라인과 흰 알약을 얹고, 그 아래 `{colors.warm-grey}` 바탕에 둥근 카드를 놓는다 [src:12]. US는 `{colors.us-promo-bar}` → `{colors.warm-grey}` → `{colors.us-strip-bg}` 로 띠를 겹친다 [src:13]. 국내는 흰 바탕 위 연한 회색 이미지 면과 쿠폰 팝업·바텀시트 같은 위로 뜬 레이어로 층을 나눈다 [src:15][src:16].

움직임은 개념만 발행됐다. EI 폼은 정지 시 단순한 기하로 있다가 스크롤·호버·주변 콘텐츠에 반응해 흐르고 [src:5], 로고는 Digital Logo Play 8종으로 움직인다 [src:2]. duration·easing 수치는 발행·관측 모두 없다 [src:5][src:12].

## Shapes

**발행된 형태 언어는 EI 폼이다.** 숫자 반경 없이 square, circle, stadium, hourglass, crescent라는 이름의 코어 폼으로 발행되고, 상태에 따라 개수가 다르다 — Connected(유동) 상태는 다섯 폼 전부, Core(정지) 상태는 hourglass를 뺀 넷이다 [src:5]. 폼은 TV 베젤의 곡선, 세탁기 다이얼, 냉장고 문의 부드러운 모서리 같은 LG 제품의 둥글고 친근한 형태에서 나왔다고 발행돼 있고 [src:5], 국내 VI는 기본 EI 폼이 "모서리 부분이 둥글게 디자인되어 따뜻하고 부드러운 느낌" 을 준다고 쓴다 [src:10]. 국내 VI의 도형 서술은 글로벌 이름과 1:1로 맞지 않는다 [src:10]. 레이아웃 모드는 Hero(대담한 브랜드 표현)·Connect(사람과 제품을 잇기)·Focus(제품 하나를 중심에) 셋이다 [src:5][src:10].

**EI Lens는 원과 사각 두 변형이다.** 본문은 콘텐츠를 배경 이미지에 잇는 "circular form" 이라 하지만 탭 영상은 Intelligent(circle)와 Respectful(square) 두 변형을 보여 주고, 치수는 발행되지 않았다 [src:5]. 국내 VI는 렌즈의 두 동작('스마트하게 움직이다'·'사용자에 맞춰 반응하다')을 서술한다 [src:10].

**화면의 곡률은 둥근 쪽이지만 직각이 함께 있다.** 관측된 알약·원·둥근 카드가 lg.com 화면의 지배적 형태이고, 이것을 EI 폼과 잇는 것은 해석이다 [src:5][src:12]. 직각도 함께 관측된다 — 글로벌 상단 캐러셀은 좌우 풀블리드에 직각 모서리이고 [src:12], 국내 PDP 메인 이미지도 직각이다(25px은 하단 에디토리얼 영역의 값이다) [src:17]. 로고의 얼굴 마크는 원이고, 사이트 아이콘은 그 심볼만 `{colors.heritage-red}` 원판으로 쓴다 [src:2][src:20].

## Components

아래 컴포넌트는 전부 관측(미발행)이고 이름은 이 항목이 붙였다. 상호작용 상태(hover·focus·pressed·disabled)는 정적 캡처라 거의 관측되지 않았으므로 스펙에 적지 않는다 [src:14]. 서드파티 위젯(Sprinklr 챗, Affirm 배지, Qualtrics 피드백 탭, onetrust 쿠키 배너)은 컴포넌트로 싣지 않았다 [src:12][src:13][src:14]. 단위는 px다.

### ei-gnb

글로벌 GNB는 `{colors.warm-grey}` 면 한 줄이다. 메뉴 링크는 `{typography.ei-nav}` 에 상하 `{spacing.ei-gnb-link-padding-y}`·좌우 16px이고, 아웃링크(Business ↗, Careers ↗)는 16/18이다 [src:12]. 로고 락업은 심볼 `{colors.heritage-red}` 와 회색 워드마크의 SVG다 [src:12][src:19].

```text
ei-gnb                                                      [src:12]
  surface    {colors.warm-grey}
  link       {typography.ei-nav} · padding {spacing.ei-gnb-link-padding-y} / 16
  outlink    16/18 400 · Business ↗ · Careers ↗
  height     76 (27 + 22 + 27 로 계산 — 해석)
```

### ei-pill-button

사진 위에 놓이는 흰 알약 'Learn more' 다. 흰 면에 검정 글자, 반경 `{rounded.ei-pill}` 이고 360폭에서도 반경은 유지된다 [src:12].

```text
ei-pill-button                                              [src:12]
  surface    {colors.white} · label {colors.black}
  size       121×44 @1425 → 103×36 @360
  radius     {rounded.ei-pill}
  padding-x  {spacing.ei-pill-padding-x} (@360 16)
  label      {typography.ei-button} (@360 14/14 600)
```

```tsx
// 사진 위 흰 알약 — fill {colors.white}, radius {rounded.ei-pill}
<PillButton tone="light">Learn more</PillButton>
```

### ei-carousel-capsule

글로벌 히어로 캐러셀의 컨트롤은 이전·일시정지·다음을 하나로 묶은 캡슐이다. 진행 표시는 왼쪽 아래 가로 선 4칸이다 [src:12]. 모바일도 같은 캡슐을 쓴다. US 히어로는 이 캡슐 대신 짙은 원형 컨트롤 셋을 따로 놓아 배치가 다르다 [src:13].

```text
ei-carousel-capsule                                         [src:12]
  size       82×28
  radius     {rounded.ei-carousel-capsule}
  surface    {colors.black} 알파 0.6 (반투명 검정)
  icons      이전 · 일시정지 · 다음
  progress   왼쪽 아래 가로 선 4칸
```

### ei-hero-card

글로벌 첫 화면 캐러셀 아래 카드 열의 카드다. 사진 위에 제목·설명·알약을 얹고, 1425폭에서 두 장이 한 줄로 놓인다 [src:12].

```text
ei-hero-card                                                [src:12]
  radius     {rounded.ei-hero-card} @1425 → {rounded.ei-hero-card-sm} @360
  height     550 @1425 → 480 @360
  title      {typography.ei-page-title} (@360 28/32 300)
  action     {component.ei-pill-button}
  layout     2열 @1425 → '1 / 2' 페이저가 붙은 1열 캐러셀 @360 (다음 카드가 우측에 걸쳐 보인다)
```

### ei-footer

글로벌 푸터는 6열 사이트맵 층, 짙은 법적 링크 띠, 오른쪽 아래 흰 윤리경영 핫라인 카드로 이루어진다 [src:12]. 두 층의 색은 베이지 사이트맵 층과 짙은 회색 법적 띠로만 적는다 — 정확한 값은 추정이라(해석) 토큰으로 잇지 않는다 [src:12].

```text
ei-footer                                                   [src:12]
  sitemap    베이지 층 · 6열 · 1뎁스 {typography.ei-footer-depth1}
  legal      짙은 회색 띠
  hotline    흰 카드 271×66 · {rounded.ei-hotline-card}
```

### us-header

US 헤더는 두 층이다. 맨 위 `{colors.us-promo-bar}` 프로모 띠(높이 39, 슬라이드 카운터 '2 / 4' 는 `{typography.us-caption}`) 아래 `{colors.warm-grey}` 내비 행이 있다 [src:13].

```text
us-header                                                   [src:13]
  promo bar  {colors.us-promo-bar} · 높이 39 · 카운터 {typography.us-caption}
  nav row    {colors.warm-grey} · Shop ⌄ · Parts & Accessories ⌄ · Support (18/24 500)
  icons      40×40 아이콘 버튼 셋 (검색 · 계정 · 장바구니)
```

### us-cta-pill

US의 1차 행동 버튼이다. 홈 히어로 'Shop Now', PDP 요약 바 'Add to Cart'(약 161×42), "Discover LG Deals" 아래 'View All Deals' 가 같은 빨간 알약이다 [src:13][src:14]. 이 채움을 Active Red라고 부르지 않는다.

```text
us-cta-pill                                                 [src:13][src:14]
  fill       {colors.us-cta-red} · label {colors.white}
  size       106×42 @1425 → 296×42 @360 (높이·패딩·반경 유지)
  radius     {rounded.us-cta}
  padding    {spacing.us-cta-padding-y} / {spacing.us-cta-padding-x}
  label      16/16 700 · 구매 박스 버튼은 {typography.us-pdp-button}
```

```tsx
// fill {colors.us-cta-red}, radius {rounded.us-cta} — Active Red 가 아니다
<CtaPill>Shop Now</CtaPill>
```

### us-outline-pill

PDP 요약 바에서 빨간 알약 아래 놓이는 'Special Offers' 흰 외곽선 알약이다. 앞에 태그 아이콘이 붙는다 [src:14].

```text
us-outline-pill                                             [src:14]
  surface    {colors.white} · 외곽선
  size       약 161×44 (테두리 포함)
  radius     {rounded.us-cta}
  icon       태그
```

### us-tab

홈 카테고리 탭(Top Deals·Kitchen·Laundry)과 PDP 서브 탭(Overview·Specifications)이다 [src:13][src:14]. PDP 서브 탭의 활성 탭은 빨간 밑줄로 표시하고 (값 미측정) [src:14], 홈 카테고리 탭의 활성 표시는 기록되지 않았다.

```text
us-tab                                                      [src:13][src:14]
  home tab   padding 12 / {spacing.us-tab-padding-x} · label {typography.us-button-medium}
  pdp tab    padding 8 / 0 · 탭 행 {colors.us-tab-row-bg}
  pdp active 빨간 밑줄 (값 미측정)
```

### us-reward-chip

PDP 제품명 위의 소형 칩('5% Back MyLG Rewards', 'LG.com Exclusive', 'New')이다. 프로모 맥락의 초록이라 success 상태색으로 쓰지 않는다 [src:14].

```text
us-reward-chip                                              [src:14]
  surface    {colors.us-reward-bg}
  label      {colors.us-reward-ink} · {typography.us-chip-small}
```

### us-category-card

US 홈의 카테고리 카드는 카드 전체가 흰 면이고 라벨이 카드 안에 들어간다 [src:13].

```text
us-category-card                                            [src:13]
  surface    {colors.white} · 214×254
  radius     {rounded.us-card}
  label      카드 안 {typography.us-subtitle3}
```

### us-trust-strip

US 히어로 바로 아래 `{colors.us-strip-bg}` 띠에 배송·반품·보증 링크를 늘어놓는 줄이다(Free Delivery >, 14 Day Return >, Extended Coverage >) [src:13]. 높이 약 72px은 해석이다 [src:13].

### us-pdp-gallery

US PDP 갤러리는 둥근 카드 안에 메인 이미지와 왼쪽 세로 썸네일을 둔다 [src:14].

```text
us-pdp-gallery                                              [src:14]
  card       684×628 · {rounded.us-card}
  image      524×524 · {rounded.us-pdp-image}
  thumbs     왼쪽 세로 4장 · 선택 시 검은 테두리
  arrows     38×38 원형 · 처음엔 이전 화살표가 비활성
  favorite   우상단 하트
  summary    제품명 {typography.us-subtitle3} · 가격 {typography.us-subtitle1}
  benefits   {colors.us-strip-bg} 바깥 박스 684×92 · 반경 16 · 안에 연한 초록 패널과 1/3 페이저
```

### kr-gnb

국내 GNB는 두 줄이다. 윗줄은 로고·아이콘 3개·회사소개/지속가능경영/사업자몰(13/40), 아랫줄은 메뉴 8개와 브랜드 알약이다 [src:15]. '스토리' 옆에 붉은 점, 끝에 붉은 집 모양 '홈스타일' 태그가 붙는다 [src:15]. 모바일 웹은 메뉴를 가로 스크롤하고 양 끝에 원형 ‹ › 버튼을 둔다 [src:16].

```text
kr-gnb                                                      [src:15][src:16]
  top row    로고 · 아이콘 3 · 유틸 링크 13/40 · 좌우 40 (@375 20)
  menu row   메뉴 8개 {typography.kr-gnb} · 좌우 40 (@375 66, 양 끝 화살표 자리)
  brand pill {colors.kr-navy11} · 371×36 · 반경 999 · 브랜드 4개
  accents    '스토리' 붉은 점 · '홈스타일' 붉은 집 모양 태그
```

### kr-segment-toggle

가전 구독 맥락의 구매/구독 토글이다. 선택 칸은 검은 알약이고, 상태는 글자 굵기로도 구분한다 — 선택 600, 비선택 400 [src:15]. 모바일 웹의 세그먼트 탭도 14/20에서 같은 규칙을 쓴다 [src:16].

```text
kr-segment-toggle                                           [src:15][src:16]
  item       70×40 · {rounded.kr-radius-50} · 좌우 20
  label      {typography.kr-segment} · 선택 600 / 비선택 400
  selected   검은 알약
  mobile     탭 156×40 · {rounded.kr-radius-10} · 컨테이너 320×48 · {rounded.kr-radius-12} · 글자 14/20 같은 규칙
```

```tsx
// 선택 상태는 굵기 600, 비선택 400 — 라벨 {typography.kr-segment}
<SegmentToggle options={["구매", "구독"]} value="구매" />
```

### kr-category-chip

국내 홈의 카테고리 칩이다. 반경이 국내 단계 밖의 100px이다 [src:15]. 모바일 베스트 랭킹 칩은 높이 36·좌우 14px이다 [src:16].

```text
kr-category-chip                                            [src:15][src:16]
  desktop    70×40 · 반경 100 · 좌우 16
  mobile     베스트 랭킹 칩(별개 요소) 높이 36 · 좌우 14
```

### kr-product-card

국내 상품 카드는 연한 회색 둥근 이미지 면 아래 제품 정보를 쌓는다 [src:15]. 가격 색이 `{colors.kr-red}` 라는 것, 뱃지 면이 `{colors.kr-red-orange2}` 라는 것은 각각 개수 짝짓기와 PDP 픽셀에 기댄 해석이다 [src:15][src:17].

```text
kr-product-card                                             [src:15][src:17]
  image      연한 회색 둥근 면 · padding {spacing.kr-card-image-padding} (@375 16)
  name       {typography.kr-card-title}
  sku        {typography.kr-sku}
  spec       스펙 한 줄
  price      '최대혜택가' 라벨 16/24 · 가격 {typography.kr-price} · 색 {colors.kr-red} (해석)
  badge      우상단 원형 '닷컴 ONLY' 52×52 (PDP 82×82, 모바일 40×40) · 면 {colors.kr-red-orange2} (해석)
```

### kr-square-badge

'2026년 출시'·'다품목할인' 같은 사각 외곽선 뱃지다 [src:15].

```text
kr-square-badge                                             [src:15]
  height     24 · {rounded.kr-radius-4} · 외곽선
```

### kr-coupon-modal

데스크톱 웹 홈에 뜨는 '앱 전용 쿠폰' 안내 팝업이다. '세일도 혜택도 / 남다르게' 문구, 점선과 반원 노치가 있는 붉은 쿠폰 티켓, 하단 '닫기'·'다시 보지 않기' 투명 버튼으로 이루어진다 [src:15].

```text
kr-coupon-modal                                             [src:15]
  container  316×358 · {rounded.kr-radius-16} · 화면 중앙
  ticket     붉은 쿠폰 · 점선 · 반원 노치
  actions    투명 버튼 둘 · {rounded.kr-radius-6}
```

### kr-coupon-sheet

같은 쿠폰 팝업이 모바일 웹에서는 하단 바텀시트가 된다 [src:16].

```text
kr-coupon-sheet                                             [src:16]
  container  375×294 · 위 모서리만 {rounded.kr-radius-20}
```

### kr-quick-menu

히어로 바로 아래의 원형 아이콘 14개 퀵메뉴다. 앞 7개는 선 아이콘, 뒤 7개는 사진 원이다 [src:15]. 모바일 웹은 3열×2행 그리드에 막대 페이저를 붙인다 [src:16].

```text
kr-quick-menu                                               [src:15][src:16]
  desktop    한 줄 14개 · 아이콘 52 · 원형(50%)
  mobile     3열 × 2행 + 막대 페이저 · 아이콘 48
  label      {typography.kr-quickmenu} (@375 12/16 400)
```

### kr-timedeal

국내 홈 "LGE.COM 타임딜" 섹션의 카드 요소다. 마감 라벨은 'D-3' 처럼 명사+숫자로 쓰고, 카드 하단 바가 `{rounded.kr-radius-8}` 이다 [src:15]. 섹션 제목은 `{typography.kr-section-title}` 이다 [src:15].

```text
kr-timedeal                                                 [src:15]
  label      {typography.kr-timedeal}
  bottom bar {rounded.kr-radius-8}
```

### kr-rank-chip

국내 홈 "베스트 랭킹" 섹션의 순위 숫자 칩이다 [src:15].

```text
kr-rank-chip                                                [src:15]
  size       28×28 · {rounded.kr-radius-4}
  label      {typography.kr-rank-chip}
```

### kr-pdp-buybox

국내 PDP 오른쪽의 구매 박스다. 위에서 아래로 SKU → 타임딜 박스 → 옵션 선택 → 타임딜할인가·쿠폰할인가 → '최대혜택가' → 혜택 안내 순으로 쌓인다 [src:17]. '최대혜택가' 금액의 `{colors.kr-red-orange2}` 는 관측값이다 [src:17]. 왼쪽 갤러리의 메인 이미지는 직각이고, 썸네일 90×90은 16px, 화살표는 48×48 원이며, 이미지 안쪽 하단에 연출 이미지 고지(12/16 500)가 붙는다 [src:17].

```text
kr-pdp-buybox                                               [src:17]
  timedeal   {colors.kr-navy12} · 560×50 · {rounded.kr-radius-12} · 'D-3'
  option     560×52 · {rounded.kr-radius-12}
  quantity   126×50 · {rounded.kr-radius-12}
  coupon     '쿠폰받기' 외곽선 85×32 · {rounded.kr-radius-10}
  max price  {colors.kr-red-orange2} (관측)
  inquiry    검색 입력 420×56 · 반경 56
  gallery    메인 이미지 직각 · 썸네일 90×90 {rounded.kr-radius-16} · 화살표 48×48 원
```

## Do's and Don'ts

**Do** 한 화면은 한 그룹의 토큰으로 짠다. 글로벌 브랜드 면이면 `{colors.warm-grey}` 바탕과 `{fonts.ei-text}` 계열, US 커머스 면이면 `us-*`, 국내형 화면이면 `{colors.kr-white}` 바탕과 `{fonts.kr-sans}` 로 맞춘다 — 세 표면은 굵기 집합과 반경부터 다르다 [src:12][src:13][src:15].

**Do** 브랜드 에너지는 `{colors.active-red}`, 로고 쪽 레거시 표현은 `{colors.heritage-red}` 로 나누고, 중립(`{colors.warm-grey}`·`{colors.white}`·`{colors.black}`)으로 균형을 되찾는다 [src:3].

**Do** 브랜드 면의 히어로는 풀블리드 사진 위에 흰 헤드라인(`{typography.ei-hero}`)과 흰 알약(`{component.ei-pill-button}`)을 얹는 방식으로 빌린다 [src:12].

**Do** 그라디언트를 그려야 하면 근사라고 표기하고 각 그라디언트의 사용 모드를 지킨다(01은 라이트 전용, 04는 다크 전용) [src:3].

**Don't** `{colors.us-cta-red}` 나 `{colors.kr-red}` 를 Active Red라고 부르지 않는다. 발행 Active Red는 `{colors.active-red}` 하나이고, 국내에서 그와 같은 값은 `{colors.kr-red-orange2}` 다 [src:3][src:13][src:15].

**Don't** 'Life's Good.' 슬로건을 서체로 조판하지 않는다. 서체 이름이 발행되지 않은 세리프 락업이고 [src:9][src:10], 원본은 AI/PNG 에셋 키트로 배포된다 [src:9].

**Don't** hover·focus·disabled 색을 지어내지 않는다. 관측된 상태 표시는 US PDP 의 비활성 화살표·활성 서브 탭 밑줄·선택 썸네일의 검은 테두리 [src:14] 와 국내 토글의 굵기 차이(선택 600·비선택 400) [src:15] 뿐이다. 리워드 초록이나 APR 인디고를 success·info 상태색으로 승격하지도 않는다 [src:14].

**Don't** LG EI 서체 파일을 웹에 올리거나 재배포하지 않는다. 재배포를 허락한 근거가 없다 [src:18][src:24][src:25].

**Don't** 가전 구독의 구매/구독 전환, 타임딜·D-day 카운트, '최대혜택가' 가격 표기, '앱 전용 쿠폰' 안내 팝업과 '다시 보지 않기' 같은 LG전자 커머스 흐름과 제품 카피를 그대로 가져오지 않는다 — 차용할 것은 알약 토글·둥근 카드·밀도 같은 시각 처리이지 가전 판매 도메인의 개념이 아니다.

**Don't** `LG EI Design`·`LG EI Headline`·`LG EI Text` 이름, 'Life's Good.' 슬로건, 얼굴 마크, `LG SIGNATURE`·`LG ThinQ`·`Let's gram`·`SKS` 같은 제품 브랜드명, 국내 운영 CSS의 `--color-set--*`·`--br-radius--*`·`--fw--*` 변수명과 `CommonPcGnb_*`·`HomePc*`·`cmp-*`·`c-*` 클래스 접두를 생성하는 제품 UI의 카피·헤더·제목·라벨·클래스 이름에 넣지 않는다 — 차용할 것은 시각 언어이지 시스템과 브랜드의 이름이 아니다.

## Responsive Behavior

공개된 브레이크포인트 체계는 없다(no published breakpoint system surfaced). lg.com의 유일한 분기 근거는 글로벌 홈 HTML의 `<picture>` 쌍 15개가 쓰는 `(max-width: 768px)`·`(min-width: 769px)` 인데, 이것은 AEM 이미지 아트디렉션 분기이지 사이트 CSS 브레이크포인트라고 단정할 수 없다 [src:12]. 국내 홈 HTML에는 media 쿼리가 0건이고, 모바일은 같은 페이지의 유동 축소가 아니라 UA 라우팅으로 열리는 별도 템플릿 /m/home이다 [src:15][src:16]. 768·976폭은 어느 표면에서도 재지 않았다.

| 표면 | 관측 폭 | Key Changes |
| --- | --- | --- |
| lg.com/global | 1425 ↔ 360 | `{typography.ei-hero}` 56/60 → 28/32(굵기 유지), 페이지 제목 36/42 → 28/32, 본문은 크기 유지·줄높이 20 → 18, 알약 121×44 → 103×36(반경 유지), 히어로 카드 `{rounded.ei-hero-card}` → `{rounded.ei-hero-card-sm}`·높이 550 → 480, 카드 2열 → '1 / 2' 페이저 1열 캐러셀 [src:12] |
| lg.com/us | 1425 ↔ 360 | Headline 40/43.2 → 28/33.04에 자간 -0.4px → normal, subtitle3 20/24 → 18/21.6(자간 유지), CTA 106×42 → 296×42(높이·패딩·반경 유지 — 360보다 64px 좁아 전폭이라 단정하지 않는다), PDP 가격 28 → 22, 추천 카드 패딩 16 → 14 [src:13][src:14] |
| lge.co.kr | /home 1440 ↔ /m/home 375 | 히어로 36/50/700 → 24/32/600, 섹션 제목 24/32/700 → 19/26/600, 가격 19/26 → 14/20, SKU 13/18 → 11/14, 퀵메뉴 한 줄 14개 → 3열×2행+막대 페이저, 프로모 배너 1380×180·16px → 320×110·8px, 쿠폰 팝업 중앙 모달 → 바텀시트, 원형 뱃지 52 → 40. GNB만 공용 컴포넌트라 글자가 같다 [src:15][src:16] |

**터치 타깃.** 관측된 컨트롤 중 US 헤더 아이콘 버튼은 40×40이고 US 히어로 원형 컨트롤은 30×30·29×29로 더 작다 [src:13]. 국내 PDP 갤러리 화살표는 48×48, 흰 알약 버튼 높이 48, 입력창 높이 56이다 [src:17]. 국내 모바일 swiper 이전 21×24·재생 24×24는 작다 [src:16]. 차용하는 쪽은 관측 크기와 무관하게 최소 44×44를 지킨다.

**이미지.** lg.com은 768/769 분기에서 `<picture>` 소스를 바꾸고 [src:12], 국내 모바일 프로모 배너는 1380×180에서 320×110으로 비율 자체가 바뀐 별도 자산을 쓴다 [src:15][src:16].

## Known Gaps

- **폭과 테마.** 768·976폭은 어느 표면에서도 재지 않았다. 다크 모드는 발행되지 않았고 측정하지도 않았다 — 어느 사이트에서도 prefers-color-scheme을 바꿔 재지 않았으므로 "다크 테마 없음" 도 아니다. 그래서 `dark-*` 토큰이 없다.
- **상태와 입력.** hover·focus·disabled 상태, lg.com의 폼 입력·셀렉트·체크박스, lg.com 모달은 관측되지 않았다. 국내 입력도 PDP 문의창 하나뿐이다.
- **모션과 아이콘.** duration·easing 수치와 아이콘 세트·일러스트 규칙은 발행·관측 모두 없다.
- **서체.** LG EI Headline·Text의 한글 글리프 범위를 확인하지 못했다. 이름 붙은 spacing 체계는 어느 표면에도 없다.
- **표본 범위.** 국내 홈은 앞 다섯 섹션까지만 대조했고, 국내 헤더의 'LG전자' 락업 자산은 확보하지 못했다. US 추천 상품 카드는 외부 주입 위젯일 수 있어 브랜드 근거가 약하다.

## References

1. https://www.lg.com/global/our-identity/ — LG EI 아이덴티티 인덱스. 디자인 철학 문장과 정체성 요소 일곱 가지
2. https://www.lg.com/global/our-identity/logo/ — 로고 페이지. 워드마크·얼굴 마크, 색 변형 슬라이더, 클리어스페이스, Digital Logo Play. 로고 에셋 zip 링크가 이 페이지에 있다
3. https://www.lg.com/global/our-identity/color/ — 색 페이지. 발행 5색, Adaptable Color System, 그라디언트 4종과 사용 모드 태그(태그는 슬라이더 스크립트가 슬라이드마다 바꾼다)
4. https://www.lg.com/global/our-identity/typography/ — 타이포그래피 페이지. LG EI Headline/Text 서술과 굵기 이미지. 페이지 CSS 의 px·굵기 550 은 이 페이지 자체 스타일이다
5. https://www.lg.com/global/our-identity/design-system/ — 디자인 시스템 페이지. EI 코어 폼·상태·레이아웃 모드·EI Lens. Intelligent/Respectful 탭은 원본 HTML 에 있다
6. https://www.lg.com/global/our-identity/photography/ — 사진 페이지. 역할 셋과 원칙 여섯의 이름
7. https://www.lg.com/global/our-identity/voice/ — 보이스 페이지. 원칙 셋
8. https://www.lg.com/global/our-identity/slogan/ — 슬로건 페이지. 컬러웨이·승인 조합·배치
9. https://www.lg.com/global/our-identity/brand-assets/ — 브랜드 에셋 페이지. 로고·슬로건 에셋 키트(AI/PNG/zip)와 슬로건 세리프 대체 텍스트
10. https://www.lge.co.kr/company/info/visualIdentity — 국내 VI 페이지. 색·그라디언트·EI 폼·렌즈·로고 플레이·슬로건 조합. 본문 다수가 이미지 대체 텍스트에 있다
11. https://www.lge.co.kr/company/info/brandIdentity — 국내 BI 페이지. 브랜드 약속·미션·핵심가치·CI 표기·로고 컬러 짝
12. https://www.lg.com/global/ — LG EI 브랜드 면 홈(관측 대상 화면). Akamai 가 비브라우저 요청을 막아 브라우저로 열어야 읽힌다
13. https://www.lg.com/us/ — EI 커머스 면 홈(관측 대상 화면). 커스텀 프로퍼티는 서드파티 Sprinklr 변수뿐이다
14. https://www.lg.com/us/tvs/lg-65qned8mbaa-qned-4k-tv — EI 커머스 제품 상세(관측 대상 화면)
15. https://www.lge.co.kr/home — 국내 홈(관측 대상 화면). 운영 CSS `:root` 에 `--color-set--*`·`--br-radius--*`·`--fw--*`·`--font-family`·`--box-shadow--base` 가 있다
16. https://www.lge.co.kr/m/home — 국내 모바일 웹 홈(관측 대상 화면). UA 라우팅으로 열리는 별도 템플릿이다
17. https://www.lge.co.kr/product/tvs/85qned8mbea-wall?modelId=MD10903834&pdpType=PURCHASE — 국내 제품 상세(관측 대상 화면)
18. https://www.lg.com/content/dam/lge/global/our-brand/brand-assets/font/LG-EI_font_all.zip — LG EI 서체 zip. 라이선스 파일이 없고 name 테이블이 All rights reserved 다
19. https://www.lg.com/content/dam/lge/common/logo/logo-lg-100-44.svg — lg.com 헤더 로고 락업 SVG
20. https://www.lg.com/etc.clientlibs/lge/clientlibs/clientlib-site/resources/images/favicons/android-chrome-512x512.png — 심볼 단독 사이트 아이콘(512×512)
21. https://www.lg.com/global/newsroom/news/corporate/lg-smiles-back-to-the-world-with-its-new-brand-identity/ — 2023-04-12 새 브랜드 아이덴티티 발표 뉴스룸 기사
22. https://en.sandoll.co.kr/LGEIHeadline — 산돌 LG EI Headline 포트폴리오
23. https://www.newspim.com/news/view/20240215000314 — 뉴스핌 2024-02-15 기사, 산돌의 LG EI Headline 다국어 폰트 개발 보도(산돌 보도 페이지가 이 기사를 전재한다)
24. https://en.sandoll.co.kr/Pressrelease/?bmode=view&idx=19553161 — 산돌 영문 보도자료
25. https://www.lge.co.kr/company/info/brandAsset — 국내 브랜드 자산 다운로드 페이지
26. https://www.lge.co.kr/story/trend/new-lge-vi — 국내 새 VI 소개 스토리