Design System Inspiration of NHN

1. Visual Theme & Atmosphere

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 and official CI story provide that context.

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:

• 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

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.

Brand boundary

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

3. Typography Rules

Evidence classes

• 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 · Typeface story
• Declared-only: __Poppins_Fallback_1848dd and swiper-icons appeared without visible use; neither is promoted.

Observed hierarchy

4. Component Stylings

Corporate navigation

Primary list item

• Text: #36363d
• Radius: 0px
• 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: 7.008px 0px
• Font: 16px / 400 / Pretendard Variable
• Use: Observed corporate secondary/list item (home::li; also present on services and IR surfaces).

Actions

Transparent action label

• Text: #212126
• Radius: 0px
• Font: 16px / 500 / Pretendard Variable
• Use: Observed transparent action control (home::[data-omd-capture="45"]) across the corporate surfaces.

Secondary label action

• Text: #62626a
• Radius: 0px
• Font: 14px / 500 / Pretendard Variable
• Use: Observed services-surface control (surface-2::[data-omd-capture="49"]).

Previous control

• Text: #212126
• 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.

Compact pill

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-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

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

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 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

• 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

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

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 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

11. Brand Narrative

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 · Official CI story

12. Principles

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

[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

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

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.