oh-my-design-cli 1.8.7 → 1.9.0

package/web/references/nhn/DESIGN.md

@@ -9,51 +9,93 @@ primary_color: "#212126"
 logo:
   type: favicon
   slug: "https://www.google.com/s2/favicons?domain=nhn.com&sz=128"
-verified: "2026-06-17"
+verified: "2026-07-13"
 added: "2026-06-17"
 omd: "0.1"
+verification_v2:
+  schema: 2
+  checked: "2026-07-13"
+  surfaces:
+    - { id: home, kind: corporate, url: "https://www.nhn.com/", inspected: "2026-07-13" }
+    - { id: services, kind: corporate-services, url: "https://www.nhn.com/services?tab=technology", inspected: "2026-07-13" }
+    - { id: ir, kind: corporate-ir, url: "https://www.nhn.com/ir?tab=financials&subTab=consolidatedFinancial", inspected: "2026-07-13" }
+  sources:
+    - { id: home-live, kind: product-surface, url: "https://www.nhn.com/", captured: "2026-07-13" }
+    - { id: services-live, kind: product-surface, url: "https://www.nhn.com/services?tab=technology", captured: "2026-07-13" }
+    - { id: ir-live, kind: product-surface, url: "https://www.nhn.com/ir?tab=financials&subTab=consolidatedFinancial", captured: "2026-07-13" }
+    - { id: ci-story, kind: official-doc, url: "https://inside.nhn.com/corp/245", captured: "2026-07-13" }
+    - { id: type-story, kind: official-doc, url: "https://inside.nhn.com/corp/260", captured: "2026-07-13" }
+  conflicts: []
+  claims:
+    "tokens.colors.primary": &home { surface_id: home, source_id: home-live, method: computed-style, captured: "2026-07-13" }
+    "tokens.colors.foreground": *home
+    "tokens.colors.muted": *home
+    "tokens.colors.subtle": &services { surface_id: services, source_id: services-live, method: computed-style, captured: "2026-07-13" }
+    "tokens.colors.hint": &ir { surface_id: ir, source_id: ir-live, method: computed-style, captured: "2026-07-13" }
+    "tokens.colors.surface": *services
+    "tokens.colors.canvas": *home
+    "tokens.colors.hairline": *home
+    "tokens.colors.on-primary": *home
+    "tokens.typography.family.ui": *home
+    "tokens.typography.family.display-kr": *home
+    "tokens.typography.body.size": *home
+    "tokens.typography.body.weight": *home
+    "tokens.typography.body.lineHeight": *home
+    "tokens.typography.body.use": *home
+    "tokens.typography.nav.size": *home
+    "tokens.typography.nav.weight": *home
+    "tokens.typography.nav.lineHeight": *home
+    "tokens.typography.nav.use": *home
+    "tokens.typography.label.size": *services
+    "tokens.typography.label.weight": *services
+    "tokens.typography.label.lineHeight": *services
+    "tokens.typography.label.use": *services
+    "tokens.typography.title.size": *home
+    "tokens.typography.title.weight": *home
+    "tokens.typography.title.lineHeight": *home
+    "tokens.typography.title.use": *home
+    "tokens.spacing.xs": *home
+    "tokens.spacing.sm": *home
+    "tokens.spacing.md": *home
+    "tokens.spacing.base": *home
+    "tokens.spacing.lg": *home
+    "tokens.spacing.xl": *home
+    "tokens.spacing.xxl": *home
+    "tokens.rounded.none": *home
+    "tokens.rounded.pill": *services
+    "tokens.shadow.none": *home
+    "tokens.components.previous-control.type": *services
+    "tokens.components.previous-control.fg": *services
+    "tokens.components.previous-control.radius": *services
+    "tokens.components.previous-control.font": *services
+    "tokens.components.previous-control.states": *services
+    "tokens.components.previous-control.use": *services
 tokens:
-  source: live-extract
-  extracted: "2026-06-17"
-  note: "Achromatic 2024 Kenya Hara CI — chrome is entirely grayscale. primary = ink #212126 (also the dark full-pill CTA bg); near-blacks #36363d/#57575b for nav hierarchy; light greys #f8f8f8/#e9e9e9/#dbdbdb for cards/panels. Display = Poppins (EN) + Main Pretendard Variable (KR), body = Pretendard Variable. Shadowless."
+  source: reconciled
+  extracted: "2026-07-13"
+  note: "Corporate-web evidence only: three public NHN corporate/disclosure surfaces. Colors and components below are live computed observations; no authenticated product UI or documentation chrome was captured."
   colors:
     primary: "#212126"
-    ink: "#212126"
-    ink-soft: "#36363d"
-    ink-muted: "#57575b"
-    ink-faint: "#62626a"
-    disabled: "#797981"
+    foreground: "#36363d"
+    muted: "#57575b"
+    subtle: "#62626a"
     hint: "#aaaaae"
     surface: "#f8f8f8"
-    panel: "#e9e9e9"
-    hairline: "#dbdbdb"
     canvas: "#ffffff"
+    hairline: "#e5e7eb"
     on-primary: "#ffffff"
-    pure-black: "#000000"
-    notice: "#ff2222"
   typography:
