엔씨소프트 DESIGN.md

Design System Inspiration of NCSOFT

Overview

Visual Theme & Atmosphere

NC — NCSOFT (엔씨소프트) in its older name — is the Korean game company behind the Lineage family (리니지, 리니지2, 리니지M, 리니지2M, 리니지W, 리니지 클래식), AION and AION2, Throne and Liberty, Blade & Soul NEO and Guild Wars 2, the titles on the MMORPG shelf of its corporate home, www.nc.com. www.ncsoft.com now redirects there. The page is titled "NC - 즐거움으로 연결된 새로운 세상" and describes a company that connects the world through joy, from MMORPGs to casual, shooting and action games; its game tiles lead to PURPLE, NC's game platform, whose name also shows in the page's own code (a purple-design-provider body class and pd-button classes on the hero action). Alongside it runs NC PLAY (about.ncsoft.com), "엔씨 공식 브랜드 미디어" — the official brand media — where NC publishes its craft and culture: The Game Art, Behind The Story, AI research, ESG (the NC ESG PLAYBOOK 2025) and new games such as 아스트라에 오라티오.

The identity under both comes from the 2020 CI renewal NC designed with Pentagram. Its own account explains each choice: letter edges cut at 45 degrees for the sincerity of making masterpieces with cutting-edge technology, bold letters for a bold spirit, no space between them so the logo "represents a new world that is connected", a new NC BLUE and NC BLUE Tint made by filling in cyan, pictograms with tapered edges, and the logo as a "flexible window" through which a game's image can be seen. The name has moved with it: the 2020 article is signed "Ⓒ 2020 NCSOFT Corporation", and NC PLAY's footer now reads "ⓒ NC Corporation".

