Munpia DESIGN.md

Design System Inspiration of Munpia

Overview

Visual Theme & Atmosphere

Munpia is a Korean web-fiction platform for discovering, reading and publishing serialized stories. Its own history dates the genre-fiction community to 2002 and paid service to 2013. The company describes a place where writers and readers exchange their thoughts, spanning martial arts, fantasy, romance, science fiction and other genres. Its corporate timeline records NAVER WEBTOON's acquisition of a stake in 2021 and discusses adaptations into webtoons and film. Company and history

The desktop homepage combines a blue initial mark and black wordmark with a white reading catalogue. Illustrated covers and campaign artwork carry much of the visual variety. Compact rankings, genre labels, author names and episode counts organize the surrounding interface. Blue #2882f5 marks the main login action and interactive emphasis; grey metadata keeps the many adjacent stories legible as separate entries. These are observations of the captured product surface.

The current direction emphasizes easier discovery. A June 2026 notice announced a PC renewal for July 9, describing wider use of the screen, simpler menus, unified search, a combined bestsellers view and a left-side story explorer. The measured homepage has the two-row header, ranked shelves and left rail associated with those functions. PC renewal notice

The measured homepage is the Korean desktop surface (www.munpia.com/, HTML lang="ko"); the capture did not redirect to another path.

Brand Narrative

The corporate history links a genre-fiction community to paid serialization and then to adaptation partnerships. The product still gives stories, rankings and author information most of the page. Its 2026 PC renewal extends discovery through search and the left explorer. A separate April 2026 notice describes a dedicated story-promotion board and author publishing access through the PC library and Creator app. Company, Story-promotion update

Principles

The Service & Design team explicitly describes making discovery and consumption more intuitive, designing information architecture and interfaces carefully, and improving creative tools. The visual reference follows that emphasis: keep story identity readable, place metadata close to its cover, and make discovery controls recognizable. The latter instructions are a synthesis of the measured homepage, not quoted company principles. Service & Design

Personas

No persona research was verified.

Colors

The live census contains 235 computed custom properties and 236 declared names. Of these, 232 are product definitions grouped under --color-*, --btn-*, --input-*, --selection-*, --selectbox-*, --divider-*, --table-*, --pagination-* and --dim-*. Their values are present in the product's first-party stylesheet. Swiper variables and empty Lightning CSS mode switches are excluded.

Paragraph ink is mixed: #757575 occurs on 195 paragraphs, #121212 on 92 and #454545 on 70. The foreground role records the leading paragraph observation; it is not a rule that every paragraph uses one colour. Alpha colours remain separate: for example, --dim-page-modal resolves to #000000b2 and is not flattened into an opaque palette colour.

Typography

Official product-use statement: no company-authored font specification was verified. The company's Service & Design page describes its UI and visual-design work, but does not name a typeface. Service & Design

Live-loaded: document.fonts reports Pretendard 400, 500 and 700, all normal style. The measured controls resolve to Pretendard. The font-face definitions offer local named faces followed by WOFF2 URLs on cdn1.munpia.com/v2/assets/fonts/, including Pretendard-Regular.woff2, Pretendard-Medium.woff2 and Pretendard-Bold.woff2. This proves loaded product use; the census does not distinguish a local hit from a network transfer. Pretendard is the only family promoted to the typography tokens.

Official distributed assets: the product CSS declares Pretendard weights 100–900; shared global CSS also declares Noto Sans KR 400/500/700, NanumGothic 400, NanumMyeongjo 400 and Paperlogy 100–900 with first-party asset URLs. This is evidence of deployment in the site's CSS, not a separate distribution licence. Font files were not downloaded.

Declared-only: Pretendard 100/200/300/600/800/900 and the other text families above do not appear in the loaded-face list. The body fallback chain also names platform faces and generic families; their actual use was not established. None receives a live specimen or a family token. swiper-icons is a declared library icon font and is excluded from product typography.

Unresolved: font licensing and an official brand-font designation were not verified. Substitute: none chosen.

Measured type metrics:

The card title's authored CSS separately specifies Pretendard 16px/500 with 21px line height; genre metadata is 13px/400 with 17px line height and author metadata is 14px/400 with 18px line height. These are stylesheet declarations, not additional computed typography measurements. The census found no h1 to measure.

Layout

At 1440×1000, the header spans the viewport and is sticky. Its first row holds the wordmark, search and account controls; the second holds category navigation. The content begins at x=170px in the captured layout. A fixed explorer rail sits at the left edge. The main area pairs illustrated promotions and ranked story shelves with a right column of account, campaign, ranking and notice content.

