What is LG's primary brand color?

LG's brand voltage is crimson-red #a50034, captured as layer:brand with 38 total occurrences — 18 as background fill, 19 as border, and 1 as text. It is declared as the page themeColor in the HTML meta tag. The crimson appears on primary CTA button fills, active product-category badge borders, and the active state of category navigation tabs. It is absent from body text, page canvas, and card backgrounds. The five-tone grey ladder (#212529, #000000, #333333, #6b6b6b, #767676) carries all structural work; the crimson fires only at navigational and commercial decision points.

What typeface does LG use, and what are good open-source substitutes?

LG's marketing site runs LG Smart — a proprietary custom sans-serif developed for the LG brand — across every typographic tier. The face is loaded via font-face declaration with fallbacks to 'Segoe UI' and 'Microsoft Sans Serif'. The system deploys six distinct size-and-weight combinations: 60px / weight 600 for hero display, 36px / weight 600 for section h2, 24px / weight 600 for sub-section headings, 15px / weight 600 for nav and link labels, 14px / weight 700 for uppercase nav categories, and 14–18px / weight 400 for body text. The closest open-source substitute is Inter at the same weights; the proportions transfer cleanly. Pretendard is a Korean-language compatible alternative that more closely matches LG Smart's optical weight at display sizes.

What is LG's corner-radius philosophy?

LG uses a binary radius system rather than a graduated scale. Functional surfaces — product cards, CTA buttons, dropdown containers, form chips — use 3px (18 occurrences), which is small enough to be nearly imperceptible but softens the hard geometry slightly. Avatar and icon elements use 50% (35 occurrences), rendering as full circles regardless of element dimensions. A 10px tile radius appears 4 times on product-showcase carousel tiles. There is no 8 / 12 / 16 / 24px middle tier. The 100px token (1 occurrence) and 19px token (1 occurrence) are edge cases on promotional badge elements.

Why do LG's CSS variables include Bootstrap naming conventions?

The LG global marketing site appears to be built on a Bootstrap foundation — the :root CSS variables include Bootstrap v4-style semantic naming such as --primary (#007bff, Bootstrap default blue), --gray (#6c757d), --dark (#343a40), --success (#28a745), --danger (#dc3545), and --warning (#ffc107). None of these Bootstrap default colors appear in the rendered page (all have 0 total occurrences in the capture), suggesting LG uses Bootstrap's CSS variable scaffold but overrides the actual component colors with LG-specific values. The LG crimson (#a50034) is applied directly to components without a named CSS custom property.

Can I use this DESIGN.md to build a consumer electronics e-commerce site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce LG's specific moves: five-tone structural grey ladder, crimson voltage at navigational boundaries only, LG Smart-equivalent sans at six weight/size steps, binary 3px / 50% radius system, and the Bootstrap-derived component structure. The token references resolve cleanly. One practical decision when adapting: whether to retain the Bootstrap semantic token names (--primary, --gray, etc.) for framework compatibility or to replace them with LG-specific names. The captured system uses both simultaneously, which creates redundancy at the :root level.

LG Design System

LG's marketing-site design system as DESIGN.md.

About LG DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source lg.com

Consumer Electronics
E-commerce & Retail

LG's marketing site is a product-catalog system built around a single crimson red and a proprietary display sans. The page carries a five-tone grey ladder for structural chrome, a white canvas, and the brand's LG Smart typeface at six distinct size-and-weight combinations covering everything from 14px nav labels at weight 700 uppercase to 60px hero display at weight 600. The crimson (#a50034) appears at boundary positions — button fills, active badge borders, category-tab accents — but never as a page background or as a decorative fill behind product photography. Where Samsung uses a warmer, more saturated brand blue and Sony uses a near-neutral system with minimal voltage, LG holds its crimson as a navigational marker: it tells you what is active, what is purchasable, and what is the primary CTA, then recedes entirely from the editorial surface.

The DESIGN.md file packages the system into machine-readable tokens for React and AI tools. Inside: 15 color tokens organized into the five-tone structural grey ladder, the white canvas cluster, and the crimson voltage plus Bootstrap-derived semantic tokens declared in :root variables. Twelve typography tokens cover LG Smart at the six size-and-weight pairings the page actually deploys, with no secondary typeface. 16 components cover the crimson-fill primary button, the uppercase weight-700 nav, the 3px-radius product card, the full-circle icon button, and the hero display heading at 60px / weight 600.

Feed this file to Claude or Cursor and it reproduces LG's specific moves: five-tone structural grey, crimson voltage at navigational boundaries only, LG Smart in six weight/size steps from display to caption, and a binary 3px / circle radius system with no intermediate softening. The token system is closer to a Bootstrap-derived component library than to a custom design system — the :root CSS variables include Bootstrap naming conventions (`--primary`, `--gray`, `--dark`) alongside LG-specific tokens, which means the underlying framework leaks through at the token level.

What makes it distinct

Crimson voltage at boundary positions#a50034 appears 38 times as button fill, badge border, and active-tab accent, never as body text or page canvas
LG Smart at weight 600the proprietary display sans holds headlines at 36–60px in semibold, contrasting with Samsung's thin-weight display treatment
Binary radius system3px on functional surfaces (18 occurrences) and 50% circles on icon/avatar elements (35 occurrences); no intermediate 8–16px tier
Five-tone grey ladderink tones at #212529, #000000, #333333, #6b6b6b, #767676 create a compressed structural palette beside the single brand red
Uppercase nav labels at weight 700category navigation runs in 14px uppercase bold with no color accent, distinguishing active sections by weight alone

Live at lg.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

lg.com

Explore LG

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

LG design system FAQ

Common questions about LG's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

LG — official site

LG's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.