Design System Inspiration of RIDI (리디)

1. 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

2. Color Palette & Roles

Primary

• Deep Charcoal (#3D3D3D): Primary CTA background, brand-led pill buttons (Get started, 로그인). The unambiguous brand-solid surface.
• 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.
• 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.
• 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.

3. Typography Rules

Font Family

• UI Primary: "Pretendard Std", "Pretendard JP", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", system-ui, sans-serif
• 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.

4. Component Stylings

Buttons

Brand Solid (Primary CTA)

• Background: #3D3D3D (Deep Charcoal)
• 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)
• Shadow (hover/elevated): 0 4px 16px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.08)
• 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)

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)

5. Layout Principles

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

6. Depth & Elevation

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.

7. 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.

8. 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+

9. 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.

---

10. 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>.
• 검색어를 입력해 주세요. — search placeholder, polite -요 register.
• 다음 화 보기 — webtoon/web-novel reader continue CTA.
• 이 시리즈는 RIDI Select에서 무제한으로 읽을 수 있어요 — illustrative subscription nudge in the polite register.
• Read what's next — illustrative Manta English continue-CTA.
• 리디바탕 — 전자책에 최적화된 본문 글꼴 — RIDIBatang's own positioning copy on ridicorp.com.

11. 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.

12. 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.

13. 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.

14. States

15. 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.

---

Verified: 2026-05-08 (omd:add-reference initial create — RIDI) Tier 1 sources: ridibooks.com (consumer storefront — Deep Charcoal #3D3D3D 8px / 36px Pretendard Std primary CTA; BookCard 12px radius with two-layer shadow 0 2px 16px rgba(0,0,0,0.03) resting / 0 4px 16px rgba(0,0,0,0.12), 0 0 1px rgba(0,0,0,0.08) hover; tooltip 1px #D0D0D0 border; Tailwind token classes Neutral-Colors-Background-Card / Neutral-Colors-Foreground-Primary / Neutral-Colors-Stroke-Inactive). Tier 2 sources: ridi.design (typography + colors pages — partial; ECONNREFUSED on direct fetch, indexed via search excerpts); github.com/ridi/design-system (archived public DS, packages @ridi/colors / @ridi/web-icons / @ridi/web-ui); ridicorp.com/ridibatang (RIDIBatang positioning + SIL OFL 1.1 license); noonnu.cc/font_page/324 (RIDIBatang license catalog). Tier 2 (Philosophy/founders): Forbes Korea (Bae Ki-sik CEO interview), KED Global (k-unicorn profile + Feb-2022 unicorn news), Business Wire (Manta 2020 launch + GIC 2022 round), Variety (Manta 2023 in-house production), Namuwiki (RIDI Paper Pro hardware specs), Deadline (Manta web-novels Jan 2024). Style ref: apple (editorial typographic restraint, two-layer shadows, content-as-hero) + kakao (Pretendard Std family, KR polite-warm -요 register). Conflicts unresolved: Original prompt named KKR as 2021 unicorn investor; primary sources (Business Wire 2022-02-28, KED Global 2022-02-28) confirm lead was GIC in February 2022 at KRW 1.6T (~USD 1.3B). Documented in §11; carried into .verification.md.