Design System Inspiration of NCSOFT

1. Visual Theme & Atmosphere

NCSOFT — the Korean game maker behind Lineage, AION, Blade & Soul, and Throne and Liberty, and in 2026 rebranded simply to NC — runs two distinct but coordinated brand surfaces, and the contrast between them is the system. The corporate/game portal at nc.com (where ncsoft.com now redirects) is a bright, premium media catalog: a pure white (#ffffff) and cool-grey (#f2f2f3) canvas, near-black ink (#0f1011), 16px-radius game cards in a dense grid, and Pretendard as the workhorse type. Its hero is a cinematic full-bleed carousel with 48px/700 Pretendard headlines reversed white over game key-art, and small white circular control buttons (rgba(0,0,0,0.12) hairline border) that keep the chrome out of the way of the art. The single saturated interactive color is NC Purple (#7234e0) — surfaced as --core_primary_normal in the live token system, and reinforced by a CDN literally namespaced purple (assets.playnccdn.com/purple/...).

The brand-media surface at about.ncsoft.com (NC PLAY, "엔씨 공식 브랜드 미디어") is the opposite mood: a confident, monochrome editorial magazine. Its hero runs dark — a #333333 stage with #000000 panels and crisp white type — while article bodies flip to light, near-black ink (#1e1e1e) on white with thin #ebebeb / #efefef rules. Here the type is Helvetica Now for Latin and NotoSans-kr for Hangul, with Helvetica Now Display Black driving the oversized 40px editorial display lines (ALL / EDGE / INTERACTIVE). It is shadowless and grid-disciplined, reading like a design annual rather than a game site.

The unifying identity is the 2020 Pentagram corporate-identity renewal that produced the present logo and palette. Pentagram cut the edges of the letters at 45-degree angles ("NC's sincerity in creating masterpieces based on cutting-edge technology"), set the letters bold with no space between them ("a new world that is connected"), and defined NC BLUE plus an NC BLUE Tint — a cyan-rich blue built by "filling in cyan at various percentages for sharper, clearer visibility." That heritage blue lives in the digital system as the point-cobalt family (#1d4b99 normal, #0e356a strong). The net atmosphere: an engineering-grade games company that presents its products like a luxury catalog and its brand story like an editorial.

Key Characteristics:

• Two surfaces, one system: bright Pretendard portal (nc.com) + monochrome Helvetica Now editorial (about.ncsoft.com)
• NC Purple (#7234e0) as the single saturated digital primary — --core_primary_normal, on a purple-named CDN
• Structured DTCG token system on nc.com: core/neutral/point/background families as CSS variables, dual light+dark themes
• NC BLUE (point cobalt #1d4b99 / #0e356a) as the Pentagram CI heritage mark — print-origin, used as a digital accent
• Helvetica Now Display Black for oversized editorial display (40px) on NC PLAY
• Near-black ink (#0f1011 portal / #1e1e1e editorial) instead of pure black for text
• Shadowless: separation by tint (#f2f2f3), hairlines (rgba(0,0,0,0.12), #ebebeb), and dark/light banding
• Card-radius scale 12px (NC PLAY tiles) → 16px (portal game cards); 6px buttons; full-round avatars/controls
• Point accent palette (red #f1415e, green #21ab79, magenta #fa38ec, light-blue #38aefa) for status/category

2. Color Palette & Roles

Primary (NC Purple)

• NC Purple (#7234e0): Primary interactive color and CTA background. --core_primary_normal on the live nc.com portal (light theme). The system's single "action" hue.
• Purple Strong (#482486): --core_primary_strong. Pressed / strong-emphasis purple for active CTA states and deep accents.
• Purple Subtle (#e8d6ff): --core_primary_subtle. Tinted purple surface for selected chips, soft buttons, and highlight backgrounds.
• Purple Faint (#f6eeff): --core_primary_faint. Lightest purple wash for hover surfaces and tonal blocks.
• Purple Dark-theme (#8243f2): --core_primary_normal resolved in the dark theme — a slightly brighter purple for the same role on dark backgrounds.

NC BLUE (CI heritage)

• NC Blue (#1d4b99): The Pentagram CI heritage blue, surfaced digitally as --point_cobalt_normal. Cyan-rich corporate blue used for trust/identity accents.
• NC Blue Strong (#0e356a): --point_cobalt_strong. Deep cobalt for dark-surface accents and pressed states.
• NC Blue Subtle (#d3e2fc): --point_cobalt_subtle. NC BLUE Tint — the light, clear cyan-blue wash described in the CI renewal.
• Light Blue (#38aefa): --point_light_blue_normal. Bright sky-blue point accent for links and informational highlights.

Neutral Scale (portal gray ramp)

• Ink (#0f1011): --background_base_1 (dark) / primary near-black ink. Headlines, strong body, nav text on light.
• Ink Soft (#1e1e1e): --neutral_gray_010-adjacent; the editorial ink on NC PLAY article bodies.
• Gray 015 (#252628): --neutral_gray_015. Dark container surface, strong secondary text on light.
• Gray 025 (#3d3d43): --neutral_gray_025. Secondary body copy.
• Gray 040 (#62626a): --neutral_gray_040. Tertiary text, captions.
• Gray 055 (#888890): --neutral_gray_055. Muted labels, metadata.
• Gray 065 (#a3a3a9): --neutral_gray_065. Disabled / lowest-emphasis text.
• Gray 075 (#bdbdc1): --neutral_gray_075. Borders, faint dividers on light.

Surface & Editorial Neutrals

• Pure White (#ffffff): --neutral_white. Page background, card surfaces, reversed text on dark/purple.
• Surface (#f2f2f3): --background_base_2 (light) / --core_neutral_normal. Cool-grey segmenting surface.
• Surface Alt (#f7f7f8): --neutral_gray_097. Warmer secondary grey for alternating blocks.
• Hero Dark (#333333): NC PLAY dark hero/stage background.
• Editorial Ink (#a9a9a9): NC PLAY muted nav / inactive labels on dark.
• Editorial Line (#ebebeb): Thin editorial divider rule.
• Editorial Faint (#efefef): NC PLAY light editorial article block surface.
• Pure Black (#000000): NC PLAY dark hero panels and maximum-contrast moments.

Point Accents (status / category)

• Point Red (#f1415e): --point_red_normal. Discount / urgent / error point color.
• Point Green (#21ab79): --point_green_normal. Success / positive status.
• Point Magenta (#fa38ec): --point_magenta_normal. Vivid category / highlight accent.
• Point Lavender (#6768f6): --point_lavender_normal. Secondary indigo-lavender accent companion to NC Purple.

3. Typography Rules

Font Family

• Portal (nc.com): Pretendard (with Pretendard JP and a full Noto Sans CJK fallback stack) — the document default for all portal headlines, body, links, and UI.
• Media (about.ncsoft.com): Helvetica Now for Latin text with NotoSans-kr (and NotoSans-jp / NotoSans-tc) for CJK — the editorial NC PLAY voice.
• Display (about.ncsoft.com): Helvetica-Now-Display-Black — a heavy display cut reserved for oversized editorial lines.

Hierarchy

Principles

• Two type voices, by surface: Pretendard runs the bright product portal; Helvetica Now + NotoSans-kr runs the editorial brand media. They never mix within a surface.
• Display Black is a special occasion: Helvetica-Now-Display-Black is reserved for oversized NC PLAY display moments (40px), never for body or UI.
• Bold (700) carries headlines: Both portal hero (48px Pretendard 700) and editorial headings (34px / 700) lean on weight 700 for hierarchy; body drops to 400.
• Medium (500) for actions: Portal links and CTAs sit at Pretendard 500 — a half-step up from body to mark interactivity without shouting.
• Hangul-first fallback: The portal stack threads Pretendard JP and the full Noto Sans CJK family so Korean, Japanese, and Traditional Chinese render consistently across NC's global storefronts.

4. Component Stylings

Buttons

Primary (NC Purple CTA)

• Background: #7234e0
• Text: #ffffff
• Radius: 6px
• Padding: 0 16px
• Height: 44px
• Font: 16px / 500 / Pretendard
• Active: #482486 (strong)
• Use: Portal primary action — the --core_primary_normal token applied to CTAs

Soft Purple

• Background: #e8d6ff
• Text: #482486
• Radius: 6px
• Font: 16px / 500 / Pretendard
• Use: Secondary / tinted action on light surfaces (--core_primary_subtle)

Circular Carousel Control

• Background: #ffffff
• Text: #000000
• Radius: 9999px
• Height: 40px
• Border: 1px solid rgba(0,0,0,0.12)
• Font: 16px / 400 / Pretendard
• Use: White circular prev/next control on the nc.com hero carousel

Inputs & Forms

Default (search)

• Background: #ffffff
• Text: #0f1011
• Border: 1px solid #bdbdc1
• Radius: 6px
• Font: 16px / 400 / Pretendard
• Focus: 1px solid #7234e0
• Use: Portal search / form field

Cards & Containers

Portal Game Card

• Background: #ffffff
• Text: #0f1011
• Radius: 16px
• Use: Game / media card in the nc.com portal grid (no shadow)

NC PLAY Dark Tile

• Background: #333333
• Text: #ffffff
• Radius: 12px
• Use: Dark media tile on the NC PLAY hero stage

Editorial Article Block

• Background: #efefef
• Text: #1e1e1e
• Radius: 4px
• Use: Light editorial article container on NC PLAY

Badges

Point Badge

• Background: #f1415e
• Text: #ffffff
• Radius: 6px
• Font: 16px / 500 / Pretendard
• Use: Discount / urgent point badge (red token; green #21ab79 for positive status)

Tabs / Navigation (NC PLAY)

• Text (active): #ffffff
• Text (inactive): #a9a9a9
• Font: 20px / 700 / Helvetica Now
• Use: NC PLAY top nav — PLAY active white, NEWS muted grey

Avatars

• Background: #ffffff
• Radius: 9999px (full circle)
• Use: Circular brand / social avatar on the portal

---

Verified: 2026-06-17 (omd:add-reference CREATE — Tier 1 live inspect, 2 brand-owned surfaces) Tier 1 sources: https://about.ncsoft.com/ (NC PLAY brand media, live computed style), https://www.nc.com/ (renamed corporate/game portal — DTCG token system extracted from live CSS), https://about.ncsoft.com/en/news/article/nc-ci-renewal-project-en (official Pentagram CI renewal article) Tier 2 sources: getdesign.md/ncsoft — not listed (KR coverage gap); styles.refero.design — no NCSOFT/NC style page Conflicts unresolved: none. NC BLUE (Pentagram print CI, point-cobalt #1d4b99) vs live digital primary NC Purple (#7234e0) documented as an intentional print-vs-digital split, not a conflict; primary_color follows the live interactive token.

5. Layout Principles

Spacing System

• Base unit: 8px
• Scale: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px
• Notable: Portal action links sit at a generous 44px tap height; the editorial NC PLAY surface uses large 32–60px vertical padding under section heads (FEATURED 32px, CATEGORIES 60px) for magazine-style breathing room.

Grid & Container

• nc.com: full-bleed cinematic hero carousel anchored by a 48px Pretendard headline, followed by a dense game-card grid (16px radius cards) grouped by genre (MMORPG, etc.).
• about.ncsoft.com: editorial column grid — a dark hero stage banding into light article blocks; FEATURED / LATEST / CATEGORIES sections stack vertically with oversized Display Black display lines.
• Both surfaces center content with generous margins and never crowd the key art.

Whitespace Philosophy

• Catalog density, editorial calm: the product portal packs game cards tightly while the brand-media surface is airy and column-led — density follows intent.
• Banded contrast: NC PLAY alternates a dark #333333 / #000000 hero with light #ffffff / #efefef article bands; the portal alternates white and #f2f2f3 tinted sections.
• Key-art first: hero chrome (controls, headlines) is minimal so cover art carries the page.

Border Radius Scale

• Small (4px): editorial article blocks on NC PLAY
• Button (6px): portal CTAs, inputs, point badges
• Medium (10px): scroll/utility elements
• Large (12px): NC PLAY dark media tiles
• XL (16px): portal game/media cards — the workhorse
• Full (9999px / 50%): circular controls and avatars

6. Depth & Elevation

Shadow Philosophy: Both NC surfaces are essentially shadowless. Live inspection found box-shadow: none across the NC PLAY hero, nav, headings, and tiles, and the portal relies on flat cards with hairline borders rather than elevation. Depth is communicated through dark/light banding (NC PLAY), cool-grey tint (#f2f2f3, portal), and thin hairlines. When emphasis is needed the system reaches for color — NC Purple (#7234e0) or a point accent (#f1415e) — never a drop shadow. This keeps both the catalog and the editorial feeling clean, fast, and modern.

7. Do's and Don'ts

Do

• Use NC Purple (#7234e0) as the single saturated interactive/CTA color
• Use Pretendard for the product portal (headlines 700, body 400, links 500)
• Use Helvetica Now + NotoSans-kr for the editorial NC PLAY surface
• Reserve Helvetica Now Display Black for oversized (40px) editorial display lines only
• Use near-black ink (#0f1011 portal / #1e1e1e editorial) for text instead of pure black
• Separate with dark/light banding and #f2f2f3 tint + hairlines, not shadows
• Keep button radius at 6px and game-card radius at 16px
• Use point accents (#f1415e, #21ab79, #38aefa) only for status/category, not chrome
• Treat NC BLUE (#1d4b99) as the CI heritage / trust accent, distinct from the purple primary

Don't

• Spread NC Purple across many elements — it dilutes the single-action signal
• Use drop shadows for elevation — NC is a flat, shadow-free system
• Mix Pretendard and Helvetica Now within the same surface
• Use Display Black for body or UI text — it is display-only
• Use pure black (#000000) for body text — reserve near-black ink
• Use NC BLUE and NC Purple interchangeably — blue is heritage/print, purple is the live digital action color
• Crowd hero chrome over the game key-art — controls stay minimal
• Use pill-shaped buttons — portal CTAs are a calm 6px, only controls/avatars are full-round

8. Responsive Behavior

Breakpoints

Touch Targets

• Portal action links / CTAs at ~44px height — comfortably tappable
• Circular carousel controls at 40px diameter
• Editorial nav items at 32–36px row height within the NC PLAY header

Collapsing Strategy

• Hero: 48px Pretendard headline scales down on mobile, weight 700 maintained
• Game-card grid: multi-column → 2-up → single column stacked
• NC PLAY: dark hero stage and light article bands maintain full-width banding; Display Black scales down
• Genre groupings (MMORPG, etc.) reflow vertically on narrow viewports

Image Behavior

• Game key-art and brand imagery carry no shadow at any size, consistent with the flat system
• Portal cards maintain 16px radius across breakpoints; NC PLAY tiles maintain 12px
• Hero key-art remains full-bleed; headline reverses white and stays legible over art

9. Agent Prompt Guide

Quick Color Reference

• Primary CTA: NC Purple (#7234e0), pressed #482486, soft #e8d6ff
• NC BLUE (heritage accent): #1d4b99, strong #0e356a, tint #d3e2fc
• Background: Pure White (#ffffff), tinted surface #f2f2f3 / #f7f7f8
• NC PLAY hero: dark #333333 / #000000
• Ink: #0f1011 (portal) / #1e1e1e (editorial)
• Secondary text: #3d3d43 → muted #888890 → faint #a3a3a9
• Point accents: red #f1415e, green #21ab79, magenta #fa38ec, light-blue #38aefa, lavender #6768f6
• Hairline: rgba(0,0,0,0.12) / #ebebeb

Example Component Prompts

• "Create an nc.com portal hero: full-bleed game key-art, 48px Pretendard weight 700 white headline reversed over the art, a 16px-radius white game-card grid below grouped by genre, and a white circular carousel control (40px, 1px rgba(0,0,0,0.12) border). One NC Purple CTA: #7234e0 background, white text, 6px radius, 0 16px padding, 16px Pretendard 500."
• "Design an NC PLAY editorial section: dark #333333 hero stage with white Helvetica Now Display Black 40px display line, banding into a light #ffffff article block. Section head 34px Helvetica Now weight 700 #1e1e1e, body 16px NotoSans-kr #1e1e1e. Divider 1px #ebebeb. No shadow."
• "Build a portal game card: white #ffffff background, 16px radius, no shadow, near-black #0f1011 title at 28px Pretendard 700. Add a red point badge: #f1415e background, white text, 6px radius, '60% 할인'."
• "Create NC PLAY top nav: dark surface, 20px Helvetica Now weight 700 items, active item white #ffffff, inactive #a9a9a9 (PLAY active / NEWS muted)."

Iteration Guide

1. NC Purple (#7234e0) is the single action color — don't spread it
2. Pretendard runs the portal, Helvetica Now + NotoSans-kr runs the editorial — never mix per surface
3. Display Black (40px) is editorial-display-only
4. No shadows — separate with dark/light banding, #f2f2f3 tint, and hairlines
5. Button radius 6px, game-card radius 16px, NC PLAY tile 12px, controls/avatars full-round
6. Text is near-black (#0f1011 / #1e1e1e), never pure black for body
7. NC BLUE (#1d4b99) is heritage/trust accent — distinct from the purple primary
8. Point accents (#f1415e, #21ab79, #38aefa) only for status/category

---

10. Voice & Tone

NC's voice is confident, craft-proud, and connection-minded — a games company that takes both its technology and its brand storytelling seriously. The corporate tagline "Welcome to a New world Connected Through Joy" and the portal description "NC connects the world through play" set the register: ambitious in scope, warm in framing, never gimmicky. The brand-media surface (NC PLAY, "엔씨 공식 브랜드 미디어" / "NC's official brand media") treats readers as people interested in craft — game art, sound, R&D, AI — not just players to be monetized. Product copy on the portal is direct and functional ("바로가기", "사전예약", "자세히 보기").

Voice samples (verbatim from live brand-owned surfaces):

• "Welcome to a New world Connected Through Joy" — nc.com page title (mission-framed). (verified live 2026-06-17)
• "From MMORPGs like Lineage, AION, Blade & Soul, and THRONE AND LIBERTY ... NC connects the world through play." — nc.com meta description. (verified live 2026-06-17)
• "Renewal is not creating something new, but realigning existing values and sharing a common brand mission in order to take the brand to the next level." — CI renewal article. (verified live 2026-06-17)

Forbidden register: pay-to-win urgency, fear-of-missing-out manipulation in brand copy, hollow superlatives ("revolutionary", "world's best"), and any tone that treats players as marks rather than an audience for craft.

11. Brand Narrative

NCSOFT was founded in 1997 by 김택진 (Kim Taek-jin, CEO) and became one of Korea's defining game companies on the strength of Lineage (1998), the genre-shaping MMORPG, later joined by AION, Blade & Soul, and Throne and Liberty. Over two decades NCSOFT grew from a single landmark title into a global games and technology company with serious in-house R&D and AI investment — a posture the NC PLAY brand media foregrounds with sections devoted to game art, sound, and "GAME AI."

In 2020, NCSOFT undertook a corporate-identity renewal with Pentagram, the world-renowned design agency. As the company's own account puts it, "the reason that game IPs with different roots, such as Lineage, AION, and Blade & Soul were able to be grouped together under the NCSOFT brand was because they share the same core values—namely a commitment to quality and a passion for creating joy." Pentagram cut the letterforms' edges at 45-degree angles, set them bold and tightly spaced ("a new world that is connected"), and defined NC BLUE with an NC BLUE Tint for "sharper and clearer visibility." In 2026 the company formalized the shorthand it had been growing into, rebranding from NCSOFT to simply NC — ncsoft.com now redirects to nc.com, and the corporate voice ("Connected Through Joy") leans fully into the connection theme the CI renewal established.

What NC's design refuses, visible across both surfaces: the heavy, gimmicky chrome of typical game-portal marketing (no shadow-stacked cards, no flashing urgency) and the cold anonymity of pure-corporate sites. What it embraces: a structured digital token system (NC Purple primary, full neutral and point-accent ramps), an editorial brand-media voice that treats game-making as craft worth documenting, and a Pentagram-grade discipline that makes a games company read like a design house.

12. Principles

1. Connected through joy. NC's stated mission is connection via play. UI implication: favor warm, inviting framing and surfaces that showcase shared experiences (game art, communities) over transactional pressure.
2. Craft is worth documenting. The NC PLAY brand media exists to show the art, sound, and R&D behind the games. UI implication: give editorial content real typographic weight (Display Black, generous columns); don't bury craft beneath store chrome.
3. One action, one color. NC Purple (#7234e0) means "do this." UI implication: reserve the saturated purple for the primary CTA so the next step is unambiguous.
4. Heritage and product, distinct. NC BLUE is the Pentagram CI heritage mark; NC Purple is the live digital action color. UI implication: use blue for identity/trust accents and purple for interaction — never swap them.
5. Flat, fast, modern. Mobile-native clarity over decorative depth. UI implication: no shadows; separate with banding, tint, and hairlines; keep key-art and content first.
6. Connected letterforms, connected system. The CI's no-space, 45°-cut logo encodes "a connected world." UI implication: keep the system coherent across surfaces — shared tokens, consistent radius and ink, two type voices that each own a surface.

13. Personas

Personas below are fictional archetypes informed by publicly observable NC audiences (MMORPG players, global console gamers, design/brand-curious readers of NC PLAY), not individual people.

박준호, 33, 서울. A long-time Lineage and AION player who pre-orders new chapters and tracks seasonal sales on the portal. Values fast, clear "바로가기 / 사전예약" paths and reversed-white headlines that read instantly over key-art. Trusts NC because the catalog feels premium, not spammy.

Mina Cho, 28, Vancouver. A console player who discovered Throne and Liberty and browses NC's global storefront in English. Appreciates that the portal renders cleanly across languages (the Pretendard + Noto CJK stack) and that discounts are flagged with a single clear point-red badge rather than flashing banners.

이서연, 35, 판교. A product designer who reads NC PLAY for the craft — The Game Art, Sound, the Pentagram CI story. Notices the Helvetica Now Display Black editorial type and the shadowless, banded layout, and respects that a games company invests in design-house-grade brand media.

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: Motion is cinematic-but-restrained — the hero carousel crossfades game key-art at motion-slow / ease-standard, and portal cards reveal from below at motion-standard / ease-enter. The NC PLAY editorial surface transitions between dark and light bands as a slow ambient crossfade rather than a slide. No bounce or spring on UI chrome — a premium games brand signals craft and steadiness, not toy-like playfulness. Under prefers-reduced-motion: reduce, carousels stop auto-advancing and all transitions collapse to instant; both surfaces remain fully functional.