Design System Inspiration of KakaoPage

1. Visual Theme & Atmosphere

카카오페이지 (KakaoPage) is Kakao Entertainment's flagship webtoon and web-novel platform, and its interface is built around one governing tension: immersive visual content deserves a near-invisible UI frame. The canvas is pure white (#ffffff) with pure black (#000000) text — no off-whites, no warm navies, no grey tints on the base layer. Color is used surgically: a single vivid brand yellow (#ffd618) for the primary call-to-action, a confident red (#ff3042) for best-rank badges, and nothing else.

This constraint-first palette makes the content thumbnails — illustrated cover art, dramatic character spreads — the undisputed heroes of every screen. The platform hosts hundreds of webtoon and web-novel IPs, each with its own rich visual identity, and the system never competes with them. The navigation chrome is monochrome; the active selection state uses a black pill rather than a colored accent; the cards are light grey (#eeeeee) placeholders that vanish once the cover image loads.

The result is a look that reads as dark-adjacent without being dark: all surfaces are white, but the dominant typographic color is black-on-white, and the interactive vocabulary (black pills, black/yellow CTAs) anchors the experience in a high-contrast editorial register. The yellow #ffd618 — close to Kakao's brand golden-yellow across its ecosystem — appears exactly once per content detail page, on the primary "Start Reading" button, making it unmistakable.

Key Characteristics:

• Pure-black/pure-white palette — content cover art is the only color
• Brand yellow (#ffd618) reserved exclusively for the primary "Start Reading" CTA
• Active selection state uses a black pill with white text, not a colored accent
• Pretendard Variable for all text — the Korean web standard, optimized for hangul at small sizes
• Light grey (#eeeeee) card surface and rgba(153,153,153,0.15) skeleton placeholders
• High-contrast editorial density: small type (11–14px), generous imagery
• #ff3042 hot-red for BEST rank badges — the only accent besides yellow

2. Color Palette & Roles

Primary Action

• KakaoPage Yellow (#ffd618): The single primary action color. Used for the "첫 화 보기" (Start Reading) and "이어보기" (Continue) CTA buttons and for the coin-recharge label badge. Unmistakably derived from Kakao's brand golden-yellow, adapted for content-platform assertiveness.

Ink & Canvas

• Ink Black (#000000): Primary text color for all headings, body copy, nav labels, and interactive elements. Also used as the active pill background (reversing to white text). A true zero — no near-black offset.
• Dark Label (#222222): Button label text on yellow CTA. Near-black with just enough warmth to avoid pure-black on yellow harshness.
• Canvas White (#ffffff): Page background and navigation header. The absolute base layer.

Surface & Skeleton

• Surface Grey (#eeeeee): Content card background; the resting state of a thumbnail card before the image loads. Also used as section-tab bar background, episode list row backgrounds.
• Skeleton Ghost (rgba(153,153,153,0.15)): Lazy-load skeleton placeholder at exactly the cover thumbnail's aspect ratio. Flat, no shimmer — consistent with the no-decoration ethos.

Text Hierarchy

• Muted Grey (#666666): Secondary text — author names, date metadata at 11px, secondary captions.
• Tertiary Grey (#999999): Lowest-emphasis labels, placeholder behavior.

Status

• Hot Red (#ff3042): "BEST" rank badge on top-performing episodes. High-contrast, attention-forcing — the only warm saturated accent alongside yellow.
• On-error White (#ffffff): Text on the red badge.

3. Typography Rules

Font Family

• Primary: Pretendard Variable with fallback to Pretendard — the Korean web standard. Chosen for its multi-weight variable axis and exceptional hangul legibility at display and small sizes alike.
• Fallbacks: -apple-system, system-ui, Segoe UI, Noto Sans KR, Malgun Gothic

Hierarchy

Principles

• Content-first sizing: all chrome text runs at 11–16px; large type belongs to the content artwork, not the interface.
• Weight as the only signal: active states use bold (700) on the same text — no color change, no underline. The system trusts weight contrast over hue.
• Pretendard for everything: a single typeface across all weights and roles. No display/body split.
• Line-height discipline: tight at display (1.24 for titles), standard at body (1.40–1.43), compact for badge/caption (1.33).

4. Component Stylings

Buttons

Primary CTA (첫 화 보기 / 이어보기)

• Background: #ffd618
• Text: #222222
• Radius: 8px
• Height: 56px
• Font: 12px / 700 / Pretendard
• Use: "Start Reading" / "Continue Reading" — the platform's singular primary action per content detail page

Back/Error CTA

• Background: #000000
• Text: #ffffff
• Radius: 100px
• Height: 54px
• Padding: 0px 20px
• Font: 16px / 700 / Pretendard
• Use: Error state "홈으로 가기" (Go Home) full-pill button

Tabs

Active Section Tab (Pill)

• Background: #000000
• Text: #ffffff
• Radius: 16px
• Height: 32px
• Padding: 7px 14px
• Font: 13px / 700 / Pretendard
• Use: Active content sub-category tab (홈/정보/소식 on detail page)

Active Main Nav Tab (Pill)

• Background: #000000
• Text: #ffffff
• Radius: 100px
• Height: 36px
• Padding: 0px 14px
• Font: 16px / 400 / Pretendard
• Use: Active main recommendation tab (지금핫한/실시간 랭킹 etc.)

Cards & Containers

Content Card

• Background: #eeeeee
• Radius: 12px
• Use: Base layer for content cover art; grey shows before the image loads; cover fills the card once loaded

Skeleton Card

• Background: rgba(153,153,153,0.15)
• Radius: 8px
• Use: Lazy-load placeholder rendered at thumbnail dimensions during content fetch; flat, no pulse shimmer

Badges

BEST Rank Badge

• Background: #ff3042
• Text: #ffffff
• Radius: 5px
• Padding: 0px 3px
• Font: 11px / 700 / Pretendard
• Use: "BEST" overlay on top-ranked episode rows in comment/reply sections

Coin Recharge Badge

• Background: #ffd618
• Text: #000000
• Radius: 2px
• Padding: 3px 8px
• Font: 16px / 400 / Pretendard
• Use: "충전" (coin recharge) shortcut label in the nav header

Free Episode Badge

• Background: #000000
• Text: #ffffff
• Radius: 2px
• Padding: 0px 4px
• Font: 10px / 700 / Pretendard
• Use: "무료" (free) count overlay on rank indicators

Inputs

Search Bar

• Background: transparent
• Text: #000000
• Border: none (borderless, integrated into nav header)
• Font: 13px / Pretendard
• Placeholder: "제목, 작가를 입력하세요." (#999999)
• Height: 18px (inline; nav-embedded)
• Use: Title / author search

---

Verified: 2026-06-22 (omd:add-reference CREATE — Tier 1 live inspect) Tier 1 sources: https://page.kakao.com/, https://page.kakao.com/content/57668776 Tier 2 sources: getdesign.md/kakaopage — not found; styles.refero.design/?q=kakaopage — not found Conflicts unresolved: none

5. Layout Principles

Spacing System

• Base unit: ~4px
• Scale: 3px, 7px, 14px, 16px, 20px, 32px, 48px
• Navigation header: 96px total height (top-nav 40px + sub-category tabs 56px)
• Content card thumbnail: 152×274px aspect ratio (confirmed from skeleton dimensions, portrait orientation)

Grid & Container

• Max content width: 1200px centered
• Content catalog: fluid card grid — multiple columns, portrait-orientation thumbnails
• Category sub-tabs: horizontal scroll strip at 56px height, full-width
• Episode list: full-width stacked rows at 84px height with title/date/badge

Whitespace Philosophy

• Content fills, chrome recedes: minimal padding around content cards; cover art occupies as much visual real estate as possible.
• List density over breathing room: episode rows run at 84px with compressed typography; this is a catalog-browsing surface that values information density.
• Zero decoration: no gradients, no textures, no shadows between elements — only solid fills and transparent backgrounds.

Border Radius Scale

• Tiny (2px): coin/free badges — near-square for a label feel
• Small (5px): BEST rank badges
• Medium (8px): primary CTA button, skeleton placeholders
• Large (12px): content cards, recommendation carousels
• Pill (16px): section sub-tab pills
• Full (100px): main navigation active tab pills, error CTA

6. Depth & Elevation

Shadow Philosophy: KakaoPage uses no box shadows anywhere in the inspected surfaces. The system is rigorously flat — separation is achieved by the content artwork itself (which carries its own visual weight), by the #eeeeee surface color on cards, and by structural containment (tabs, headers). This reflects both a performance-conscious (mobile-heavy audience) and content-first design philosophy: shadows compete with the content's own visual complexity.

7. Do's and Don'ts

Do

• Use #ffd618 yellow exclusively for the primary "Start Reading" CTA — it should appear once per content detail page
• Use the black pill with white text for all active selection states — tabs, active categories
• Keep all UI text in Pretendard; lean on weight (400/700) to create hierarchy
• Use pure black #000000 for all primary text — no navy, no near-black variants
• Use #eeeeee as the neutral card surface — it harmonizes with any cover art color
• Reserve #ff3042 for rank/status signals only (BEST, etc.)
• Design for portrait-oriented thumbnail grids — content is always taller than wide

Don't

• Introduce additional accent colors — yellow and red are the complete palette of saturated hues
• Use shadows for elevation — this system is entirely flat
• Place colored overlays on cover art — the artwork owns its space
• Use any sans-serif typeface other than Pretendard; it's the brand's Korean system font
• Use large type sizes for UI labels — chrome text stays at 11–16px; display sizes belong to content titles
• Use the black pill shape for non-interactive decorative elements — it signals "currently selected/active"
• Deviate from #ffd618 toward any other yellow — this specific value ties back to Kakao's brand identity

8. Responsive Behavior

Breakpoints

Touch Targets

• Primary CTA: 56px height — generous tap target
• Section tabs: 32px pill — adequate for touch
• Nav pills: 36px — comfortable
• Episode rows: 84px — easy to tap the correct row

Collapsing Strategy

• Content grid compresses from multi-column to 2-column to single-column on mobile
• Category sub-tabs scroll horizontally (scrollable overflow) on narrow viewports
• Navigation header condenses but maintains the yellow coin badge and search icon

9. Agent Prompt Guide

Quick Color Reference

• Primary CTA: KakaoPage Yellow (#ffd618)
• Primary text / active pill: Ink Black (#000000)
• CTA label text: Dark Label (#222222)
• Page background: Canvas White (#ffffff)
• Card surface: Surface Grey (#eeeeee)
• Secondary text: Muted Grey (#666666)
• Rank badge: Hot Red (#ff3042)

Example Component Prompts

• "Create a content detail page header. White background. Title in 21px Pretendard weight 700 #000000. Below: two CTAs side by side — primary 'Start Reading' at #ffd618 / #222222 / 8px radius / 56px height. Secondary 'Subscribe' as black outline pill."
• "Design an episode list row: #eeeeee background, 84px height. Title 14px Pretendard 400 #000000. Date 11px 400 #666666. BEST badge #ff3042 / white / 5px radius / 11px bold, top-right of thumbnail."
• "Build category nav tabs: horizontal scrolling strip. Inactive: transparent bg, #000000 text, 16px Pretendard 400. Active: black pill #000000 / white text / 100px radius / 36px height."
• "Create skeleton loading state: series of portrait cards at 152×274px, bg rgba(153,153,153,0.15), radius 8px. Flat — no pulse animation."

Iteration Guide

1. Yellow #ffd618 = one CTA per page — don't repeat
2. All hierarchy via weight 400/700 in Pretendard, not color or size variation
3. Active selection = black pill; do not use colored indicators
4. Cards = #eeeeee base; the art takes over once loaded
5. No shadows anywhere — separate by containment and flat fills
6. Red #ff3042 only for rank/urgency signals
7. Content art owns the color; UI defers to black/white/yellow

---

10. Voice & Tone

KakaoPage's voice is immersive, fan-fluent, and quietly epic — a platform that takes its IP catalog as seriously as the readers who love it. The interface copy is sparse to the point of near-invisibility: navigation labels are single-word nouns (추천, 웹툰, 웹소설, 책), CTAs are concrete action verbs (첫 화 보기, 이어보기), and status labels are abbreviations (무료, BEST). The brand never editorializes about the content — it steps aside and lets "지금핫한" (Hot Right Now) speak for itself.

Voice samples (verified live 2026-06-22):

• "기다리면 무료 웹툰" — section header (access model explained in four words). (verified live 2026-06-22)
• "지금핫한" — primary recommendation tab (portmanteau energy, platform-native shorthand). (verified live 2026-06-22)
• "오리지널 독점 웹툰, 웹소설 부터 책 까지 한 곳에서 즐기세요. 인기 콘텐츠가 기다리면 무료!" — meta description (complete brand promise in two sentences). (verified live 2026-06-22)

Forbidden register: genre-describing spoilers in UI chrome, overly promotional adjectives on titles, urgency dark patterns ("마지막 기회!" for paid content), English loanwords where Korean serves better.

11. Brand Narrative

카카오페이지 (KakaoPage) launched in 2013 as Kakao's digital content marketplace for Korea's mobile-first era, initially selling novels and comics in small paid installments. It pioneered the "기다리면 무료" (Wait for Free) model — readers who wait a set interval can access episodes without purchase — which became the structural engine that built one of Korea's largest paid-content audiences. The model proved that patience, not piracy, was the viable alternative to payment: it created massive top-of-funnel reader acquisition while monetizing through impatience.

Over the decade, KakaoPage evolved from a marketplace into Kakao Entertainment's IP pipeline. Platform-native webtoons and web novels — many originating on Kakao's own creator tools — became the source material for K-drama adaptations, animated series, and global distribution through Tapas (English-language) and Piccoma (Japan). The design system reflects this vertical integration: the platform positions itself not as a mere reader app but as the origin point of Korean popular culture.

The 2021 merger between Kakao M and Kakao Page to form Kakao Entertainment consolidated the media-tech stack. Today KakaoPage is the web/desktop face of a content empire that spans webtoon creation, talent management, drama production, and international licensing. The design — clean, content-first, IP-respectful — is engineered to serve hundreds of distinct visual identities without diluting any of them.

12. Principles

1. Content is the design. The platform's visual identity defers entirely to the IP it hosts. UI implication: monochrome chrome (black/white/grey) so that cover art at any color temperature feels at home. Never introduce competing accent colors.
2. Wait or pay — the system is transparent. The 기다리면 무료 model means readers always know when free access opens. UI implication: "무료" labels are permanent, prominent, and never buried; the time cost is disclosed at the episode row.
3. One action per surface. Each content detail page has a single yellow CTA — not a CTA hierarchy, not three equal buttons. UI implication: one #ffd618 button per screen; secondary actions use neutral/ghost styling.
4. Rank signals create urgency, not noise. BEST badges appear only where they reflect genuine ranking data. UI implication: hot red #ff3042 appears on the BEST badge alone; it's never reused for promotions or marketing.
5. Mobile density is a feature. The target audience reads on smartphones; compressed episode rows and small badge text are intentional. UI implication: 11–14px episode metadata; portrait-oriented thumbnails optimized for vertical scroll rather than widescreen browsing.

13. Personas

Personas below are fictional archetypes informed by publicly observable KakaoPage user segments (Korean webtoon and web-novel readers), not individual people.

이하나, 22, 서울. A university student who discovered KakaoPage through a webtoon-to-drama adaptation. She uses 기다리면 무료 to catch up on ongoing series and pays for impatient access on her three to five top titles. She values the BEST ranking to discover which episodes other readers found significant.

박민준, 31, 부산. A commuter who reads web novels on the subway. He has 12 series in his 보관함 (library), half of which are waiting for free episodes. He appreciates the episode row format — quick scan, tap, read — and finds the sparse UI lets him focus on the story.

김서연, 38, 대전. A working parent who started reading KakaoPage after her daughter recommended a romance webtoon. She buys coins for titles she loves, uses the recommend tab to find new content, and would not use the platform if it felt visually overwhelming. The clean white interface signals trustworthiness.

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: The platform's primary motion vocabulary is minimal and structural — transitions mark navigation changes, not content moments. Cover art never animates into view (the skeleton-to-image swap is instant, not faded); adding a fade would create visual noise across dozens of simultaneously loading thumbnails. The active tab pill snaps or slides, not bounces — a reading-focused audience expects the UI to get out of the way. Under prefers-reduced-motion: reduce, all transitions collapse to instant; the reading flow is unaffected.