The measured paid-ranking card places an 80×114px cover wrapper beside metadata. Its stylesheet declares a 14px gap, 300px columns and 10px column/row gaps. The search input sits inside an authored 300×38px wrapper with a 50px radius and padding 0 10px 0 16px; these wrapper dimensions are CSS declarations, not the input's measured geometry. No global spacing scale is inferred from these local values.

Responsive Behavior

Only the 1440×1000 desktop surface was measured; mobile layout and breakpoint behaviour are unverified.

Elevation & Depth

All six measured control surfaces report box-shadow: none. Separation comes from whitespace, thin neutral borders and rounded artwork containers. Campaign links in the survey have a 14px radius. The account panel's authored CSS also uses a 14px radius, white background, 1px neutral border and 20px padding. The post-interaction search panel visibly has a shadow, but its computed shadow value was not measured and is not tokenized.

Motion & Easing

The primary login's recorded transition string is background-color, border-color, color 0.15s, 0.15s, 0.15s ease, ease, ease 0s, 0s, 0s. The explorer's outer target records width, height 0.3s, 0.3s ease, ease 0s, 0s; its size did not change in the sampled states. The nav link, input, card anchor and header login outer element record all 0s ease 0s. These are the probe's raw property/duration/timing/delay strings. No broader motion scale or custom easing curve was verified.

Components

These identities come from one states capture after closing the story promotion and the favourites tooltip. Rest, true hover, held press and real keyboard focus were measured for all six controls. The five controls with authored visual changes are represented in component tokens.

The header login's outer element has #000000 ink and a 13.3333px/400 font, while its visible child label is #454545, 13px/400. The tokens use the visible label values. The card's anchor also inherits #000000; its title is #121212, its genre and author are #757575, and its numeric metadata values are #454545.

The explorer's visible arrow is #454545 inside a 22×22px white circle with a 1px #c7c7c7 border. Its circle is authored with a 50% radius; the 10px radius token describes the outer hit target. The measured change belongs to that inner span, not the outer background.

The search input is 246×20px, radius 0, padding 1px 2px, 14px/400 with 18px line height, transparent with #121212 ink on a #f5f5f5 wrapper. All three measured states had no style change within the probe's comparison scope, so it stays in prose. A search-suggestions panel is visible in the post-interaction screenshot; the panel is a sibling outside that comparison scope. Its states were not measured.

States

Hover and pressed states were both reached, including :hover === true and :active === true in their respective snapshots. Primary login darkens, header login gains a pale-grey fill, the nav link turns blue, the card title underlines, and the explorer's inner circle gains a pale-grey fill. Pressed values matched hover values at the sampled pointer positions; this does not establish a separate active-only design rule.

Keyboard focus on those five controls adds only Chrome's outline-style: auto ring. It is omitted from component tokens. The input has no measured style change on keyboard focus. Focus comparisons report no style changes persisting after blur. No disabled control state was measured.

The comparison includes each control and its pseudo-elements, its descendants and their pseudo-elements, and three ancestor levels. It includes empty layers, imagery attributes and SVG paint/geometry; siblings and pixel-only changes are outside scope. The input has no descendants, while the card has 17, including one image and one empty separator.

Do's and Don'ts

To reproduce this measured surface:

• Use white ground, compact metadata and illustrated story covers.
• Use the darker primary blue on login hover and pressed states.
• Keep the header login label's own size and colour distinct from its parent's inherited style.
• Underline the ranked card's title at the measured hover position.
• Preserve the explorer's outer target and smaller inner circular treatment.
• Do not treat the browser's automatic focus ring, Swiper variables or declared-only fonts as brand tokens.

Voice & Tone

The official greeting calls the service “웹소설의 유토피아, 글세상 문피아” and addresses readers as “독자님들께”. Homepage labels are concise and task-specific: “베스트”, “무료 웹소설”, “선호작”, “내서재” and “더보기”. The renewal notice explains changes in terms of finding and enjoying stories more easily. These examples support a courteous, reader-directed reference voice; no broader verbal-identity manual was verified. Renewal notice

Agent Prompt Guide

“Build a Korean fiction catalogue on white with compact ranked cover-and-metadata rows. Use loaded Pretendard 400/500/700. The right account-panel login button is 42px tall, radius 6px, with 15px/400 white text on #2882f5; hover and held press use #0f57b3. The free-fiction nav link uses 17px/500 grey text and turns blue on hover. Keep the measured story-card title underline and the metadata colour hierarchy.”

Governance

Known Gaps

• Contrast, login-primary. Text #ffffff on #2882f5 measures 3.75:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.