Design System Inspiration of Naver (네이버)

1. Visual Theme & Atmosphere

NAVER is a Korean search and discovery platform whose public identity spans the portal home, search results, and a much broader family of local services. Its familiar green is the stable connective tissue, while each product surface optimizes independently for dense information retrieval, quick navigation, and local task completion. NAVER does not expose one public product design system that governs every service, so this reference deliberately separates three inspected domains: the portal home, search results, and the NAVER Corp brand-resource page. That separation preserves the recognizable company identity without turning a corporate font, a search-only pattern, or a portal measurement into a universal product rule.

The official identity constant is NAVER Green (#03C75A). Product chrome is otherwise neutral and information-dense. The portal/search surfaces use a System-first Korean stack, while the corporate brand page loads and visibly uses InterVariable. Values from one surface must not be silently generalized to the others.

Key characteristics:

• Official brand green #03C75A, backed by the NAVER brand guide
• Dense portal/search composition on white with dark gray text
• System-first portal/search typography
• InterVariable on the corporate brand page
• Search, filters, tabs, cards, menus, and paging controls grounded in live computed evidence

Primary tasks

• Enter a query and compare the results it returns
• Scan the portal for news, shopping, maps, and mail
• Narrow a result set to one vertical or filter

2. Color Palette & Roles

Official identity

• NAVER Green (#03C75A): official logo and identity color. The guide specifies RGB 3/199/90, CMYK 72/0/88/0, and Pantone 2270C.

Portal and search

• Canvas (#FFFFFF): portal and result surfaces.
• Portal Ink (#2E2E2E): common portal control and chrome text.
• Search Ink (#1C1C1C): primary search-result text.
• Search Link (#0C43B7): current search-result link/chip blue.
• Search Muted (#8C8C8C): inactive tabs and secondary labels.
• Hairline (#E5E5E5): filter-chip and light container border.
• Login fill (#03A94D): the portal-home sign-in button's fill (2026-07-11 capture, the same on 2026-09-29). It is darker than NAVER Green; on that button the brand green #03C75A appears only as the shadow tint rgba(3, 199, 90, 0.12).

Corporate brand page

• Corporate Ink (#1A1D24): brand-page navigation and section labels.
• Corporate Muted (#717680): secondary corporate copy.

Do not promote older #0068C3, #6633B9, or estimated semantic colors as current universal NAVER tokens without surface-specific live evidence.

3. Typography Rules

Font resolution

Specimen availability is evaluated per surface and never substitutes one NAVER-published font for another.

• Portal and search: System. Computed stacks begin with -apple-system and continue through Korean platform fallbacks.
• Corporate brand page: InterVariable, loaded from https://www.navercorp.com/font/InterVariable.woff2 and visibly used.
• Declared only in this capture: NanumSquare, NanumSquareNeo, NanumHuman, and Pretendard. Declaration is not visible use.
• Unresolved minority: 나눔고딕 appeared on four search elements without a matching loaded FontFace.
• No canonical UI monospace: D2Coding is a NAVER-published font, not evidence that current portal/search UI uses it.

4. Component Stylings

Portal Search

Search Input

• Background: transparent
• Text: #000000
• Radius: 0px
• Padding: 17px 0
• Height: 58px
• Font: 21px / 700 / System
• States: autocomplete listbox expansion observed on 2026-07-11. Keyboard focus (2026-09-29, Tab stop 15, :focus-visible matched) leaves the input and all six ancestors as at rest, with outline: none: as of 2026-09-29 the field has no focus indicator of its own. Hover and press add a shadow to the surrounding assembly, not to the input.
• Use: Query field inside the portal's branded search assembly; it is autofocused on load

Search Assembly

• Background: #FFFFFF
• Border: 1px solid #03C75A, the same at rest with focus elsewhere, on hover, on press and under keyboard focus
• Hover and pressed: shadow 0 2px 4px rgba(0, 0, 0, 0.12)
• Radius and size: not read, so not declared
• Use: div#search_area, the green-framed box around the query input, AI search and input tools

Search Submit

• Background: transparent
• Text: #2E2E2E
• Radius: 0px
• Padding: 9px 9px 9px 10px
• Height: 58px
• States: default observed. Hover and pressed (2026-09-29, :hover and :active matched) run a layered glow inside the button: a blur(4px) glow layer fades in to opacity 0.5 and two conic-gradient layers to opacity 1, their gradient angle rotating; the two pale gradient fills (rgb(236, 247, 252) → rgb(232, 249, 245)) fade from 1 to 0; and the label image swaps from @img_ai_tab_light.png to @img_ai_tab_highlight.png. Pressed equals hover. Keyboard focus runs the same effect next to the browser's default ring. (Corrected 2026-09-29: an earlier reading skipped the button's empty layers and reported no pointer response; before that, "not retained" read as a capture gap.)
• Use: the AI 검색 control (button#search-ai-tab-button) adjacent to the query field

Search Results

Vertical Tab

• Background: transparent
• Text: #8C8C8C
• Radius: 0px
• Padding: 6px 12px 14px
• Font: 16px / 600 / System
• Hover: fg #595959
• Pressed: fg #595959
• Use: Search vertical/category navigation

Share Control

• Background: transparent
• Text: #8C8C8C, 13px / 400 / System, tracking -0.3px
• Padding: 6px 6px 14px; height 41px
• Hover and pressed: fg #595959, the vertical tabs' hover colour
• Use: share control at the end of the vertical-tab row (a.bt_share, role=button)

Filter Chip

• Background: #FFFFFF
• Text: #0C43B7
• Border: 1px solid #E5E5E5
• Radius: 18px
• Padding: 4px 12px 4px 4px
• Font: 13px / 400 / System
• Use: Image and result refinement filter

Result Card

• Background: #FFFFFF
• Text: #1C1C1C
• Radius: 12px
• Use: Grouped search-result content surface

Portal Utilities

Paging Button

• Background: #FFFFFF
• Text: #2E2E2E
• Border: 1px solid rgba(0,0,0,0.15)
• Radius: 9999px
• Height: 36px
• Shadow: 0 1px 2px rgba(0,0,0,0.06)
• Hover and pressed: bg rgba(0, 0, 0, 0.06) and shadow 0 2px 4px rgba(0, 0, 0, 0.12) (2026-09-29, :hover and :active matched, transition: all 0s)
• Focus: the browser's default ring only
• States: corrected 2026-09-29. Earlier text said hover and pressed were not retained, and a 2026-09-17 check found background and text identical across states on a paging control; that check measured a search-results control (#1C1C1C text), not this portal-home button.
• Use: Carousel previous/next action (이전 페이지 / 다음 페이지)

Overflow Menu

• Background: transparent
• Text: #2E2E2E
• Font: 14.7px / 500 / System
• States: expanded listbox and option observed
• Use: Content-header overflow navigation

Sign-in CTA

• Background: #03A94D, darker than NAVER Green; #03C75A tints only the shadow
• Text: #FFFFFF, 14.7px / 500 / System, tracking -0.4px
• Border: 1px solid rgba(0, 0, 0, 0.06)
• Radius: 4px; padding 17px 0; 380 × 56px
• Shadow: 0 2px 4px rgba(3, 199, 90, 0.12)
• Hover and pressed: shadow 0 2px 4px rgba(3, 199, 90, 0.24) plus a rgba(0, 0, 0, 0.06) overlay drawn by ::before
• Focus: the browser's default ring only
• Use: NAVER로그인 on the portal home (measured without signing in)

Content Tab

• Text: rgba(0, 0, 0, 0.5) inactive, #000000 selected; 17px / 800 / System, tracking -0.4px; height 23px
• Hover and pressed: underline rgba(0, 0, 0, 0.5); the text colour stays
• Focus: the browser's default ring only
• Use: content-header tabs (role=tab) above the news and content feed

Service Shortcut

• Background: transparent
• Label: #2E2E2E, 13.65px / 500 / System (the anchor is 14.7px / 500)
• Size: 64 × 68px, icon plus label
• States: on 2026-09-29 hover and pressed (:hover, :active matched) move the icon's backdrop tile in its sprite sheet from background-position: -156px -144px to -104px -144px; the glyph and the label stay, and 메일 does the same. Pixels were not compared, so how the tile looks is not stated. Focus does not move the tile and shows only the browser's default ring
• Use: header service shortcuts (a.link_service, e.g. 뉴스)

Subscribe Button

• Background: transparent
• Text: #406CDC, 12.6px / 800 / System, tracking -0.4px
• Border: 1px solid #E0ECFF
• Radius: 13px; padding 0 5px 0 7px; height 26px
• States: default only
• Use: press subscribe button in the news media tab

Corporate Brand Resource

Section Tab

• Background: transparent
• Text: #1A1D24
• Radius: 0px
• Padding: 17px 0 18px
• Font: 20px / 600 / InterVariable
• States: selected observed
• Use: Brand guide versus official-photo section switching

Header Navigation Link

• Text: #1A1D24, 16px / 400 / InterVariable, tracking -0.5px; height 26px
• Hover and pressed: font-weight 600 while the colour stays #1A1D24 (eight sibling links, 2026-07-11)
• Use: NAVER Corp site header navigation (a.nav__link)

Keyboard focus (2026-09-29)

A real Tab walk on the portal home reached six controls. Four of them (sign-in CTA, content tab, paging button, service shortcut) draw only the browser's default ring (outline: auto, rendered #005fcc). AI search draws that ring too and also runs its hover effect: the glow layers fade in, the pale fills fade out and the label image switches to @img_ai_tab_highlight.png, the only authored focus change among the six. The ring is Chrome's, not NAVER's, and no component carries it as a focus value. The query input showed no focus change at all: as of 2026-09-29 the portal's search field has no visible keyboard-focus indicator beyond the permanent green frame of its assembly.

5. Layout Principles

• Use the observed 4/8/12/16/20px spacing clusters for compact UI composition.
• Portal and SERP density are surface properties, not permission to remove hierarchy.
• Search remains the primary spatial anchor on the portal.
• Cards may use 12px rounding on search surfaces; utility controls range from square to fully circular.
• Corporate pages use more generous rhythm and must not inherit portal density automatically.

6. Depth & Elevation

• Most sampled portal/search controls use no shadow.
• The portal paging button uses a restrained 0 1px 2px rgba(0,0,0,0.06) shadow.
• The portal sign-in CTA casts a green-tinted 0 2px 4px rgba(3, 199, 90, 0.12); hover doubles the alpha.
• Hover lifts the search assembly and the paging buttons with 0 2px 4px rgba(0, 0, 0, 0.12).
• Prefer border, spacing, and type hierarchy before introducing elevation.
• No universal NAVER shadow scale is claimed.

7. Do's and Don'ts

Do

• Use official NAVER Green exactly as #03C75A for identity applications.
• Keep portal/search System typography separate from corporate InterVariable typography.
• Preserve compact Korean text rhythm and explicit interactive states.
• Treat live product evidence and the official brand guide as different authorities.

Don't

• Do not infer native-app typography from these web surfaces.
• Do not promote declared-only Nanum/Pretendard faces as current UI fonts.
• Do not invent a public NAVER product design system from brand-resource guidance.
• Do not alter the official logo's proportions, color, or style.
• Do not paint the portal sign-in CTA with NAVER Green: its measured fill is #03A94D, and #03C75A only tints its shadow.

8. Responsive Behavior

• The inspected evidence is desktop at 1440×900; mobile-native claims are intentionally absent.
• Preserve 44px-or-larger touch targets when adapting dense portal utilities to narrow layouts.
• Allow search-result cards to stack before shrinking readable Korean type.
• Keep the search control visually dominant and avoid horizontal overflow in tab/filter rows.

9. Agent Prompt Guide

Build a NAVER-inspired information surface using a white canvas, System-first Korean typography, compact 4/8/12/16/20px spacing, dark neutral text, and #03C75A only where identity or a verified action requires it. Separate portal/search components from NAVER Corp brand-page components. Use 12px result cards, 18px filter chips, and explicit hover/pressed/selected states. Do not claim Nanum, Pretendard, or InterVariable outside the surfaces where they were actually observed.

10. Voice & Tone

The inspected public copy is direct, functional, and navigation-led. Labels such as “검색하기”, “삭제”, “전체 서비스”, and “브랜드 리소스” describe the action or destination without promotional filler.

Verified live samples:

• “검색하기” — corporate-site integrated search.
• “브랜드 리소스” — official brand-resource section.
• “기술과 서비스로 세상의 모든 가능성을 연결합니다” — corporate navigation statement.

11. Brand Narrative

NAVER's official company page describes its beginning in 1999 and frames the organization as “Navigators” connecting possibilities through technology and services. The same official timeline presents integrated search in 2000, HyperCLOVA in 2021, and the 1784 robot-friendly headquarters in 2022.

The official brand guide describes NAVER Green as carrying trust, challenge, exploration, familiarity, and an eco-friendly image. This reference uses those statements only as sourced brand context; it does not infer unpublished product principles.

In product terms, this produces a useful tension: NAVER must remain instantly recognizable while supporting services with very different densities and jobs. Search favors fast scanning and compact labels; the portal coordinates many destinations; the corporate brand surface explains the shared identity. Green, logo rules, and company statements stay at brand level, while typography, spacing, and components remain attached to the surface where they were observed.

12. Principles

1. Keep identity consistent. The official logo and #03C75A must not be arbitrarily recolored, distorted, outlined, or given effects.
   • UI implication: isolate brand identity tokens from transient service colors.
2. Connect people to destinations quickly. Public navigation and search copy is literal and compact.
   • UI implication: prioritize recognizable labels and scanning speed.
3. Separate service surfaces. NAVER operates many products with different local systems.
   • UI implication: never treat one service's typography or component geometry as a universal NAVER token.

13. Personas

NAVER has not published validated product personas for the inspected portal, search, and brand-resource surfaces. The evidence supports usage contexts instead: people entering a query and comparing results; portal visitors scanning news, shopping, maps, mail, and other destinations; and designers or partners retrieving official identity assets. These are task contexts, not demographic profiles. Implementations should validate the specific NAVER service, language, device, and task before turning them into research personas.

14. States

• Hover / pressed: captured on search tabs and utility actions (2026-07-11). On 2026-09-29, with :hover and :active matched, the paging button took bg rgba(0, 0, 0, 0.06) and shadow 0 2px 4px rgba(0, 0, 0, 0.12), the sign-in CTA a shadow alpha of 0.24 plus a rgba(0, 0, 0, 0.06) overlay, the content tab an underline and the search assembly a shadow; the AI search control fades in a blurred conic-gradient glow, fades out its pale fills and swaps its label image to @img_ai_tab_highlight.png, and the service shortcut moves its icon's backdrop tile in the sprite sheet (-156px -144px → -104px -144px).
• Focus: walked with real Tab presses on 2026-09-29. Four controls show only the browser's default ring and the query input shows none. AI search shows the ring plus its authored hover effect (glow in, fills out, label image swap), the only authored focus style found.
• Selected: captured on portal/search/corporate tabs.
• Expanded: captured for the portal listbox/menu.
• Checked / unchecked: captured for portal display controls and a search switch.
• Empty, loading, error, success, disabled: no safe representative live evidence was captured in this run.

Do not fill absent states with generic NAVER-looking values.

15. Motion & Easing

The collector captured state changes but did not establish a canonical duration or easing scale. Use motion only to clarify menu expansion, tab selection, and focus transitions; respect reduced-motion preferences. All six controls probed on 2026-09-29 computed transition: all 0s, so their state changes are instant.

Official product motion tokens were not found in the inspected public sources.

---

Verified: 2026-07-11 (omd:migrate) · states re-measured 2026-09-29 (live portal-home probe) Tier 1 sources: https://www.naver.com/ · https://search.naver.com/search.naver?query=%EB%94%94%EC%9E%90%EC%9D%B8 · https://www.navercorp.com/company/brandGuide · https://www.navercorp.com/company/about Tier 2 sources: https://getdesign.md/naver (no importable record in available path) · https://styles.refero.design/?q=naver (no importable result in available path) Tier 2 status: unavailable; no Tier 2 value promoted Conflicts unresolved: none Migration depth: Apple-tier evidence graph; visual smoke pending