Design System Inspiration of Naver Webtoon (네이버웹툰)

1. Visual Theme & Atmosphere

Naver Webtoon is the platform that invented the format — the vertical-scroll, mobile-native comic ("webtoon") that turned Korean digital comics into a global medium. Its interface exists to do one thing supremely well: get out of the way so a thumbnail grid of cover art can pull you into the next binge. The browse experience is bright and clean — predominantly white surfaces with crisp black-and-gray text — punctuated by the unmistakable Webtoon green #00DC64 ("WT GREEN"), a fresh, almost electric grass-green that marks brand moments, the logo, primary CTAs, and "UP"/new-episode signals. This green is the brand's whole personality: young, energetic, optimistic — the color of "something new just dropped."

What defines Webtoon visually is the grid is the design. Cover thumbnails — vivid, illustrated, every genre and art style imaginable — are the source of color and energy; the chrome around them is deliberately calm so the art screams and the UI whispers. Ranking numbers, genre chips, day-of-week tabs (요일별), and "UP" badges form a tight, scannable information layer over a white canvas. When you actually read, the viewer flips to a focused, distraction-free vertical scroll where the strip itself fills the screen. Two modes, one identity: a buzzy discovery grid and a quiet reading canvas.

Typography is Korean-system-led — Naver's own typefaces and the standard Korean web/app stack (Pretendard, Apple SD Gothic Neo, Malgun Gothic, with Nanum lineage), rendered black-on-white with green accents. Type is friendly and rounded in feel, sentence-case, optimized for fast scanning of dozens of titles and for long-form reading comfort in the viewer.

Key Characteristics:

• Webtoon green #00DC64 ("WT GREEN") as the brand + primary interactive accent — logo, CTAs, "UP" / new badges
• Bright white canvas with black/gray text — chrome whispers so cover art screams
• Thumbnail-grid-first discovery; focused vertical-scroll reading viewer
• Naver / Pretendard-led Korean type stack, black-on-white with green accents
• Day-of-week (요일별) tabs and ranking numbers as a core scannable info layer
• Young, energetic, optimistic tone — "something new just dropped"
• "UP" badge culture: the green new-episode signal is a brand ritual

2. Color Palette & Roles

Webtoon green #00DC64 is the documented "WT GREEN" brand color (RGB 0,220,100). comic.naver.com is bot-protected (WebFetch blocked), so product grays/blacks below follow Naver web conventions and the documented brand palette; treat product hexes as conventional, not from a live-inspected token doc.

Brand / Interactive

