oh-my-design-cli 1.5.0 → 1.6.0

package/web/references/millie/DESIGN.md

@@ -0,0 +1,533 @@
+---
+id: millie
+name: Millie
+display_name_kr: 밀리의서재
+country: KR
+category: education
+homepage: "https://www.millie.co.kr"
+primary_color: "#1b6dda"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=millie.co.kr&sz=128"
+verified: "2026-05-27"
+omd: "0.1"
+---
+
+# 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
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display | Pretendard | 28px | 700 | 38px | -0.4px | Editorial banner / original-content title |
+| Heading Large | Pretendard | 22px | 700 | 30px | -0.4px | Feed section title ("지금 인기 있는 책") |
+| Heading | Pretendard | 18px | 700 | 26px | -0.3px | Sub-section header, shelf label |
+| Title | Pretendard | 16px | 600 | 24px | -0.3px | Book detail title, modal header |
+| Body Large | Pretendard | 16px | 400 | 24px | -0.2px | Book description, reading text |
+| Body | Pretendard | 14px | 400 | 22px | -0.2px | Default body, listing metadata |
+| Tab Label | Pretendard | 14px | 600 | 20px | -0.2px | Active/inactive category tab |
+| Caption | Pretendard | 13px | 400 | 18px | -0.2px | Author / publisher, review counts |
+| Caption Bold | Pretendard | 13px | 700 | 18px | -0.2px | Badge / tag labels |
+| Micro | Pretendard | 12px | 500 | 16px | -0.2px | Fine print, control labels |
+
+### 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
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Page background, feed sections, default chrome |
+| Cover (Level 1) | `0px 2px 8px rgba(0,0,0,0.08)` | Book cover tiles — the signature lift that makes covers feel physical |
+| Soft (Level 2) | `0px 2px 12px rgba(0,0,0,0.10)` | Sticky header on scroll, dropdown menus |
+| Floating (Level 3) | `0px 4px 16px rgba(0,0,0,0.12)` | Bottom sheets, modal dialogs, snackbar |
+
+**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
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <768px | Vertical feed of horizontal cover shelves, bottom tab bar |
+| Tablet | 768-1024px | More covers per shelf, optional side margins |
+| Desktop | >1024px | Centered ~1080px column, 6-7 covers per shelf, top nav |
+
+### 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.
+
+| Context | Tone |
+|---|---|
+| CTAs | Inviting Korean (`무료체험 시작하기`, `지금 읽기`, `내 서재에 담기`) |
+| Subscription / paywall | Benefit-forward, low-pressure (`30일 무료로 둘러보세요`). Never `지금 결제하지 않으면 손해!`. |
+| Feed section headers | Warm editorial (`지금 인기 있는 책`, `오늘의 추천`, `밀리 오리지널`). |
+| Empty states | Gentle + suggestion (`아직 담은 책이 없어요` + `책 둘러보기`). Never `데이터가 없습니다`. |
+| Error messages | Blameless + actionable (`잠시 후 다시 시도해 주세요`). No `오류가 발생했습니다` boilerplate. |
+| Reading completion | Celebratory but quiet (`완독을 축하해요!`). |
+| Notifications | Habit nudges (`오늘 5분만 읽어볼까요?`), low-frequency, friendly. |
+
+**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. <!-- cited: play.google.com Millie listing, 2026-05 -->
+- `당신의 일상을 1밀리+` — brand campaign slogan playing on the brand name. <!-- cited: millie.insight.wanted.co.kr, 2026-05 -->
+- `밀리 오리지널` — original-content section label. <!-- illustrative: standard Millie content-category pattern -->
+- `완독을 축하해요!` — reading-completion celebration. <!-- illustrative: standard Millie habit-loop pattern -->
+- `무료체험 시작하기` — primary subscription CTA. <!-- illustrative: standard Millie CTA pattern -->
+
+## 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 — 밀리의 서재](https://play.google.com/store/apps/details?id=kr.co.millie.millieshelf), [namu.wiki — 밀리의 서재](https://namu.wiki/w/%EB%B0%80%EB%A6%AC%EC%9D%98%20%EC%84%9C%EC%9E%AC)).
+
+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](https://www.millie.town/)). 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](https://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
+
+| State | Treatment |
+|---|---|
+| **Empty (empty 내 서재)** | Single gentle line (`아직 담은 책이 없어요`) in 14px/400 `#6f6f6f`, 12px gap, primary-blue CTA `책 둘러보기`. No harsh empty illustration — optionally a soft small graphic. |
+| **Empty (search no results)** | One line `'{검색어}'에 대한 결과가 없어요` in 14px/400 `#6f6f6f`, then recommended shelves below. Never a full-screen dead-end. |
+| **Empty (filter cleared)** | `조건에 맞는 책이 없어요` in 14px/400 `#8b8b8b`. No CTA — user adjusts filters. |
+| **Loading (feed)** | Skeleton shelves at `#f2f2f2`: cover-rectangle placeholders in a row, two short text lines below each. Shimmer 1.2s, 6% white highlight. No spinner overlay. |
+| **Loading (cover art)** | `#f2f2f2` placeholder rectangle at the cover's 2:3 ratio with 6px radius until the image resolves. |
+| **Loading (subscribe action)** | Primary button text swaps to a 24px `#ffffff` spinner on the `#1b6dda` button — geometry unchanged for frame-stability. |
+| **Error (inline form)** | Input border becomes `#ff5b4f` 1px, helper text 13px/400 `#ff5b4f` below. One actionable sentence (`이메일을 다시 확인해 주세요`). |
+| **Error (toast)** | `#242424` background, white 14px/500 text, 8px radius, 3s auto-dismiss. Bottom of screen, 16px above bottom tab bar. One sentence. No icon. |
+| **Error (network / blocking)** | Centered: 16px/700 `#242424` headline (`연결이 불안정해요`), 14px/400 `#6f6f6f` subline, retry button in primary-blue style. |
+| **Success (added to library)** | Bottom snackbar: `#242424` bg, white 14px/500 `내 서재에 담았어요`, blue-text `보러가기` button on right. 3s auto-dismiss. |
+| **Success (book completed)** | Quiet celebration screen / sheet: `완독을 축하해요!` 22px/700 `#242424`, completion stat, optional share. Low-key, not confetti-heavy. |
+| **Skeleton** | `#f2f2f2` blocks at exact cover and text dimensions. Shimmer 1.2s. Title and author slots blank until resolved. |
+| **Disabled** | Button bg drops to `#c1c1c1`, text stays `#ffffff`. No outline tricks. |
+
+## 15. Motion & Easing
+
+**Durations** (named, not raw milliseconds):
+
+| Token | Value | Use |
+|---|---|---|
+| `motion-instant` | 0ms | Toggle flips, checkbox states |
+| `motion-fast` | 150ms | Hover, focus, button press dim, small reveals |
+| `motion-standard` | 240ms | Default — shelf scroll snaps, tab switches, card expand |
+| `motion-slow` | 360ms | Sheet presentations, completion-screen entry |
+| `motion-page` | 300ms | Route push/pop |
+| `motion-autoplay` | 5000ms | "투데이" hero-banner autoplay dwell |
+
+**Easings:**
+
+| Token | Curve | Use |
+|---|---|---|
+| `ease-enter` | `cubic-bezier(0.0, 0.0, 0.2, 1)` | Sheets, snackbars, route entries |
+| `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Dismissals, snackbar auto-close |
+| `ease-standard` | `cubic-bezier(0.4, 0.0, 0.2, 1)` | Two-way transitions — expandable cards, tab content |
+| `ease-gentle-spring` | `cubic-bezier(0.34, 1.2, 0.64, 1)` | Reserved — completion celebration, "담기" confirm bounce. Gentle, never bouncy. |
+
+**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.
+
+<!--
+OmD v0.1 Sources — Philosophy Layer (sections 10–15)
+
+Tier 1 — Direct verification (MCP playwright, 2026-05-27):
+- https://www.millie.co.kr/ (live "투데이" home surface). Confirmed:
+  body font-family "Pretendard Variable", "Pretendard Fallback", ...;
+  body color rgb(36,36,36) = #242424 (dominant, ~3,416 occurrences);
+  body bg #ffffff; interactive blue rgb(27,109,218) = #1b6dda
+  (~66 occurrences); secondary accents purple rgb(164,81,247) = #a451f7,
+  coral rgb(255,91,79) = #ff5b4f, yellow rgb(255,192,4) = #ffc004;
+  surface fill #f2f2f2; border #ececec; login chip #333 bg / 4px radius;
+  category tab #333 bg / 10px radius / 14px·600; floating scrim pill
+  rgba(0,0,0,0.3) / 100px radius.
+
+Tier 2 — Press / secondary (WebSearch, 2026-05):
+- https://play.google.com/store/apps/details?id=kr.co.millie.millieshelf
+  — "독서와 무제한 친해지리" positioning; reading-subscription model.
+- https://www.millie.town/ — corporate (㈜kt 밀리의서재), KT ownership.
+- https://millie.insight.wanted.co.kr/ — "당신의 일상을 1밀리+" slogan.
+- https://namu.wiki/w/밀리의 서재 — Korea's largest reading platform,
+  e-books / audiobooks / magazines, 밀리 오리지널 originals.
+
+ASSUMED-VS-VERIFIED NOTE: The task brief assumed primary blue #3D5AFE.
+Live inspect found the dominant interactive blue is #1b6dda
+(rgb(27,109,218)), NOT #3D5AFE. The DESIGN.md uses the live-verified
+#1b6dda as primary_color. The assumed #3D5AFE does not appear as a
+dominant token on the current live surface.
+
+Personas (§13) are fictional archetypes informed by Millie's publicly
+described user base (Korean adults building a digital reading habit).
+Any resemblance to specific individuals is unintended.
+
+Interpretive claims (editorial, not documented Millie statements):
+- "A streaming posture for books" framing (§11, §12) — editorial reading
+  of the cover-forward "투데이" feed pattern.
+- The 6 numbered principles (§12) — synthesized from observed surface
+  behavior + brand positioning; not a published design-principles list.
+- Component-internal geometry beyond the observed tokens (button padding,
+  card radii, shadow values) is reconciled from the live rounded-chrome
+  surface treatment; re-verify in a stable session before treating as
+  authoritative DS specs.
+- The spring stance (§15) — derived from the calm brand posture, not a
+  documented Millie motion rule.
+-->
+
+---
+
+**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.