Lezhin Comics design system

Lezhin Comics

Korea's first premium webtoon platform — bold, content-first, and unapologetically direct.

Overview

Visual Theme & Atmosphere

Lezhin Comics presents a dark, immersive canvas that keeps the spotlight firmly on cover art and episode thumbnails. The interface uses a deep near-black base (#111115) punctuated by a single vivid crimson (#eb0014) that signals every interactive action — from primary buttons to the switch-selected state and the badge on adult content. Grey neutrals (#e9e9ec border-muted through #09090b ink-black) form a tight tonal ladder, producing clean hierarchy without decorative flourish. Content grids are tight and image-led; typography is set in Pretendard for sharp legibility in Korean and Latin. The overall atmosphere is premium but unadorned — a platform confident that its 8,000+ titles speak louder than chrome.

Primary tasks

• Check an episode price and your coin balance before buying
• Filter by genre chip and bookmark titles for later
• Read three episodes of a series back to back
• Follow an artist and get notified of every update
• See what kind of content a title is before opening it

Brand Narrative

Lezhin Entertainment was founded in April 2012 by Han Hee-sung (the blogger known as "lezhin") and developer Kwon Jung-hyuk, launching its Android app on June 7, 2013. The company was acquired by Seoul-listed KidariStudio in December 2020. The platform was built on a simple conviction: great comics deserve frictionless commerce. By introducing a coin-based micro-payment system at a time when most Korean webtoon platforms relied on ad revenue, Lezhin created South Korea's first premium webtoon marketplace — positioning itself as the platform for creators who wanted to earn and readers who wanted more.

The company's governing mission is that "stories can make the world a better place." Lezhin Entertainment operates as a global content company, running the Lezhin Comics platform across Korea, the United States, and Japan. Its catalogue spans over 8,000 titles, and beyond reading, Lezhin Studio adapts webtoon IPs into films, dramas, and games while the Lezhin Shop brings physical merchandise to fans who want to hold their favourite stories in their hands.

The brand's tagline — "솔직한 재미 대폭발" (honest fun explosion) — encapsulates the operating philosophy: candid about content, direct about pricing, and unapologetically focused on reader satisfaction. Lezhin's four stated values — duty and self-reliance, mutual respect, customer satisfaction, and innovation — underpin both its creator relationships and its product decisions, from daily episode release schedules to the coin economy.

Principles

1. Reader first, always. Every service decision begins with the question of how readers discover and enjoy content. UI implication: Thumbnail art is the dominant visual element; interface chrome is minimal so it never competes with the cover image.

2. Honest commerce. Lezhin pioneered transparent paid webtoons. The pricing model is explicit — coins, costs, and episode counts are surfaced without dark patterns. UI implication: Coin balances and episode prices are always visible in context before purchase; no hidden upsells.

3. Candid about content. The platform serves adult audiences without euphemism. UI implication: Genre and content-type badges (including adult tags) are shown directly on thumbnail cards rather than hidden behind additional taps.

4. Data and intuition in balance. The founding team values "2% crazy" creative instinct alongside clear analytical thinking. UI implication: The platform ships experimental features (AI search, Snack short-drama) as clearly-labelled distinct experiences rather than silently folding them into the main flow.

5. Global through localisation. Lezhin operates dedicated services for KR, US, and JP markets with locale-specific content curation rather than a one-size-fits-all approach. UI implication: Typography stacks, locale date formats, and content catalogues adapt per region rather than defaulting to a single language baseline.

Personas

Illustrative — for design scenario use only:

The Weekend Binge Reader — A Korean professional in their late 20s who subscribes to Lezhin Premium. They open the app on Friday night, scan the "New Updates" carousel, and burn through three episodes of their favourite romance series back-to-back. They top up coins proactively rather than per-episode. For them, friction = bad; they want zero loading states and instant next-episode transitions.

Illustrative — for design scenario use only:

The Genre Explorer — A 32-year-old who discovered Lezhin through a recommendation for a specific genre (BL, thriller, or isekai). They use the tag-filter chip system heavily and bookmark titles for later. They read on both mobile and desktop and expect the reading experience to be consistent across devices.

Illustrative — for design scenario use only:

The Loyal Creator Fan — A college student who follows a specific artist and gets notified for every update. They comment frequently using the page-stamp system and engage with the creator's social feeds. Price sensitivity is moderate; they will spend coins on a title they love but are cautious about new unfamiliar series.

Illustrative — for design scenario use only:

The International Reader — An English-speaking reader in the US or Japan accessing Lezhin via lezhinus.com or the JP equivalent. They tend toward licensed titles with professional translation. They are brand-new to the coin system and need clear onboarding. The UI's Korean-first defaults (label copy, currency display) can create friction if not properly localised.

Colors

• Brand Red: #eb0014 — primary CTA buttons, state-switch-selected, state-form-bg-selected, badge
• Red Hover: #ff5254 — primary button hover state
• Red Focus/Dark: #c40017 — badge background, button focus/active state
• Ink Black: #111115 — inverted background, text-default, icon-default
• Deep Dark: #09090b — dark-strong surface
• Dark Charcoal: #222225 — secondary button background, border-default
• Soft Black: #36363a — text-soft, icon-soft
• Mid Grey: #6f6f77 — text-subtle, icon-subtle
• Muted Grey: #a1a1a9 — text-muted, icon-muted, placeholder
• Border Muted: #e9e9ec — card borders, dividers
• Surface Muted: #f4f4f5 — background muted, disabled button, skeleton base
• White: #ffffff — default background (light), text-inverted

Typography

• Primary typeface: Pretendard Variable → Pretendard → -apple-system → Noto Sans KR → Malgun Gothic → sans-serif
• Scale: 10 / 12 / 13 / 14 / 15 / 16 / 17 / 18 / 20 / 24 / 28 / 32 / 36 / 40 / 56 / 80px (mapped via --size-3xs through --size-10xl)
• Body default: 16px / weight 400 (regular)
• Caption / metadata: 12–13px / weight 400
• Label / UI text: 14px / weight 500 (medium) or 600 (semibold)
• Button labels: 14px (small/medium) or 16px (large) / weight 600
• Section headers: 18–24px / weight 700
• Font weights available: 400 (regular), 500 (medium), 600 (semibold), 700 (bold)
• Line height: 1.5 for body; 1.35–1.4 for compact UI labels; line-height: 100% for buttons
• Letter spacing: −0.28px to −0.36px for tighter display text in Korean

Layout

Lezhin uses a fluid column-grid whose gutter and column count adapt per viewport: 7 columns on desktop (≥ 961px), 4 columns on tablet (640–960px), 3–4 columns on mobile (≤ 639px). Card widths are computed via calc((100% - (col-1) × gap) / col) with 4px or 8px gutters on dense grids and 12–16px gutters on sparser layouts. The horizontal page max-widths are 1036px at 961–1280px breakpoint and 1212px at 1281px+. Horizontal scroll snap is used for compact-carousel sections (snap-scroll list) on mobile. All interactive regions maintain at minimum 36px touch targets.

Responsive Behavior

Lezhin uses three primary breakpoints:

• Mobile max-width: 960px — single-column flow, horizontal-scroll carousels, paddings collapse to 8–16px, card grids shift to 3–4 columns
• Tablet min-width: 640px and max-width: 960px — 4–6 column grids, moderate gutters (12–16px), nav bar adjusts to compact mode
• Desktop min-width: 961px — 7-column grids, 24–32px gutters, full GNB nav, fixed sidebar elements appear

Additional breakpoints handle edge cases: max-width: 639px (small mobile, 3-col grids), max-width: 320px (reduced padding to 8px), min-width: 1281px (max-width: 1212px container). Components observe prefers-color-scheme: dark via 53 scoped media queries, switching semantic tokens to their dark-palette counterparts without changing the component markup.

Elevation & Depth

Elevation is expressed through the shadow token ladder:

• Level 1 – Subtle: rgba(17,17,21,0.06) — hero banner ambient, near-flat cards
• Level 2 – Soft: rgba(17,17,21,0.08) — dropdown menus (lzSelectPaper: 0 2px 12px 0 rgba(17,17,21,.08))
• Level 3 – Medium: rgba(17,17,21,0.25) — drawers, floating elements
• Level 4 – Strong: rgba(17,17,21,0.30) — modals
• Level 5 – Bold: rgba(17,17,21,0.50) — overlay scrim base
• Thumbnail shadow: rgba(17,17,21,0.20) inset on cover art
• Dark overlay (full scrim): rgba(17,17,21,0.85) — background-overlay-bold

Dark mode uses the same numeric scale but on the dark surface (#111115), so card depth reads via subtle border differences (--border-muted: #222225) rather than box-shadow contrast.

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• shadow.subtle: 0 0 0 rgba(17,17,21,0.06)
• shadow.soft: 0 2px 12px 0 rgba(17,17,21,0.08)
• shadow.medium: 0 0 0 rgba(17,17,21,0.25)
• shadow.strong: 0 0 0 rgba(17,17,21,0.30)

Motion & Easing

Duration scale:

• Fast (micro-interactions): 125ms — sort-arrow expand/collapse
• Standard: 200ms — button background/border transitions, tab color, opacity fades (snackbar)
• Deliberate: 250ms — slide-in/slide-out transforms (drawer, sheet transitions), switch track background, skeleton reveal height

Easing:

• ease-in-out — background-color and border transitions on buttons and tabs
• linear — switch thumb position and track color
• ease-in-out — skeleton shimmer sweep (1.8s)

Rules:

• Button hover/focus: 200ms ease-in-out on background-color and border
• Drawer / bottom-sheet: transform 250ms ease-in-out, opacity 250ms ease-in-out — enters from below or from the left
• Snackbar: opacity 200ms fade-in / fade-out; no transform movement
• Skeleton: translateX(-100% → 100%) over 1.8s ease-in-out infinite; never use shorter durations as it feels cheap against dense content grids
• Switch: 250ms linear for track background, 250ms linear for circle position — simultaneous, never staggered
• AI gradient divider (search bar): translateX at 3s ease-in-out infinite — slower to feel ambient, not urgent

Components

Buttons

Primary (lzButtonPrimary / lzBtn--filled_red)

• Background: #eb0014
• Text: #ffffff
• Border: none
• Radius: 4px
• Height: 48px
• Padding: 0 12px
• Font: 14px / 600

Primary Large

• Background: #eb0014
• Text: #ffffff
• Border: none
• Radius: 4px
• Height: 56px
• Padding: 0 16px
• Font: 16px / 600

Secondary (lzButtonSecondary / lzBtn--filled_bw)

• Background: #222225
• Text: #ffffff
• Border: none
• Radius: 4px
• Height: 48px
• Padding: 0 12px
• Font: 14px / 600

Tertiary (lzButtonTertiary / lzBtn--filled_grey)

• Background: #f4f4f5
• Text: #36363a
• Border: none
• Radius: 4px
• Height: 48px
• Padding: 0 12px
• Font: 14px / 600

Outlined (lzBtn--outlined)

• Background: transparent
• Text: #36363a
• Border: 1px solid #a1a1a9
• Radius: 4px
• Height: 40px
• Padding: 0 20px
• Font: 14px / 600

Cards

Comic Thumbnail Card (lzCard)

• Background: #f4f4f5
• Border: 1px solid rgba(17,17,21,0.1)
• Radius: 4px
• Aspect ratio: 2/3 (portrait)

Circle Thumb Card (lzCardCircleThumb)

• Radius: 9999px
• Border: tracked ring at 3px stroke

Chips (lzChip)

Default Chip

• Background: transparent
• Text: #6f6f77
• Border: 1px solid #e9e9ec
• Radius: 999px
• Padding: 0 12px
• Height: 32px

Selected Chip

• Background: rgba(255,82,84,0.15)
• Text: #c40017
• Border: 1px solid transparent
• Radius: 999px

Tabs (lzTab)

Default Tab

• Background: rgba(17,17,21,0.04)
• Text: #111115
• Border: 1px solid rgba(17,17,21,0.04)
• Radius: 4px
• Padding: 0 12px
• Height: 36px

Selected Tab

• Background: rgba(17,17,21,0.95)
• Text: #ffffff
• Radius: 4px

Dropdown / Select (lzSelectPaper)

Dropdown Container

• Background: #ffffff
• Border: 1px solid #f4f4f5
• Radius: 4px
• Padding: 12px 0

---

Verified: 2026-06-03 Tier 1 sources: https://www.lezhin.com (homepage HTML + 5 CSS bundles: 035ea059869bfd89.css, 9161416b11db8c9e.css, 06e1ad77298be69d.css, 0427f27bd4442fbd.css, 895581ecc829564e.css), https://about.lezhin.com/en (corporate brand/about page) Tier 2 sources: getdesign.md/lezhin — NOT LISTED (no data). refero — not checked (KR brand, typically no result). Conflicts unresolved: none

States

• Empty (no content): Shows the lzEmpty component with an illustrated book image (96×140px from ccdn.lezhin.com/files/assets/img/empty-book-lt.png); title in #36363a at 18px / weight 500; subtitle in #6f6f77 at default size / weight 400
• Loading (skeleton): lzSkeleton — background #f4f4f5; shimmer overlay hsla(0,0%,100%,0.6) animated via linear-gradient(120deg, transparent 35%, shimmer 50%, transparent 65%) at 1.8s ease-in-out infinite; dark-mode variant uses #3a3b3d base and hsla(0,0%,100%,0.08) shimmer
• Error (network/500): lzError component centered at max-width 640px; title #111115 at 34px / weight 500 (desktop) or 24px (mobile); error illustration displayed at width: auto; height: 180px; home button uses primary red CTA
• Error (expired/access denied): Same lzError structure; uses specific expired-state illustration (132px wide); body text in #6f6f77 at 14px; action CTA in red primary button
• Success: State-form-bg-selected #eb0014 applied to radio/checkbox fill; switch tracks when selected use #eb0014; snackbar uses dark #2f353e background with #ffffff text and blue-tinted link #2992d6
• Skeleton (card-specific): Comic card background holds #f4f4f5 while image lazy-loads; once loaded, image covers the background fully with object-fit: cover
• Disabled: Primary button background rgba(255,82,84,0.2) with #ffffff text; tertiary button background #fafafa with #dadadd text; pointer-events none applied via attribute [disabled]

Do's and Don'ts

Do

• Use #eb0014 exclusively for the single highest-priority CTA per screen
• Apply Pretendard (or Noto Sans KR fallback) — never substitute decorative display fonts
• Follow the exact button-height ladder: 28px (xs) / 40px (sm) / 48px (md) / 56px (lg)
• Use the pill chip (border-radius: 999px) for filterable genre or tag selectors
• Maintain 4px radius on cards and rectanglular buttons for the characteristic sharp-yet-soft look
• Use the skeleton shimmer (lzSkeleton — 1.8s ease-in-out infinite) during async content loads
• Reserve the AI gradient (#4CECBE → #00BFE2 → #007EE0) only for AI-feature UI accents

Don't

• Don't use red for destructive warnings — Lezhin's red is a brand/action signal, not a danger signal
• Don't mix primary and secondary CTAs at equal visual weight on the same card or row
• Don't apply border-radius larger than 12px on rectangular interactive components (chips and avatars are exempt)
• Don't place light-mode text (#111115) directly on the dark surface (#111115) — toggle to inverted tokens
• Don't hard-code pixel color values — always reference the semantic CSS variable so dark-mode tokens apply correctly
• Don't add decorative illustration or icon embellishments inside buttons

Voice & Tone

Brand voice: Direct, confident, candid

The Lezhin voice is 솔직한 (honest/frank) — it does not hedge or oversell. Copy leans toward short declarative punches rather than elaborate prose. It speaks to adult readers who know what they want and appreciate the platform getting out of the way.

Voice samples (illustrative):

• Illustrative: "솔직한 재미 대폭발 — 당신이 찾던 진짜 웹툰." (Honest fun explosion — the real webtoon you've been looking for.)
• Illustrative: "매일 업데이트. 오늘 뭐 읽을까?" (Updated every day. What are you reading today?)
• Illustrative: "재미있는 만화를, 쉽게 결제해서, 편하게 보게 하자." (Let's make great comics easy to buy and comfortable to read.)

Agent Prompt Guide

When building Lezhin-styled UI:

• Color: Treat #eb0014 as the single brand accent; use it on the primary button and selected-state only. All other UI operates on the grey ladder (#111115 → #e9e9ec → #ffffff).
• Typography: Set the font stack to Pretendard Variable, Pretendard, -apple-system, Noto Sans KR, sans-serif. Use 14px/600 for buttons, 16px/400 for body copy, 12px/400 for metadata.
• Radius: Default to 4px on buttons and cards. Use 999px for pills (chips, avatars). Avoid values above 12px on rectangular elements.
• Spacing: Prefer 4/8/12/16/20/24px spacing increments. Card gutters are 4px (dense) or 8–12px (standard).
• Dark mode: Swap --bg-default to #111115, --text-default to #ffffff, border tokens adjust automatically when referencing CSS variables.
• Animation: Transitions are 0.2s ease-in-out for background-color and borders; 0.25s linear for transforms. Skeleton is 1.8s ease-in-out infinite.
• States: Disabled buttons carry rgba(255,82,84,0.2) background. Focus states use #9e0018 for primary.

Governance

Known Gaps

• Contrast, button-outlined. Text #36363a on #00000000 measures 1.75:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, badge-chip. Text #6f6f77 on #00000000 measures 4.22:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.