넥슨 DESIGN.md

Design System Inspiration of Nexon

Overview

Visual Theme & Atmosphere

Nexon (넥슨) is the Korean game company that, in its own brand team's words, was founded in 1994 and went on to serve the world's first internet graphic online game. Thirty years later it describes itself as becoming a global entertainment company built on strong IP, solid development and more than three decades of running online games. The portfolio spans MapleStory, KartRider and its successor KartRider: Drift, Dungeon&Fighter from Neople, Mabinogi from devCAT, V4, Sudden Attack and Blue Archive from Nexon Games, and Mintrocket's Dave the Diver; in 2026 it also took on Korean publishing of Overwatch and saw ARC Raiders win at the D.I.C.E. and BAFTA awards. The company marked its 30th anniversary in 2024 with a commemorative logo from its in-house brand design team, and in May 2026 reopened its computer museum under the Nexon Museum name.

The identity is managed from a public brand guide. Its symbol mark is described as a "gate" — a doorway of communication into an imagined world of new fun, the passage through which more players reach satisfying play. The guide pairs a vertical signature for emphasising the visual identity with a horizontal one for the verbal identity, and names KlavikaNX as Nexon's exclusive typeface, a paid face licensed only for Nexon works. For Korean text Nexon ships its own families: NEXON Lv.1 Gothic, a young, readable body face made for mobile, web and print, and the more mature NEXON Lv.2 Gothic, alongside game-born faces such as Bazzi, Football Gothic, MapleStory and Warhaven.