• WT Green (#00DC64): The signature color (RGB 0, 220, 100). Logo, primary CTA, "UP"/new-episode badge, active selection, brand moments. The single energetic accent.
• WT Green Deep (#00C758): Pressed / hover variant of the green.
• WT Green Light (rgba(0,220,100,0.10)): Subtle green-tinted highlight backgrounds.

Surfaces

• Pure White (#FFFFFF): Browse canvas, cards, headers — the bright base behind the grid.
• Surface Gray (#F7F7F7): Section backgrounds, inactive chip fills, skeleton blocks.
• Surface Gray Strong (#EEEEEE): Secondary fills, dividers' surface variant.
• Viewer Black (#000000): The reading-viewer background option (dark reading mode) so the strip art is the only light.

Text

• Text Primary (#1A1A1A): Titles, author names, primary labels.
• Text Strong (#333333): Strong body labels, episode titles.
• Text Body (#666666): Body text, synopsis, metadata.
• Text Secondary (#999999): Captions, view/like counts, timestamps.
• Text Tertiary (#BBBBBB): Placeholder, disabled labels.

Borders

• Divider (#EEEEEE): Hairline row/grid separators.
• Border Strong (#DDDDDD): Active input outlines, emphasized edges.

Semantic

• New / UP (#00DC64): The green doubles as the "new episode / UP" semantic.
• Like / Heart (#FF4D6D): Favorite/like heart — a warm pink-red, distinct from brand green.
• Rating / Star (#FFB300): Star ratings (별점) accent.
• Error (#F5444C): Form errors, failures.

3. Typography Rules

Font Family

• Primary: Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", -apple-system, BlinkMacSystemFont, "Noto Sans KR", "Nanum Gothic", sans-serif
• Brand surfaces: Naver's house typefaces appear in marketing/logo lockups
• Numerals: tabular-friendly for ranking numbers and view/like counts

Hierarchy

Conventions

• 700 for headings + ranks, 600 for titles/CTAs, 400 for body — a clean three-weight rhythm.
• Numbers are content — ranking positions, episode numbers, view counts, ratings are first-class typography, tabular-aligned.
• Looser line-height for reading — synopsis and viewer captions use ~1.6 LH for long-form comfort.
• Sentence-case, no all-caps — Korean and Latin both; the grid stays friendly, not shouty.

4. Component Stylings

comic.naver.com blocks automated fetch; geometry below follows Naver web conventions + the documented WT GREEN brand. Treat as conventional, not live-inspected tokens.

Buttons

Primary (WT Green)

• Background: #00DC64
• Text: #FFFFFF
• Border: none
• Radius: 8px
• Padding: 10px 18px
• Font: 14px / 600 / Pretendard
• Hover: background #00C758
• Disabled: background #EEEEEE, text #BBBBBB
• Use: Primary CTA — 첫화 보기, 구독하기, 정주행. The green call-to-read.

Outline / Secondary

• Background: #FFFFFF
• Text: #333333
• Border: 1px solid #DDDDDD
• Radius: 8px
• Padding: 10px 18px
• Font: 14px / 600 / Pretendard
• Use: Secondary action (관심 등록, 미리보기)

Subscribe / Toggle CTA

• Background (subscribed): rgba(0,220,100,0.10)
• Text (subscribed): #00C758
• Border: none
• Radius: 8px
• Padding: 10px 18px
• Font: 14px / 600 / Pretendard
• Use: 관심웹툰 subscribe toggle — fills green-tinted once active

Inputs

Search Field

• Background: #F7F7F7
• Text: #333333
• Border: none (filled)
• Radius: 8px
• Padding: 12px 14px
• Font: 14px / 400 / Pretendard
• Placeholder: #BBBBBB
• Focus: 1px border #00DC64
• Use: Title/author search — green focus ring

Cards

Webtoon Thumbnail Card

• Background: transparent (cover art fills)
• Border: none
• Radius: 8px (cover), 50% for character/round thumbs
• Aspect: vertical poster (commonly ~3:4) or square in some rows
• Hover: subtle scale ~1.03 + title emphasis
• Use: The atomic unit of every browse row/grid — the art is the card, chrome stays off it

Info Card (title detail header)

• Background: #FFFFFF
• Border: none
• Radius: 12px
• Padding: 20px
• Shadow: 0px 2px 8px rgba(0,0,0,0.06)
• Use: Title-detail header — cover, title, author, genre, rating, 구독 CTA

Badges / Chips

UP / New Badge

• Background: #00DC64
• Text: #FFFFFF
• Border: none
• Radius: 4px
• Padding: 1px 5px
• Font: 11px / 700 / Pretendard
• Use: The signature "UP" / new-episode flag on thumbnails — the green ritual

Genre / Day Chip

• Background: #F7F7F7
• Text: #666666
• Border: none
• Radius: 999px
• Padding: 6px 14px
• Font: 13px / 500 / Pretendard
• Active: #00DC64 bg + #FFFFFF text
• Use: 요일별 day tabs, genre filters

Rating Badge

• Background: transparent
• Text: #FFB300
• Font: 12px / 700 / Pretendard
• Use: 별점 average beside a star

Tabs / Nav

Day-of-Week Tab (요일별)

• Active text: #00DC64
• Inactive text: #999999
• Indicator: 2px #00DC64 underline (active)
• Font: 15px / 600 / Pretendard
• Use: 월/화/수/목/금/토/일 + 완결 switcher — the core browse organizer

Bottom Tab (Active)

• Active icon/text: #1A1A1A (with green accent on the primary tab)
• Inactive: #BBBBBB
• Border: 1px solid #EEEEEE (top only)
• Font: 11px / 500 / Pretendard
• Use: 웹툰 / 베스트도전 / MY / etc.

Toasts

Snackbar

• Background: #1A1A1A
• Text: #FFFFFF
• Border: none
• Radius: 8px
• Padding: 12px 16px
• Shadow: 0px 4px 12px rgba(0,0,0,0.16)
• Font: 14px / 500 / Pretendard
• Use: "관심웹툰에 추가했어요" transient feedback, 3s auto-dismiss

---

Verified: 2026-05-27 Tier 1 sources: comic.naver.com (WebFetch blocked — bot-protected; visual atmosphere from prior knowledge + brand search). WT GREEN #00DC64 (RGB 0,220,100) confirmed via brand search (logos-world / 1000logos brand-palette records + WEBTOON Canvas logo guidelines lineage). Product grays/blacks/component geometry follow Naver web conventions — not live-inspected tokens. Tier 2 sources: getdesign.md/naverwebtoon — not checked. styles.refero.design — not checked. Conflicts unresolved: Live computed-style inspection unavailable (comic.naver.com blocks automated fetch). All §4 component values flagged conventional; WT GREEN #00DC64 is the one verified token. A future UPDATE pass with browser inspection should re-confirm component geometry.

5. Layout Principles

Spacing System

• Base unit: 8px
• Common values: 4, 8, 12, 16, 20, 24, 32
• Grid gutter: ~12px between thumbnails; ~24px between content rows

Grid & Container

• Browse: responsive thumbnail grid — 3–4 cols mobile, 6+ desktop, within a max content width (~1200px)
• Day-tabs row sticky near the top organizing the whole browse
• Viewer: single-column full-width vertical scroll, the strip fills the reading width

Whitespace Philosophy

• The grid is the design. Chrome (tabs, ranks, chips) is calm and compact so cover art carries the color and energy.
• Two densities. Discovery is tight and scannable (many titles per screen); the reading viewer is spacious and focused (one strip, nothing else).
• Scannable info layer. Ranking numbers, UP badges, and day tabs form a consistent, low-chrome overlay on the art.

Border Radius Scale

• Compact (4px): UP/new badges, inline flags
• Standard (8px): buttons, inputs, thumbnail cards
• Comfortable (12px): info cards, detail headers
• Pill (999px): genre/day chips
• Circle (50%): character/round thumbnails, avatars

6. Depth & Elevation

Shadow philosophy. On the bright white grid, shadows are minimal — thumbnails are separated by the gutter, not by drop shadows, so the art reads edge-to-edge. Elevation appears only where chrome floats (sticky tabs, dropdowns, toasts). Soft, neutral, single-layer. In the dark reading viewer, depth (if any) comes from surface lightness, not shadow.

7. Do's and Don'ts

Do

• Use WT Green #00DC64 for the logo, primary CTA, UP badge, and active selection
• Keep the browse canvas white and let cover art supply the color
• Render ranking numbers, episode numbers, and counts as first-class tabular typography
• Use the UP badge (green, 4px radius) consistently as the new-episode signal
• Give the reading viewer maximum focus — strip fills the screen, chrome hides

Don't

• Don't put drop shadows or borders on thumbnail cards — the gutter separates them
• Don't introduce a second saturated accent competing with the green
• Don't crowd the reading viewer with chrome — reading is a focused mode
• Don't use all-caps or marketing-shouty type on the grid
• Don't tint the browse canvas — white keeps the cover art vivid

8. Responsive Behavior

Breakpoints

Touch & Media

• Thumbnail is the primary touch target; min ~44px controls
• Day-of-week tabs swipeable on mobile
• Reading viewer: vertical scroll, tap-zones for UI toggle, full-bleed strip

Image Behavior

• Cover thumbnails: object-fit: cover, lazy-loaded, 8px radius
• Reading strip: full reading-width, native aspect, sequential vertical
• Character/round thumbs: 50% circle

9. Agent Prompt Guide

Quick Color Reference

• Primary CTA / brand / UP: WT Green #00DC64 (hover #00C758)
• Canvas: white #FFFFFF; surface #F7F7F7; viewer black #000000
• Text: primary #1A1A1A; body #666666; secondary #999999
• Divider #EEEEEE; like/heart #FF4D6D; rating #FFB300

Example Component Prompts

• "Build a Webtoon primary CTA: bg #00DC64, white 14px/600 text, 8px radius, 10px 18px padding. Hover bg #00C758. Disabled bg #EEEEEE text #BBBBBB."
• "Create a Webtoon browse grid: white #FFFFFF bg, responsive grid of vertical cover cards (8px radius, no border, ~12px gutter). Each card: cover image + a green UP badge (#00DC64, 4px radius, 11px/700 white, '''UP''') top-left when new + title (15px/600 #1A1A1A) + author (13px/400 #999999) below."
• "Design a day-of-week tab row: 월~일 + 완결, active text #00DC64 with a 2px #00DC64 underline, inactive #999999, 15px/600, swipeable."
• "Create a title-detail header card: white bg, 12px radius, 0px 2px 8px rgba(0,0,0,0.06) shadow, 20px padding. Cover thumb left, title 20px/700, author 13px/400 #999999, rating #FFB300 star + number, green 구독 CTA."

Iteration Guide

1. WT Green #00DC64 = logo + primary CTA + UP badge + active state
2. White canvas; cover art carries the color and energy
3. Pretendard / Korean system stack, black-on-white with green accents
4. Numbers (rank/episode/count) are tabular first-class typography
5. Radius: 4px UP badge, 8px buttons/cards, 12px info cards, 999px chips, 50% round thumbs
6. Two densities: tight discovery grid, focused reading viewer

---

10. Voice & Tone

Naver Webtoon speaks like an excited friend who can't wait to show you the next great series — warm, upbeat, second-person, and a little playful, but never spammy. The default register is soft-polite 해요체 (새 회차가 올라왔어요, 관심웹툰에 추가했어요), friendly and young. Korean is the unquestioned primary voice; English appears in title romanizations and the "WEBTOON" wordmark. The energy maps to the green: copy is about what's new, what's hot, what you'll love next — the buzz of discovery.

Forbidden phrases. 오류가 발생했습니다 (generic error), exclamation-as-pressure stacking, marketing superlatives piled on chrome, English-first strings on Korean surfaces, emoji on system-generated toasts (emoji belongs to user comments, not UI chrome).

Voice samples.

• 첫화 보기 — common read-CTA pattern.
• 새 회차가 올라왔어요 — illustrative new-episode nudge.
• 관심웹툰에 추가했어요 — illustrative subscribe-success toast.
• 요즘 뜨는 작품 — illustrative trending-row header.

11. Brand Narrative

Naver Webtoon (네이버웹툰) launched in 2004 inside the Naver portal and effectively created the modern webtoon — the vertical-scroll, mobile-native digital comic read top-to-bottom rather than page-by-page. By building a free, ad/IP-supported platform open to amateur creators (베스트도전 → 도전만화 → 정식 연재), it turned reading comics into a daily habit organized around the 요일별 (day-of-week) release schedule, and turned drawing them into a viable career. The format became a global export; the company (now WEBTOON / Webtoon Entertainment) took the model worldwide and to a US listing.

The design follows the mission directly: a bright, friendly, low-friction grid that makes discovering and following series effortless, and a focused viewer that makes reading them comfortable. The WT GREEN #00DC64 is the emotional core — fresh, young, optimistic — the color of the "UP" badge that says a new episode of the series you love just dropped. That little green flag is a genuine brand ritual: a daily dopamine signal that keeps a generation coming back.

What Naver Webtoon refuses: the dense, text-heavy seriousness of legacy comic portals, and the dark, cinematic moodiness of video-OTT browse (Webtoon's discovery canvas is bright and buzzy, not a dim lobby). It's a friendly newsstand where the covers do the selling and the green means "new."

12. Principles

1. The grid is the design. Cover art carries the color and energy; chrome whispers. UI implication: no borders/shadows on thumbnails; calm, compact tabs/ranks/chips over a white canvas.
2. Green means new. #00DC64 is the brand and the UP/new-episode signal. UI implication: reserve green for the logo, primary CTA, UP badge, and active state — never decoration.
3. Two modes, one identity. Buzzy discovery and quiet reading are distinct densities. UI implication: the browse grid is tight and scannable; the reading viewer hides chrome and gives the strip the screen.
4. Numbers are content. Ranks, episode numbers, and counts are first-class. UI implication: render them as tabular, high-emphasis typography, not afterthoughts.
5. Friendly, never shouty. The brand is young and warm, not aggressive marketing. UI implication: sentence-case, soft 해요체, no all-caps or exclamation pressure on the grid.
6. Daily ritual. The 요일별 schedule and the UP badge make Webtoon a habit. UI implication: surface "what's new for you today" prominently; the green flag is the reward loop.

13. Personas

Personas are fictional archetypes informed by publicly described Korean webtoon-reader segments, not individual people.

다은 (Da-eun), 19, Seoul. University freshman, reads 8 series across the week, each on its release day. Lives for the green UP badge — checks the app the moment a new episode is due. Reads on the subway in the focused vertical viewer; comments and shares with friends.

준호 (Jun-ho), 27, Daejeon. Office worker and casual reader. Binges completed (완결) series on weekends, spends 쿠키 to unlock ahead. Discovers via the trending and recommendation rows, judges by cover art and rating number first.

소민 (So-min), 23, Busan. Aspiring creator. Posts to 베스트도전 hoping to go pro, reads obsessively to study what works. Treats the platform as both library and career ladder — the open creator pipeline is why she's here.

14. States

15. Motion & Easing

Naver Webtoon's motion is light and energetic in discovery, calm and uninterrupted in reading — never bouncy enough to feel like a toy, never so still it feels dull.

Durations:

Easings:

Signature motions.

1. Thumbnail hover. Cover scales 1.0 → 1.03 over motion-standard / ease-standard with a subtle title emphasis. No shadow pulse — the scale is the lift.
2. UP badge pop. When a new episode lands, the green UP badge appears with a brief 1.1 scale-pop (ease-pop) — the one licensed bit of bounce, because "new episode" deserves a tiny celebration.
3. Reading scroll. The viewer is pure native vertical scroll — no parallax, no transition gimmicks; chrome fades out on scroll-down, back in on tap. Reading must never be interrupted by motion.
4. Reduce motion. Under prefers-reduced-motion: reduce, hover scales and the UP pop collapse to instant opacity changes; shimmer skeletons become static #F7F7F7. No exceptions.