Design System Inspiration of Millie (밀리의서재)

1. Visual Theme & Atmosphere

Millie's Library is Korea's largest reading-subscription service, and its interface behaves like a calm digital bookshelf -- a content storefront where book covers are the color and everything else stays quiet. The page opens on a clean white canvas (#ffffff) with a warm near-black body text (#242424) and a confident reading blue (#1b6dda) that functions as the universal interactive accent. This isn't a flat library catalog; it's a streaming-service-for-books feel, where the home tab ("투데이" — Today) is a curated, editorial feed of book covers, audiobook tiles, and original-content promotions, much like a video platform's home screen reimagined for reading.

The book cover is the hero. Millie's design system treats every cover thumbnail as the primary unit of color and meaning -- a dense, scrollable grid of portrait rectangles, each carrying the publisher's art. The chrome around them is deliberately muted: white surfaces, #f2f2f2 section fills, and a restrained type system built on Pretendard Variable so that nothing competes with the covers. Where a single saturated brand color appears, it is the reading blue -- on the primary subscription CTA, on active tabs, on links. A small constellation of secondary accents (a soft purple #a451f7, a warm coral #ff5b4f, a highlight yellow #ffc004) appears on promotional cards and category tags, but always in service of organizing content, never as decoration for its own sake.

What defines Millie visually is the streaming-app posture applied to books: a personalized, cover-forward feed; soft rounded chips and pill toggles (10px radius on category tabs); and a generous, comfortable type scale optimized for browsing on a phone in the evening. The mood is warm and inviting rather than institutional -- reading should feel like a daily habit, not homework.

Key Characteristics:

• Reading Blue (#1b6dda) as the primary interactive accent -- subscription CTA, active tabs, links
• Warm near-black body text (#242424) on a clean white canvas -- not pure #000
• Pretendard Variable as the system face -- Korean-Latin co-equal rendering
• Cover-forward, streaming-style feed: book covers carry the color, chrome recedes
• Soft secondary accents (purple #a451f7, coral #ff5b4f, yellow #ffc004) for content organization
• Rounded chrome: 10px radius category tabs, 4px buttons, 100px pill controls
• Comfortable browsing type scale -- evening-on-a-phone reading posture
• #f2f2f2 surface fills for nested sections and feed separation

2. Color Palette & Roles

Primary

• Reading Blue (#1b6dda): Primary interactive color -- subscription CTA, active tab, links, selection. The workhorse of every tappable accent (observed rgb(27,109,218)).
• Pure White (#ffffff): Page canvas, card surfaces, button text on blue, navigation background.
• Warm Near-Black (#242424): Primary heading + body text color. Warm dark gray, softer than pure black (observed rgb(36,36,36) — the most-used color on the surface).

Secondary / Content Accents

• Soft Purple (#a451f7): Original-content tags, premium-feature highlights, audiobook accents (observed rgb(164,81,247)).
• Warm Coral (#ff5b4f): Time-limited promotion, "오늘의 추천", urgency tags (observed rgb(255,91,79)).
• Highlight Yellow (#ffc004): Star ratings, "베스트" / highlight badges (observed rgb(255,192,4)).
• System Blue (#007aff): iOS-native control blue, used on platform-supplied controls only (observed rgb(0,122,255)).

Neutral Scale

• Gray 800 (#333333): Strong labels, dark button fill (login chip #333).
• Gray 700 (#555555): Secondary headings, emphasized labels.
• Gray 600 (#6f6f6f): Body secondary text, descriptions, metadata (observed rgb(111,111,111)).
• Gray 500 (#8b8b8b): Caption text, secondary labels (observed rgb(139,139,139)).
• Gray 400 (#c1c1c1): Placeholder text, disabled icons (observed rgb(193,193,193)).
• Gray 200 (#ececec): Default border, dividers (observed rgb(236,236,236)).
• Gray 100 (#f2f2f2): Secondary background, section fill, card fill.
• Gray 50 (#f7f7f7): Lightest surface fill for nested sections.

Surface & Overlays

• Surface Fill: #f2f2f2. Section backgrounds, feed separators, image placeholders.
• Scrim Dark: rgba(0,0,0,0.3). Image overlays, cover-gradient veils, modal scrim.
• Scrim Light: rgba(0,0,0,0.15). Subtle dividers over imagery.

3. Typography Rules

Font Family

• Primary: "Pretendard Variable", "Pretendard Fallback", "Pretendard Fallback Android", sans-serif (observed live on www.millie.co.kr, 2026-05)
• Design Principle: No bespoke wordmark webfont on product surfaces. Pretendard Variable carries the entire system; weight contrast (400 / 600 / 700) builds hierarchy. Korean and Latin render co-equally in the same line.

Hierarchy

Principles

• Comfortable browsing scale: Body sits at 14-16px with generous leading — the system assumes evening phone browsing, not dense data scanning.
• Three weights: 400 (body), 600 (tabs / titles), 700 (headings / emphasis). Light is avoided on Korean glyphs.
• Warm dark, not pure black: Headings and body use #242424, a warm near-black, to feel inviting rather than clinical. Pure #000 is reserved for high-contrast moments.
• Tight Korean tracking: -0.2px to -0.4px letter-spacing for editorial compactness on titles.
• Covers carry color, type stays neutral: Type tokens avoid the brand blue except on links and tab labels — the book cover is the chromatic event.

4. Component Stylings

Buttons

Primary (Reading Blue)

• Background: #1b6dda
• Text: #ffffff
• Border: none
• Radius: 8px
• Padding: 14px 20px
• Font: 16px / 700 / Pretendard
• Hover: #1860c2
• Pressed: #1554ad
• Disabled: #c1c1c1 background, #ffffff text
• Use: Primary subscription CTA -- 무료체험 시작하기, 구독하기, 읽기

Dark (Neutral Solid)

• Background: #333333
• Text: #ffffff
• Border: none
• Radius: 4px
• Padding: 0px 12px
• Font: 12px / 400 / Pretendard
• Height: 32px
• Use: Compact chrome actions -- 로그인, header utility buttons

Outline (Blue Border)

• Background: #ffffff
• Text: #1b6dda
• Border: 1px solid #1b6dda
• Radius: 8px
• Padding: 14px 20px
• Font: 16px / 600 / Pretendard
• Hover: #f2f6fd background
• Use: Secondary CTA -- 책장에 담기, 샘플 읽기

Neutral (Gray Fill)

• Background: #f2f2f2
• Text: #333333
• Border: none
• Radius: 8px
• Padding: 12px 16px
• Font: 14px / 500 / Pretendard
• Hover: #ececec background
• Use: Tertiary actions -- share, filter open, more options

Inputs

Default

• Background: #ffffff
• Text: #242424
• Border: 1px solid #ececec
• Radius: 8px
• Padding: 12px 14px
• Font: 14px / 400 / Pretendard
• Placeholder: #c1c1c1
• Focus: 1px solid #1b6dda
• Use: Default text input -- login, search-detail forms

Search

• Background: #f2f2f2
• Text: #242424
• Border: none
• Radius: 8px
• Padding: 12px 16px 12px 40px (left-pad for inline magnifier)
• Font: 14px / 400 / Pretendard
• Placeholder: #8b8b8b ("제목, 저자, 출판사 검색")
• Focus: #ffffff background, 1px solid #1b6dda border
• Use: Header / discovery search bar

Error

• Background: #ffffff
• Text: #242424
• Border: 1px solid #ff5b4f
• Radius: 8px
• Padding: 12px 14px
• Font: 14px / 400 / Pretendard
• Use: Form validation failure -- helper text 13px/400 #ff5b4f below

Cards

Book Cover Tile

• Background: #f2f2f2 (placeholder behind cover art)
• Border: none
• Radius: 6px
• Padding: 0px on cover; 8px gap to title/author metadata
• Image: portrait cover (~2:3), 6px radius, soft 0px 2px 8px rgba(0,0,0,0.08) shadow
• Use: Default book unit in the feed grid -- the primary content surface

Feed Card (Editorial)

• Background: #ffffff (or full-bleed cover-derived gradient)
• Border: none
• Radius: 12px
• Padding: 0px (image) / 16px (text block)
• Shadow: none
• Use: Curated "투데이" feed promotions, original-content banners

Audiobook Card

• Background: #ffffff
• Border: 1px solid #ececec
• Radius: 12px
• Padding: 16px
• Use: Audiobook entry with play affordance -- purple #a451f7 play-button accent

Badges & Tags

Category Tab (Active)

• Background: #333333
• Text: #ffffff
• Border: none
• Radius: 10px
• Padding: 0px 10px
• Font: 14px / 600 / Pretendard
• Height: 32px
• Use: Active genre/category filter ("종합", "소설", "경제경영")

Category Tab (Inactive)

• Background: #f2f2f2
• Text: #6f6f6f
• Border: none
• Radius: 10px
• Padding: 0px 10px
• Font: 14px / 400 / Pretendard
• Height: 32px
• Use: Inactive genre/category filter

Original Tag (Purple)

• Background: #a451f7
• Text: #ffffff
• Border: none
• Radius: 4px
• Padding: 3px 6px
• Font: 11px / 700 / Pretendard
• Use: "밀리 오리지널" original-content flag

Promotion Tag (Coral)

• Background: #ff5b4f
• Text: #ffffff
• Border: none
• Radius: 4px
• Padding: 3px 6px
• Font: 11px / 700 / Pretendard
• Use: "오늘만", time-limited promotion flag. Used scarcely.

Rating (Yellow)

• Background: transparent
• Text: #ffc004 (star fill) + #6f6f6f (count)
• Border: none
• Radius: 0px
• Padding: 0px
• Font: 13px / 400 / Pretendard
• Use: Star rating + review count on book detail

Pill Control

Floating Pill (Scrim)

• Background: rgba(0,0,0,0.3)
• Text: #ffffff
• Border: none
• Radius: 100px
• Padding: 4px 10px
• Font: 16px / 400 / Pretendard
• Use: "자동 재생 중지", carousel position indicator over imagery

Navigation

• Top header: #ffffff background, ~56px height, no heavy border. Wordmark left (밀리의서재), search + utility right.
• Category nav: horizontal-scroll genre tabs, 14px, active = #333 fill / 10px radius, inactive = #f2f2f2 fill.
• Bottom tab bar (mobile): 4-5 items -- 투데이, 검색, 내 서재, 더보기. Active label #1b6dda / icon filled, inactive #8b8b8b. Reading blue marks the active tab.

5. Layout Principles

Spacing System

• Base unit: 4px
• Scale: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 56px
• Global gutter (mobile): 16px each side
• Global gutter (desktop): 20-24px each side, max content width ~1080px
• Inter-cover horizontal spacing: 12px between covers in a shelf carousel
• Inter-section vertical spacing: 32-40px between feed sections on "투데이"

Grid & Container

• Mobile: horizontal cover carousels (3-3.5 covers visible) stacked vertically into feed sections
• Tablet: 4-5 covers per shelf
• Desktop: 6-7 covers per shelf, centered ~1080px column
• The feed is the homepage -- a vertical stack of horizontally-scrolling shelves, streaming-service style
• Detail pages: single-column, cover + metadata + description + reviews

Whitespace Philosophy

• Covers breathe in shelves: Horizontal gaps between covers (12px) and vertical gaps between shelves (32-40px) are the system's primary rhythm.
• Comfortable, not dense: Evening phone browsing earns generous leading and section gaps — Millie is a leisure habit, not a productivity tool.
• Let the cover lead: Chrome padding stays minimal so the cover art dominates each tile.

Border Radius Scale

• Subtle (4px): Buttons (dark/compact), small tags
• Standard (6px): Book cover tiles
• Comfortable (8px): Primary buttons, inputs, neutral chips
• Soft (10px): Category tabs
• Large (12px): Feed cards, audiobook cards
• Pill (100px): Floating scrim controls, carousel indicators

6. Depth & Elevation

Shadow Philosophy: Millie's signature elevation is the soft drop-shadow under each book cover — it makes a flat thumbnail feel like a physical book on a shelf, the one place the system spends shadow generously. Elsewhere, shadows are restrained and neutral (pure-black low-opacity), reserved for elements that must detach from the feed. No brand-tinted shadows.

7. Do's and Don'ts

Do

• Use Reading Blue (#1b6dda) for the subscription CTA, active tabs, and links
• Use warm near-black #242424 for headings and body — not pure #000
• Give book covers the signature 0px 2px 8px rgba(0,0,0,0.08) lift
• Apply secondary accents (purple/coral/yellow) for content organization, scarcely
• Use 10px radius on category tabs, 8px on buttons, 100px on scrim pills
• Build a cover-forward feed of horizontal shelves — streaming-service posture
• Keep type comfortable (14-16px) with generous leading for evening browsing

Don't

• Don't use the brand blue as decoration — reserve it for interactive elements
• Don't use pure #000 for body text — warm #242424 is the brand's softness
• Don't let chrome compete with cover art for color attention
• Don't apply purple/coral/yellow as primary CTA fills — those organize content
• Don't make the layout dense — Millie is leisure reading, not a data dashboard
• Don't drop the cover shadow — flat covers lose the physical-book warmth
• Don't mix sharp 0px corners into chrome — the system is consistently rounded

8. Responsive Behavior

Breakpoints

Touch Targets

• Primary CTA buttons: 48px height
• Category tabs: 32px height
• Bottom tab bar items: 56px height
• Book cover tile: full cover + metadata tap area

Collapsing Strategy

• Desktop multi-shelf grid → mobile single-column vertical feed of carousels
• Filter side-rail → mobile bottom-sheet filter
• Reader (book content) view collapses to full-screen single-column with adjustable type

Image Behavior

• Book covers: ~2:3 portrait, 6px radius, soft shadow, lazy-loaded with #f2f2f2 placeholder
• Editorial banners: 16:9 or full-bleed, gradient scrim for text legibility
• Author / publisher logos: square 1:1, small

9. Agent Prompt Guide

Quick Color Reference

• Primary CTA: Reading Blue (#1b6dda)
• CTA Hover: Blue Dark (#1860c2)
• Background: Pure White (#ffffff)
• Surface fill: Gray 100 (#f2f2f2)
• Heading text: Warm Near-Black (#242424)
• Body secondary: Gray 600 (#6f6f6f)
• Caption: Gray 500 (#8b8b8b)
• Placeholder: Gray 400 (#c1c1c1)
• Border: Gray 200 (#ececec)
• Original tag: Purple (#a451f7)
• Promotion tag: Coral (#ff5b4f)
• Rating: Yellow (#ffc004)

Example Component Prompts

• "Create a Millie book cover tile: ~2:3 portrait cover with 6px radius and 0px 2px 8px rgba(0,0,0,0.08) shadow on #f2f2f2 placeholder. Below: 8px gap, title 14px Pretendard 600 #242424 (2 lines, ellipsis), 2px gap, author 13px 400 #6f6f6f. Optional purple 밀리 오리지널 tag, 11px/700 #fff on #a451f7, 4px radius."
• "Build a primary subscription CTA: #1b6dda background, white text, 16px weight 700 Pretendard, padding 14px 20px, 8px radius, full-width. Hover #1860c2. Label '무료체험 시작하기'."
• "Design a category tab bar: horizontal scroll, 8px gap, 32px height. Active: #333 bg, white 14px/600, 10px radius, 0 10px padding. Inactive: #f2f2f2 bg, #6f6f6f 14px/400."
• "Create a Millie '투데이' feed section: 22px/700 #242424 section title, 12px gap, horizontal carousel of book cover tiles, 12px inter-cover gap, 32-40px gap to next section."
• "Design a floating carousel control: rgba(0,0,0,0.3) bg, white 16px text, 100px radius, 4px 10px padding, '자동 재생 중지' label."

Iteration Guide

1. Reading blue #1b6dda is the interactive accent — CTA, active tab, links
2. Body and headings are warm #242424, never pure #000
3. Book covers carry the color; chrome stays neutral white / #f2f2f2
4. Secondary accents (purple/coral/yellow) organize content, used scarcely
5. Radius scale: 4px tags, 6px covers, 8px buttons, 10px tabs, 12px feed cards, 100px pills
6. Cover tiles get the signature soft shadow — flat covers lose the physical warmth
7. Comfortable 14-16px type, generous leading — evening phone browsing posture

---

10. Voice & Tone

Millie speaks like a friendly librarian-curator who wants reading to feel effortless and a little bit delightful. The voice is warm, encouraging, and lightly playful — reading is positioned as a daily habit and a small luxury, not a chore. Korean copy favors soft, inviting endings (-요, -해요) and gentle imperatives (읽어보세요, 담아두기) over institutional -ㅂ니다. The brand's positioning line leans into habit and small daily growth — "독서와 무제한 친해지리" (befriend reading, without limit) — and the slogan "당신의 일상을 1밀리+" plays on the brand name as a unit of incremental daily improvement.

Forbidden phrases. 지금 결제 안 하면 손해, 마지막 기회!!!, 데이터가 없습니다, 오류가 발생했습니다, 불편을 드려 죄송합니다. The brand avoids high-pressure urgency — it sells a calm habit, not a flash deal. Emoji are allowed sparingly in habit nudges and completion celebrations, never in error states or paywall copy.

Voice samples.

• 독서와 무제한 친해지리 — Google Play subtitle / brand positioning.
• 당신의 일상을 1밀리+ — brand campaign slogan playing on the brand name.
• 밀리 오리지널 — original-content section label.
• 완독을 축하해요! — reading-completion celebration.
• 무료체험 시작하기 — primary subscription CTA.

11. Brand Narrative

Millie's Library (밀리의서재) launched in 2017 as Korea's first e-book subscription service — an "unlimited reading" model that let members read across a deep catalog of books, magazines, and (increasingly) audiobooks for a flat monthly fee. The premise rejected the per-title purchase model that had kept Korean digital reading niche, reframing reading as a streaming-style subscription habit. The home experience is built around discovery and personalization rather than a static catalog, which is why "투데이" (Today) — a curated, cover-forward feed — is the default tab rather than a search box (play.google.com — 밀리의 서재, namu.wiki — 밀리의 서재).

The company grew into the dominant Korean reading-subscription platform and was acquired by KT (operated as ㈜kt 밀리의서재), anchoring it inside a major Korean telecom while it expanded into original content, audiobooks, and "밀리 오리지널" exclusives (millie.town — corporate). The brand voice and campaign work consistently lean into the idea of reading as a small, compounding daily habit — captured in the slogan "당신의 일상을 1밀리+", which turns the brand name into a unit of incremental daily growth (millie.insight.wanted.co.kr).

What Millie refuses: the cold catalog UX of legacy e-book stores, the high-pressure urgency of flash-sale commerce, and the institutional seriousness that makes reading feel like homework. Instead it borrows the warm, personalized, cover-forward posture of a video-streaming home screen and points it at books — soft rounded chrome, a calm reading blue, warm near-black type, and a feed that makes the next book always one scroll away.

12. Principles

1. The feed is the front door. The default surface is a personalized, cover-forward "투데이" feed, not a search box or a static catalog. UI implication: discovery surfaces lead with curated shelves; search is a tool, not the home.
2. Covers carry the color. Book cover art is the chromatic event; chrome stays neutral white and #f2f2f2. UI implication: never tint chrome to compete with covers; the brand blue appears only on interactive elements.
3. Warm, not clinical. Body and headings use warm near-black #242424, chrome is softly rounded, and shadows make covers feel physical. UI implication: never substitute pure #000 for body text; never flatten the cover shadow.
4. Calm over urgency. The subscription is sold as a relaxed habit, not a flash deal. UI implication: paywall and promo copy stay low-pressure; coral urgency tags are scarce and never aggressive.
5. Reading blue is interaction, not decoration. #1b6dda marks tappable elements — CTA, active tab, links. UI implication: if blue appears on a non-interactive surface, it has drifted; restate as neutral or a secondary content accent.
6. A streaming posture for books. Horizontal cover shelves, autoplay banners, personalized rows — the video-platform pattern reimagined for reading. UI implication: default to shelf carousels stacked vertically, not a flat paginated grid.

13. Personas

Personas are fictional archetypes informed by Millie's publicly described user base (Korean adults building a digital reading habit across e-books and audiobooks), not individual people.

지은 (Jieun), 32, Seoul. Marketing manager, commutes 40 minutes each way. Listens to audiobooks on the subway, reads e-books before bed. Opens the "투데이" feed nightly to see what's recommended. Subscribed after the 30-day free trial and never cancelled — the flat fee removed the friction of choosing what to buy.

현수 (Hyunsoo), 45, Daejeon. Office worker and father of two. Reads business and self-development titles; tracks his completion count like a fitness streak. Responds to gentle "오늘 5분만 읽어볼까요?" nudges. Values the warm, uncluttered interface — he finds dense catalog apps stressful.

유리 (Yuri), 24, Seoul. University student. Came for the magazines and 밀리 오리지널 exclusives, stayed for the audiobooks she plays while studying. Browses entirely on her phone, treats the cover feed like a Netflix home screen for books.

민재 (Minjae), 28, Busan. Software engineer. Skeptical of subscription creep but kept Millie because the unlimited model means he never hesitates to start a book he might abandon. Reads fiction in the reader view with a custom type size and a warm sepia background.

14. States

15. Motion & Easing

Durations (named, not raw milliseconds):

Easings:

Signature motions.

1. Hero autoplay. The "투데이" hero banner cross-fades between promotions on motion-autoplay dwell; a floating rgba(0,0,0,0.3) pill (자동 재생 중지) lets users pause. Transition is a soft cross-fade with ease-standard, never a hard cut.
2. Cover-to-detail. Tapping a cover lifts it (scale 1.0 → 1.02, motion-fast) then transitions into the detail view (motion-page / ease-enter); the cover shadow deepens slightly to imply pick-up.
3. Add-to-library confirm. A small gentle-spring bounce on the bookmark icon (ease-gentle-spring) plus the snackbar — the one place spring is licensed, and only gently.
4. Shelf scroll. Horizontal cover carousels use momentum scroll with soft snap to cover edges (motion-standard). No elastic overscroll bounce beyond the OS default.
5. Reduce motion. Under prefers-reduced-motion: reduce, autoplay pauses by default, all motion-* collapse to motion-instant, and cross-fades replace slides. The feed stays fully usable.

---

Verified: 2026-05-27 (omd:add-reference initial create — Tier 1 live inspect / Tier 2 press confirmed) Tier 1 sources: www.millie.co.kr ("투데이" live playwright inspect — Pretendard Variable, body #242424 on #fff, interactive blue #1b6dda, secondary purple #a451f7 / coral #ff5b4f / yellow #ffc004, surface #f2f2f2, border #ececec, category tab #333/10px, scrim pill 100px). Tier 2 sources: getdesign.md/millie — not checked. styles.refero.design — not checked. Google Play + millie.town + Wanted Insight + Namu Wiki (2017 reading-subscription launch, KT ownership, "독서와 무제한 친해지리" / "당신의 일상을 1밀리+" positioning, 밀리 오리지널). Style ref: toss (KR product tone scaffolding). Conflicts unresolved: Assumed primary #3D5AFE (from task brief) NOT confirmed — live inspect found dominant interactive blue #1b6dda. Resolved in favor of Tier 1 live value #1b6dda. Component-internal geometry reconciled from surface treatment; re-run Tier 2 (getdesign/refero) to lock token values.