Design System Inspiration of Nexon

1. Visual Theme & Atmosphere

Nexon's website is the digital storefront of one of Korea's largest game publishers, and its design reflects a deliberate split personality: an editorial, almost corporate calm in the chrome, broken by sudden bursts of high-voltage brand green. The page sits on a clean white canvas (#ffffff) with near-black ink (#17191d) for headings and navigation, but the moment a primary call-to-action appears, the system detonates its signature #00de5a -- an electric, arcade-bright green that reads as "press start." This is the green of a power-up, of a glowing console button, and it is used with restraint precisely so that each appearance lands like a hit.

The typographic backbone is NEXON Gothic Bold, the company's proprietary typeface, which carries the brand voice on every CTA and emphasis element. It falls back to malgun gothic for body copy, giving the running text a familiar, highly legible Korean-web baseline. The result is a hierarchy where the custom face does the shouting and the system face does the reading. Black text (#000000) sits directly on the green CTA -- a high-contrast, almost industrial pairing that refuses the soft white-on-color convention most consumer sites default to. The black-on-green combination is the single most identifiable Nexon design signal.

Geometry is sharp and confident. Buttons and nav items use zero or minimal corner radius, echoing the rectangular, pixel-grid heritage of game UI rather than the soft pill shapes of modern SaaS. Shadows are light and functional -- elevation exists to separate cards from the canvas, not to create atmosphere. The overall impression is of a company that takes its games' energy seriously but frames it inside a disciplined, grown-up corporate shell.

Key Characteristics:

• Signature arcade-green #00de5a reserved for primary CTAs and brand accents -- used sparingly for maximum impact
• Black label (#000000) directly on green -- the defining high-contrast Nexon pairing
• Proprietary NEXON Gothic Bold for CTAs and emphasis; malgun gothic fallback for body
• Near-black ink (#17191d) instead of pure black for headings and navigation
• Sharp, low-radius geometry (0-4px) echoing game-UI heritage
• Restrained, functional shadows -- elevation, not atmosphere
• Muted gray scale (#737881, #4a4e57, #919191, #9fa1a7) for hierarchy and utility text

2. Color Palette & Roles

Primary

• Nexon Green (#00de5a): The signature brand color. Primary CTA backgrounds, brand accents, active-state underlines, event badges. An electric arcade green measured live as rgb(0,222,90) on the home-page CTA.
• On-Primary Black (#000000): Label color that sits directly on Nexon Green. The black-on-green pairing is the brand's most identifiable signal.
• Pure White (#ffffff): Page background, card surfaces, nav background.

Ink & Text

• Ink (#17191d): Primary heading, navigation, and link text. A near-black that reads cleaner than pure black on white.
• Near-Black Link (#080410): Deepest link/text tone for high-emphasis inline links.
• Body Gray (#737881): Default body and secondary text color, measured on body.
• Label Gray (#4a4e57): Stronger secondary labels and sub-headings.
• Muted Gray (#919191): Utility labels and placeholder-adjacent text, often with -0.3px tracking.
• Disabled Gray (#9fa1a7): Inactive CTA fills and disabled control text.

Pure Black

• Pure Black (#000000): CTA label on green, maximum-contrast utility.

3. Typography Rules

Font Family

• Primary: NEXON Gothic Bold -- the proprietary brand face, used on CTAs, emphasis, and bold captions.
• Fallback / Body: malgun gothic, then sans-serif -- the running-text face for body copy and most navigation.

Hierarchy

Principles

• Two-face system: NEXON Gothic Bold for shouting (CTAs, emphasis), malgun gothic for reading (body, most nav). The custom face is a deliberate brand stamp.
• Weight as emphasis: 700 is reserved for CTAs and key labels; 400 carries everything else. The contrast between the two is the primary typographic signal.
• Tight line-height: Compact ~1.2 line-heights keep dense Korean-web layouts legible without wasted vertical space.
• Small base size: 12px body reflects the information-dense Korean portal convention; emphasis is created by weight and color, not large type.

4. Component Stylings

Buttons

Primary Green CTA

• Background: #00de5a
• Text: #000000
• Padding: 12px 24px
• Radius: 0px (sharp)
• Font: 14px NEXON Gothic Bold, weight 700
• Use: Primary action -- "다운로드", "게임 시작", "지금 플레이"

Disabled CTA

• Background: #9fa1a7
• Text: #ffffff
• Padding: 12px 24px
• Radius: 0px
• Font: 14px weight 400
• Use: Inactive / unavailable action

Ghost / Text Action

• Background: #ffffff
• Text: #17191d
• Padding: 10px 20px
• Radius: 0px
• Use: Secondary text-only actions

Navigation

• Clean horizontal GNB on white (#ffffff)
• Links: 16px, #17191d ink, NEXON Gothic Bold / malgun fallback
• Active item: Nexon Green (#00de5a) bottom border underline
• Sub-menu rows: 14px malgun gothic, #17191d on white

Cards & Containers

• Background: #ffffff
• Radius: 4px
• Shadow (ambient): rgba(0,0,0,0.08) 0px 2px 8px
• Shadow (elevated): rgba(0,0,0,0.16) 0px 8px 24px
• Use: Game promo cards, event tiles on white canvas

Badges

• Background: #00de5a
• Text: #000000
• Padding: 2px 8px
• Radius: 4px
• Font: 12px NEXON Gothic Bold, weight 700
• Use: NEW / event markers

Inputs & Forms

• Background: #ffffff
• Border radius: 4px
• Text: #17191d
• Placeholder: #919191 muted gray
• Padding: 8px 12px

---

Verified: 2026-06-09 (omd-add-reference live inspect) Tier 1 sources: https://www.nexon.com, https://www.nexon.com/Main/Index (Korean home + main surface, live DOM)

5. Layout Principles

Spacing System

• Base unit: 8px (with dense 4px micro-steps)
• Scale: 4px, 8px, 12px, 16px, 20px, 24px, 36px, 48px
• Notable: Dense spacing reflects the Korean game-portal convention of fitting many entry points (games, events, community) above the fold.

Grid & Container

• Full-width hero banner for the featured game, edge-to-edge
• Below the hero: multi-column game grids and event tiles
• Centered content column for corporate/IR pages
• White canvas throughout, with cards as the primary content unit

Whitespace Philosophy

• Functional density: Nexon packs many games and entry points into the layout; whitespace separates groups, not individual items.
• Green as the spotlight: In a dense gray-and-white field, the green CTA is the deliberate focal point that pulls the eye.

Border Radius Scale

• Sharp (0px): Buttons, nav items, GNB -- the game-UI default
• Small (4px): Cards, badges, inputs
• Large (8px): Larger feature containers

6. Depth & Elevation

Shadow Philosophy: Nexon's elevation is purely functional. Shadows are neutral black at low alpha -- they exist to lift a card off the white canvas, not to add brand atmosphere. The brand energy comes entirely from color (#00de5a) and typography (NEXON Gothic Bold), never from decorative depth. This keeps the chrome calm so the game content and the green CTA carry all the visual voltage.

7. Responsive Behavior

Breakpoints

Touch Targets

• CTAs use comfortable 12px vertical padding
• Nav items spaced for tap on mobile GNB
• Green CTA scales to full-width on mobile for thumb reach

Collapsing Strategy

• GNB: horizontal links collapse to hamburger
• Game grids: multi-column reduce to 2-column then single
• Hero banner: maintains full-width, reduces internal padding
• Body type holds at 12-14px; emphasis stays weight-driven

8. Do's and Don'ts

Do

• Reserve Nexon Green (#00de5a) for primary CTAs, active states, and brand accents -- scarcity is what makes it land
• Pair black (#000000) text directly on the green -- the high-contrast combo is the brand signal
• Use NEXON Gothic Bold for CTAs and emphasis; malgun gothic for body
• Use near-black ink (#17191d) for headings and nav instead of pure black
• Keep geometry sharp (0-4px radius) -- it echoes the game-UI heritage
• Keep shadows neutral and functional -- elevation, not atmosphere
• Use the gray scale (#737881, #4a4e57, #919191, #9fa1a7) for hierarchy

Don't

• Don't overuse the green -- a page full of #00de5a kills its power-up impact
• Don't put white text on the green CTA -- black is the brand-correct label
• Don't use large pill radii on buttons -- Nexon's geometry is sharp and rectangular
• Don't add colored or heavy decorative shadows -- elevation is functional only
• Don't replace NEXON Gothic Bold on CTAs with a generic bold -- the proprietary face is the stamp
• Don't use pure black (#000000) for body headings -- #17191d reads cleaner

9. Agent Prompt Guide

Quick Color Reference

• Primary CTA: Nexon Green (#00de5a) with black (#000000) label
• Background: Pure White (#ffffff)
• Heading / nav text: Ink (#17191d)
• Body text: Body Gray (#737881)
• Secondary label: Label Gray (#4a4e57)
• Muted / placeholder: Muted Gray (#919191)
• Disabled: Disabled Gray (#9fa1a7)

Example Component Prompts

• "Create a primary CTA: #00de5a background, #000000 text, 0px radius, 12px 24px padding, 14px NEXON Gothic Bold weight 700. Label '지금 플레이'."
• "Design a game promo card: white background, 4px radius, shadow rgba(0,0,0,0.08) 0px 2px 8px. Title 16px #17191d, body 12px #737881. Green #00de5a NEW badge with black text, 4px radius."
• "Build a GNB nav bar: white background, 16px #17191d links, active item with #00de5a bottom border underline."

Iteration Guide

1. Green (#00de5a) is precious -- one or two appearances per viewport maximum
2. Black on green, always -- never white-on-color
3. NEXON Gothic Bold for CTAs/emphasis; malgun gothic for body
4. Headings are #17191d, body is #737881, labels step through #4a4e57 / #919191
5. Sharp corners (0-4px); no pills
6. Shadows are neutral black, low alpha, functional only

---

10. Voice & Tone

Nexon's voice is that of an established game publisher speaking to two audiences at once: players, with energy and immediacy, and the market and partners, with measured corporate confidence. On player-facing surfaces the register is direct and inviting -- "지금 플레이", "다운로드", short imperative verbs that map to the green "press start" CTA. On corporate, IR, and careers surfaces the same brand restraint applies, but the tone shifts to the steady, factual register of a major listed company.

11. Brand Narrative

Nexon was founded in 1994 in Seoul by Jake Kim (Kim Jung-ju) and is widely credited with pioneering the massively multiplayer online (MMO) graphical game and the free-to-play, item-based business model that reshaped global game monetization. Its 1996 title Nexus: The Kingdom of the Winds (바람의나라) is recognized as one of the world's first commercially successful graphical MMORPGs. Over three decades Nexon grew into one of the largest game publishers in Asia, operating franchises such as MapleStory, Dungeon&Fighter, KartRider, FIFA Online, and The Finals, and is publicly listed (Nexon Co., Ltd. on the Tokyo Stock Exchange).

The brand identity is built around a single, confident gesture: the electric green "go" signal. In a category crowded with dark, fantasy-heavy game branding, Nexon's bright #00de5a on white reads as energetic, accessible, and modern -- a publisher's mark rather than a single game's skin. The proprietary NEXON Gothic typeface (released as a free public font family) reinforces a corporate identity that is consistent across dozens of game brands while remaining recognizably Nexon.

What the brand refuses: a single dominant game aesthetic imposed on the corporate shell. The white canvas and disciplined gray-and-green system act as a neutral frame so that each game's own art can shine through, while the green CTA and NEXON Gothic stamp keep the publisher's identity present on every screen.

12. Principles

1. Green is the spark, not the field. The brand green works because it is scarce. Used as the CTA and accent only, it stays a power-up; used everywhere, it would become wallpaper.
2. Black on green, by design. The high-contrast label pairing is intentional and industrial -- it signals confidence and refuses the soft default of white-on-color.
3. A neutral frame for vivid games. The white-and-gray chrome is deliberately calm so that diverse game art can carry the color. The publisher's restraint is what lets the products be loud.
4. The typeface is the constant. NEXON Gothic Bold appears across every game brand and every CTA -- one consistent voice unifying a varied portfolio.
5. Sharp geometry signals games. The low-radius, rectangular forms tie the corporate site back to the pixel-grid heritage of the medium.
6. Energy without hype. Player copy is immediate and direct; corporate copy is measured. Both avoid stacked superlatives.

13. Personas

Personas below are fictional archetypes informed by publicly observable Nexon audience segments (Korean and global players, returning veterans, prospective partners/investors), not individual people.

Min-jun Park, 24, Seoul. University student and lifelong MapleStory player. Visits nexon.com to check events and download the launcher. Recognizes the green CTA instantly -- to him it means "the new event is live." Would be confused by a redesign that buried the play button under decorative chrome.

Soo-yeon Lee, 33, Busan. Returning player who quit years ago and is curious about a remaster. Scans the game grid quickly, trusts the clean corporate frame as a sign the company is stable and still investing. Values that the site loads fast and information is dense.

David Chen, 41, Singapore. Mid-market investor reviewing Nexon as a listed company. Lands on the IR/corporate surface, expects and finds a measured, factual register. The disciplined brand system reads to him as a sign of operational maturity.

Hana Kim, 28, Seoul. Designer evaluating Nexon for a job. Notices the proprietary NEXON Gothic typeface and the restraint of the green-on-white system, and reads it as a brand team that understands scarcity and consistency.

14. States

15. Motion & Easing

Durations:

Easings:

Signature motions.

1. CTA hover. The green CTA brightens slightly on hover using motion-fast / ease-standard -- a quick, responsive "ready" signal, no scale bounce.
2. Hero banner carousel. The featured-game banner crossfades or slides at motion-slow, giving each game a moment to register.
3. Reduce motion. Under prefers-reduced-motion: reduce, carousel auto-advance pauses and transitions collapse to near-instant; the site stays fully functional.

16. Do's and Don'ts

Do

• Use Nexon Green (#00de5a) as the scarce, high-impact CTA and accent color
• Pair black (#000000) on the green; near-black ink (#17191d) for headings
• Apply NEXON Gothic Bold on CTAs and emphasis, malgun gothic for body
• Keep corners sharp (0-4px) and shadows neutral/functional
• Step text hierarchy through the gray scale (#737881, #4a4e57, #919191, #9fa1a7)
• Let the white-and-gray frame stay calm so game art and the green CTA carry the energy

Don't

• Don't flood the layout with green -- scarcity is the whole point
• Don't use white text on the green CTA
• Don't use pill/large radii or colored decorative shadows
• Don't swap NEXON Gothic Bold for a generic bold on CTAs
• Don't use pure black (#000000) for body headings -- prefer #17191d