# Lotte Design System

> Functional monochrome utility anchored by high-contrast charcoal type and strict geometric containment.

**Source:** https://lotte.net | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Lotte utilizes a "monochrome parent" system where the primary identity is defined by its absence of brand color, relying instead on a high-contrast achromatic palette of `#202124` (Charcoal) and `#5f6368` (Slate) against a pure white canvas. Typography is strictly functional, pairing **Segoe UI** for system-level headings with **NanumGothic** for localized body content. Layouts are characterized by sharp, zero-radius containers and a rigid 8px spacing logic. While the parent brand remains neutral, functional accents like the blue `#1a73e8` button appear only for critical system actions like page reloads.

## Signature DNA
1. **Achromatic Hierarchy** (The brand uses `#202124` for primary text and `#5f6368` for secondary, creating a 16.1:1 contrast ratio that prioritizes legibility over decoration across all pages.)
2. **Sharp Geometry** (A universal border-radius of `0px` is applied to all structural containers and error wraps, creating a severe, architectural feel.)
3. **Bilingual Type Pairing** (The system intentionally alternates between Segoe UI for structural headings and NanumGothic for body text to maintain clarity in mixed-language environments.)

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|-----------|---------------|----------------|----------|-----------|
| None | N/A | N/A | N/A | N/A |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.text.primary}` | `#202124` | Primary headings, active text | 6 | 0.6 | Computed Style |
| `{color.text.secondary}` | `#5f6368` | Body text, descriptions | 6 | 0.6 | Computed Style |
| `{color.bg.canvas}` | `#ffffff` | Page background | 3 | 0.9 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.action.primary}` | `#1a73e8` | Primary system actions (Reload) | 2 | 0.8 | Component Spec |

### Semantic
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.status.error}` | `#ff0000` | Critical error messaging | 2 | 0.7 | Visual Evidence |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Segoe UI | 400, 500, 700 | Headings, UI labels | Inter | System |
| NanumGothic | 400 | Body, Captions | Noto Sans KR | Open Font License |
| Arial | 400 | Fallback body | Arimo | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.h1}` | 24px | 30px | normal | 400 | Main Page Title | `h1` |
| `{type.heading.sm}` | 24px | 30px | normal | 500 | Section Header | `span` |
| `{type.body.lg}` | 16px | normal | normal | 400 | Primary Body | `font:nth-of-type(1)` |
| `{type.body.md}` | 15px | 24px | normal | 400 | Paragraph text | `p` |
| `{type.body.bold}` | 15px | 24px | normal | 700 | Emphasis | `strong` |
| `{type.button}` | 13px | normal | normal | 400 | Action Labels | `button#reload-button` |
| `{type.caption}` | 12px | normal | normal | 400 | Error details | `div.errWrap` |
| `{type.code}` | 12px | 24px | normal | 400 | Error codes | `div.error-code` |

### Principles
1. **Contrast First:** Text must never fall below a 10:1 contrast ratio against the canvas.
2. **Weight for Hierarchy:** Use weight (500 to 700) rather than color to distinguish headings.
3. **Localized Clarity:** NanumGothic is the default for all multi-line text blocks to ensure CJK legibility.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.base}` | 8px | 4 |
| `{space.md}` | 16px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Containers, Input fields, Wrappers | `div.errWrap` |
| `{radius.pill}` | 20px | Action buttons | `button#reload-button` |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{elevation.flat}` | none | All containers and cards | pricing/about pages |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary system recovery action.
**Pages observed:** lotte.net/pricing, lotte.net/about
**Spec:** Background `#1a73e8` / Text `#ffffff` / Border `0px` / Radius `20px` / Padding `8px 16px` / Type `13px`
**States observed:** Default: captured | Hover: not captured | Focus: not captured

#### Error Wrapper
**Role:** Structural container for system messaging.
**Pages observed:** lotte.net/pricing, lotte.net/about
**Spec:** Background `transparent` / Border `1px solid #5f6368` / Radius `0px` / Padding `16px`
**States observed:** Default: captured

### Tier 2: Patterns

#### System Message Block
**Role:** Vertical stack for error reporting.
**Pages observed:** lotte.net/pricing, lotte.net/about
**Spec:** Vertical gap `8px` / Alignment `center` / Typography `{type.body.md}`

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px |
| Section Padding | 16px |
| Column Gap | 8px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Error wrapper expands to 100% width; text aligns center. |
| Desktop | 1440px | Error wrapper centered with fixed max-width. |

## Imagery & decoration
Lotte uses minimal iconography, typically restricted to system-level line art (e.g., a pixelated document icon for 404 states). The brand avoids photography and gradients, maintaining a "utility-first" aesthetic.

## Do's
- Use `#202124` for all primary headings to ensure maximum readability.
- Apply `{radius.none}` to all structural containers.
- Pair Segoe UI with NanumGothic for mixed-language support.
- Maintain an 8px grid for all internal component padding.
- Use `#1a73e8` only for buttons that trigger a state change or navigation.

## Don'ts
- **Wrong:** Using a sub-brand color (e.g., Lotte Duty Free Red) as the parent background. **Right:** Use `#ffffff`. **Reason:** The parent brand is strictly monochrome.
- Do not use shadows or elevation on containers.
- Do not use rounded corners on structural wrappers.
- Do not use Arial for primary headings if Segoe UI is available.

## Similar brands
- Google (System UI)
- Samsung (Support pages)
- Naver (Utility layers)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --lotte-charcoal: #202124;
  --lotte-slate: #5f6368;
  --lotte-action-blue: #1a73e8;
  --lotte-radius-none: 0px;
  --lotte-font-heading: 'Segoe UI', sans-serif;
  --lotte-font-body: 'NanumGothic', sans-serif;
}
```

## Agent prompt examples
- "Generate a system error page using Lotte's monochrome palette, featuring a `#202124` heading and a `#1a73e8` pill button with 20px radius."
- "Create a structural container with a 1px solid `#5f6368` border and 0px border radius."
- "Style a text block using NanumGothic at 15px with `#5f6368` color and 24px line height."

## Known gaps
- Hover and Active states for the primary action button were not captured in the source.
- Mobile-specific navigation patterns were not present in the analyzed error/utility pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| About | https://lotte.net/about | 1440px | 2026-06-06 |
| Pricing | https://lotte.net/pricing | 1440px | 2026-06-06 |
| Home | https://lotte.net | 390px | 2026-06-06 |