LG Brand Design System Deep-Dive

(Based on https://www.lg.com/tw/ — design data extracted 2025-12-12)

1. Brand Overview

LG’s digital brand presence mirrors its decades of product philosophy: human-centered innovation wrapped in quiet confidence. The Taiwan site feels practical, clean, and global. Every component reinforces the “Life’s Good” message — approachable technology without drama.

This isn’t a flashy tech brand screaming for attention. It’s a mature company that knows its look. LG has found a balance between minimal Korean precision and a pragmatic, international aesthetic. Their website feels corporate, but with small human touches — soft corners, airy spacing, and that iconic Active Red that immediately recalls their logo. There’s no attempt to chase “design trends” from startup culture. Instead, we see design restraint: controlled uses of red, consistent black/white grounding, and carefully spaced typography that never feels loud.

The type system uses their custom "LG Smart UI" font. You can sense the brand’s investment in owning their typographic voice. It’s clean and efficient, but not sterile. No rounded sans-serifs here — instead you get balanced geometry that reads well across screens. Using their own font rather than Google Fonts adds corporate consistency, avoiding regional display quirks.

The spacing system tells another story: strictly adherence to an 8px grid. Semi-perfect increments (2, 4, 8, 16, 24, etc.) dominate the global rhythm. That’s industrial design thinking — the same pragmatism they apply to building appliances and TVs shows up here in CSS.

Buttons carry the brand’s “Life’s Good but reliable” energy — rounded, strong red accents, clear black/white contrast. The site never feels playful, but never sterile either. Function first, polish second.

If I had to sum up LG’s digital language in three words: rational, modern, confident. Every pixel says: “You can trust this.”

2. Color System

2.1 Primary Colors

The clear primary is Heritage Red (#ea1917) — RGB(234, 25, 23). That’s LG’s global DNA. It’s vibrant but not fluorescent — enough energy to activate CTAs and icons without feeling like a warning color. Paired with true black (#000000) and white (#ffffff), LG stays grounded in simplicity.

Psychologically, this red isn’t aggressive; it’s assertive. It communicates technology, progress, and warmth simultaneously. Compared to competitors like Sony’s blue-gray palette or Samsung’s electric blue, LG’s red feels human and distinctive — a confident differentiator in a sea of tech neutrality.

They also back it with practical neutrals:

• #4a4946 (dark gray) — used for text and secondary UI.
• #646464 (gray) — button outlines and muted icons.
• #cbc8c2 (light gray) — borders, dividers, subtle fills.

Their color logic reflects strong hierarchy control. Red is reserved for active states and brand identity. Neutrals occupy the groundwork. White space dominates the layout, maximizing focus on imagery and CTAs.

2.2 Complete Palette

The deeper palette also exists in CSS variables — LG defines hundreds of “primitive” and “semantic” tokens (e.g., --primitive-color-heritage-red-40: #c00045, --semantic-color-surface-badge-light-red: #ffedea). These support all product contexts — from TV UI to corporate pages.

This tokenization shows a consistent enterprise-grade system: "primitive" levels for base tonal variations, "semantic" for applied rules (success, error, selection, badges). LG’s design infrastructure feels modular and strong.

2.3 Color Relationships

Contrast is excellent. Black-on-white text exceeds WCAG AAA easily. The red-on-white CTA passes comfortably (~5:1 contrast). There’s intent: red backgrounds pair only with white text, never with gray. Their design accommodates accessibility through contrast and through restrained combinations.

No dark mode detected on the Taiwan site. Tokens like --semantic-color-background-main-dark: #e6e1d6 suggest LG supports theming globally, but it’s not active here.

2.4 Usage Guide

• Primary CTAs and key actions → #ea1917
• Text → #000000 on white
• Borders/dividers → #cbc8c2
• Disabled states → #646464 or opacity reduction
• Backgrounds → subtle whites (#ffffff), never grays
• Avoid color overload: red should not decorate text — only drive focus

What to avoid:

• Red on black (fails contrast).
• Mixing #ea1917 with mid-gray (#646464) — creates muddiness.
• Overusing neutral gray backgrounds — dilutes brand clarity.

This system thrives on minimal contrast — white/black dominance punctuated by red cues. Balanced, modern, unmistakably LG.

3. Typography

3.1 Font Families

Primary: LG Smart UI
Fallbacks: Segoe UI, Microsoft Sans Serif

This is clearly a custom, proprietary font. Not from Google Fonts or Adobe Typekit. It’s built for exact weight consistency across LG’s digital and product ecosystems — the TV OS, mobile apps, and marketing sites all share it.

The fallback stack is smart: both Segoe UI and Microsoft Sans Serif ensure legibility in Asian Windows-heavy environments.

No variable fonts are used. Static weights (300–700) keep loading predictable.

3.2 Type Scale

The scale is rational — classic 1.25–1.33 modular ratio. Line heights tighten as sizes grow, giving LG pages a crisp compact feel.

3.3 Hierarchy

They use type weight, not color, to differentiate hierarchy. Medium (600) dominates UI buttons, while headings vary between 400–600 for flexible tone.

Heading-1 56px anchors hero messages. The 36px and 32px levels fit product titles and card headers.

Small UI text (14px, 13px) remains clear. There’s no ultra-light weight here — every number has strength for screen display.

It’s timeless UX typography: functional first, brand voice through custom face, not decoration.

4. Spacing & Layout

4.1 Spacing Scale

LG uses an 8px base grid — classic for system consistency. Confirmed by the dataset: "scaleType": "8px".

What’s good: minimal micro-variation, strong clustering around multiples of 8 — meaning developers can use consistent 8 * n spacing tokens safely.

4.2 Layout

Breakpoints range from 200px mobile to 1661px+ for large desktops.

No fixed container width specified, but 1440px implies content max grid. Margins and gutters follow the 8px rhythm.

The system clearly adapts globally — flexible but safe grid. No fancy fluid typography — old-school responsive media queries work fine.

5. Visual Elements

Border Radius

LG’s corner system has range: sharp to fully circular.

The takeaway: 999px is the signature LG button radius — consistent across their CTAs. I love this — it’s confident and brandable. They commit to full pills for interaction, and that’s refreshing.

Shadows

LG uses subtle shadows sparingly — mostly for elevation on cards or modals.

They keep shadows grayscale and small — this supports accessibility and prevents material overdesign.

Borders

Common patterns:

• 1px solid #646464 — neutral outlines
• 1px solid #ea1917 — CTA emphasis
• 1px 0 0 solid #cbc8c2 — dividers

Consistent use across nav, buttons, and content separators.

This is a semi-flat design: minimal depth, subtle outline logic, no glossy layers.

6. Components

6.1 Buttons

Four key button styles detected.

(1) Utility Link Button

Font: 16px, weight 400, black text on white.

• Default: background #fff, text #000, border-radius 100px, no border.
• Hover: background #ea1917, text white, scale(1.05), heavy shadow rgba(0,0,0,0.6) 0px 0px 0.75rem.
• Active: white bg, shrink to scale(0.8333).
• Focus: outline currentcolor 0.125rem, offset translation (4px,-8px) — unusual but dynamic.

This is lively for a corporate site — the motion gives comfort to the pill CTA.

(2) Inverted CTA Button

Background black, white text.

• Hover: inverts to white bg, red text.
  Strong contrast, very LG advertisement-like. Clean inverse logic — high clarity.

(3) Primary CTA Button

Font: 16px, weight 600, border-radius 999px.

• Default: background #ea1917, text #fff, border 1px solid #ea1917.
• Hover: maintains red bg, adds transformation and shadow.
• Active: reverses to white bg, dark gray text (#333).
• Focus: blue border focus ring — maybe accessibility fallback, likely visible only for keyboard nav.

Love the simplicity — one visual identity, consistent states. The scaling hover makes interactions feel responsive.

(4) Circular Arrow / Carousel Control

• Default: background semi-transparent white (rgba(255,255,255,0.3)), 50% border-radius.
• Hover: switches to red background, white icons.
• Focus: dark background, white text.

This maintains LG’s rounded DNA while ensuring visible state change everywhere.

6.2 Links

LG keeps link colors consistent with text contrast.

Behavior pattern: link → underlined; hover → no underline, color shifts.

In dark backgrounds, links stay white / red accent; in light backgrounds, fade to gray or black.

6.3 Forms

Inputs are rare in this dataset (only one recorded).

• border: 1px solid #7e7c77 (approx rgb(126,124,119))
• border-radius: 12px
  That’s consistent with their soft, functional tone.

No detailed checkbox/radio states visible — likely hidden behind JS components.

6.4 Cards

Cards rely on the shadow: rgba(0,0,0,0.25) 0px 4px 12px plus border-radius 8px–16px.
Padding: 20–24px typical.
Hover: small lift, maybe scale or shadow intensity.

No color backgrounds — purely white surfaces. The structure is classic enterprise: safe, flexible, timeless.

7. Design Tokens (Extracted CSS Custom Properties)

:root {
  /* Colors */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-dark-gray: #4a4946;
  --color-mid-gray: #646464;
  --color-light-gray: #cbc8c2;
  --color-active-red: #ea1917;

  /* Typography */
  --font-family-primary: "LG Smart UI", "Segoe UI", "Microsoft Sans Serif";
  --font-size-h1: 56px;
  --font-size-h2: 36px;
  --font-size-h3: 32px;
  --font-size-h4: 24px;
  --font-size-h5: 20px;
  --font-size-body: 16px;
  --font-size-caption: 14px;
  --font-weight-regular: 400;
  --font-weight-medium: 600;
  --font-weight-bold: 700;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-48: 48px;
  --space-50: 50px;
  --space-80: 80px;

  /* Border Radius */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --radius-circle: 50%;
  --radius-round: 100%;

  /* Shadows */
  --shadow-md: 0px 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-sm: 0px 2px 8px rgba(0, 0, 0, 0.1);

  /* Breakpoints */
  --bp-mobile: 360px;
  --bp-tablet: 768px;
  --bp-desktop: 1440px;
}

8. AI Coding Assistant Prompt

# LG Design System Specification

You are an LG design expert. Build UIs matching LG’s visual language exactly.

## Brand Context
LG’s design is functional, confident, and minimal. It uses red for emotion, black and white for clarity, and soft geometry to feel human. Every interactive element feels engineered, not decorated.

## Color Palette
- Primary Red: #ea1917 — CTAs, buttons, highlights
- Black: #000000 — Main text, header background
- White: #ffffff — Backgrounds, text on red or black
- Dark Gray: #4a4946 — Secondary text
- Mid Gray: #646464 — Borders, disabled states
- Light Gray: #cbc8c2 — Dividers and surfaces

## Typography
- Font Family: "LG Smart UI", "Segoe UI", "Microsoft Sans Serif"
- Headings: 56px, 36px, 32px, 24px — weights 400–600
- Body: 16px, weight 400, line-height 1.5
- Buttons: 16px, weight 600
- Captions: 14px–13px, weights 400–600

| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 | 56px | 600 | 1.07 | Hero titles |
| H2 | 36px | 400 | 1.17 | Section titles |
| H3 | 32px | 600 | 1.13 | Subheadings |
| Body | 16px | 400 | 1.5 | Text |
| Button | 16px | 600 | 1 | CTAs |
| Caption | 14px | 400 | 1.29 | Notes |

## Spacing & Grid
Base: 8px grid  
Tokens: 4, 8, 16, 20, 24, 32, 40, 48, 80  
Use multiples of 8px for all layout spacing.

## Border Radius
- none: 0 — tables
- sm: 4px — small cards
- md: 8px — buttons and inputs
- lg: 16px — modals
- xl: 28px — feature cards
- full/pill: 999px — buttons
- circle: 50% — icons, avatars

## Shadows & Depth
- Shadow Medium: rgba(0,0,0,0.25) 0px 4px 12px
- Shadow Small: rgba(0,0,0,0.1) 0px 2px 8px
Use subtle shadows. Avoid heavy elevation.

## Components

### Primary Button
```css
.btn-primary {
  background: #ea1917;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  padding: 0 20px;
  border: 1px solid #ea1917;
  border-radius: 999px;
  transition: all 150ms ease;
}
.btn-primary:hover {
  transform: scale(1.05);
  box-shadow: 0 0 0.75rem rgba(0,0,0,0.6);
}
.btn-primary:active {
  background: #ffffff;
  color: #333;
  transform: scale(0.8333);
}
.btn-primary:focus {
  outline: currentcolor solid 0.125rem;
  border: 1px solid blue;
}
```

### Secondary Button
```css
.btn-secondary {
  background: #000;
  color: #fff;
  border-radius: 0;
  font-size: 16px;
}
.btn-secondary:hover {
  background: #fff;
  color: #ea1917;
}
```

### Carousel Button (Icon)
```css
.btn-carousel {
  background: rgba(255,255,255,0.3);
  border: 1px solid #cbc8c2;
  border-radius: 50%;
  color: #000;
}
.btn-carousel:hover {
  background: #ea1917;
  color: #fff;
}
```

### Links
```css
a {
  color: #000;
  text-decoration: underline;
  font-weight: 400;
}
a:hover {
  color: #fff;
  text-decoration: none;
}
```

### Input Field
```css
.input {
  border: 1px solid #7e7c77;
  border-radius: 12px;
  padding: 8px 16px;
  font-size: 16px;
  color: #000;
}
.input:focus {
  border-color: #ea1917;
  outline: none;
}
```

### Card
```css
.card {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
```

## Layout & Responsive Rules
- Max width: 1440px
- Padding: 16px mobile / 40px desktop
- Grid gap: use 8px increments
- Breakpoints: 360px (mobile), 768px (tablet), 1440px (desktop)

## Interaction Rules
- Button hover: scale(1.05)
- Button active: scale(0.83)
- Transition: 150ms ease
- Focus rings: `outline: 0.125rem solid currentcolor`

## DO List
- Use only the defined red (#ea1917) for primary actions
- Keep spacing to multiples of 8px
- Use LG Smart UI font across all components
- Maintain consistent pill radius for CTAs
- Use white space generously — avoid gray screens
- Implement red as accent, never background-heavy
- Keep hover animations minimal and quick
- Use shadows subtly (0.25 alpha max)

## DON'T List
- Don’t introduce new brand colors
- Don’t mix squared and rounded corners
- Don’t use drop shadows heavier than 0.25 alpha
- Don’t change red hues
- Don’t reduce contrast below WCAG AA
- Don’t apply text-transform randomly
- Don’t animate position transitions >200ms

## Code Examples

### Example: Primary Button
```css
<button class="btn-primary">Buy Now</button>
```

### Example: Card Wrapper
```css
<div class="card">
  <h2>OLED TV</h2>
  <p>World-class contrast powered by α9 processor.</p>
</div>
```

### Example: Form Input
```css
<input class="input" placeholder="Search products..." />
```

9. Summary

LG’s system is designed like their appliances: reliable, precise, and human. It’s built on red emotion and monochrome calm. Every radius, every contrast ratio feels intentional.

TL;DR: Use red sparingly, space generously, and let geometry breathe. Buttons are soft but assertive, typography steady, nothing overdesigned.

Brand Keywords:

• global-minimalist
• confident-precision
• warm-technical
• human-engineered
• timeless-modern

End of Analysis (≈2500 words)