The game portal at nexon.com is deliberately plain so the game art can be loud. Navigation and headings run in NEXON Gothic (the portal's name for Lv.1 Gothic) in near-black #17191d on white; dense detail drops to 12px system text in grey #737881; corners stay square almost everywhere. One colour does the interactive work: #0077ff, the blue that GNB links turn on hover, that fills the outline pill on hover and that carries the notification badge. The brand guide shows the identity side of the same company — KlavikaNX display at 52px, black and white panels, Pretendard for reading.

Key Characteristics:

• White canvas, near-black #17191d navigation and headings in NEXON Gothic
• A single interaction blue, #0077ff, on hover states and the notification badge
• Dense 12px system text in #737881 for the portal's detail and legal lines
• Square geometry: 330 of 336 captured radii are 0px; the 19px outline pill is the exception
• Game art supplies the colour; the chrome stays grey
• KlavikaNX as the exclusive identity typeface, NEXON Lv.1 and Lv.2 Gothic for Korean text

Primary tasks

• Check which events and updates are running before playing
• Find and launch a game from the portal's game grid
• Look up Nexon's brand assets, CI rules and typefaces
• Read company news, history and affiliate information

Brand Narrative

Nexon was founded in 1994 and, as its brand design team writes in the 30th-anniversary article, began by serving the world's first internet graphic online game, releasing new genres ever since with the goal of giving players fun. KartRider's league, run by Nexon from 2005 to 2021, was the longest-running regular e-sports league it operated; when KartRider closed after 18 years and returned as KartRider: Drift, the league restarted as the KartRider: Drift League with a new visual identity. MapleStory, one of the company's best-loved IPs, stages a showcase every half-year, and the brand design team produced the graphics for several of them (IGNITION, SAVIOR, NEW AGE), and its characters have moved into digital goods such as KakaoTalk themes.

The company today is a group: Nexon Games, Neople (creator of Dungeon&Fighter), devCAT (Mabinogi), Nexon Networks for game service and QA, Nexon Communications in Busan, Mintrocket for casual games, the investment arm Nexon Partners and others. The 2026 history lists Korean publishing of Overwatch, awards for ARC Raiders, the rebranded Nexon Museum and a 250-billion-won public-private fund for next-generation Korean games. The brand guide exists so that, across many game IPs and affiliates, Nexon's corporate identity stays consistent in the market — its brand assets are the CI, colour, typefaces and application examples.

Principles

Editorial readings of the captured surfaces and the brand guide, not Nexon statements.

1. The frame is quiet so the games can be loud. White, near-black and grey chrome with square corners leaves colour to game art.
2. One accent for interaction. #0077ff marks what responds to the pointer and what needs attention, and nothing else.
3. Own the letters. Navigation and headings are set in Nexon's own Lv.1 Gothic and the identity in the exclusive KlavikaNX.
4. Identity is a doorway. The symbol's "gate" framing — a passage to new fun — is the story the CI tells.

Personas

Personas below are fictional archetypes informed by publicly observable Nexon audience segments, not individual people.

박민준, 24, 서울. A long-time MapleStory player who opens nexon.com to check events and jump into the game; he scans the grid by title and expects the menu to answer his pointer instantly.

이수연, 33, 부산. A returning player curious about KartRider: Drift; she likes that the portal is dense and fast and does not bury games under decoration.

정하나, 28, 서울. A designer at a partner studio who uses the brand guide to place the Nexon signature correctly and checks the typeface licences before using them.

김도윤, 41, 대전. Follows Nexon's company news and affiliates; the calm, factual company pages are what he reads.

Colors

Portal (captured on nexon.com)

• Interaction Blue (#0077ff): the hover and pressed colour of the GNB icon links, the hover fill of the GNB outline pill and the fill of the notification badge. No captured page names it as a CI colour; it is the portal's working accent.
• Ink (#17191d): GNB menu links, section headings, game-card titles, the outline pill's 2px border and the dark login-box block.
• Muted (#737881): the body text colour — small links, footer and detail lines, the icon links beside game cards.
• Label (#4a4e57): secondary heading-side links at 13px.
• Helper (#9fa1a7): 12px helper text in the login box and the border of carousel arrows.
• Pill Ink (#080410): the outline pill's label.
• Canvas (#ffffff): page ground, carousel tiles, and the text on the dark login block and the badge.
• Input Ink (#222426) and Input Line (#dde1e5): the search field's text and its 1px underline.
• Tile marker (#f78029): a 2px bottom border on the first carousel tile.

Brand guide (captured on brand.nexon.com)

• Guide Ink (#222222): the carousel arrow fill and the "MORE" control.
• Guide Meta (#51555d): article dates.
• Guide Disabled (#a1a7b5): the disabled arrow fill and the footer select's underline; the disabled arrow's icon is #adb5bd.
• Black (#000000) and White (#ffffff): the guide's text, the footer select and its dropdown (1px #e9ecef border); the language button's text is #2e2e2e.

Not Nexon's

• #00de5a appears once on the portal: the "네이버 로그인" button in the login box, which is Naver's sign-in. It is a third-party brand element and is not part of Nexon's palette.

Typography

Font evidence by class

• Official product-use (brand guide): KlavikaNX is named Nexon's exclusive typeface, chosen to sit with the identity elements; its licence is paid and limited to Nexon works (print and websites allowed, game embedding and video subtitles not). NEXON Lv.1 Gothic is described as the readable body face for games across mobile, web and print, with a low-capacity "Low" version; NEXON Lv.2 Gothic is its more mature sibling. The guide lists further faces: 넥슨 배찌체, 넥슨 풋볼 고딕, 넥슨 메이플스토리, 던파 비트비트 v2, 던파 연단된 칼날, 넥슨 워헤이븐체, 넥슨 카트 고딕 and 마비옛체.
• Live surface-use: on the portal, NEXON Gothic and NEXON Gothic Bold are loaded from rs.nxfs.nexon.com/home/fonts/ (files named NEXON Lv1 Gothic OTF and … OTF Bold); the Bold cut is registered as its own family at weight 400. On the brand guide, KlavikaNX (from brand.nexon.com/font/KlavikaNX/) sets display and card titles and Pretendard (from brand.nexon.com/font/Pretendard/) sets reading text.
• Official distributed font assets: the brand guide stylesheet declares Nexon's own faces from brand.nexon.com/font/ — NexonLv1Gothic, NexonLv2Gothic, NexonBazzi, NexonFootballGothic, NexonMapleStory, NexonWarhaven, NexonKartGothic, MabinogiClassic, DNFBitBitv2 and DNFForgedBlade — none of which renders visible text on the captured pages.
• Declared-only: Noto Sans KR on the brand guide; LatoWeb, Pretendard Variable and Pretendard Bold from the shared GNB component; the slick and swiper-icons icon fonts.
• System, not brand: the portal's body text declares "malgun gothic", "sans serif"; it is an OS face and gets no family token or specimen.
• Unresolved: the licence of NEXON Lv.1 Gothic and the other in-house faces sits in a collapsed FAQ on the typeface page whose answers were not read in this pass.

Hierarchy

Principles

• Bold as a separate cut. The portal switches to the NEXON Gothic Bold family for headings and titles instead of raising the weight number.
• Brand face for navigation, system face for density. NEXON Gothic carries menus, headings and titles; 12px system text carries the long tail of detail.
• Latin identity in KlavikaNX. Section display on the brand guide is Latin (Brand Articles) and set in the exclusive typeface.

Layout

Spacing

• The GNB row is 62px; menu links pad 23px 23px 21px, the outline pill 7px 18px 0px.
• The login box is 353px wide with a 60px dark action.
• Game grid cards are 302 x 320 with a 224px media area; section headings span a 1304px content width.
• Carousel tiles are 153 x 342.

Radius

• 0px on 330 of 336 captured radii.
• 19px on the GNB outline pill, 7px on the notification badge, 4px on the guide's language button.

Whitespace

• The portal is dense: many entry points above the fold, grouped by headings rather than by cards with padding.

Responsive Behavior

Both surfaces were captured at a 1440 x 900 desktop viewport. No breakpoint behaviour was measured, so none is specified here. The measured interactive sizes are the 62px GNB row, the 36px outline pill, the 44px search field and the 60px login-box action.

Elevation & Depth

Neither surface carries a resting shadow in the capture. The carousel tiles do animate a shadow on hover, but the collector caught it in flight, so no elevation value is declared.

Motion & Easing

The evidence collector records colours, sizes and state endpoints, not transition or animation properties, so no duration or easing is declared for Nexon here. The one motion the capture proves exists is the carousel tile's hover shadow, whose in-flight frames were recorded; its settled value, duration and curve were not. Keep interaction feedback on the #0077ff endpoint and collapse motion to instant under prefers-reduced-motion: reduce.

Components

Navigation

GNB menu link

• Text: #17191d
• Font: 16px NEXON Gothic, weight 400
• Padding: 23px 23px 21px
• Height: 62px

GNB icon link

• Text: #17191d
• Size: 22 x 62
• Padding: 21px 0px 0px
• Hover: anchor colour #0077ff
• Pressed: anchor colour #0077ff

GNB outline pill

• Text: #080410
• Border: 2px #17191d
• Radius: 19px
• Padding: 7px 18px 0px
• Height: 36px
• Font: 15px NEXON Gothic Bold
• Recorded hover frame: fill #0077ff, text #ffffff, border 2px #0077ff

GNB notification badge

• Background: #0077ff
• Text: #ffffff
• Radius: 7px
• Size: 14 x 14
• Font: 10px, weight 400

Actions & Inputs

Login-box action

• Background: #17191d
• Text: #ffffff
• Size: 353 x 60
• Padding: 22px 0px 0px
• Font: 15px NEXON Gothic Bold

Game search field

• Text: #222426
• Border: bottom 1px #dde1e5
• Height: 44px
• Padding: 0px 3px
• Font: 12px, weight 400, tracking -0.3px

Cards

Game grid card

• Title: #17191d, 16px NEXON Gothic Bold
• Size: 302 x 320
• Media: a 224px image area above the title

Featured carousel tile

• Background: #ffffff
• Size: 153 x 342
• Radius: 0px
• First tile: 2px #f78029 bottom border

Brand guide

Carousel arrow

• Background: #222222
• Border: 1px #222222
• Size: 40 x 40
• Disabled: fill #a1a7b5, border #a1a7b5, icon #adb5bd
• Recorded hover frame: fill #ffffff, border 1px #222222

Language button

• Background: #ffffff
• Text: #2e2e2e
• Radius: 4px
• Size: 44 x 42
• Font: 16px Pretendard, weight 600

Family-site select

• Background: #000000
• Text: #ffffff
• Border: bottom 1px #a1a7b5
• Height: 43px
• Open: a 250 x 298 dropdown on #000000 with a 1px #e9ecef border and 248 x 40 #ffffff items

Article card

• Size: 342 x 521
• Image: 342 x 342
• Date: #51555d, 15px Pretendard
• Title: #000000, 18px Pretendard, weight 500

State evidence

Only the GNB icon links carry declared hover and pressed values: four siblings settle on the identical #0077ff. The outline pill and the guide's enabled arrow are single elements, so their hover frames are recorded but not declared. The carousel tiles' hover was caught mid-transition and is unmeasured. No focus value is declared.

---

Verified: 2026-09-30 (deterministic evidence capture of the game portal and the brand guide, reconciled with the brand guide's identity and typeface pages and the company site) Tier 1 sources: https://www.nexon.com/Home/Game, https://brand.nexon.com/ko, https://brand.nexon.com/ko/ci-brand-guidelines/primary-identity, https://brand.nexon.com/ko/ci-brand-guidelines/typeface, https://company.nexon.com/ko/company Tier 2 sources: getdesign.md/nexon returned a page with no Nexon content; styles.refero.design search for "nexon" returned no usable result Conflicts unresolved: none

States

Focus is not declared from the capture. Loading, empty and error states did not occur on these public pages and are not specified.

Live state probe, 2026-10-16 (https://www.nexon.com/Home/Game), login-box-action: pressed — bg #0077ff.

Do's and Don'ts

Do

• Set navigation, headings and titles in NEXON Gothic, switching to its Bold cut for headings
• Keep the chrome white and #17191d, with #737881 for dense detail
• Use #0077ff for hover emphasis and notification counts
• Keep corners square; reserve the 19px pill for the one outline action
• Let game art carry colour

Don't

• Don't treat #00de5a as a Nexon colour; it belongs to Naver's sign-in button
• Don't set KlavikaNX outside Nexon's own works; its licence forbids it
• Don't render a substitute font as though it were NEXON Gothic
• Don't add resting drop shadows to cards or tiles
• Don't distort or recolour the symbol mark; the guide requires its specified colours and angles

Voice & Tone

Nexon talks in two registers. The company and brand pages are warm and first-person-plural, often in the soft "~해요" ending ("안녕하세요, 넥슨코리아 브랜드디자인팀입니다."), explaining why a design decision was made. The CI rules are firm and prescriptive. Player-facing copy on the portal is short and functional.

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

• "넥슨은 우수한 IP와 탄탄한 개발력, 30년 이상의 온라인게임 서비스 경험을 바탕으로 글로벌 종합 엔터테인먼트 기업으로 거듭나고 있습니다." — company site description
• "도전과 변화를 즐기는 모험가들이 재미의 진화를 이끌어갑니다." — company site, PEOPLE
• "넥슨 Lv.1 고딕은 넥슨이 추구하는 젊음, 즐거운 세상에 전하는 서체입니다." — brand guide, typeface

Agent Prompt Guide

Quick Color Reference

• Interaction blue: #0077ff
• Ink: #17191d
• Detail text: #737881
• Secondary label: #4a4e57
• Helper text: #9fa1a7
• Canvas: #ffffff
• Search underline: #dde1e5

Example Component Prompts

• "GNB on white, 62px tall: menu links 16px NEXON Gothic in #17191d, padding 23px 23px 21px; icon links turn #0077ff on hover; a 14 x 14 #0077ff badge with white 10px count and 7px radius sits on an icon."
• "Outline pill action: 2px #17191d border, 19px radius, 36px tall, 15px NEXON Gothic Bold label in #080410."
• "Game grid: cards 302 x 320 with a 224px image area and a 16px NEXON Gothic Bold title in #17191d, square corners, no shadow."

Iteration Guide

1. One accent — #0077ff — and only for interaction
2. Square by default
3. NEXON Gothic for navigation and headings, system text for 12px detail
4. The game art is the colour; keep the frame grey

Governance

Known Gaps

• Contrast, gnb-badge. Text #ffffff on #0077ff measures 4.13:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.