-    family: { display-en: "Poppins", display-kr: "Main Pretendard Variable", body: "Pretendard Variable" }
-    display-hero:  { size: 60, weight: 700, lineHeight: 1.20, use: "EN hero display, Poppins (Weaving New Play)" }
-    display-kr:    { size: 32, weight: 800, lineHeight: 1.50, use: "KR feature headline, Main Pretendard Variable ExtraBold" }
-    section:       { size: 44, weight: 700, lineHeight: 1.41, use: "EN section display (Game / PaymentAd), Poppins" }
-    subhead:       { size: 22, weight: 600, lineHeight: 1.00, use: "Block label (Recent News), Poppins SemiBold" }
-    card-title:    { size: 20, weight: 700, lineHeight: 1.50, use: "News-card headline, Main Pretendard Variable" }
-    body:          { size: 16, weight: 400, lineHeight: 1.50, use: "Body copy, Pretendard Variable" }
-    nav:           { size: 16, weight: 500, lineHeight: 1.50, use: "Primary nav link, Pretendard Variable" }
-    nav-sub:       { size: 14, weight: 500, lineHeight: 1.57, use: "Sub-nav / mega-menu link, Pretendard Variable" }
-  spacing: { xs: 4, sm: 8, md: 10, base: 16, lg: 24, xl: 48, xxl: 72 }
-  rounded: { sm: 12, md: 20, lg: 24, pill: 100, full: 9999 }
+    family: { ui: "Pretendard Variable", display-kr: "Main Pretendard Variable" }
+    body: { size: 16, weight: 400, lineHeight: 1.50, use: "Observed corporate body/list text" }
+    nav: { size: 16, weight: 500, lineHeight: 1.75, use: "Observed primary navigation action" }
+    label: { size: 14, weight: 500, lineHeight: 1.57, use: "Observed secondary action and label" }
+    title: { size: 20, weight: 700, lineHeight: 1.50, use: "Observed Korean heading" }
+  spacing: { xs: 4, sm: 7, md: 8, base: 10, lg: 22, xl: 32, xxl: 80 }
+  rounded: { none: 0, pill: 50 }
   shadow:
     none: "none"
   components:
-    cta-dark: { type: button, bg: "#212126", fg: "#ffffff", radius: "9999px", padding: "16px 24px", height: "48px", font: "16px / 400 Main Pretendard Variable", use: "Primary dark full-pill CTA (Visit the Newsroom / 뉴스룸 바로가기)" }
-    lang-toggle-active: { type: button, bg: "#ffffff", fg: "#212126", radius: "0px", padding: "14px 24px 14px 16px", height: "48px", font: "16px / 400 Pretendard Variable", use: "Active language switch (한국어)" }
-    lang-toggle-inactive: { type: button, bg: "#ffffff", fg: "#797981", radius: "0px", padding: "14px 24px 14px 16px", height: "48px", font: "16px / 400 Pretendard Variable", use: "Inactive language switch (English / 日本語)" }
-    social-chip: { type: button, bg: "#f8f8f8", fg: "#212126", border: "1px solid #f8f8f8", radius: "100px", padding: "10px", height: "42px", font: "16px / 400 Pretendard Variable", use: "Round social icon chip (YouTube / Instagram / LinkedIn)" }
-    feature-card: { type: card, bg: "#f8f8f8", fg: "#212126", radius: "24px", use: "Full-bleed editorial feature card, no shadow" }
-    content-card: { type: card, bg: "#f8f8f8", fg: "#212126", radius: "20px", use: "Content / Plays! card, no shadow" }
-    grey-panel: { type: card, bg: "#e9e9e9", fg: "#212126", radius: "12px", use: "Neutral grey content panel, no shadow" }
-    nav-link: { type: tab, fg: "#36363d", font: "16px / 500 Pretendard Variable", active: "text #212126", disabled: "#797981 inactive", use: "Top primary nav item" }
+    previous-control: { type: button, fg: "#212126", radius: "0px", font: "16px / 400 Pretendard Variable", states: "disabled opacity 0.4", use: "Observed previous-navigation control on the services surface" }
   components_harvested: true
 ---
 
@@ -61,381 +103,162 @@ tokens:
 
 ## 1. Visual Theme & Atmosphere
 
