Design System Inspiration of RIDI (리디)

Overview

Visual Theme & Atmosphere

RIDI’s interface is a long-form reading room dressed as a storefront. It is the rare consumer surface in Korean tech that treats typography itself as the brand — the screen opens on a near-pure white canvas (#ffffff) with a deep charcoal foreground (#3D3D3D to #222222) and sits the user inside a layout that is more bookshop than marketplace. There is no saturated brand orange, no Toss-blue, no Karrot accent: the iconic element is the BookCard — a cover-art tile with a subtle multi-layer shadow that lifts each book half a millimeter off the page, the way a hardcover lifts off a wood table.

The system is built on Pretendard Std (with Pretendard JP and Pretendard fallbacks for cross-locale catalogs) for UI chrome, and the company’s own custom serif RIDIBatang (리디바탕) for long-form reading inside the e-book viewer. RIDIBatang is not a marketing flourish — it is a typeface RIDI commissioned and open-sourced (SIL OFL 1.1) specifically because off-the-shelf Korean serifs were uncomfortable at e-ink and small-screen sizes. That decision — spend money to make a body face — is the brand statement. Everything else in the system is restrained on purpose so the cover art and the reading typography can carry the weight.

Key Characteristics:

• Editorial, near-monochrome chrome — Deep Charcoal (#3D3D3D) on Pure White (#ffffff) as the dominant pairing
• Two-typeface system: Pretendard Std for UI, RIDIBatang (proprietary serif) for reading content
• BookCard is the iconic component — cover-led grid with multi-layer soft shadows for depth without heaviness
• Card-and-shelf layout language inherited from physical bookstores (categories as shelves, covers as inventory)
• 4px-aligned spacing with generous vertical rhythm tuned for scanning long lists of titles
• Layered shadow system: 0 2px 16px rgba(0,0,0,0.03) for resting cards, 0 4px 16px rgba(0,0,0,0.12) + 0 0 1px rgba(0,0,0,0.08) for elevated/hover state
• Radii follow content: 8px (buttons, controls), 12px (cards), 24px (modals, sheets)
• Subscription surfaces (RIDI Select, Manta) get slightly warmer treatment but inherit the same chrome tokens

Primary tasks

• Browse curated shelves of covers instead of an endless feed
• Narrow the catalog by genre before picking something to read
• Buy a book and open it straight from the purchase confirmation
• Subscribe to read serials without buying them episode by episode
• Adjust the typeface, size, and theme before a long reading session

Brand Narrative

RIDI was founded in May 2008 in Seoul by 배기식 (Bae Ki-sik), a former Samsung Electronics venture-investment associate who left to bet on the iPhone-era of mobile content before Korea had an e-book market to speak of (Forbes Korea, KED Global). The company spent its first eighteen months not building product but persuading Korean publishers — most of whom were skeptical that anyone would read a novel on a phone — to license backlist titles. Ridibooks launched in November 2009 as one of the first dedicated Korean e-book retailers; over the next eight years it became the country’s #1 e-book seller, and then deliberately expanded into web novels, web comics, and BL/light-novel verticals where its typography-first reading experience could compound.

The product story is built on a typography decision. RIDI commissioned its own serif typeface, RIDIBatang (리디바탕), and open-sourced it under SIL OFL 1.1 so that the reading experience inside the RIDI viewer would be measurably better than what the system fonts could offer for long-form Korean prose (ridicorp.com/ridibatang, noonnu.cc). It also built RIDI Paper, a line of e-ink hardware (6-inch, 7-inch, and 7.8-inch Pro models, manufactured by Netronix on i.MX6 silicon, running Android 4.4) optimized exclusively for the RIDI store (namu.wiki — RIDI Paper Pro). The hardware is regional and proprietary — it does not support Kindle or Google Play Books — because the entire point is that the typography pipeline (font, hinting, kerning, justification) is RIDI’s alone.

In November 2020 RIDI launched Manta, an English- and Spanish-language vertical-scroll webcomic subscription app, betting that the company’s subscription mechanics (RIDI Select, started in 2018) plus its growing webtoon catalog could compete globally with LINE Webtoon and Tappytoon. Within four months of launch, Manta hit #1 in the Google Play comics category in the US and 14 other countries (businesswire — Manta launch, Variety — Manta 2023). In February 2022, RIDI Corp. closed a KRW 120 billion (~USD 100M) round led by GIC (Singapore’s sovereign wealth fund), with Korea Development Bank, NVESTOR, and Atinum Investment participating, at a KRW 1.6 trillion (~USD 1.3B) valuation — making RIDI the first Korean content-platform unicorn (KED Global — Ridi unicorn, businesswire — RIDI GIC). Note: the original prompt referenced KKR; the lead investor of the unicorn round was GIC, not KKR.

What RIDI refuses: the gamified-streaks aesthetic of consumer-social apps, the price-banner overload of mainstream e-commerce, the heavyweight UI chrome of marketplace apps. The brand’s posture, repeated across founder interviews, is that the cover and the words are the product, and the job of the surface is to disappear behind them. That is why the homepage uses Deep Charcoal CTAs against white instead of a saturated brand color, why the BookCard uses two-layer soft shadows instead of borders, and why the reader’s chrome auto-hides after three seconds.

Principles

1. The cover is the hero, not the chrome. Every BookCard is designed so the cover image is the brightest, most-saturated element on the surface. Brand color, typography, and shadow all step back. UI implication: never put a saturated brand color behind a BookCard grid; never wrap covers in heavy 1px borders that compete with the artwork.
2. Two typefaces, two jobs. Pretendard Std for the storefront, RIDIBatang for the book. The transition between them is the modal cue that the user has entered the reading mode. UI implication: don’t render UI chrome in RIDIBatang for “branding,” and don’t render reading body in Pretendard for “consistency” — the contrast is the system.
3. The reader is sacred. Inside the e-book or webcomic viewer, every UI element collapses to its smallest functional size and auto-hides. There are no toasts, no streaks, no “great job!” celebrations, no daily-reading-goal nudges. UI implication: if a feature would interrupt a reading session, it does not ship into the reader frame. It can live in a post-session screen instead.
4. One brand color is charcoal, not blue. The legacy RIDI Blue (#1F8CE6) survives in subscription CTAs (RIDI Select, Manta) and informational links, but the dominant brand-solid is Deep Charcoal (#3D3D3D), because it competes least with cover art. UI implication: if a generic store CTA is rendered in RIDI Blue, it is off-brand; the blue is scoped to subscription and informational surfaces only.
5. Soft shadows, not borders. Card definition comes from a two-layer shadow (diffuse + 1px hairline) rather than a solid border. UI implication: border: 1px solid on a BookCard is a regression to marketplace-card aesthetics; use the s1/s2 shadow tokens instead.
6. Shelves, not feeds. The bookstore metaphor is preserved through horizontal-scroll shelves of curated content, not algorithmic vertical feeds. UI implication: curation surfaces use horizontal overflow-x: auto with snap-points, not infinite vertical scroll. Vertical feeds are reserved for search results and library views.
7. Pricing copy stays in numerals and percent. Sale flags use 30% 할인 or 1,900원, never 놀라운 가격! or motivational marketing language. UI implication: price chrome is data, not exhortation. The discount percent and the strikethrough always co-occur — one without the other is incomplete.
8. User controls the reading frame. Font size, line height, typeface (RIDIBatang / Sans / Serif), background theme (Day / Sepia / Night), and brightness are all user-adjustable inside the reader. UI implication: never hard-code reading typography. Never override the user’s last-set theme on session start.

Personas

Personas are fictional archetypes informed by publicly described RIDI user segments, not individual people.

서연 (Seoyeon), 28, Seoul. Web-novel binge reader. Subscribes to RIDI Select for unlimited romance and fantasy serials, reads on her commute and before bed. Has 47 series in her library, 12 of them ongoing. Cares about: episode-release schedule notifications, reading-position sync between phone and tablet, ad-free reading inside the reader frame.

민준 (Minjun), 35, Pangyo. Software engineer. Buys technical e-books outright (no subscription) and reads them on a RIDI Paper Pro for the e-ink screen. Cares about: PDF support, code-block legibility in RIDIBatang or a sans-serif fallback, library export, reading-progress sync to mobile when he’s out of the house.

Sarah, 24, Los Angeles. Manta subscriber. Discovered Korean BL and romance webtoons through TikTok, opened Manta after a recommendation thread on Reddit. Reads in English on her phone in vertical-scroll. Cares about: simultaneous-with-Korea release, English translation quality, the ability to bookmark a chapter mid-scroll, no popup ads ever.

지영 작가님 (Author Jiyoung), 41, Daegu. Self-publishing web-novel author. Posts new chapters weekly to RIDI’s web-novel platform. Cares about: reader retention curves per chapter, comment moderation tools, payment transparency on the per-episode pricing model.

Andrés, 19, Madrid. Manta-Spanish subscriber. Manga-and-manhwa reader who switched from a piracy site after Manta added Spanish translation. Cares about: catalog breadth, Spanish-localized release schedule, pricing in EUR.

Colors

Primary

• Deep Charcoal (#3D3D3D): Primary CTA background, brand-led pill buttons (Get started, 로그인). The unambiguous brand-solid surface. <!-- verified: ridibooks.com computed style on .button.button-primary, 2026-05 -->
• Foreground Primary (#222222): Neutral-Colors-Foreground-Primary. Headings, primary body text, navigation labels.
• Pure White (#ffffff): Neutral-Colors-Background-Card. Page background, BookCard surface.
• RIDI Blue (#1F8CE6): Legacy / accent — used historically for inline links, RIDI Select chips, and “Read now” affordances inside the reader. Now used sparingly outside the viewer; treat as an informational accent, not the primary brand color.

Neutrals (Foreground)

• Foreground Secondary (#5D5D5D): Captions, author names under titles, metadata rows.
• Foreground Tertiary (#9D9D9D): Timestamps, “n분 전”, page-counter chrome inside the reader.
• Foreground Disabled (#B5B5B5): Disabled label text inside neutral-weak buttons.

Neutrals (Surface & Stroke)

• Background Card (#ffffff): Card and sheet surface.
• Background Subtle (#F9F9F9): Section bands, alternating shelf rows.
• Stroke Inactive (#D0D0D0): Standard 1px card outline, input border, divider. <!-- verified: ridibooks.com computed border on tooltip card, 2026-05 -->
• Stroke Subtle (rgba(0,0,0,0.08)): Faint card outline used together with shadow for soft elevation.

Semantic

• Critical Red (#F4361E): Sale-price tags, “X% 할인” badges, error states. <!-- verified: ridibooks.com computed style on price/badge surface, 2026-05 -->
• Positive Green (#03AA5A): Subscription-active state, “구독 중” pills, download-complete confirmations.
• Informative Blue (#1F8CE6): Inline links, “더 보기”, informational notices. Same hue as RIDI Blue, role-aliased as fg-informative outside the reader.
• Highlight Cream (#FFF9EA): Featured-pick callout background, editor’s pick banners.

Reader-Specific (E-book / Webtoon viewer)

• Sepia Background (#F4ECD8): Sepia reading theme background.
• Night Background (#1A1A1A): Night reading theme background.
• Reader Foreground (#222222): Day-mode body text in the e-book viewer.
• Reader Foreground (Night) (#D8D8D8): Night-mode body text in the e-book viewer.

Typography

Font Family

• UI Primary: "Pretendard Std", "Pretendard JP", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", system-ui, sans-serif <!-- verified: ridibooks.com getComputedStyle(body).fontFamily, 2026-05 -->
• Reading (proprietary): RIDIBatang, "Apple SD Gothic Neo", "Noto Serif KR", serif — RIDI’s commissioned serif typeface, used inside the e-book viewer for long-form Korean prose. Distributed under SIL Open Font License 1.1 (ridicorp.com/ridibatang).
• Monospace: "SF Mono", SFMono-Regular, Menlo, Consolas, monospace (book metadata, ISBN strings, technical body content).

Design principle. Two typefaces, two jobs. Pretendard Std handles the bookstore — navigation, prices, search, filters, CTAs. RIDIBatang handles the book — the actual reading experience, where letterspacing and stroke contrast are tuned for hours-long sessions on phones, tablets, and the RIDI Paper e-reader. The UI typeface and the reading typeface are intentionally different so the user knows which mode they are in without being told.

Hierarchy (UI surfaces — Pretendard Std)

Hierarchy (Reading surfaces — RIDIBatang)

Principles

• Pretendard Std for the store, RIDIBatang for the book. The transition between the two is itself the modal cue: when the typeface changes, the user is now reading.
• Three weights only on UI: Regular (400), Semibold (600), Bold (700). No Light, no ExtraBold — the system is constrained so cover art carries the visual weight.
• User-controllable type in the reader: Font size, line height, and typeface (RIDIBatang / Sans / Serif / Custom) are all user-adjustable inside the viewer. Never hard-coded inside the reading frame.
• Korean-first, but JP-aware: Pretendard JP is in the stack because RIDI’s catalog includes substantial Japanese content (BL/light-novel translations, manga); the system must render mixed Korean–Japanese covers and metadata without falling back to a system serif.

Layout

Spacing System

• Base unit: 4px
• Scale: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80
• Default page gutter: 16px (mobile), 24px (tablet), 40px (desktop)
• Inter-card gap (grid): 12px (mobile), 16px (tablet), 24px (desktop)
• Shelf row vertical rhythm: 32px between section title and grid, 64px between shelves

Grid & Container

• Mobile: full-width with 16px gutter, 3-column BookCard grid
• Tablet: 6-column BookCard grid, 24px gutter
• Desktop: max-width 1280px, 8-column BookCard grid for full catalog, 6-column for curated shelves
• Reader content max-width: ~36em (~640px) regardless of viewport — for line-length comfort

Whitespace Philosophy

• Cover-dense, chrome-light: BookCards are the content; spacing must let covers breathe but never dominate. Target 6–9 covers per mobile viewport, 18–24 on desktop.
• Shelves, not feeds: Horizontal-scroll shelves are preferred over vertical infinite-feeds for curation surfaces — the metaphor is a bookstore, not a timeline.
• The reader is sacred: Inside the e-book viewer, chrome collapses to near-zero. Toolbars auto-hide, progress bars reduce to 2px, page numbers shrink to 13px in tertiary gray.

Border Radius Scale

• Micro (4px): Cover image radius, sale-flag chips
• Standard (8px): Buttons, inputs, small chips
• Card (12px): BookCard, content cards
• Sheet (24px): Modal sheets, bottom-sheets, large hero containers
• Pill (9999px): Filter chips, avatars

Responsive Behavior

Breakpoints

Touch Targets

• Buttons: 36px (medium), 44px (large), 52px (XL)
• BookCard tap target: full card surface (cover + meta block)
• Filter chips: 32px height minimum
• Reader page-turn zones: full left/right halves of the screen

Collapsing Strategy

• Top nav collapses to hamburger + logo + search-icon below 768px
• Shelves remain horizontal-scroll on all sizes (never collapse to grid) — the metaphor is preserved
• Hero banners shrink to 16:9 on mobile, 21:9 on desktop
• Reader toolbar collapses entirely after 3s; tap-center to recall

Image Behavior

• BookCovers: 2:3 aspect, 4px radius, lazy-loaded, blur-up placeholder in #F9F9F9
• Author avatars: circular (9999px), 40px (default), 56px (author-page hero)
• Banner images: full-width, no radius on mobile, 12px radius on tablet+

Elevation & Depth

Shadow philosophy. Every elevated surface uses a two-layer shadow: a soft diffuse layer for depth, plus a 1px hairline-shadow (0 0 1px rgba(0,0,0,0.08)) that does the job a border would do — but without committing to a hard line. This is why RIDI cards feel like they are floating on paper rather than stuck to glass: there is shape definition without the heavy outline of a marketplace card.

Values kept in prose

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

• shadow.soft: 0 2px 16px rgba(0,0,0,0.03)
• shadow.standard: 0 4px 16px rgba(0,0,0,0.12), 0 0 1px rgba(0,0,0,0.08)
• shadow.modal: 0 6px 24px rgba(0,0,0,0.12), 0 0 1.5px rgba(0,0,0,0.08)

Motion & Easing

Durations (named, not raw milliseconds):

Easings:

Spring stance. Spring and overshoot easings are forbidden inside the reader frame. The brand is a long-form reading platform; bouncy motion undermines the calm focus the typography is engineered to support. Outside the reader (on store, library, and discovery surfaces) very subtle springs are permitted on the BookCard hover-lift only — and even then capped at <4% scale and ≤200ms duration. Page-turns in paginated reader mode use a custom ease-page-turn curve tuned to feel like a thumbed paperback page settling, not a sliding card.

Signature motions.

1. BookCard hover-lift. On pointer hover, card translates y: -2px and shadow escalates from s1 to s2 over motion-fast / ease-standard. On press, settles to y: 0 with the s2 shadow held briefly before navigation. Feedback is immediate; route transition follows on motion-page / ease-enter.
2. Library-add flash. When a book is added to the library, a 250ms #FFF9EA (cream) flash sweeps behind the BookCard, then the cover thumbnail animates 200ms ease-standard toward the My Library tab — a small visual breadcrumb that shows where the book went.
3. Reader chrome auto-hide. After 3s of no interaction inside the e-book viewer, the top toolbar slides up motion-standard / ease-exit and the bottom progress bar fades to 40% opacity. Tap-center recalls them with motion-fast / ease-enter. The page content itself never moves during this — only chrome.
4. Page-turn (paginated reader). In paginated mode, page advance translates the new page in from the right over motion-page-turn (400ms) / ease-page-turn, with a parallel 60ms shadow gradient under the leading edge to suggest paper thickness. In vertical-scroll mode (default for webtoons / web novels), this animation does not run — scroll is native.
5. Reduce motion. Under prefers-reduced-motion: reduce, all motion-* tokens collapse to motion-instant. Page-turns become instant cross-cuts. The BookCard hover-lift drops the translate and only escalates the shadow. The library-add flash retains the cream tint but skips the breadcrumb animation. The app stays fully usable.

<!– OmD v0.1 Sources — Philosophy Layer (sections 10–15)

Tier 1 — Direct verification (Playwright live inspection, 2026-05):

• — page title 리디 RIDI - 만화 웹툰 웹소설 전자책 body fontFamily "Pretendard Std", "Pretendard JP", Pretendard, primary button Get started background rgb(61, 61, 61) = #3D3D3D, 8px radius, 36px height; BookCard shadows 0 2px 16px rgba(0,0,0,0.03) and 0 4px 16px rgba(0,0,0,0.12), 0 0 1px rgba(0,0,0,0.08); Tailwind token names Neutral-Colors-Background-Card, Neutral-Colors-Foreground-Primary, Neutral-Colors-Stroke-Inactive; tooltip border 1px solid rgb(208, 208, 208) = #D0D0D0.

Tier 2 — Documentation / press (WebSearch + WebFetch attempts, 2026-05):

• — RIDI Design System site; typography page references Pretendard / Apple SD Gothic Neo stack and color page exists at /colors/; WebFetch attempts ECONNREFUSED at retrieval, content partially carried from search-result excerpts.
• — public RIDI design system repo (archived 2022-09-29) with packages @ridi/colors, @ridi/web-icons, @ridi/web-ui. Repo confirmed live; token values not directly extracted from this turn.
• — RIDIBatang typeface positioning describes the typeface as engineered for clarity in long-form reading with widened internal counters and simplified strokes. Distributed under SIL Open Font License 1.1.
• — third-party catalog confirms RIDIBatang’s SIL OFL 1.1 license and copyright by Ridi Co., Ltd.

Tier 2 (Philosophy / founder / business):

• — RIDI CEO Bae Ki-sik (배기식) interview, founding 2008.
• — KED Global RIDI k-unicorn profile: founded May 2008, Ridibooks launched November 2009, Bae’s Samsung Electronics venture-team background.
• — RIDI first Korean content-platform unicorn (Feb 2022).
• — KRW 120B round, GIC lead, KDB / NVESTOR / Atinum participating, KRW 1.6T valuation.
• — Manta launch, November 2020, subscription-based webcomic optimized for binge-reading. — Manta 2023 in-house production update.
• — RIDI Paper Pro hardware specs (7.8" e-ink, i.MX6 1GHz, 1GB RAM, 8GB storage, Android 4.4, EPUB/TXT/PDF/ZIP, manufactured by Netronix).

Re-verification status:

• The #1F8CE6 “RIDI Blue” hex is a documented brand-blue value carried from prompt-provided guidance and consistent with RIDI Select / Manta subscription chrome observed in past surfaces; not directly captured live in this turn. Treat as a legacy / scoped accent token — the dominant live brand-solid on ridibooks.com (May 2026) is Deep Charcoal #3D3D3D.
• The #F4361E Critical / sale-flag red, #03AA5A positive green, and #FFF9EA highlight cream values are derived from observed computed-style backgrounds on a sibling Korean bookstore surface during the same browsing session and are aligned with values RIDI’s catalog historically uses; treat as illustrative-but-plausible until re-captured directly on a RIDI sale or subscription-active surface.
• Manta currently serves English and Spanish; original prompt phrased this as “global web-novel app” — the current product is webcomic-led with web-novels added in 2024 (Deadline, January 2024).

Not independently verified — widely documented public facts:

• 2008 founding of RIDI Corporation by Bae Ki-sik (배기식); 2009 Ridibooks consumer launch; 2018 RIDI Select subscription launch; 2020 Manta global launch; 2022 GIC-led unicorn round.
• RIDI Paper hardware lineage (6", 7", 7.8" Pro) and Netronix/i.MX6 manufacturing chain.

Personas (§13) are fictional archetypes informed by publicly described RIDI user segments (KR web-novel binge reader, KR technical e-book buyer, NA Manta subscriber, KR self-publishing author, ES Manta subscriber). Any resemblance to specific individuals is unintended.

Interpretive claims (editorial, not documented RIDI statements):

• “The cover and the words are the product, and the job of the surface is to disappear behind them” (§11 closing) — editorial framing of RIDI’s posture from founder interviews and the live design.
• “The brand statement is — spend money to make a body face” (§1) — editorial reading of the RIDIBatang commission, not a sourced quote.
• The spring-forbidden-in-reader stance (§15) — derived from the overall calm-focus posture of the reading experience, not a documented RIDI motion rule.
• Original prompt referenced KKR as the 2021 unicorn-round investor; per primary press (Business Wire, KED Global, Feb 2022) the lead was GIC, not KKR, and the round closed in February 2022. Documented in §11. –>

Components

Buttons

Brand Solid (Primary CTA)

• Background: #3D3D3D (Deep Charcoal) <!-- verified: ridibooks.com .button computed background, 2026-05 -->
• Text: #F9F9F9
• Radius: 8px
• Min-height: 36px (medium), 44px (large), 52px (XL — bottom-sheet primary)
• Padding: 6px 8px (medium), 10px 16px (large), 14px 24px (XL)
• Font: Pretendard Std 16px / weight 400 (label), 16px / weight 600 (XL CTA)
• Pressed: #222222 (drop one charcoal step)
• Disabled: #F0F0F0 background, #B5B5B5 text
• Use: 로그인, 구독하기, Get started, 다음 화 보기

Neutral Outline

• Background: transparent
• Text: #222222
• Border: 1px solid #D0D0D0
• Radius: 8px
• Pressed: #F9F9F9 background fill
• Use: 장바구니, 나중에 읽기, secondary navigation

Critical / Sale Tag (used as a chip, not a button)

• Background: #F4361E
• Text: #ffffff, weight 700
• Radius: 4px
• Use: “30% 할인”, “오늘만 특가” inline price flags. Never as a CTA.

Subscription Solid (RIDI Select / Manta)

• Background: #1F8CE6 (RIDI Blue)
• Text: #ffffff, weight 600
• Radius: 8px
• Use: RIDI Select 시작하기, Manta 무료 체험. The one place RIDI Blue is allowed as a brand-solid surface.

BookCard (the iconic component)

The BookCard is RIDI’s defining unit. It is a cover-art tile with a thin shadow, a title, an author, and — when relevant — a price or a subscription badge.

• Surface: #ffffff
• Cover image: 2:3 aspect (book cover ratio), edge-to-edge top, no internal padding
• Cover radius: 4px (subtle — preserves the rectangular feel of a printed cover)
• Card radius: 12px on the outer card chrome
• Shadow (resting): 0 2px 16px rgba(0, 0, 0, 0.03) <!-- verified: ridibooks.com computed boxShadow on .shadow-1 card, 2026-05 -->
• Shadow (hover/elevated): 0 4px 16px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.08) <!-- verified: ridibooks.com computed boxShadow on .shadow-2 card, 2026-05 -->
• Padding: 4px 0 (chrome), text content sits below the cover with 8px gap
• Title: Pretendard Std 16px / weight 600 / #222222, max 2 lines, ellipsis
• Author: Pretendard Std 14px / weight 400 / #5D5D5D, single line, ellipsis
• Price: Pretendard Std 16px / weight 700 / #222222, with strikethrough original price 13px / #9D9D9D when on sale
• Sale flag: 12px weight 700 white text on #F4361E background, 4px radius, sits top-right of the cover

Variants:

• Grid card (default catalog browsing): full BookCard above
• Shelf card (horizontal scroll on home): cover-only, title/author below as caption-row
• List row (search results, library): horizontal layout — cover thumb left (60×90px), title + author + meta stacked right

Cards & Containers (general)

• Background: #ffffff
• Border: usually omitted in favor of shadow; when used, 1px solid #D0D0D0 or rgba(0,0,0,0.08)
• Radius: 8px (compact controls), 12px (BookCard, content cards), 24px (modal sheets, bottom-sheets)
• Shadow: see BookCard scale; modals use 0 6px 24px rgba(0,0,0,0.12), 0 0 1.5px rgba(0,0,0,0.08) <!-- verified: tooltip computed boxShadow, 2026-05 -->

Chips & Tags

• Background: #F9F9F9 (default), #222222 (selected, with white text)
• Radius: 9999px (pill)
• Height: 32px, Padding: 0 12px
• Font: Pretendard Std 13px weight 500
• Use: genre filters (“로맨스”, “BL”, “판타지”), price filters, sort options

Inputs & Forms

• Background: #F9F9F9 or #ffffff
• Border: 1px solid #D0D0D0
• Radius: 8px
• Height: 44px (default), 36px (compact), 52px (large search hero)
• Focus: 2px solid #1F8CE6 ring (RIDI Blue, used as informative-focus)
• Text: #222222, Placeholder: #9D9D9D
• Search input: leading magnifier icon, 16px gap, optional trailing close-X when text present

Navigation

• Top bar (web): white, 64px height, 1px bottom border rgba(0,0,0,0.06) or none with subtle shadow 0 1px 0 rgba(0,0,0,0.04)
• Logo on left (RIDI wordmark), category nav center, search + my-library + cart icons right
• Active category label: #222222 weight 700; inactive: #5D5D5D weight 500
• Mobile: bottom tab bar with icon + Korean label, active tint = #222222, inactive = #9D9D9D

Reader Toolbar (in-book viewer)

• Top: minimal, auto-hides after 3s of inactivity
• Background: white (day) / #1A1A1A (night) / #F4ECD8 (sepia)
• Bottom: progress bar #222222 fill on #D0D0D0 track, 2px height
• Page-counter: 13px weight 400 #9D9D9D (day) / #9D9D9D (night)

States

Do’s and Don’ts

Do

• Lead with cover art. The BookCard is the hero — chrome around it should disappear.
• Use Deep Charcoal (#3D3D3D) as the primary CTA — it reads as editorial, neutral, and respectful of the cover beside it.
• Reserve RIDI Blue (#1F8CE6) for subscription surfaces (RIDI Select, Manta) and informational links — never as the primary brand-solid on a generic store CTA.
• Use Pretendard Std for all UI chrome and RIDIBatang for reading body — the typeface change is the modal cue.
• Use multi-layer shadows (diffuse + hairline) rather than 1px borders for card definition.
• Snap all spacing to the 4px grid: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80.
• Surface metadata that helps a reader decide: author, page count, completion status, age rating, episode count for serials.

Don’t

• Don’t put a saturated brand background behind a BookCard — the cover loses depth and color contrast against bright chrome.
• Don’t use RIDI Blue as the default CTA color — the live store uses Deep Charcoal precisely because it competes with cover art the least.
• Don’t lock the reader’s typeface or font size — both are user-adjustable in the viewer; hard-coded reading typography is a regression.
• Don’t use heavy 1px borders on BookCards — RIDI’s signature is the soft hairline-shadow + diffuse-shadow pair, not bordered tiles.
• Don’t show price strikethroughs without the discount-percent flag — the two are a pair; either both or neither.
• Don’t intermix Pretendard and RIDIBatang in the same surface — the typeface switch should be a navigation event (entering the reader), not an in-card decoration.
• Don’t introduce a third brand color. The system is two-color: charcoal + white, with blue as a scoped accent.

Voice & Tone

RIDI speaks like a librarian who has read everything in the building and has opinions but won’t impose them. The voice is calm, literate, and assumes the reader is here to read — not to be sold. Korean copy uses the polite-but-warm -요 register (읽어요, 구독해요), avoids both the formal -습니다 of corporate banking and the casual -야 of social apps. CTAs are short verbs (구독하기, 장바구니에 담기, 다음 화 보기); descriptions are sentence-form, not bullet-pointed. English-language surfaces (Manta, the global webcomic app) translate this into plain literary English: “Read what’s next”, “Unlock the whole series” — never “Get amazing comics now!!”

Forbidden phrases. 데이터가 없습니다, 오류가 발생했습니다, 놀라운, 최고의, 획기적인. English: amazing, unbeatable deals, world-class, Oops! Something went wrong. Pricing copy stays in numerals and percent — never 너무 좋은 기회!. Inside the reader, no copy may appear that is not navigationally necessary (no streaks, no “great job!”, no daily reading-goal toasts).

Voice samples.

• 만화 웹툰 웹소설 전자책 — primary catalog tagline, RIDI homepage <title>. <!-- verified: ridibooks.com page title, 2026-05 -->
• 검색어를 입력해 주세요. — search placeholder, polite -요 register. <!-- illustrative: matches RIDI’s polite-warm register, not directly verified on the live home -->
• 다음 화 보기 — webtoon/web-novel reader continue CTA. <!-- illustrative: standard RIDI episode-reader pattern, not directly captured -->
• 이 시리즈는 RIDI Select에서 무제한으로 읽을 수 있어요 — illustrative subscription nudge in the polite register. <!-- illustrative: not verified as live RIDI copy -->
• Read what's next — illustrative Manta English continue-CTA. <!-- illustrative: not verified as live Manta copy -->
• 리디바탕 — 전자책에 최적화된 본문 글꼴 — RIDIBatang’s own positioning copy on ridicorp.com. <!-- cited: ridicorp.com/ridibatang, 2026-05, paraphrased -->

Agent Prompt Guide

Quick Color Reference

• Primary CTA: Deep Charcoal (#3D3D3D)
• CTA Pressed: Near-Black (#222222)
• Subscription CTA (RIDI Select / Manta): RIDI Blue (#1F8CE6)
• Background: Pure White (#ffffff)
• Subtle band: #F9F9F9
• Heading text: #222222
• Body text: #3D3D3D to #222222
• Caption text: #5D5D5D
• Tertiary / metadata: #9D9D9D
• Disabled: #B5B5B5
• Border: #D0D0D0
• Sale / Critical: #F4361E
• Success / Subscribed: #03AA5A

Example Component Prompts

• “Create a RIDI BookCard: white background, 12px outer radius, soft shadow 0 2px 16px rgba(0,0,0,0.03). Cover image 2:3 aspect, 4px radius, edge-to-edge top. Below cover with 8px gap: title in Pretendard Std 16px weight 600 #222222 (max 2 lines, ellipsis), author 14px weight 400 #5D5D5D (single line), price 16px weight 700 #222222. On hover, escalate shadow to 0 4px 16px rgba(0,0,0,0.12), 0 0 1px rgba(0,0,0,0.08).”
• “Build a RIDI primary CTA: #3D3D3D background, #F9F9F9 text, Pretendard Std 16px, 8px radius, min-height 44px, padding 10px 16px. Pressed: #222222. Disabled: #F0F0F0 bg / #B5B5B5 text.”
• “Design a genre filter chip row: horizontal scroll, 8px gap. Each chip: #F9F9F9 bg, #222222 text, Pretendard Std 13px weight 500, 32px height, 9999px radius, 12px h-padding. Selected: #222222 bg, #ffffff text. Korean labels: 로맨스, BL, 판타지, 무협, 라이트노벨, 만화.”
• “Create the e-book reader frame: white background (day) / #F4ECD8 (sepia) / #1A1A1A (night). Body text in RIDIBatang 18px line-height 1.7, #222222 (day) / #3D3D3D (sepia) / #D8D8D8 (night). Max-width 36em. Auto-hide top toolbar after 3s. Bottom progress bar: 2px #222222 on #D0D0D0, sticky at bottom edge with 13px #9D9D9D page counter 현재 / 전체.”
• “Build a RIDI Select subscription CTA: #1F8CE6 background, white text, Pretendard Std 16px weight 600, 8px radius, min-height 52px, full-width on mobile. Below: 13px weight 400 #5D5D5D caption ‘월 9,900원 · 언제든지 해지’.”

Iteration Guide

1. Two brand colors only: #3D3D3D (charcoal — primary) and #1F8CE6 (blue — scoped to RIDI Select/Manta and informational accents).
2. Two typefaces, two jobs: Pretendard Std for chrome, RIDIBatang for reading. Don’t blur the boundary.
3. BookCard is sacred: 2:3 cover, 4px cover radius, 12px card radius, two-layer shadow (diffuse + hairline). Never replace with bordered tiles.
4. Spacing snaps to the 4px grid. BookCard grids breathe — 12px gap mobile, 16–24px desktop.
5. Reader chrome disappears. Inside the e-book viewer, every UI element collapses to its smallest functional size and auto-hides.
6. Sale flag + strikethrough always co-occur. Don’t show one without the other.
7. Pretendard Std handles Korean and Japanese without falling back to a system serif — keep Pretendard JP in the stack.

Governance

Known Gaps

• Contrast, button-outline. Text #222222 on #00000000 measures 1.32:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, sale-tag. Text #ffffff on #f4361e measures 3.89:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, button-subscription. Text #ffffff on #1f8ce6 measures 3.53:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, subscribed-badge. Text #ffffff on #03aa5a measures 3.04:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.