The captured surfaces are monochrome. NC PLAY sets Helvetica Now in two themes: the /play page puts white type (#ffffff) on a black stage, with the unselected tab in #a9a9a9 and the footer in #ebebeb over hairline rules; the /news page turns the same layout to #000000, #1e1e1e and #333333 on white. Helvetica Now Display Black — a condensed black cut, by its file name — sets 74px carousel titles and 125px outlined category links. www.nc.com is Pretendard: a 48px white headline over key art, one white contained action (#ffffff fill, #252628 label, 8px corners), 16px-radius game tiles and square NC NEWS items with #888890 categories and #62626a dates. No purple, no NC BLUE and no box-shadow render on any captured element.

Key Characteristics:

• Monochrome chrome: white, black and a short grey ladder (#1e1e1e, #333333, #a9a9a9, #ebebeb, #888888)
• The one filled action is white — #ffffff with a #252628 label, 8px corners, 17px / 700 Pretendard
• Two type systems by surface: Helvetica Now for NC PLAY, Pretendard for www.nc.com
• Helvetica Now Display Black at display sizes only (74px titles, 125px outlined links)
• Selected tab by weight and contrast: 700 in white or #1e1e1e, the other tab 500 in #a9a9a9
• 16px corners on game tiles, 8px on the action, square everywhere else
• Flat: no box-shadow on any captured element

Primary tasks

• Find a game and open it on PURPLE
• Catch a sale or a new launch from the hero
• Read NC's news and press releases
• Read how NC's games, art, sound and AI research are made (NC PLAY)

Brand Narrative

NC's 2020 CI renewal set out to "expand the potential of NC as a brand and convey the 'value of innovation'", in the words of CSO Songyee Yoon quoted in the article. The article explains that IPs with different roots — Lineage, Aion, Blade & Soul — sit under one brand because they share the same core values, and that the renewal was meant to strengthen global competitiveness for a growing global business; NC worked with Pentagram on the result: 45-degree cuts, bold connected letters, NC BLUE and its cyan-filled tint, a graphic motif and tapered pictograms, all published as a guide employees can download. Employees also entered a contest to design with the new CI, using the logo as a window onto a game's world.

Six years on, the brand runs on two surfaces. www.nc.com, where the old ncsoft.com address now lands, is a catalogue: MMORPG, action and strategy, casual and classic shelves, upcoming titles and PC games sold through PURPLE. NC PLAY is the storytelling side, organised as PLAY (EDGE, INTERACTIVE, CREATIVE, FILM) and NEWS (INSIDE NC, ESG, FEATURED, BRANDS, R&D, PRESS RELEASE), with a family list that reaches NC DINOS, the NC Cultural Foundation, PLAYNC, NC Career, NC Research and the NC recruiting blog.

What the captured design refuses: colour on the chrome — no purple, no blue, no shadows. What it embraces: black and white editorial pages in Helvetica Now, oversized Display Black words, and a white action that lets the game art be the colour.

Principles

1. Connected through joy. UI implication: lead with the games and the people who play them; keep the chrome out of the way.
2. Craft is worth publishing. UI implication: editorial pages get real typographic scale — 74px and 125px display words, generous section heads.
3. Monochrome chrome, colourful art. UI implication: white, black and greys for UI; colour comes from key art.
4. One action per moment. UI implication: a single white contained action on a hero.
5. A window, not a wall. From the CI's "flexible window". UI implication: frames and tiles that show the game through them rather than decorating around it.

Personas

Personas below are fictional archetypes informed by publicly observable NC audiences (MMORPG players, players browsing the catalogue, readers of NC PLAY), not individual people.

박준호, 33, 서울. A long-time Lineage player who opens www.nc.com to jump to his game on PURPLE and check the season's sale.

Mina Cho, 28, Vancouver. A player who found Throne and Liberty and follows NC's new launches through the NC NEWS shelf.

이서연, 35, 판교. A designer who reads NC PLAY for The Game Art and Behind The Story pieces and the 2020 CI story.

Colors

Every token below was read by the deterministic collector on 2026-09-30 from NC PLAY's /play and /news pages and from www.nc.com.

Primary

• White (#ffffff): The fill of www.nc.com's one contained action, 바로가기, and the selected header tab on NC PLAY's dark /play page. The captured surfaces render no chromatic colour, so under the owner rule the primary is the measured primary action fill — this white.
• On Primary (#252628): The 바로가기 label.

Ink & Text

• On Dark (#ffffff): Headlines, section heads and carousel titles on the /play page; the www.nc.com hero headline.
• Ink (#000000): www.nc.com shelf heads and NC NEWS titles; section heads on the /news page.
• Editorial Ink (#1e1e1e): The selected NEWS tab, footer headings and links on the /news page.
• Strong Text (#333333): LATEST article titles and dates and the VIEW MORE button on the /news page.
• Inactive Tab (#a9a9a9): The unselected PLAY / NEWS tab on both NC PLAY pages.
• Footer on Dark (#ebebeb): Footer headings, links and the rule under each heading on the /play page.
• Muted (#888888): Copyright, policy links and unselected languages in the /play footer.
• Portal Meta (#888890) and Portal Date (#62626a): The category and date on www.nc.com's NC NEWS items.

Brand assets (not tokens)

• NC BLUE and NC BLUE Tint: the brand colours named by the 2020 CI renewal, the tint made by filling in cyan. The article publishes no colour values, and neither colour renders on the captured pages, so neither is a machine token.
• Stages: the black /play stage, the www.nc.com hero, its NC NEWS band and a PURPLE promotion band all carry their own fills, read by a probe but not by the collector, so none is a token. html and body compute transparent on all three pages.

Not carried forward

• The June record's purple family — #7234e0, #482486, #e8d6ff, #f6eeff, #8243f2 — its cobalt family #1d4b99, #0e356a, #d3e2fc, its point colours #f1415e, #21ab79, #fa38ec, #6768f6, #38aefa, and its neutral ramp #0f1011, #3d3d43, #a3a3a9, #bdbdc1, #f2f2f3, #f7f7f8, #efefef. They came from custom properties in www.nc.com's stylesheets rather than rendered elements; none appears in the 2026-09-30 bundle, and today's probe found no --core_primary_normal on :root (cross-origin sheets could not be read). Under the owner rule a colour that is not rendered in a primary role is not a token.

Typography

Font Family

• Live surface use (NC PLAY): Helvetica Now — self-hosted, the bundle listing about.ncsoft.com/font/HelveticaNow-Regular.woff2 and .woff; 161 observed uses: tabs, headings, footer, article text. NC PLAY's stacks continue "Helvetica Now", NotoSans-kr, …, so Hangul in these lines falls through to the next face.
• Live surface use (display): Helvetica-Now-Display-Black — self-hosted as about.ncsoft.com/font/HelveticaNowDisplay-CnBlk.woff2; 31 uses, only at 74px and 125px.
• Live surface use (www.nc.com): Pretendard — the v1.3.9 dynamic subset from jsDelivr's copy of orioncactus/pretendard; 52 uses.
• Live, language menu only: NotoSans-kr, NotoSans-jp, NotoSans-tc — self-hosted 700-weight files; 2 uses each, the 한국어 / 日本語 / 繁體中文 items.
• Declared only: NotoSans (a Vietnamese/Latin 700 file) and swiper-icons (an inline icon font), 0 observed uses.
• Unresolved: Times — reported on the two body elements, which set no family of their own; not a brand face.
• Licence: no page opened states licence terms for the Helvetica Now faces. The 2020 CI article names no typeface.

Hierarchy

Principles

• One family per surface: Helvetica Now on NC PLAY, Pretendard on www.nc.com.
• Display Black only at display sizes: 74px and 125px, never for text.
• Bold carries the headings: 700 on every headline and section head; actions and titles on www.nc.com at 700 and 500.
• Tight tracking on editorial headlines: -0.25px on the featured headlines and article titles.

Layout

Spacing System

• Header tabs sit on a 5px bottom padding; article meta sits 10px above its title; footer headings keep 24px beneath their rule; the www.nc.com action is padded 16px 24px.
• NC PLAY section heads carry their own bottom padding: 36px (PLAY HIGHLIGHTS) and 60px (CATEGORIES) on /play, 32px (FEATURED) and 24px (LATEST) on /news.

Grid & Container

• NC PLAY: a 1344px content width; LATEST in three 432px columns; category links flowing as oversized words.
• www.nc.com: game tiles four to a row at 266px, NC NEWS as a row of 365px items.

Whitespace Philosophy

• NC PLAY gives each section a large head and room below it; www.nc.com packs its catalogue into shelves.

Border Radius Scale

• 0px: articles, news items, tabs, buttons on NC PLAY
• 8px: the www.nc.com contained action
• 16px: www.nc.com game tiles

Responsive Behavior

Breakpoints

• Captured at 1440 × 900 only; no breakpoint behaviour was measured.

Touch Targets

• The www.nc.com action is 55px tall; NC PLAY tabs are 34px and carousel arrows 32 × 32.

Collapsing Strategy

• Not measured.

Image Behavior

• Game tiles show key art under a white name; NC PLAY carousels set Display Black titles over images.

Elevation & Depth

Shadow Philosophy: No captured element has a box-shadow. Separation comes from theme (black /play, white /news), from key art, and from 1px rules under the footer headings.

Motion & Easing

The collector reads computed style, not animation, so no duration or easing is measured. The unselected tab's frames caught a value just off its rest colour (#acacac against #a9a9a9), which suggests a colour transition without timing it; the carousels are Swiper sliders. Treat motion as unspecified rather than borrowing values, and honour prefers-reduced-motion in any build.

Components

Navigation

NC PLAY header tab

• Background: transparent
• Text: #a9a9a9 at 500 (unselected)
• Selected: #ffffff at 700 on /play; #1e1e1e at 700 on /news
• Padding: 0 0 5px
• Height: 34px
• Font: 20px Helvetica Now
• States: the unselected tab's #acacac hover frame is treated as a transition frame; no hover is declared

Carousel arrows

• Size: 32 × 32; icons are background images
• Disabled: the previous arrow at the first slide

Buttons

Contained action (www.nc.com)

• Background: #ffffff
• Text: #252628
• Radius: 8px
• Padding: 16px 24px
• Height: 55px
• Font: 17px / 700 / 23px Pretendard
• Use: 바로가기 on the hero

VIEW MORE (NC PLAY)

• Background: transparent
• Text: #333333
• Height: 33px
• Font: 16px / 700 Helvetica Now; label at 24px / 700

Footer heading (NC PLAY)

• Text: #ebebeb on /play, #1e1e1e on /news
• Border: 1px solid bottom rule in the same colour
• Padding: 0 0 24px
• Height: 49px
• Font: 16px / 500 Helvetica Now
• Use: FAMILY SITE, GLOBAL

Cards

Game tile (www.nc.com)

• Radius: 16px
• Size: 266 × 266, four per row
• Name: white 16.38px / 400 Pretendard over the key art

NC NEWS item (www.nc.com)

• Radius: 0px
• Size: 365 × 297
• Category #888890, date #62626a, both 15px / 400; title 18px / 500 / 24px #000000

LATEST article (NC PLAY)

• Radius: 0px
• Size: 432 × 334, three per row
• Date and category 12px / 400 #333333; title 18px / 700 / 28.98px #333333 at -0.25px

Category links (described, not tokenised)

• 125px / 400 / 145px Helvetica Now Display Black. The collector records a fill equal to the stage — #000000 on /play, #ffffff on /news — and a same-day probe shows the visible letters are a 1px text stroke in the opposite colour, which the collector does not record.

---

Verified: 2026-09-30 (deterministic collector capture of three public pages, logged out, plus first-party context) Tier 1 sources: https://about.ncsoft.com/play ; https://www.nc.com/ ; https://about.ncsoft.com/news ; https://about.ncsoft.com/en/news/article/nc-ci-renewal-project-en Tier 2 sources: getdesign.md/ncsoft (HTTP 200; the served page contains no occurrence of the name) and styles.refero.design/?q=ncsoft (HTTP 200, the name appears only as the echoed query), requested 2026-09-30; no Tier 2 value used Conflicts unresolved: none

States

Only these states were observed on the three captured pages; nothing else is specified here.

Focus rings, error, empty, loading and success treatments were not captured and are not described.

Live state probe, 2026-10-16 (https://www.nc.com/), portal-contained-button: focus — no visible change (measured 2026-10-16).

Do's and Don'ts

Do

• Keep the chrome monochrome and let game art carry the colour
• Use one white contained action with a #252628 label on dark heroes
• Use Helvetica Now for editorial pages and Pretendard for the catalogue
• Show the selected tab with weight 700 and full contrast; leave the other at 500 #a9a9a9
• Keep 16px corners for game tiles and square corners for editorial blocks

Don't

• Don't introduce purple or blue as an action colour; neither renders on the captured pages
• Don't use Display Black for text; it is a display cut
• Don't add shadows
• Don't mix Helvetica Now and Pretendard on one surface

Voice & Tone

NC speaks as a game maker proud of its craft: warm about joy and connection at the corporate level, curatorial in its brand media, plain in its catalogue.

Voice samples (verbatim, opened 2026-09-30):

• "리니지, 아이온, 블레이드&소울, 쓰론 앤 리버티 등 MMORPG에서 캐쥬얼, 슈팅, 액션 게임까지 다양한 즐거움으로 세상을 연결합니다." — www.nc.com description.
• "엔씨 공식 브랜드 미디어" — NC PLAY description.
• "[Next & Creative] 소통은 계속된다 : 오늘도 만나러 갑니다" — NC PLAY article title.

Forbidden register: pressure selling, hollow superlatives, anything that treats players as targets rather than an audience.

Agent Prompt Guide

Quick Color Reference

• Primary action: #ffffff fill, #252628 label
• Dark theme text: #ffffff; inactive tab #a9a9a9; footer #ebebeb; muted #888888
• Light theme text: #000000, #1e1e1e, #333333
• Catalogue meta: #888890 category, #62626a date

Example Component Prompts

• "Create a dark editorial header: PLAY and NEWS tabs in 20px Helvetica Now, the selected one white at 700, the other #a9a9a9 at 500, 5px bottom padding."
• "Design a game shelf: a 28px / 700 Pretendard heading in black, then 266 × 266 tiles with 16px corners and the game name in white 16.38px Pretendard over the key art."
• "Build a hero action: #ffffff background, #252628 17px / 700 Pretendard label, 8px radius, 16px 24px padding, 55px tall."
• "Make an article list: three 432px columns, square corners, date line 12px Helvetica Now #333333, title 18px / 700 #333333 at -0.25px."

Iteration Guide

1. Monochrome chrome; colour comes from the art
2. Helvetica Now for NC PLAY, Pretendard for www.nc.com
3. Display Black only at 74px and above
4. One white contained action per hero
5. No shadows; square editorial blocks, 16px game tiles

---

Governance

Known Gaps

• Contrast, media-more-button. Text #333333 on #00000000 measures 1.66:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.