NHN DESIGN.md

Design System Inspiration of NHN

Overview

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. Navigation links and text actions are square; the rounded shapes are pills and circles: 40px category tabs on the services and IR pages, 50px tag pills, a 24px feature card and 42px circular social links (§4). Corrected 2026-09-30: the July text said the only rounded element was 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

Primary tasks

• Find out which businesses the group works across
• Browse the technology services the group offers
• Look up the group's financial results on its investor-relations page

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

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.

Personas

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.

Colors

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

Typography

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

Layout

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.

Responsive Behavior

The supplied collector used only a 1440×900 viewport. Responsive breakpoints, mobile navigation, and touch-target behaviour are unresolved and intentionally omitted.

Elevation & Depth

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.

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• shadow.none: none

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.

Components

Corporate navigation

Primary list item

• Text: #36363d
• Radius: 0px
• Padding: 0px 80px 0px 0px
• Label: the child link (a.text-body10-m) computes 16px / 500 / 28px; the current section's link computes 700 (see Header main link below).
• Use: Observed corporate primary-navigation list item (home::li; also present on services and IR surfaces).
• Corrected 2026-09-30: the July text gave this item 16px / 400, which is the list item's inherited body type; the visible label is its child link.

Secondary list item

• Text: #57575b
• Radius: 0px
• Padding: 7.008px 0px
• Label: the child link (a.text-body11-m) computes 14px / 500 / 22px, tracking -0.14px (see Header sub-menu link below).
• Use: Observed corporate secondary/list item (home::li; also present on services and IR surfaces).
• Corrected 2026-09-30: the July text gave this item 16px / 400, the list item's inherited body type; the visible label is its child link.

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. It is the footer link recorded as footer-link below.

Secondary label action

• Text: #62626a
• Radius: 0px
• Font: 14px / 500 / Pretendard Variable
• Use: Observed services-surface control (surface-2::[data-omd-capture="49"]). It is an unselected label inside a 273px × 48px control whose frame has a 40px radius and 0px 22px padding. The neighbouring label (capture 48) computes #ffffff / 14px / 700 over a fill the capture does not include, so no selected style is declared.

Previous control

• Radius: 0px; size 26px × 32px; transparent
• Disabled: all three previous controls on the services surface (captures 37, 40, 44) were disabled at capture time. Their dumped properties equal the enabled next controls (captures 38, 41, 45). The class list names opacity-40, but opacity is outside the collector's dump, so no disabled value is declared.
• Use: Observed previous-navigation control on the services surface; icon only.
• Corrected 2026-09-30: the July text read this control's values from the disabled element, listed the inherited body text (#212126, 16px / 400) as its text style, and stated opacity: 0.4 from the class name.

Compact pill

Services pill

• Background: #f8f8f8
• Text: #62626a
• Radius: 50px
• Padding: 4px 8px 4px 14px
• Font: 14px / 500 / Pretendard Variable
• Use: Services tag pill (surface-2::[data-omd-capture="43"], a button; captures 39, 42 and 46 are links with the same values); do not generalize it to other NHN surfaces. Corrected 2026-09-30: the July text called it one low-confidence control; the services page holds four.

The components below were transcribed on 2026-09-30 from the same 2026-07-13 bundle; nothing was re-measured.

Header sub-menu link

• Background: transparent
• Text: #57575b
• Font: 14px / 500 / Pretendard Variable, line height 22px, tracking -0.14px
• Radius: 0px; padding 0px; height 22px (48px to 90px wide)
• Hover: weight 700, tracking normal; colour #57575b in every frame
• Pressed: weight 700, tracking normal; colour #57575b in every frame
• Selected: the current sub-page link computes 700 and tracking normal at rest on services (capture 10) and IR (capture 17).
• States: 52 links across the three surfaces record a hover and a pressed frame (104 frames). Every frame changes only the weight (500 to 700) and the tracking (-0.14px to normal), which is exactly the current sub-page link's rest style on two routes, so the value is settled. The class list also names hover:text-body11-l; that is a declaration, and the frames are the measurement. Focus was not sampled.
• Use: a.text-body11-m inside the header sub-menu; evidence home::[data-omd-capture="2"].

Header main link

