Design System Inspiration of Naver Pay

1. Visual Theme & Atmosphere

Naver Pay (네이버페이) is Korea's dominant payment platform, embedded across the Naver super-app ecosystem — spanning shopping, booking, banking, and loyalty. Its visual language reflects that scale: a system engineered to be instantly recognizable in every merchant checkout context while remaining calm and trustworthy. The merchant-facing landing at admin.pay.naver.com opens on a clean white canvas (#ffffff) with a cool blue-grey surface (#f6f8fa) that organizes content into ordered, airy zones. Primary text is near-black ink (#1e1e23) rather than pure black — a subtle premium move. The single "action" color, Naver Pay Green (#09aa5c), carries the weight of every purchase interaction: it's bright, unambiguous, and instantly associated with Naver's broader brand identity.

The typographic personality is split across two registers. Hero headlines use NanumSquareNeo Bold (weight 700) at 42px — the typeface native to the Naver ecosystem, with its distinctly Korean-optimized geometric strokes — delivering declarative Korean fintech confidence ("매출을 만드는 가장 쉬운 방법"). Section and body text drop to Pretendard, Korea's refined system font, at weights 400–700, keeping dense information legible and neutral. This is a two-font system where the display font persuades and the body font explains — a pattern common to Korean fintech products (Toss, Finda, Naver) that must serve both mobile-first consumers and information-heavy transaction contexts.

What distinguishes Naver Pay visually is its shadow-free flatness. Depth is achieved through flat #f6f8fa surface tints rather than elevation — cards exist as tinted rectangles (border-radius 20–28px) against white or grey bands, with no drop shadows detected across the merchant surface. The generous rounded corners (20px–28px) on cards give the system a soft, approachable character without the pill extremes of some payment apps. The green color system uses a careful four-step ramp: brand logo green (#00de5a) for signature logomark contexts, primary interactive green (#09aa5c), hover green (#0b9552), and two tinted surfaces (#eef9f3, #e3f6ed) for benefit badges and help cards.

Key Characteristics:

• NanumSquareNeo Bold at hero scale — Naver ecosystem's native display voice
• Pretendard 400–700 for body and dense UI — clean, hangul-optimized
• Naver Pay Green (#09aa5c) as the single payment-action color
• Logo brand color (#00de5a) reserved for logomark and brand surface contexts
• Shadow-free flat system — tinted #f6f8fa surfaces + #dcdee0 hairlines for separation
• Large-radius cards (20–28px) for warmth and approachability
• Near-black ink (#1e1e23) instead of pure black for premium feel
• Grayscale ladder from #f6f8fa to #1e1e23 — eight defined steps

2. Color Palette & Roles

Primary

• Naver Pay Green (#09aa5c): Primary interactive color — payment CTAs, focus rings on inputs, active nav states, and all payment-action elements. Live-confirmed as Green 500 in the official bridge UI color system.
• Green Hover (#0b9552): Green 600 — darker shade for hover/pressed states on green interactive elements.
• Brand Green (#00de5a): The signature Naver Pay logomark background color. Brighter and more saturated than the interactive green — used exclusively for logo/brand surface contexts per the official logo guide.

Green Tint

• Green Tint 100 (#eef9f3): Soft green surface for benefit badges, guide cards, and success-state backgrounds.
• Green Tint 200 (#e3f6ed): Slightly deeper green tint for secondary success surfaces.

Neutral & Surface

• Canvas (#ffffff): Page background, white card surfaces, button text on dark backgrounds.
• Surface (#f6f8fa): Grayscale 100 — cool-grey tinted surface for feature cards and content bands.
• Surface Alt (#f3f5f7): Grayscale 150 — slightly deeper surface variant.
• Hairline (#dcdee0): Grayscale 250 — primary border color for inputs, dividers, secondary button outlines.
• Hairline Alt (#c8cacc): Grayscale 300 — stronger divider for prominent separation.

Text Hierarchy

• Ink (#1e1e23): Grayscale 900 — primary heading and body text; near-black with warmth.
• Body (#404048): Grayscale 800 — secondary text and card descriptions.
• Muted (#767678): Grayscale 700 — nav links, tertiary text, metadata.
• Muted Light (#aaaaac): Grayscale 500 — placeholder text, disabled labels.

Interactive

• Link Blue (#007eff): Accent link color for inline anchors in merchant context (e.g., "취급불가상품안내", "내 사업에 맞는 가입 유형 확인하기").

3. Typography Rules

Font Family

• Display: NanumSquareNeo — Naver's own typeface, used for hero-level headlines and primary CTAs at the largest scale. Bold (700) exclusively.
• Body: Pretendard — the Korean fintech standard, used for all navigation, body copy, UI labels, buttons, and secondary headings. Weights 400, 500, 600, 700.

Hierarchy

Principles

• Two fonts, two registers: NanumSquareNeo owns the persuasive hero layer; Pretendard owns every functional UI text layer. They do not swap.
• Bold for action: CTA labels run at 700 weight; body text at 400. The weight contrast is the clearest hierarchy signal.
• Hangul-first sizing: 14px body is deliberate — the sweet spot for dense hangul legibility in data-heavy financial layouts.
• Display restraint: Large headlines are in Korean ("매출을 만드는 가장 쉬운 방법"), never in English — the brand speaks to Korean merchants in their language.

4. Component Stylings

Buttons

Primary CTA (Hero)

• Background: #1e1e23
• Text: #ffffff
• Radius: 8px
• Padding: 18px 24px
• Font: 20px NanumSquareNeo weight 700
• Height: 62px
• Use: Main landing page action — "가맹점 가입하기" (merchant signup)

Secondary (Outlined)

• Background: #ffffff
• Text: #1e1e23
• Radius: 6px
• Padding: 10px 13px
• Font: 16px Pretendard weight 500
• Border: 1px solid #dcdee0
• Height: 44px
• Use: "로그인" — secondary nav-level action

Green Payment Button

• Background: #09aa5c
• Text: #ffffff
• Radius: 8px
• Font: 16px Pretendard weight 700
• Use: Primary payment/checkout CTA — the green pay button that appears in merchant checkout contexts

Cards & Containers

Surface Feature Card

• Background: #f6f8fa
• Radius: 20px
• Use: Merchant type info cards and step info cards — shadow-free flat surface

Benefit Showcase Card

• Background: #f6f8fa
• Radius: 28px
• Use: Larger benefit showcase panels with more corner radius — consistent shadow-free flatness

Green Tint Guide Card

• Background: #eef9f3
• Text: #404048
• Radius: 12px
• Padding: 40px 26px
• Use: Help/guide cards — the green tint marks Naver Pay branded informational surfaces

Badges

Benefit Badge (Green)

• Background: #eef9f3
• Text: #09aa5c
• Radius: 9999px (full pill)
• Font: 12px Pretendard weight 400
• Use: Naver Pay point/benefit highlight tag

Dark Label Badge

• Background: #1e1e23
• Text: #ffffff
• Radius: 9999px (full pill)
• Font: 12px Pretendard weight 400
• Use: Dark label — partner tags, count badges

Inputs & Forms

Default Input

• Background: #ffffff
• Text: #1e1e23
• Border: 1px solid #dcdee0
• Radius: 6px
• Font: 16px Pretendard weight 400
• Use: Default text field state (휴대폰 번호 입력, bridge UI pattern)

Focus Input

• Background: #ffffff
• Text: #1e1e23
• Border: 1px solid #09aa5c
• Radius: 6px
• Font: 16px Pretendard weight 400
• Use: Active/focused text field — green border is the pay brand's focus signal

Error Input

• Border: 1px solid #e53935 (error red, standard; not green-system)
• Use: Validation error state per bridge UI spec

Navigation

Top Nav

• Background: #ffffff
• Text: #767678 (nav links), #1e1e23 (logo)
• Font: 16px Pretendard weight 400
• Radius on items: 8px
• Height: 44px
• Active: green #09aa5c text on active item
• Use: Horizontal top navigation with logo left-aligned

---

Verified: 2026-06-22 (omd:add-reference CREATE — Tier 1 live inspect) Tier 1 sources: https://admin.pay.naver.com/front/m/v2, https://developers.pay.naver.com/design/bridge, https://developers.pay.naver.com/design/brand/logo Tier 2 sources: getdesign.md/naverpay — not found (404); refero — no results for "naver pay" Conflicts unresolved: none — core green palette cross-confirmed between merchant center live DOM and official bridge UI spec (#09aa5c = Green 500 in both); brand logo green (#00de5a) is separate from interactive green (#09aa5c) per official logo guide, not a conflict

5. Layout Principles

Spacing System

• Base unit: 4px
• Scale: 4px, 8px, 12px, 16px, 20px, 28px, 40px, 60px
• Notable: Hero CTA uses 18px vertical padding for a commanding 62px hit height on the main "가맹점 가입하기" button; card padding tends to 35–40px vertical for generous content breathing room

Grid & Container

• Centered single-column hero with 42px NanumSquareNeo headline as the anchor
• Feature cards arranged in horizontal scroll/wrap rows (merchant benefit cards, type selector cards)
• Full-width grey surface bands (#f6f8fa) alternate with white sections for content rhythm
• Feature cards sit at fixed heights (420px showcase cards, 208px step cards, 480px type info cards)

Whitespace Philosophy

• Generous card padding: Cards breathe — 35–40px vertical internal padding on showcase cards
• Flat segmentation: sections separate by #f6f8fa vs #ffffff tint, never shadows
• Large radius creates warmth: 20–28px card radius softens what could be a cold financial layout

Border Radius Scale

• Small (6px): inputs, secondary buttons — tight, utilitarian
• Medium (8px): primary buttons, nav items — moderate, action-oriented
• Large (20px): standard content cards — the workhorse
• XLarge (28px): showcase/benefit cards — generous, consumer-friendly
• Full (9999px): badges, pill chips — fully round

6. Depth & Elevation

Shadow Philosophy: Naver Pay's merchant and developer surfaces are entirely shadow-free — box-shadow: none was confirmed across nav, hero, cards, buttons, and chips across both inspected surfaces. Depth is communicated via flat color bands and hairlines. This is consistent with modern Korean fintech (Finda, Toss mobile-web, KakaoBank) and keeps the surface feeling fast, clean, and mobile-native. The green color system does the work that shadows do elsewhere: a green focus ring on an input creates more depth signal than a soft shadow could.

7. Do's and Don'ts

Do

• Use NanumSquareNeo Bold (700) for hero-level Korean headlines — it carries the Naver ecosystem voice
• Use Pretendard 400–700 for all body, nav, and button labels
• Reserve Naver Pay Green (#09aa5c) for payment/purchase action elements — keep it the single action color
• Use #00de5a brand green only on the logo and brand surface contexts — not for UI buttons
• Separate sections with flat #f6f8fa tint bands and #dcdee0 hairlines, not shadows
• Apply green focus rings on inputs — #09aa5c border signals the Naver Pay checkout context
• Use large border-radius (20–28px) on cards — warmth matters in a payment context
• Use near-black #1e1e23 for primary text instead of pure black

Don't

• Use drop shadows on any surface — the system is flat-first
• Apply #00de5a brand green to interactive buttons or links — it's a logo color, not a UI color
• Use a second saturated accent alongside green — the system is monochromatic except for the blue link color
• Set headlines in Pretendard — NanumSquareNeo owns the hero display register
• Use pure black (#000000) for body text — the system uses warm near-black #1e1e23
• Create pill-shaped buttons for primary actions — the system uses moderate 8px radius buttons, not full-round
• Use the green colors for error states — errors use a separate red signal independent of the green system

8. Responsive Behavior

Breakpoints

Touch Targets

• Primary CTA at 62px height — very comfortable tap target
• Secondary nav buttons at 44px height — standard Korean mobile minimum
• Input fields at 44px height with clear focus ring (green border)

Collapsing Strategy

• Hero: 42px NanumSquareNeo headline compresses on mobile, weight 700 maintained
• Feature cards: horizontal multi-card → single-column stacked
• Tinted surface bands: maintain full-width treatment at all sizes
• Nav: horizontal links collapse to condensed top navigation on mobile

Image Behavior

• Product illustrations and screenshots carry no shadow at any size — consistent with flat system
• Cards maintain 20–28px radius across breakpoints

9. Agent Prompt Guide

Quick Color Reference

• Primary payment CTA: Naver Pay Green (#09aa5c)
• Green hover: #0b9552
• Logo brand green: #00de5a
• Green tint surface: #eef9f3
• Dark hero CTA: Ink (#1e1e23)
• Background: Canvas (#ffffff)
• Surface / card bg: #f6f8fa
• Primary text: Ink (#1e1e23)
• Secondary text: Body (#404048)
• Muted / nav: #767678
• Border / hairline: #dcdee0
• Inline link: #007eff

Example Component Prompts

• "Create a hero on white background. Headline at 42px NanumSquareNeo weight 700, color #1e1e23. Black CTA button: #1e1e23 background, white text, 8px radius, 18px 24px padding, 20px NanumSquareNeo. Green link: #007eff text. Subtitle 28px Pretendard 600, color #1e1e23."
• "Design a feature card: #f6f8fa background, 20px radius, no shadow. Title 28px Pretendard weight 600, color #1e1e23. Body 14px Pretendard weight 400, color #404048."
• "Build a tinted section: #f6f8fa background full-width. Section title 40px Pretendard weight 700, #1e1e23. Cards inside: #f6f8fa bg, 20px radius, no shadow."
• "Create a checkout payment button: #09aa5c background, white text, 8px radius, Pretendard 16px/700."
• "Build a benefit badge: #eef9f3 background, #09aa5c text, full pill radius, 12px Pretendard."

Iteration Guide

1. NanumSquareNeo Bold (700) for hero Korean copy only; Pretendard for everything else
2. Green (#09aa5c) = payment action; avoid spreading to non-payment UI elements
3. No shadows — separate content bands with #f6f8fa and hairlines
4. Cards at 20–28px radius, inputs and buttons at 6–8px
5. Text color is #1e1e23, never pure black for body
6. Green focus ring on inputs: 1px solid #09aa5c is the checkout context signal
7. Secondary buttons use white bg + 1px solid #dcdee0 + #1e1e23 text

---

10. Voice & Tone

Naver Pay's voice is practical, merchant-friendly, and confidence-instilling — a platform that speaks to Korean business owners in plain, efficient Korean. The merchant center headline "매출을 만드는 가장 쉬운 방법" ("The easiest way to generate revenue") sets the register: direct, benefit-first, zero hype. Copy is grounded in concrete outcomes (매출, 정산, 포인트 혜택) and treats the merchant as a capable operator who wants clear answers, not marketing language.

Voice samples (verbatim from live surfaces):

• "매출을 만드는 가장 쉬운 방법" — hero H2 (merchant center). (verified live 2026-06-22)
• "Npay 포인트 혜택으로 고객의 구매를 더 쉽게" — benefit H3 (merchant center). (verified live 2026-06-22)
• "사업자라면 누구나 쉽게 시작할 수 있어요" — onboarding H3 (merchant center). (verified live 2026-06-22)

Forbidden register: technical payment jargon left unexplained, aggressive urgency cues, English-language hero copy, exclamation-heavy sales tone.

11. Brand Narrative

Naver Pay (네이버페이) launched in 2015 as Naver Corporation's integrated payment and financial services product, initially embedded within Naver Shopping and gradually expanding across the Naver super-app ecosystem. Part of Naver Financial Corp (네이버파이낸셜), a Naver subsidiary established in 2019 to house the company's financial infrastructure, Naver Pay benefits from Naver's dominant position in Korean search and content — making it one of the highest-reach payment touchpoints in Korea without requiring standalone acquisition.

The product's positioning is built on the Naver ecosystem advantage: users who are already logged into Naver for search, news, blogs, and webtoons can pay across millions of merchant integrations without re-entering credentials. The loyalty layer — Naver Pay Points — creates a closed-loop reward system that keeps spending within the Naver ecosystem. The merchant-facing pitch ("매출을 만드는 가장 쉬운 방법") leans on this reach: integration with Naver Pay means exposure to Korea's most-used digital platform.

What Naver Pay refuses: the cold institutional chrome of legacy Korean banking (no navy-and-gold, no heavy corporate formality). What it embraces: a clean, almost editorial layout; a Naver-green that signals trust and familiarity to tens of millions of daily Naver users; and a merchant experience that makes onboarding feel achievable even for a solo business operator.

12. Principles

1. Ecosystem trust as the product. Naver Pay's strongest design signal is the green — Koreans associate Naver green with search results, map pins, and webtoon bookmarks. Bringing that color into the payment button creates an instant trust transfer. UI implication: the green pay button must be unambiguous and undiluted — no secondary greens competing for attention.
2. Flat and fast for mobile commerce. Korea's mobile-first commerce context demands surfaces that load fast and render cleanly. UI implication: shadow-free flatness with surface tints is the right call — it keeps file sizes small and rendering sharp on Korean mobile networks.
3. Benefit before process. The merchant center leads with outcomes (revenue, settlement, points) rather than technical setup steps. UI implication: feature cards lead with benefit headlines, not feature names; the CTA is "시작하기" not "설치하기".
4. Clear hierarchy through weight contrast. Two fonts at many weights means the hierarchy must be clear — NanumSquareNeo Bold for hero scale, Pretendard for everything else. UI implication: do not mix NanumSquareNeo with body text; the contrast between the two fonts IS the hierarchy.
5. Design guide as brand protection. The official Naver Pay design guide (logo guide, bridge UI, benefit badge) is unusually explicit — color steps are named (Green 500, Grayscale 900), spacing is measured. UI implication: these specs should be treated as hard constraints by any integration using Naver Pay branding.

13. Personas

Personas below are fictional archetypes informed by publicly observable Naver Pay user segments (Korean online merchants, small business operators, everyday shoppers using Naver Pay in checkout), not individual people.

이준혁, 38, 서울. Online clothing reseller on SmartStore (네이버 스마트스토어). Chose to integrate Naver Pay because his customers already have Naver accounts and points. Doesn't write code — followed the merchant center guide to set up the payment integration himself in under a day. Values quick settlement so he can reinvest in inventory. Trusts Naver because he uses Naver Search, Maps, and Pay Points daily.

박미경, 44, 부산. Runs a small restaurant listed on Naver Maps. Added Naver Pay QR as a payment option after seeing other restaurants use it. Pays attention to her Naver Pay Point accumulation because she shops online herself and knows the value of the point system from the consumer side.

김태우, 29, 경기. A freelance web developer who builds SmartStore sites for small businesses. Uses the Naver Pay developer docs frequently and reads the bridge UI spec to implement compliant checkout pages. Cares about the design guide because non-compliant logo usage can fail the Naver Pay integration review.

최수아, 25, 서울. A daily Naver Pay user — pays for convenience stores, online shopping, and food delivery using Naver Pay QR and the app. Values points accumulation and the seamless checkout (no re-entering card details). Trusts the green button — when she sees it, she knows how to complete the payment.

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: Motion is minimal and purposeful — consistent with the flat, fast payment context. Green CTAs respond to press with a brief #0b9552 color shift at motion-fast. Cards entering the viewport fade in from below at motion-standard / ease-enter. No bounce, spring, or overshoot — a payment interface signals reliability, not playfulness. Under prefers-reduced-motion: reduce, all transitions collapse to instant; the checkout flow remains fully functional without any animation.