Design System Inspiration of NHN

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.

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.

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

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.

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.

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.

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

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.

4. Component Stylings

Buttons

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" / "뉴스룸 바로가기")

Language Toggle (Active)

• Background: #ffffff
• Text: #212126
• 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
• Radius: 0px
• Padding: 14px 24px 14px 16px
• Height: 48px
• Font: 16px Pretendard Variable weight 400
• Use: Unselected languages ("English", "日本語")

Social Round Chip

• Background: #f8f8f8
• 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

Cards & Containers

Editorial Feature Card

• Background: #f8f8f8
• Text: #212126
• Radius: 24px
• Use: Full-bleed editorial feature card (no shadow); white headline overlay on image variants

Content Card

• Background: #f8f8f8
• Text: #212126
• Radius: 20px
• Use: Content / "Plays!" cards in the lower grid (no shadow)

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

---

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

6. Depth & Elevation

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.

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

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

8. Responsive Behavior

Breakpoints

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

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

---

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.

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.

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.

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.

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.

14. States

15. Motion & Easing

Durations:

Easings:

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.