• Background: transparent
• Text: #36363d
• Font: 16px / 500 / Pretendard Variable, line height 28px
• Radius: 0px; padding 0px; height 28px
• Selected: the current section's link computes 700 on services (capture 6) and IR (capture 14).
• States: rest only; no state frame.
• Use: a.text-body10-m inside li.mainLink; evidence home::[data-omd-capture="1"].

Category tab pill

• Background: #ffffff
• Text: #62626a
• Font: 16px / 500 / Pretendard Variable, line height 28px
• Radius: 40px; padding 0px 32px; height 48px (92px to 124px wide)
• Selected: #212126 fill, #ffffff text, weight 700 (services capture 35, IR capture 34); the class list adds cursor-default. No aria-selected is recorded; the pairing agrees on both routes.
• Border: none. The class list names border, but the computed width is 0px.
• States: default and selected only; no state frame.
• Use: category tabs on the services and IR pages; evidence surface-2::[data-omd-capture="33"].

IR sub-tab link

• Background: transparent
• Text: #aaaaae; label 16px / 500 / 28px (the child li)
• Radius: 100px; padding 11.008px 0px 11.008px 32px; 240px × 50px
• Selected: one of the two links (capture 38) computes #212126 with a 700 label. No aria-selected is recorded, so the pairing rests on that difference on a route that carries a subTab parameter.
• States: no state frame; the hover colours in the class lists are declarations.
• Use: financial-statement sub-tabs on the IR page; evidence surface-3::[data-omd-capture="39"].

Feature card

• Background: #f8f8f8
• Radius: 24px
• Size: 612px × 702px
• Title: #ffffff, 32px / 800 / 48px, Main Pretendard Variable (the child h2)
• States: default only; no state frame.
• Use: home feature card; evidence home::[data-omd-capture="33"]. The root computes the inherited body text, so no text style is taken from it.

News list item

• Background: transparent
• Size: 508px × 126px; padding 0px 22px 0px 0px
• Title: #36363d, 20px / 700 / 30px, Main Pretendard Variable, clamped to two lines (the child h3)
• States: nine captured at rest on home; no state frame.
• Use: home news list; evidence home::[data-omd-capture="35"]. The root computes the inherited body text.

Footer link

• Background: transparent
• Text: #212126
• Font: 16px / 500 / Pretendard Variable, line height 28px
• Radius: 0px; padding 0px; height 28px; minimum width 56px
• Emphasis: the nine-character item (capture 47, 114px wide) computes 700.
• States: default only; no state frame.
• Use: footer links and link-styled buttons on all three surfaces; evidence home::[data-omd-capture="45"] to "47".

Footer social link

• Background: #f8f8f8
• Border: 1px #f8f8f8
• Radius: 100px; padding 10px; 42px × 42px
• States: four per surface, captured at rest on all three surfaces; icon only; no state frame.
• Use: footer social links; evidence home::[data-omd-capture="50"] to "53".

---

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

States

The supplied collector recorded 104 pointer-state frames, all on the header sub-menu links: hover and pressed change the weight from 500 to 700 and the tracking from -0.14px to normal, matching the current sub-page link at rest (§4). Selected states are recorded as current-route markers: the header main link (700), the category tab pill (#212126 fill, #ffffff text) and the IR sub-tab link (#212126, 700). The previous-navigation controls were disabled at capture time; opacity is outside the dump, so their disabled look is unresolved. Focus, loading, error, empty and success states were not captured and are unresolved. Corrected 2026-09-30: the July text named the disabled control as the only recorded state and gave it #212126 text and opacity: 0.4, taken from the body text and the class name.

Live state probe, 2026-10-16 (https://www.nhn.com/services?tab=technology), services-pill: pressed — no visible change (measured 2026-10-16).

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 beyond the header sub-menu link's measured hover and pressed weight change. Corrected 2026-09-30: the July reason, "zero interaction captures", counts expansions, not pointer-state frames.
• Generalize the low-confidence services pill into a global button style.

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

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.

Governance

Known Gaps

• Contrast, gnb-submenu-link. Text #57575b on #00000000 measures 2.92:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, gnb-link. Text #36363d on #00000000 measures 1.75:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, feature-card. Text #ffffff on #f8f8f8 measures 1.06:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, news-list-item. Text #36363d on #00000000 measures 1.75:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, footer-link. Text #212126 on #00000000 measures 1.31:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.