WEBTOON

Overview

WEBTOON is a global digital comics platform that democratizes creator opportunity through a vibrant, community-driven ecosystem. The brand serves both aspiring and established comic creators, offering tools, monetization pathways, and audience reach. The design aesthetic is 'Creator-Centric Vitality'—a fusion of energetic optimism and functional clarity that celebrates creative expression. The UI evokes confidence and possibility: users should feel empowered to start their creative journey, supported by a platform that values their work. The brand voice is encouraging yet grounded: conversational, direct, and action-oriented. WEBTOON speaks to creators as peers, not gatekeepers. Example sentence in brand voice: 'WEBTOON's most popular titles began on CANVAS by creators like you—your story could be next.'

Colors

The WEBTOON color system centers on a vibrant, energetic green (#00dc64) as the primary accent—the signature call-to-action color that appears on 'Get started now' buttons, key links, and interactive highlights. This green is chosen for its psychological association with growth, opportunity, and forward momentum, reinforcing the platform's creator-empowerment mission. The secondary accent is a professional blue (#3b6cef), used for secondary CTAs and informational elements like 'Log In' buttons and status indicators. A warm tertiary orange (#f5a623) provides accent support for badges, highlights, and promotional content. The surface palette is clean and neutral: white (#ffffff) as the primary surface, with a carefully calibrated gray stack (surface-container at #e0e0e0, surface-container-hi

Typography

The WEBTOON type system uses Volte as the primary typeface across all scales, chosen for its modern geometric clarity and strong personality that reinforces the brand's forward-thinking, creator-focused identity. The hierarchy is structured across eight levels: Display (60px, 700 weight) for hero headlines and major announcements; Headline-lg (40px, 600 weight) for section titles and prominent calls-to-action; Headline-md (28px, 600 weight) for subsection headers; Title-lg (20px, 600 weight) for card titles and form labels; Body-lg (18px, 400 weight) for descriptive text and long-form content; Body-md (16px, 400 weight) for standard body copy and UI text; Label-md (14px, 600 weight) for button text and UI labels; Label-sm (12px, 500 weight) for badges, captions, and helper text. Letter-spa

Layout

WEBTOON uses a 12-column fluid grid with a maximum container width of 1400px, allowing content to scale responsively from mobile to ultra-wide displays. The grid is anchored by a 24px gutter (spacing.md) between columns, creating a consistent rhythm that feels spacious without being wasteful. Section separation uses the lg spacing token (40px) for major content blocks, creating clear visual breathing room between hero sections, feature cards, and footer areas. The container max-width of 1400px ensures that even on large displays, content remains readable and focused—text lines don't exceed 75 characters, and card layouts maintain visual balance. Horizontal padding on the container is set to 24px (gutter) on desktop, reducing to 12px (spacing.sm) on tablets and 8px (spacing.xs) on mobile. V

Elevation & Depth

Visual hierarchy in WEBTOON is achieved through a subtle shadow system that creates depth without introducing visual clutter. The elevation scale uses three levels: sm (0 0 4px 0 rgba(0,0,0,0.1)) for subtle UI elements like input fields and small cards; md (0 0 10px 0 rgba(0,0,0,0.15)) for standard cards and modals; lg (0 0 18px 0 rgba(0,0,0,0.2)) for elevated modals, popovers, and floating elements. Shadows are soft and spread (using blur rather than offset) to create a sense of floating above the surface rather than casting a hard shadow. Interactive elements like buttons do not use shadows

Shapes

WEBTOON's shape philosophy is 'Functional Modernism'—rounded corners are used strategically to soften the interface and create visual warmth, but never so aggressively that they obscure the underlying structure. The rounded scale progresses from sm (0.25rem / 4px) for small UI elements like badges and inline buttons, to DEFAULT (0.5rem / 8px) for input fields and small cards, to md (0.75rem / 12px) for list items and medium containers, to lg (1rem / 16px) for primary buttons and standard cards, to xl (1.5rem / 24px) for large cards and modals, and full (9999px) for pill-shaped buttons and badg

Components

Action Elements Buttons are the primary mechanism for user action and come in three variants. Primary buttons (background: #00dc64, text: white, padding: 12px 24px, height: 48px, radius: 16px, font-weight: 600) are used for main CTAs like 'Get started now' and 'Subscribe'. On hover, the background transitions to #00a84a (200ms ease) and the cursor changes to pointer. On active/pressed, the background darkens to #008c3f. Secondary buttons (background: transparent, border: 2px solid #00dc64, text: #00dc64, same padding/height/radius) are used for secondary actions like 'Log In' or 'Learn more'. On hover, the background fills with #b3f0d1 (primary-container) and text changes to #003d1a (on-primary-container). Tertiary buttons (background: transparent, text: #111111, no border) are used fo

Do's and Don'ts

**Do**

• Do use primary green (#00dc64) exclusively on primary CTAs and focus states—it's the brand's signature accent and must remain distinctive and recognizable.
• Do maintain 24px (spacing.md) padding inside cards and containers, and 40px (spacing.lg) between major sections, to create the generous, breathing layout that defines WEBTOON's modern aesthetic.
• Do apply 600 font-weight minimum to all interactive text (buttons, links, labels) to signal affordance and ensure users understand what's clickable.
• Do use Volte typeface for all headings and UI text—it's the brand's voice and must be consistent across all surfaces.
• Do test all interactive elements with keyboard navigation and screen readers; focus rings must be visible (3px rgba(0, 220, 100, 0.1)) and color contrast must meet WCAG AA standards (4.5:1 minimum for body text).

**Don't**

• Don't use the primary green (#00dc64) for body text, backgrounds, or non-interactive elements—reserve it exclusively for CTAs and interactive highlights to maintain visual hierarchy and brand distinctiveness.
• Don't apply shadows to buttons in their default state; shadows are reserved for cards and elevated surfaces. Buttons signal interactivity through color and typography alone.
• Don't use border-radius smaller than 8px (DEFAULT) on interactive elements like buttons and inputs—the brand aesthetic requires generous rounding to feel modern and approachable.
• Don't mix typefaces; Volte is the only approved typeface for UI and headings. System fonts (-apple-system, sans-serif) are acceptable only as fallbacks in the font-stack.
• Don't reduce padding or spacing below the defined scale (xs: 4px, sm: 12px, md: 24px) in an attempt to fit more content—the generous spacing is core to the brand's visual identity and user experience.