LG DESIGN.md

Brands

Consumer electronics and appliances with deep red branding, glossy product presentation, and broad lifestyle-tech merchandising. LG's public site uses white and dark surfaces, a burgundy-red accent, and premium…

Raw DESIGN.md

At a glance

Group: Brands
Main color: #a50034Pink design systems
Fonts: LG SmartSF Mono

Colors in this file

#e5e5e5
Unnamed
#a50034
Unnamed
#111111
Unnamed
#ffffff
Unnamed
#f7f7f7
Unnamed
#6b7280
Unnamed

Consumer electronics and appliances with deep red branding, glossy product presentation, and broad lifestyle-tech merchandising. LG's public site uses white and dark surfaces, a burgundy-red accent, and premium home-tech imagery.

1. Visual Theme & Atmosphere

Overall Aesthetic

LG feels like consumer electronics and home appliances presented with premium mainstream polish.

Mood & Feeling

Premium
Mainstream
Home-tech
Broad
Product-first

Design Density

Medium density. Product lines are broad, but organized through strong imagery and category bands.

Visual Character

White and dark sections
Burgundy/red brand cues
Appliance and electronics hero imagery
Broad product merchandising

2. Color Palette & Roles

Token	Hex	Role
`--lg-red`	`#A50034`	Primary brand accent
`--lg-black`	`#111111`	Text and dark framing
`--lg-white`	`#FFFFFF`	Main surface
`--lg-surface`	`#F7F7F7`	Background
`--lg-muted`	`#6B7280`	Secondary text
`--lg-border`	`#E5E5E5`	Borders

3. Typography Rules

Font Stack

css--font-display: "LG Smart", "Inter", "Helvetica Neue", Arial, sans-serif;
--font-sans: "LG Smart", "Inter", system-ui, sans-serif;
--font-mono: "SF Mono", Menlo, monospace;

Type Scale

Hero 50/700, H1 36/700, H2 28/700, Body 16/400, Small 14/400

4. Component Stylings

css.button-primary { background:#a50034; color:#fff; border:none; border-radius:999px; min-height:42px; padding:0 18px; font-weight:700; }
.button-secondary { background:#fff; color:#111; border:1px solid #e5e5e5; border-radius:999px; min-height:42px; padding:0 18px; }
.card { background:#fff; border:1px solid #e5e5e5; border-radius:16px; }

5. Layout Principles

Spacing Scale

4, 8, 12, 16, 24, 32, 48px

Layout Behavior

Organize by product family and room/appliance context
Use premium imagery to drive interest
Keep category breadth controlled

6. Depth & Elevation

LG uses light premium retail framing with imagery-driven emphasis.

7. Do's and Don'ts

Do

Keep it premium but accessible
Use burgundy-red as a precise brand anchor
Preserve home-tech breadth

Don't

Don’t overdecorate beyond product imagery
Don’t lose retail scanability

8. Responsive Behavior

Breakpoints

Mobile <768px
Tablet 768px-1023px
Desktop 1024px+

Responsive Rules

Stack product modules and maintain category discoverability

9. Agent Prompt Guide

textDesign this like LG: premium home-tech retail UI with white and dark sections, burgundy-red brand accents, product-first hero imagery, and broad but clean category merchandising.

Use it with your agent

Save the file as DESIGN.md in your project root, then ask your agent to follow it for UI work. Or let the agent fetch it over MCP.

Download

curl -o DESIGN.md https://www.uiskillbook.com/design-md/lg.md

MCP server

https://www.uiskillbook.com/mcp

MCP tool call

get_design_md({ "slug": "lg" })

Dribbble

Brands · Mona Sans

Design discovery with soft pink branding, gallery density, and polished creative-marketplace framing. Dribbble's public site uses white space, dark text, rounded search and filter controls, and a signature pink accent.

Yogiyo (요기요)

Brands · Pretendard

Yogiyo is Korea's iconic red-logo food-delivery app — the red mark you see on every street, in every neighborhood, the one that became shorthand for "let's order in." Its visual identity is built on a single hot,…

Beusable

Brands · NewRubrik

Beusable (뷰저블), built by the Korean analytics company 4Grit (포그리트), is a CX-data and UX-heatmap SaaS whose marketing site pairs a cinematic dark hero with crisp, high-contrast white product sections. The homepage…

MIXI

Brands · Noto Sans JP

MIXI is a Japanese communication and entertainment company that began with the Find Job! service in 1997, launched the social network mixi in 2004, and has since expanded through services and businesses including…

NRISE (WIPPY)