-NHN is a Korean technology group — cloud, payments, games, commerce, and content under one publicly listed parent — and its corporate site is the clearest expression of the radical 2024 rebrand by Kenya Hara (Nippon Design Center) with NHN's in-house designers. The defining decision is the absence of brand color. Where almost every IT holding company anchors itself to a signature blue or green, NHN's chrome is rendered **entirely in grayscale**: an ink `#212126` (a near-black with the faintest blue-warm cast) carries headings, nav, and body; lighter near-blacks `#36363d` and `#57575b` step the navigation hierarchy down; and light neutrals `#f8f8f8`, `#e9e9e9`, and `#dbdbdb` fill cards, panels, and hairlines. The single highest-contrast moment is the primary CTA — a fully-rounded pill in the same ink `#212126` with white text. This is a confident, gallery-like restraint: the company signals scale and seriousness not by shouting in color, but by refusing it.
+NHN is a Korean IT group whose public corporate presence connects a long Hangame-era history with businesses in games, payments and advertising, technology, commerce, and content. Its current brand expression is built around **Weaving New Play**: NHN’s own rebrand story explains the phrase as a move from a simple connection toward a more multidirectional act of weaving. The 2024 CI then made that idea tangible through folded-paper forms, a 27-degree fold motif, and a decision to abandon a single fixed brand colour in favour of achromatic identity. [NHN history](https://www.nhn.com/company?tab=about) and [official CI story](https://inside.nhn.com/corp/245) provide that context.
 
-The typography is a deliberate bilingual pairing. English display runs in **Poppins** — a geometric sans at 60px/700 for the hero ("Weaving New Play") and 44px/700 for section markers ("Game", "PaymentAd"), giving the Latin headlines a rounded, modern, almost editorial weight. Korean display and card headlines run in **Main Pretendard Variable** (the brand's tuned Pretendard) at ExtraBold 800 for feature lines and Bold 700 for news titles, optimized for dense hangul legibility. Body and navigation drop to **Pretendard Variable** at 16px/400–500. The split is consistent: Poppins is the brand's English voice, Pretendard its working Korean voice, and they never swap roles.
-
-What distinguishes NHN from its peers is its commitment to flatness. Live inspection found `box-shadow: none` across the hero, nav, headings, CTA pills, news cards, and footer. Depth and grouping come from flat tinted surfaces (`#f8f8f8` editorial cards, `#e9e9e9` neutral panels) and thin `#dbdbdb` hairlines, never elevation. Geometry leans into the rounded rectangle and the pill — 24px and 20px radii on content cards, a 12px neutral panel, 100px round social chips, and the full 9999px pill on the primary CTA. The result reads as a calm, monochrome, content-forward corporate canvas: a design system that gets out of the way of the news, products, and people it presents.
+The supplied July 2026 runtime evidence is limited to three public corporate surfaces: the main site, a services listing, and an investor-relations financial page. Across those surfaces, the visible interface is restrained and nearly monochrome: `#212126` is the principal ink, `#36363d` and `#57575b` carry hierarchy, and `#f8f8f8` provides the recurring soft surface. The collector observed no shadows and only zero-radius navigation/action controls plus a 50px pill on one low-confidence services control. These are corporate-web observations, not a claim about NHN’s separate customer products or their documentation interfaces.
 
 **Key Characteristics:**
-- Achromatic 2024 Kenya Hara CI — chrome is entirely grayscale, no brand hue
-- Ink `#212126` as the single workhorse: headings, body, nav, and the primary pill CTA
-- Stepped near-black nav hierarchy: `#36363d` (primary) → `#57575b` (sub) → `#797981` (inactive)
-- Bilingual display pairing: Poppins (English, 60px/700 hero) over Main Pretendard Variable (Korean, 800)
-- Pretendard Variable for all body/nav at 16px/400–500
-- Flat, shadow-free system — separation via `#f8f8f8`/`#e9e9e9` surfaces and `#dbdbdb` hairlines
-- Rounded geometry — 24px/20px cards, 12px panel, 100px chips, 9999px full-pill CTA
-- White canvas (`#ffffff`) with pure black (`#000000`) reserved as a maximum-contrast accent
+- Official brand rationale: connection reinterpreted as multidirectional weaving
+- Corporate-web palette: near-black ink with neutral grey hierarchy and white canvas
+- Flat visual treatment: the captured components report `box-shadow: none`
+- Live UI typography: Pretendard Variable; Main Pretendard Variable appears in Korean heading roles
+- Official NHN Sans is a distinct brand asset, not a live-family token for these captured pages
 
 ## 2. Color Palette & Roles
 
-NHN's palette is intentionally monochromatic — a grayscale ladder from near-black ink to off-white, with no saturated brand color in the chrome.
-
-### Ink & Text
-- **Ink** (`#212126`): The primary color. Headings, body text, nav, footer, and the primary CTA background. A near-black with a barely-perceptible warm-blue cast — never pure black for structure.
-- **Ink Soft** (`#36363d`): Primary navigation links and news-card headlines. One step lighter than ink for the top tier of menu items.
-- **Ink Muted** (`#57575b`): Sub-navigation and mega-menu links — the second tier of the hierarchy.
-- **Ink Faint** (`#62626a`): Tertiary text, metadata, and captions.
-- **Disabled** (`#797981`): Inactive language toggles and lowest-emphasis labels.
-- **Hint** (`#aaaaae`): Placeholder-level / faintest hint text.
+### Live corporate-web colors
+- **Primary Ink** (`#212126`): Observed text and transparent action labels across all three captured surfaces.
+- **Foreground** (`#36363d`): Observed corporate primary-navigation list item text.
+- **Muted** (`#57575b`): Most frequent observed secondary/list text colour.
+- **Subtle** (`#62626a`): Secondary action/label text on the services surface.
+- **Hint** (`#aaaaae`): Low-emphasis list text on the IR surface.
+- **Surface** (`#f8f8f8`): Recurrent neutral background, including the observed services pill control.
+- **Canvas / On Ink** (`#ffffff`): Observed page background and contrast text.
+- **Hairline** (`#e5e7eb`): Computed border colour recurring in the raw collector output.
 
-### Surface & Neutral
-- **Canvas** (`#ffffff`): Page background, footer, nav bar, and active language toggle.
-- **Surface** (`#f8f8f8`): Editorial and content cards (feature, "Plays!"), round social chips. The dominant card tint.
-- **Panel** (`#e9e9e9`): Neutral grey content panels and structural blocks.
-- **Hairline** (`#dbdbdb`): Thin borders and dividers — the primary separation device in a shadow-free system.
+### Brand boundary
 
-### Contrast & Accent
-- **On Primary** (`#ffffff`): White text/labels on the ink pill CTA and on dark editorial image cards.
-- **Pure Black** (`#000000`): Reserved as a maximum-contrast accent on select surfaces; rare.
-- **Notice** (`#ff2222`): A small notice/alert red that appears only on minor status marks — not part of the brand chrome, used sparingly.
+NHN’s official CI story says the company chose achromatic brand colour rather than a single colour so the identity could accommodate a variety of combinations. That supports the neutral brand narrative; it does not promote colours from affiliate product surfaces into this corporate-web token set. [Official CI story](https://inside.nhn.com/corp/245)
 
 ## 3. Typography Rules
 
-### Font Family
-- **English display**: `Poppins` — geometric Latin sans for hero and section headlines (700 weight).
-- **Korean display**: `Main Pretendard Variable` (with `Pretendard Variable` fallback) — ExtraBold (800) for feature lines, Bold (700) for card titles.
-- **Body / UI**: `Pretendard Variable` (with system fallbacks) — the document default at weight 400–500.
-
-### Hierarchy
-
-| Role | Font | Size | Weight | Line Height | Notes |
-|------|------|------|--------|-------------|-------|
-| Display Hero (EN) | Poppins | 60px (3.75rem) | 700 | 1.20 (72px) | "Weaving New Play" hero |
-| Feature Headline (KR) | Main Pretendard Variable | 32px (2.00rem) | 800 | 1.50 (48px) | Feature card line, white on image |
-| Section Display (EN) | Poppins | 44px (2.75rem) | 700 | 1.41 (62px) | "Game" / "PaymentAd" markers |
-| Block Sub-head | Poppins | 22px (1.38rem) | 600 | 1.00 | "Recent News" label |
-| Card Title (KR) | Main Pretendard Variable | 20px (1.25rem) | 700 | 1.50 (30px) | News-card headline |
-| Nav Link | Pretendard Variable | 16px (1.00rem) | 500 | 1.50 | Primary nav item |
-| Body | Pretendard Variable | 16px (1.00rem) | 400 | 1.50 (24px) | Standard reading text |
-| Sub-nav Link | Pretendard Variable | 14px (0.88rem) | 500 | 1.57 | Mega-menu / secondary nav |
-
-### Principles
-- **Two display fonts, two languages**: Poppins owns English display; Main Pretendard Variable owns Korean display. They are never mixed within a single headline role.
-- **Weight does the work, not color**: With no brand hue, hierarchy is carried by weight (700–800 display vs 400–500 body) and by the stepped ink ladder.
-- **Hangul-first body sizing**: Body sits at a comfortable 16px / line-height 1.50, generous for dense hangul reading.
-- **Quiet tracking**: Letter-spacing stays at `normal` across the system — the restraint extends to the typography metrics, not just the palette.
+### Evidence classes
 
-## 4. Component Stylings
+- **Live computed + FontFaceSet corroborated — `Pretendard Variable`:** 370 observed uses across body, buttons, cards, headings, and lists. The bundle records 92 NHN-hosted subset source URLs under `static.nhnent.com`.
+- **Live computed + FontFaceSet corroborated — `Main Pretendard Variable`:** 32 observed uses, including Korean `h2`/`h3` roles. The collector found it loaded, but did not retain an individual source URL; retain it as a live family with that source-url limitation.
+- **Live internal family, public-name unresolved — `__Poppins_1848dd`:** two heading uses and NHN-hosted font assets were observed. The collector does not establish that this internal runtime name is the public Poppins family, so `Poppins` is not a typography token.
+- **Official distributed brand asset / official product-use — `NHN Sans`:** NHN’s brand-resource page presents it as the company’s exclusive typeface, and the official typeface story says it is intended for official communications. It was not observed as a loaded family on the three captured surfaces, so it is not a live UI token or specimen here. [Brand resource](https://www.nhn.com/en-US/company?subTab=brandResource&tab=brand) · [Typeface story](https://inside.nhn.com/corp/260)
+- **Declared-only:** `__Poppins_Fallback_1848dd` and `swiper-icons` appeared without visible use; neither is promoted.
 
-### Buttons
+### Observed hierarchy
 
-**Primary Dark Pill (Visit the Newsroom)**
-- Background: `#212126`
-- Text: `#ffffff`
-- Radius: 9999px
-- Padding: 16px 24px
-- Height: 48px
-- Font: 16px Main Pretendard Variable weight 400
-- Use: Primary call-to-action — the single high-contrast pill ("Visit the Newsroom" / "뉴스룸 바로가기")
+| Role | Family | Size | Weight | Line Height | Evidence boundary |
+|------|--------|------|--------|-------------|-------------------|
+| Corporate body/list | Pretendard Variable | 16px | 400 | 24px | Repeated across all captured surfaces |
+| Primary action | Pretendard Variable | 16px | 500 | 28px | Transparent action-label control |
+| Secondary label | Pretendard Variable | 14px | 500 | 22px | Services controls/labels |
+| Korean title | Main Pretendard Variable | 20px | 700 | 30px | Captured `h3` role |
+| Large Korean display | Main Pretendard Variable | 32px | 800 | 48px | One captured `h2` role |
 
-**Language Toggle (Active)**
-- Background: `#ffffff`
-- Text: `#212126`
+## 4. Component Stylings
+
+### Corporate navigation
+
+**Primary list item**
+- Text: `#36363d`
 - Radius: 0px
-- Padding: 14px 24px 14px 16px
-- Height: 48px
-- Font: 16px Pretendard Variable weight 400
-- Use: Selected language in the switcher ("한국어")
-
-**Language Toggle (Inactive)**
-- Background: `#ffffff`
-- Text: `#797981`
+- Padding: 0px 80px 0px 0px
+- Font: 16px / 400 / Pretendard Variable
+- Use: Observed corporate primary-navigation list item (`home::li`; also present on services and IR surfaces).
+
+**Secondary list item**
+- Text: `#57575b`
 - Radius: 0px
-- Padding: 14px 24px 14px 16px
-- Height: 48px
-- Font: 16px Pretendard Variable weight 400
-- Use: Unselected languages ("English", "日本語")
+- Padding: 7.008px 0px
+- Font: 16px / 400 / Pretendard Variable
+- Use: Observed corporate secondary/list item (`home::li`; also present on services and IR surfaces).
 
-**Social Round Chip**
-- Background: `#f8f8f8`
+### Actions
+
+**Transparent action label**
 - Text: `#212126`
-- Border: 1px solid `#f8f8f8`
-- Radius: 100px
-- Padding: 10px
-- Height: 42px
-- Font: 16px Pretendard Variable weight 400
-- Use: Round icon chips for YouTube / Instagram / LinkedIn / meetup links
+- Radius: 0px
+- Font: 16px / 500 / Pretendard Variable
+- Use: Observed transparent action control (`home::[data-omd-capture="45"]`) across the corporate surfaces.
 
-### Cards & Containers
+**Secondary label action**
+- Text: `#62626a`
+- Radius: 0px
+- Font: 14px / 500 / Pretendard Variable
+- Use: Observed services-surface control (`surface-2::[data-omd-capture="49"]`).
 
-**Editorial Feature Card**
-- Background: `#f8f8f8`
+**Previous control**
 - Text: `#212126`
-- Radius: 24px
-- Use: Full-bleed editorial feature card (no shadow); white headline overlay on image variants
+- Radius: 0px
+- Font: 16px / 400 / Pretendard Variable
+- Disabled: Observed disabled instance has transparent background and `opacity: 0.4` (`surface-2::[data-omd-capture="37"]`).
+- Use: Observed previous-navigation control on the services surface.
 
-**Content Card**
-- Background: `#f8f8f8`
-- Text: `#212126`
-- Radius: 20px
-- Use: Content / "Plays!" cards in the lower grid (no shadow)
+### Compact pill
 
-**Neutral Grey Panel**
-- Background: `#e9e9e9`
-- Text: `#212126`
-- Radius: 12px
-- Use: Structural neutral panel / placeholder block (no shadow)
-
-### Navigation
-- Background: `#ffffff`
-- Primary link: `#36363d`, 16px Pretendard Variable weight 500
-- Sub link: `#57575b`, 14px weight 500
-- Active: text shifts to ink `#212126`
-- Inactive/disabled: `#797981`
-- Use: Top horizontal nav ("회사소개", "서비스", "홍보", "투자정보") with a stepped grey mega-menu
-
-### Footer
-- Background: `#ffffff`
-- Text: `#212126`, 16px Pretendard Variable
-- Use: Corporate footer links (legal, family sites, language) on white, hairline-separated
+**Services pill**
+- Background: `#f8f8f8`
+- Text: `#62626a`
+- Radius: 50px
+- Padding: 4px 8px 4px 14px
+- Font: 14px / 500 / Pretendard Variable
+- Use: One low-confidence observed services control (`surface-2::[data-omd-capture="43"]`); do not generalize it to other NHN surfaces.
 
 ---
 
-**Verified:** 2026-06-17 (omd:add-reference CREATE — Tier 1 live inspect, 2 brand-owned surfaces)
-**Tier 1 sources:** https://www.nhn.com/ (KR homepage, live computed style); https://www.nhn.com/en-US (EN locale homepage, live computed style)
-**Tier 2 sources:** getdesign.md/nhn — NOT FOUND (no entry); styles.refero.design/?q=nhn — not listed (96 generic fallback cards, no NHN brand)
+**Verified:** 2026-07-13
+**Tier 1 sources:** https://www.nhn.com/ (corporate marketing surface, raw collector); https://www.nhn.com/services?tab=technology (corporate services surface, raw collector); https://www.nhn.com/ir?tab=financials&subTab=consolidatedFinancial (IR disclosure surface, raw collector); https://www.nhn.com/company?tab=about (official context); https://inside.nhn.com/corp/245 (official CI narrative); https://inside.nhn.com/corp/260 (official typeface narrative)
+**Tier 2 sources:** https://getdesign.md/nhn (attempted; retrieval error in this run); https://styles.refero.design/?q=nhn (attempted; retrieval error in this run)
 **Conflicts unresolved:** none
 
 ## 5. Layout Principles
 
-### Spacing System
-- Base unit: ~8px
-- Scale: 4px, 8px, 10px, 16px, 24px, 48px, 72px
-- Notable: CTA pills use 16px×24px padding; round social chips use a tight 10px; section rhythm opens up to 48–72px between blocks
-
-### Grid & Container
-- Centered, wide content column on a white canvas with generous margins
-- Hero anchored by the 60px Poppins English display ("Weaving New Play") with the KR mission line beneath
-- "Recent News" grid: equal news cards (20px radius, `#f8f8f8`) in a responsive multi-column layout
-- Business-area sections ("Game", "PaymentAd", "Commerce", "Technology", "Contents") marked by 44px Poppins display headers
-- Editorial feature cards run full-bleed at 24px radius
-
-### Whitespace Philosophy
-- **Gallery restraint**: the monochrome palette plus abundant white space makes the page feel like a curated exhibition, not a marketing funnel.
-- **Flat segmentation**: sections separate by surface tint (`#f8f8f8` / `#e9e9e9`) and `#dbdbdb` hairlines, never by shadow or heavy borders.
-- **Content as color**: with grayscale chrome, the photography and editorial imagery inside cards supply all the chromatic interest.
-
-### Border Radius Scale
-- Small (12px): neutral grey structural panels
-- Medium (20px): content / Plays! cards
-- Large (24px): full-bleed editorial feature cards
-- Chip (100px): round social icon chips
-- Full (9999px): the primary dark pill CTA
+The collected evidence supports a flat corporate information layout: transparent navigation/actions, neutral `#f8f8f8` surface moments, and a white canvas. Measured spacing clusters include 4, 7, 8, 10, 22, 32, and 80px; they are observations rather than a complete spacing scale. No product-app layout or documentation layout was captured.
 
 ## 6. Depth & Elevation
 
-| Level | Treatment | Use |
-|-------|-----------|-----|
-| Flat (Level 0) | No shadow | Page background, nav, headings, footer — the entire system |
-| Tint (Level 1) | `#f8f8f8` / `#e9e9e9` background shift | Card and panel separation without elevation |
-| Hairline (Level 2) | `1px solid #dbdbdb` | Dividers, footer rules, list separators |
-
-**Shadow Philosophy**: NHN is a fully shadowless system. Live inspection returned `box-shadow: none` across the hero, navigation, headings, CTA pills, news cards, and footer. All grouping is achieved through flat tinted surfaces (`#f8f8f8`, `#e9e9e9`) and thin `#dbdbdb` hairlines. This is the natural extension of the achromatic CI: where color is removed, elevation is removed too, leaving a calm, two-dimensional canvas. When emphasis is needed, the system reaches for the maximum-contrast ink pill (`#212126`), never for a drop shadow.
+All captured representative components report `box-shadow: none`. Separation in the captured corporate UI comes from text hierarchy, white/neutral surfaces, and the recurring `#e5e7eb` computed border colour. No elevation ramp is inferred beyond that evidence.
 
 ## 7. Do's and Don'ts
 
 ### Do
-- Keep the chrome achromatic — ink `#212126` and the grayscale ladder carry everything
-- Use Poppins for English display headlines and Main Pretendard Variable for Korean display
-- Use Pretendard Variable at 16px/400–500 for body and nav
-- Reserve the dark `#212126` full-pill as the single primary CTA
-- Step the nav hierarchy with the ink ladder: `#36363d` → `#57575b` → `#797981`
-- Separate sections with `#f8f8f8` / `#e9e9e9` surfaces and `#dbdbdb` hairlines
-- Keep everything flat — no shadows anywhere
-- Use rounded geometry — 24px/20px cards, 100px chips, 9999px pill
-- Let editorial photography inside cards supply the only chromatic interest
+- Keep the corporate chrome neutral and let the ink-to-grey text hierarchy do the work.
+- Use the observed flat treatment: no shadow on captured corporate components.
+- Keep `Pretendard Variable` for live UI/body roles represented in this evidence.
+- Treat NHN Sans as an official communication asset until a target surface proves live use.
+- Keep the one observed disabled previous-control treatment tied to its services-surface context.
 
 ### Don't
-- Introduce a saturated brand color into the chrome — NHN's identity is the absence of one
-- Use drop shadows for elevation — the system is shadow-free
-- Use pure black (`#000000`) for body text — reserve the near-black ink `#212126`
-- Mix Poppins and Pretendard within one headline role — each language has its display font
-- Set body text in a heavy weight — display is 700–800, body stays 400–500
-- Use sharp 0px corners on content cards — cards and CTAs are rounded
-- Spread the dark pill across many actions — keep it the single primary CTA
-- Add gradients or colored fills to structural surfaces — grays and white only
+- Promote affiliate-product colours or components into the NHN corporate reference without direct evidence.
+- Rename `__Poppins_1848dd` to Poppins in a token set without a reliable public-family mapping.
+- Invent hover, focus, pressed, error, or success variants: the supplied collector has zero interaction captures.
+- Generalize the low-confidence services pill into a global button style.
 
 ## 8. Responsive Behavior
 
-### Breakpoints
-| Name | Width | Key Changes |
-|------|-------|-------------|
-| Mobile | <640px | Single column, hero display compresses, news cards stack, nav collapses to a menu |
-| Tablet | 640-1024px | 2-up news cards, moderate margins |
-| Desktop | 1024-1440px | Full multi-column news grid, wide centered content, mega-menu nav |
-
-### Touch Targets
-- CTA pill and language toggles at 48px height — comfortably tappable
-- Round social chips at 42px with full 100px radius
-- Nav links spaced within a tall header row
-
-### Collapsing Strategy
-- Hero: 60px Poppins display scales down on mobile; the KR mission line wraps
-- News grid: multi-column → 2-up → single stacked
-- Business-area section markers (44px) compress on narrow viewports
-- Editorial feature cards maintain full-bleed treatment with reduced radius on mobile
-- Footer link clusters reflow into stacked groups
-
-### Image Behavior
-- Editorial card imagery carries no shadow at any size, consistent with the flat system
-- Cards hold their 20–24px radius across breakpoints
-- Photography supplies all color; the surrounding chrome stays grayscale
+The supplied collector used only a 1440×900 viewport. Responsive breakpoints, mobile navigation, and touch-target behaviour are unresolved and intentionally omitted.
 
 ## 9. Agent Prompt Guide
 
-### Quick Color Reference
-- Primary / heading / CTA: Ink (`#212126`)
-- Primary nav: Ink Soft (`#36363d`)
-- Sub-nav: Ink Muted (`#57575b`)
-- Inactive: Disabled (`#797981`)
-- Background: Canvas (`#ffffff`)
-- Card surface: Surface (`#f8f8f8`)
-- Neutral panel: Panel (`#e9e9e9`)
-- Hairline: `#dbdbdb`
-- CTA text: White (`#ffffff`)
-
-### Example Component Prompts
-- "Create a corporate hero on white. English display 'Weaving New Play' at 60px Poppins weight 700, line-height 1.20, color #212126. Korean mission line below in Main Pretendard Variable. One primary CTA: a dark full pill — #212126 background, white text, 9999px radius, 16px 24px padding, 48px height, 'Visit the Newsroom'."
-- "Design a news card: #f8f8f8 background, 20px radius, no shadow. Title 20px Main Pretendard Variable weight 700, line-height 1.50, color #36363d. Keep it flat; separate from siblings with a #dbdbdb hairline."
-- "Build a section marker: 'Game' at 44px Poppins weight 700, color #212126, on white. No color accent — let the section photography carry the hue."
-- "Create top nav on white. Primary links 16px Pretendard Variable weight 500, color #36363d; sub-links 14px color #57575b; inactive #797981; active shifts to #212126. No underline, no color highlight."
-- "Make a round social chip: #f8f8f8 background, 1px solid #f8f8f8 border, 100px radius, 10px padding, 42px height, monochrome icon in #212126."
-
-### Iteration Guide
-1. Keep the chrome 100% grayscale — ink `#212126` is the primary; never introduce a brand hue
-2. Poppins for English display, Main Pretendard Variable for Korean display, Pretendard Variable for body/nav
-3. No shadows — separate with `#f8f8f8`/`#e9e9e9` surfaces and `#dbdbdb` hairlines
-4. The single primary CTA is the dark `#212126` full pill with white text
-5. Step the nav with the ink ladder `#36363d` → `#57575b` → `#797981`
-6. Rounded geometry — 24px/20px cards, 100px chips, 9999px pill
-7. Let editorial photography inside cards be the only source of color
-
----
+Use this reference only for an NHN-like **corporate information surface**: white canvas, near-black `#212126` text, a muted `#36363d` / `#57575b` hierarchy, `#f8f8f8` neutral surface moments, Pretendard Variable body/UI text, and no shadows. Do not use it as a substitute for an NHN affiliate product, authenticated app, or documentation system.
 
 ## 10. Voice & Tone
 
-NHN's voice is **measured, connective, and quietly ambitious** — a corporate group that frames itself not as a single product but as a weaver of many. The English tagline "Weaving New Play" and the Korean mission line "상상과 현실, 기술과 삶, 사람과 사람을 연결합니다" ("We connect imagination and reality, technology and life, people and people") set the register: aspirational without hype, infrastructural without coldness. Copy treats the reader — investor, partner, candidate, or developer — as a peer evaluating a serious, multi-business technology company.
-
-| Context | Tone |
-|---|---|
-| Hero / tagline | Aspirational, connective. "Weaving New Play." Confident, never loud. |
-| Mission statement | Humanistic and infrastructural. Frames technology as connection, not spectacle. |
-| Newsroom / press | Factual, corporate, third-person. Headlines state the news plainly. |
-| Business-area labels | One-word, declarative. "Game", "Commerce", "Technology", "Contents". |
-| Investor / governance | Formal, disclosure-grade. Reads like a careful corporate filing. |
-| Culture / careers | Warm but composed. Celebrates people and craft, not bravado. |
-
-**Voice samples (verbatim from live homepage):**
-- "Weaving New Play" — English hero tagline (the brand's central metaphor). *(verified live 2026-06-17, nhn.com/en-US)*
-- "상상과 현실, 기술과 삶, 사람과 사람을 연결합니다" — Korean mission line (connection as the founding frame). *(verified live 2026-06-17, nhn.com)*
-- "Recent News" / "Visit the Newsroom" — newsroom CTA copy (plain, factual). *(verified live 2026-06-17)*
-
-**Forbidden register**: color-hyped product superlatives, exclamation-driven marketing, "revolutionary"/"game-changing" boilerplate, and any visual or verbal flourish that breaks the gallery-calm restraint. NHN's confidence is in the absence of noise.
+NHN’s first-party language centres on connection and future-facing expansion: the official slogan is “Weaving New Play,” while the company’s rebrand story describes a shift from simple connection to multidirectional weaving. Corporate copy should stay explanatory and composed rather than adding product-marketing superlatives. [Official slogan story](https://inside.nhn.com/corp/164)
 
 ## 11. Brand Narrative
 
-NHN is a Korean technology group whose corporate lineage traces back to the early Korean internet era — its name a legacy of the "Next Human Network" framing — and which today operates as a publicly listed holding company spanning five business areas: **Game, Payment & Advertising, Commerce, Technology, and Contents**. Where a search-portal heritage once defined it, NHN has positioned the modern group around connection: the homepage states plainly that the company connects "imagination and reality, technology and life, and people with people," and presents "Weaving New Play" as the single English promise binding its otherwise diverse businesses.
-
-The most consequential brand event of recent years was the **2024 corporate-identity redesign led by Kenya Hara** of Nippon Design Center (the art director behind Muji's visual philosophy), working with NHN's in-house design team. The rebrand introduced an **origami-derived logomark** — the folds forming the letters "N" and "H" to symbolize connectivity, scalability, and open-ended possibility — and, crucially, moved NHN off the fixed signature color that almost every IT company defaults to. In its place came a **monochromatic identity** designed to adapt seamlessly across online and offline environments. The achromatic chrome observed live (ink `#212126`, grayscale surfaces, no brand hue, no shadows) is the direct product of that decision.
-
-What NHN's design refuses is the loud, color-coded, gradient-heavy look of conventional tech-company branding. What it embraces is gallery-grade restraint: a single ink, a flat shadow-free canvas, rounded forms, a disciplined bilingual type system (Poppins for English, Pretendard for Korean), and editorial photography as the only carrier of color. The result is a corporate brand that signals seriousness and longevity through reduction — an identity that, like the origami it is built on, finds richness in folding simple material into many forms.
-
-*Founding-era and rebrand details (Next Human Network heritage, 2024 Kenya Hara CI, origami logomark, five business areas) reflect publicly documented facts and the live homepage; specific dates beyond the homepage are general public knowledge rather than quoted NHN statements.*
+NHN traces its history to Hangame Communication and the Hangame online-game portal, then describes a modern global IT group working across multiple business areas. Its official timeline records the 2023 public introduction of “Weaving New Play”; its 2024 CI story explains the subsequent folded-paper identity, the 27-degree fold, and the achromatic colour decision. [Official history](https://www.nhn.com/company?tab=about) · [Official CI story](https://inside.nhn.com/corp/245)
 
 ## 12. Principles
 
-1. **Identity through reduction.** NHN's brand is defined by what it removes — the signature color. *UI implication:* keep the chrome grayscale; never reach for a brand hue to create emphasis.
-2. **Connection over product.** The group frames itself as a weaver of many businesses, not one. *UI implication:* design surfaces that present diverse content (news, games, commerce, tech) under one calm, consistent system.
-3. **Flat and quiet.** Calm restraint beats decorative depth. *UI implication:* no shadows; separate with tint and hairlines; let white space do the structuring.
-4. **Two languages, two display voices.** Poppins for English, Pretendard for Korean. *UI implication:* never mix display fonts within a role; respect the bilingual split.
-5. **Let the content carry the color.** With grayscale chrome, photography and editorial imagery supply all chromatic interest. *UI implication:* design cards as neutral frames around vivid content, not as colored objects themselves.
+1. **Connection becomes weaving.** Official rebrand material frames the idea as multidirectional connection. *UI implication:* organise diverse corporate information under one calm, consistent structure.
+2. **Achromatic identity leaves room for variety.** NHN says it abandoned a single colour to open varied combinations. *UI implication:* keep corporate chrome neutral unless a directly observed surface provides a different role.
+3. **CI and typography are controlled brand assets.** NHN asks that brand resources not be arbitrarily changed. *UI implication:* do not substitute NHN Sans, its CI, or unverified font-family names as though they were live tokens.
 
 ## 13. Personas
 
-*Personas below are fictional archetypes informed by publicly observable NHN audiences (institutional investors, enterprise/partner evaluators, prospective employees, developers across the group's businesses), not individual people.*
-
-**한지수, 38, 서울.** An equity analyst covering Korean tech holdings. Visits the corporate site for newsroom updates, quarterly results, and governance disclosures. Values that the achromatic, gallery-calm presentation signals a mature, well-run company rather than a hype-driven startup.
-
-**David Lim, 44, Singapore.** A regional partnerships lead evaluating NHN's payments and cloud businesses. Reads the EN locale, appreciates the plain "Weaving New Play" framing and the clear five-area structure. Trusts the restraint as a sign of operational seriousness.
-
-**박서연, 27, 판교.** A designer considering joining NHN. Recognizes the Kenya Hara rebrand immediately and reads the monochrome identity as a statement of craft and confidence. The flat, type-driven system tells her the company takes design seriously.
-
-**김도현, 33, 대전.** A developer integrating one of NHN's group services. Comes for technical news and product announcements; values that the corporate chrome stays out of the way so the content is easy to scan.
+[FILL IN] NHN has not supplied first-party audience-segment or persona documentation in the sources reviewed for this reference. Do not fabricate named user personas from the corporate, services, or IR surfaces.
 
 ## 14. States
 
-| State | Treatment |
-|---|---|
-| **Empty (no news for filter)** | White canvas. Single Ink (`#212126`) line at body size explaining no items, with a path back to all news. No illustration, no color. |
-| **Empty (search, no results)** | Ink Muted (`#57575b`) single line stating nothing matched, filter summary visible above. Calm and factual. |
-| **Loading (news grid)** | Skeleton cards on `#f8f8f8` at final 20px-radius dimensions. Flat pulse — no shadow shimmer, consistent with the shadowless system. |
-| **Loading (page transition)** | Subtle top-of-viewport progress; previous content stays visible. No spinner overlay. |
-| **Error (content failed to load)** | Inline Ink (`#212126`) message with a plain explanation and a retry. No generic "오류가 발생했습니다" alone. |
-| **Error (form validation, contact/subscribe)** | Field-level message below the input in the notice tone; describes what is valid, not just "필수". |
-| **Success (subscribed / submitted)** | Brief inline confirmation in calm Ink tone; next-step link immediately below. No celebratory emoji, no color burst. |
-| **Skeleton** | `#f8f8f8` / `#e9e9e9` blocks at final dimensions and radii, flat pulse. |
-| **Disabled** | Disabled (`#797981`) text on reduced-opacity surface; the dark pill CTA fades rather than switching to a different hue. |
+The only state recorded by the supplied collector is a **disabled** previous-navigation control on the services surface: transparent background, `#212126` text, and `opacity: 0.4`. Hover, focus, pressed, loading, error, empty, and success states were not captured and are unresolved.
 
 ## 15. Motion & Easing
 
-**Durations**:
-
-| Token | Value | Use |
-|---|---|---|
-| `motion-fast` | 120ms | Hover, nav reveal, focus |
-| `motion-standard` | 220ms | Card/section reveal, mega-menu, language switch |
-| `motion-slow` | 360ms | Page-level transitions, hero reveal |
-
-**Easings**:
-
-| Token | Curve | Use |
-|---|---|---|
-| `ease-enter` | `cubic-bezier(0.2, 0.6, 0.25, 1)` | Arriving — menus, cards, sheets |
-| `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Dismissals |
-| `ease-standard` | `cubic-bezier(0.25, 0.1, 0.25, 1)` | Two-way transitions |
-
-**Motion rules**: Motion is restrained and functional, matching the flat, achromatic aesthetic. The mega-menu and language switcher fade/slide in at `motion-standard / ease-enter`; news cards reveal with a quiet fade-up. No bounce, no spring, no color-driven flourish — a corporate technology group signals steadiness, not playfulness. Under `prefers-reduced-motion: reduce`, all transitions collapse to instant and the page remains fully functional.
-
-<!--
-OmD v0.1 Sources — Philosophy Layer (sections 10–15)
-
-Tier 1 live inspect (2026-06-17) via playwright getComputedStyle on two brand-owned surfaces:
-- https://www.nhn.com/ (KR homepage) and https://www.nhn.com/en-US (EN locale)
-- Achromatic chrome confirmed: ink rgb(33,33,38) #212126, near-blacks #36363d/#57575b,
-  light greys #f8f8f8/#e9e9e9/#dbdbdb, no saturated brand color, box-shadow: none everywhere.
-- Display fonts: Poppins (EN, 60px/700 hero "Weaving New Play") + Main Pretendard Variable
-  (KR, 800/700). Body/nav: Pretendard Variable 16px/400–500.
-- Primary CTA: dark full-pill #212126 / white text / 9999px / 48px ("Visit the Newsroom" /
-  "뉴스룸 바로가기"). Cards #f8f8f8 at 20–24px radius; grey panel #e9e9e9 12px.
-
-Voice samples (§10) are verbatim from the live homepage (EN tagline "Weaving New Play";
-KR mission line "상상과 현실, 기술과 삶, 사람과 사람을 연결합니다"; "Recent News" / "Visit the Newsroom").
-
-Brand narrative (§11): NHN as a Korean tech group across five business areas (Game,
-Payment & Advertising, Commerce, Technology, Contents). The 2024 corporate-identity
-redesign was led by Kenya Hara (Nippon Design Center) with NHN's in-house designers,
-introducing an origami-derived "N"/"H" logomark and a monochromatic identity that moves
-off fixed IT-company color. These are publicly documented facts (corroborated by web
-reporting and the IDSA IDEA "NHN Rebrand" gallery) plus the live homepage; specific
-dates beyond the homepage are general public knowledge, not quoted NHN statements.
-
-Personas (§13) are fictional archetypes informed by publicly observable NHN audiences
-(investors, partners, candidates, developers). Names are illustrative; they do not refer
-to real people.
-
-Interpretive claims (e.g., "identity through reduction", "let the content carry the color",
-"richness in folding simple material") are editorial readings connecting NHN's observed
-achromatic design to its stated connection-mission and the Kenya Hara rebrand, not directly
-sourced NHN statements.
--->
+No motion durations, easing curves, or interaction transitions were captured. The raw class names are not sufficient evidence to publish motion tokens; leave motion unresolved for this reference.