--- id: ncsoft name: NCSOFT display_name_kr: 엔씨소프트 country: KR category: consumer-tech homepage: "https://about.ncsoft.com/" primary_color: "#7234e0" logo: type: favicon slug: "https://www.google.com/s2/favicons?domain=about.ncsoft.com&sz=128" verified: "2026-06-17" added: "2026-06-17" omd: "0.1" tokens: source: live-extract extracted: "2026-06-17" note: "Two live brand surfaces. nc.com (the renamed corporate/game portal) ships a structured DTCG token system: primary = NC Purple #7234e0 (--core_primary_normal, light theme) / #8243f2 (dark theme), on Pretendard. about.ncsoft.com (NC PLAY brand media) is a monochrome editorial surface on Helvetica Now / NotoSans-kr (ink #1e1e1e, dark hero bg #333333). NC BLUE (point cobalt #1d4b99 / #0e356a) is the Pentagram CI heritage mark; the live digital interactive primary is purple." colors: primary: "#7234e0" primary-strong: "#482486" primary-subtle: "#e8d6ff" primary-faint: "#f6eeff" primary-dark: "#8243f2" nc-blue: "#1d4b99" nc-blue-strong: "#0e356a" nc-blue-subtle: "#d3e2fc" light-blue: "#38aefa" ink: "#0f1011" ink-soft: "#1e1e1e" gray-015: "#252628" gray-025: "#3d3d43" gray-040: "#62626a" gray-055: "#888890" gray-065: "#a3a3a9" gray-075: "#bdbdc1" hero-dark: "#333333" canvas: "#ffffff" surface: "#f2f2f3" surface-alt: "#f7f7f8" editorial-ink: "#a9a9a9" editorial-line: "#ebebeb" editorial-faint: "#efefef" on-primary: "#ffffff" point-red: "#f1415e" point-green: "#21ab79" point-magenta: "#fa38ec" point-lavender: "#6768f6" typography: family: { portal: "Pretendard", media: "Helvetica Now", display: "Helvetica-Now-Display-Black", kr: "NotoSans-kr" } display-hero: { size: 48, weight: 700, lineHeight: 1.2, use: "nc.com hero card headline, Pretendard Bold" } display-black: { size: 40, weight: 400, lineHeight: 1.45, use: "NC PLAY editorial display, Helvetica Now Display Black" } section: { size: 34, weight: 700, lineHeight: 1.53, use: "Section titles, Helvetica Now / Pretendard" } subsection: { size: 28, weight: 700, lineHeight: 1.36, use: "Card / feature heads" } feature-head: { size: 26, weight: 700, lineHeight: 1.5, use: "FEATURED / LATEST list heads, NC PLAY" } nav: { size: 20, weight: 700, lineHeight: 1.7, use: "NC PLAY primary nav (PLAY / NEWS)" } body: { size: 16, weight: 400, lineHeight: 1.5, use: "Standard reading text, body default" } link: { size: 16, weight: 500, lineHeight: 1.5, use: "Portal links (바로가기), Pretendard Medium" } label: { size: 16, weight: 400, lineHeight: 1.5, use: "Editorial nav items, Helvetica Now" } spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 } rounded: { sm: 6, md: 10, lg: 12, xl: 16, full: 9999 } shadow: none: "none" components: button-primary: { type: button, bg: "#7234e0", fg: "#ffffff", radius: "6px", padding: "0 16px", height: "44px", font: "16px / 500 Pretendard", states: "strong #482486 · subtle bg #e8d6ff", use: "Portal primary action / CTA — NC Purple token" } button-icon: { type: button, bg: "#ffffff", fg: "#000000", radius: "9999px", height: "40px", border: "1px solid rgba(0,0,0,0.12)", font: "16px / 400 Pretendard", use: "White circular carousel control on nc.com hero" } nav-tab: { type: tab, fg: "#ffffff", font: "20px / 700 Helvetica Now", active: "text #ffffff", use: "NC PLAY top nav (PLAY active white / NEWS muted #a9a9a9)" } card-game: { type: card, bg: "#ffffff", fg: "#0f1011", radius: "16px", use: "Game / media card on nc.com portal grid" } card-play: { type: card, bg: "#333333", fg: "#ffffff", radius: "12px", use: "NC PLAY dark media tile" } card-editorial: { type: card, bg: "#efefef", fg: "#1e1e1e", radius: "4px", use: "NC PLAY light editorial article block" } badge-point: { type: badge, bg: "#f1415e", fg: "#ffffff", radius: "6px", font: "16px / 500 Pretendard", use: "Discount / status point badge (red token)" } avatar: { type: avatar, bg: "#ffffff", radius: "9999px", use: "Circular brand / social avatar on portal" } components_harvested: true --- # 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 | Role | Font | Size | Weight | Line Height | Notes | |------|------|------|--------|-------------|-------| | Hero Headline | Pretendard | 48px (3.00rem) | 700 | 1.2 | nc.com carousel headline, reversed white over key-art | | Editorial Display | Helvetica Now Display Black | 40px (2.50rem) | 400 (black face) | 1.45 | NC PLAY oversized display (ALL / EDGE / INTERACTIVE) | | Section Heading | Helvetica Now / Pretendard | 34px (2.13rem) | 700 | 1.53 | Section / featured-story titles | | Sub-section | Pretendard / Helvetica Now | 28px (1.75rem) | 700 | 1.36 | Card / feature heads (MMORPG, GAME AI) | | Feature Head | Helvetica Now | 26px (1.63rem) | 700 | 1.5 | FEATURED / LATEST / CATEGORIES list heads | | Nav (NC PLAY) | Helvetica Now | 20px (1.25rem) | 700 | 1.7 | Primary editorial nav (PLAY active / NEWS) | | Body | Pretendard / Helvetica Now | 16px (1.00rem) | 400 | 1.5 | Standard reading text | | Link | Pretendard | 16px (1.00rem) | 500 | 1.5 | Portal action links (바로가기, 사전예약) | | Editorial Nav Item | Helvetica Now | 16px (1.00rem) | 400 | 1.5 | Secondary editorial nav items | ### 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 | Level | Treatment | Use | |-------|-----------|-----| | Flat (Level 0) | No shadow | Page background, inline text, most surfaces | | Banding (Level 1) | dark `#333333` / light `#ffffff` background shift | NC PLAY hero-vs-article separation | | Tint (Level 2) | `#f2f2f3` / `#f7f7f8` background shift | Portal section separation | | Hairline (Level 3) | `1px solid rgba(0,0,0,0.12)` / `#ebebeb` | Circular control outline, editorial divider rules | **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 | Name | Width | Key Changes | |------|-------|-------------| | Mobile | <640px | Single column; hero headline compresses; game grid → 1–2 up; nav collapses | | Tablet | 640-1024px | 2–3-up game cards; moderate padding; editorial columns narrow | | Desktop | 1024-1440px | Full carousel hero, multi-column game grid, full editorial layout | ### 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 ("바로가기", "사전예약", "자세히 보기"). | Context | Tone | |---|---| | Corporate / mission | Ambitious, warm. "Welcome to a New world Connected Through Joy." Connection-framed, not hype. | | Portal product copy | Direct, functional. "바로가기", "사전예약", "여름 정기 세일". | | NC PLAY editorial | Craft-proud, curatorial. Sections named The Game Art, Sound, Behind The Story, Our Way, AI. | | Brand / CI storytelling | Reflective, design-literate. "Renewal is not creating something new, but realigning existing values." | | News / press | Plain, informative. Korean press-release register. | **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 | State | Treatment | |---|---| | **Empty (no results / library)** | White canvas. Single near-black ink (`#0f1011`) line at body size explaining nothing matches, with one NC Purple CTA to adjust or browse. No clutter illustration. | | **Empty (wishlist / saved, none yet)** | Muted Gray (`#888890`) single line: nothing saved yet, plus a path back to the catalog. Calm, honest. | | **Loading (catalog fetch)** | Skeleton cards on `#f2f2f3` tinted surface at final 16px-radius card dimensions. Flat pulse — no shadow shimmer, consistent with the shadowless system. | | **Loading (in-place section refresh)** | Subtle NC Purple progress affordance; previous game cards stay visible during refresh. | | **Error (load failed)** | Inline message in near-black ink with a plain-language explanation and a retry. Point-red (`#f1415e`) accent on the icon/border. No bare "오류가 발생했습니다". | | **Error (form validation)** | Field-level message below the input describing what is valid; point-red border, never just "필수". | | **Success (pre-order / purchase placed)** | Brief inline confirmation in calm tone with point-green (`#21ab79`) accent; next-step detail linked immediately below. No celebratory spam. | | **Skeleton** | `#f2f2f3` blocks at final dimensions, 16px radius (portal) / 12px (NC PLAY tiles), flat pulse. | | **Disabled** | Faint Gray (`#a3a3a9`) text on reduced-opacity surface; NC Purple actions fade rather than turn grey to preserve brand read. | ## 15. Motion & Easing **Durations**: | Token | Value | Use | |---|---|---| | `motion-fast` | 120ms | Hover, card lift-hint, focus | | `motion-standard` | 240ms | Carousel slide, card/section reveal, dropdown | | `motion-slow` | 360ms | Hero crossfade, dark/light band transitions | **Easings**: | Token | Curve | Use | |---|---|---| | `ease-enter` | `cubic-bezier(0.2, 0.6, 0.25, 1)` | Arriving — cards, sheets, carousel slides in | | `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Dismissals | | `ease-standard` | `cubic-bezier(0.25, 0.1, 0.25, 1)` | Two-way transitions | **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. --- Source: https://oh-my-design.kr/design-systems/ncsoft · Raw twin of references/ncsoft/DESIGN.md Install 221 verified references for your AI coding agent: npx oh-my-design-cli install-skills