oh-my-design-cli 1.3.9 → 1.5.1

package/web/references/tumblbug/DESIGN.md

@@ -0,0 +1,530 @@
+---
+id: tumblbug
+name: Tumblbug
+display_name_kr: 텀블벅
+country: KR
+category: consumer-tech
+homepage: "https://tumblbug.com"
+primary_color: "#fd5744"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=tumblbug.com&sz=128"
+verified: "2026-05-27"
+omd: "0.1"
+---
+
+# Design System Inspiration of Tumblbug (텀블벅)
+
+## 1. Visual Theme & Atmosphere
+
+Tumblbug is Korea's flagship creator-crowdfunding platform, and its interface is built to make a creative project feel worth backing -- warm, editorial, and almost entirely black-and-white so that the project's own imagery becomes the color. The page opens on a clean white canvas with pure black type (`#000000`) and a single signature coral (`#fd5744`) that flashes only on the moments that matter: the "후원하기" (back this project) CTA, funding-progress bars, and the percentage a project has raised. Everything else -- the dense card grid, the project thumbnails, the storytelling -- runs in disciplined monochrome, because on a crowdfunding page the creator's work has to be the brightest thing on screen.
+
+The aesthetic is editorial and content-forward, like a curated magazine of independent creative projects. Project cards sit in a clean grid with full-radius pill controls and rounded thumbnails, set in Pretendard at a tight 14px base. The single coral accent does the emotional work: it marks the act of supporting a creator, and it fills the funding-progress bar that turns a project's momentum into a visible, almost suspenseful number (`152% 달성`). The mood is supportive and a little romantic about creativity -- the platform's positioning is that your taste can change the world (`당신의 취향이 세상을 바꿉니다`), and the design treats every project as a small cultural bet worth making.
+
+What defines Tumblbug visually is the warm coral against rigorous black-and-white. The monochrome keeps the platform from competing with the creators' wildly varied project art (films, albums, books, games, illustration), while the coral provides a single consistent emotional cue -- *this is where you back the thing you love.* Pill-shaped buttons and rounded cards keep it friendly and human rather than corporate.
+
+**Key Characteristics:**
+- Tumblbug Coral (`#fd5744`) as the signature accent — "후원하기" CTA, funding bars, percentage raised
+- Pure black type (`#000000`) on white — monochrome so project art carries the color
+- Pretendard at a tight 14px base — editorial, content-forward density
+- Pill-shaped buttons (full radius) and rounded cards — warm, human, not corporate
+- Funding-progress bar as the signature component — momentum made visible in coral
+- Project thumbnails carry all the chromatic variety; chrome stays monochrome
+- Supportive, creativity-romantic voice — "당신의 취향이 세상을 바꿉니다"
+- Light gray `#f0f0f0` surface fills and hairline `#e4e4e4` borders for grid separation
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Tumblbug Coral** (`#fd5744`): The signature accent — "후원하기" CTA, funding-progress bar fill, percentage-raised emphasis, active states (observed `rgb(253,87,68)`, ~65 occurrences).
+- **Coral Light** (`#f86453`): Hover / lighter coral variant (observed `rgb(248,100,83)`).
+- **Coral Deep** (`#e53c41`): Pressed / deep accent variant (observed `rgb(229,60,65)`).
+- **Pure White** (`#ffffff`): Page canvas, card surfaces, button text on coral.
+- **Pure Black** (`#000000`): Primary heading + body text, secondary CTA fill (observed dominant — ~5,000+ occurrences).
+
+### Neutral Scale
+- **Gray 900** (`#1c1c1c`): Strong secondary text, near-black labels (observed `rgb(28,28,28)`).
+- **Gray 800** (`#3d3d3d`): Default body text on light surfaces (observed `rgb(61,61,61)`).
+- **Gray 600** (`#545454`): Secondary body, descriptions (observed `rgb(84,84,84)`).
+- **Gray 500** (`#6d6d6d`): Metadata, creator name, timestamps (observed `rgb(109,109,109)`).
+- **Gray 400** (`#9e9e9e`): Placeholder text, disabled labels (observed `rgb(158,158,158)`).
+- **Gray 200** (`#e4e4e4`): Default border, dividers (observed `rgb(228,228,228)`).
+- **Gray 100** (`#f0f0f0`): Secondary background, card fill, image placeholder (observed `rgb(240,240,240)`).
+- **Gray 50** (`#f6f6f6`): Lightest surface fill (observed `rgb(246,246,246)`).
+
+### Semantic
+- **Funding / Success Coral** (`#fd5744`): Funding-progress fill, "달성" success — the brand color doubles as the momentum/success cue.
+- **Error Red** (`#e53c41`): Error states, destructive actions (shares the deep-coral family).
+- **Soft Veil** (`rgba(0,0,0,0.04)`): Subtle hover / pressed surface tint (observed `oklab(0 0 0 / 0.1)` and `rgba(0,0,0,0.04)`).
+- **Scrim Dark** (`rgba(0,0,0,0.5)`): Modal scrim, image overlay (observed `oklab(0 0 0 / 0.5)`).
+
+### Borders
+- **Border Default** (`#e4e4e4`): Card outline, divider, input border.
+- **Hairline** (`#f0f0f0`): Subtle grid separation.
+- **Border Strong** (`#000000`): Selected filter chip, focused input, active tab underline.
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary**: `Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", Roboto, sans-serif` (observed body font-family `Pretendard` on live `tumblbug.com`, 2026-05)
+- **Design Principle**: No bespoke wordmark webfont on product surfaces. Pretendard at a tight 14px base carries the editorial density; weight contrast (400 / 700) builds hierarchy. Korean and Latin render co-equally. The monochrome type ensures project art is the only color.
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display | Pretendard | 28px | 700 | 38px | -0.4px | Editorial banner / featured project title |
+| Heading Large | Pretendard | 22px | 700 | 30px | -0.4px | Section header ("이번 주 인기 프로젝트") |
+| Heading | Pretendard | 18px | 700 | 26px | -0.3px | Project detail title, sub-section |
+| Title | Pretendard | 16px | 700 | 24px | -0.3px | Card project title |
+| Body Large | Pretendard | 16px | 400 | 24px | -0.2px | Project story body |
+| Body | Pretendard | 14px | 400 | 22px | -0.2px | Default body, card metadata |
+| Body Bold | Pretendard | 14px | 700 | 22px | -0.2px | Creator name, emphasis, nav |
+| Funding % | Pretendard | 16px | 700 | tight | -0.2px | "152% 달성" — coral, tabular |
+| Caption | Pretendard | 13px | 400 | 18px | -0.2px | Days-left, backer count, timestamps |
+| Caption Bold | Pretendard | 13px | 700 | 18px | -0.2px | Tag / badge labels |
+| Micro | Pretendard | 12px | 500 | 16px | -0.2px | Fine print, category labels |
+
+### Principles
+- **Tight editorial base**: Body defaults to 14px with `-0.2px` tracking — denser than a consumer app, optimized for scanning a magazine grid of projects.
+- **Two weights do the work**: Pretendard 400 (body) and 700 (titles / creator names / emphasis). The system trusts weight, not size, for hierarchy.
+- **Funding numbers are typography**: The percentage raised renders in 700 coral with tabular figures — it's the most-glanced, most-emotional data on a card.
+- **Monochrome type**: All text is black/gray except the funding percentage and links — color is reserved so project art and the coral CTA own the chromatic attention.
+- **Tight Korean tracking**: `-0.2px` to `-0.4px` keeps titles editorial-compact.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary (Coral, Pill)**
+- Background: `#fd5744`
+- Text: `#ffffff`
+- Border: none
+- Radius: 9999px (full pill)
+- Padding: 14px 24px
+- Font: 16px / 700 / Pretendard
+- Hover: `#f86453`
+- Pressed: `#e53c41`
+- Disabled: `#e4e4e4` background, `#9e9e9e` text
+- Use: Primary CTA — `후원하기`, `프로젝트 후원하기`, `이 리워드 선택`
+
+**Secondary (Black, Pill)**
+- Background: `#000000`
+- Text: `#ffffff`
+- Border: none
+- Radius: 9999px (full pill)
+- Padding: 14px 24px
+- Font: 16px / 700 / Pretendard
+- Hover: `#1c1c1c`
+- Use: Strong neutral action — `프로젝트 올리기`, `로그인`
+
+**Outline (Gray, Pill)**
+- Background: `#ffffff`
+- Text: `#545454`
+- Border: 1px solid `#e4e4e4`
+- Radius: 9999px (full pill)
+- Padding: 11.5px 16px
+- Font: 14px / 700 / Pretendard
+- Hover: `#f6f6f6` background
+- Use: Secondary actions — `창작자센터`, `공유하기`, `팔로우`
+
+**Ghost (Text)**
+- Background: transparent
+- Text: `#000000`
+- Border: none
+- Radius: 9999px
+- Padding: 8px 12px
+- Font: 14px / 700 / Pretendard
+- Hover: `rgba(0,0,0,0.04)` background
+- Use: Inline nav / utility action
+
+### Inputs
+
+**Default**
+- Background: `#ffffff`
+- Text: `#000000`
+- Border: 1px solid `#e4e4e4`
+- Radius: 8px
+- Padding: 12px 14px
+- Font: 14px / 400 / Pretendard
+- Placeholder: `#9e9e9e`
+- Focus: 1px solid `#000000`
+- Use: Default text input — login, project-create forms
+
+**Search**
+- Background: `#f0f0f0`
+- Text: `#000000`
+- Border: none
+- Radius: 9999px (pill search bar)
+- Padding: 12px 16px 12px 40px (left-pad for inline magnifier)
+- Font: 14px / 400 / Pretendard
+- Placeholder: `#6d6d6d` ("프로젝트, 창작자 검색")
+- Focus: `#ffffff` background, 1px solid `#000000` border
+- Use: Header search bar — pill-shaped to match the friendly chrome
+
+**Error**
+- Background: `#ffffff`
+- Text: `#000000`
+- Border: 1px solid `#e53c41`
+- Radius: 8px
+- Padding: 12px 14px
+- Font: 14px / 400 / Pretendard
+- Use: Form validation failure — helper text 13px/400 `#e53c41` below
+
+### Cards
+
+**Project Card**
+- Background: `#ffffff`
+- Border: none (hairline `#f0f0f0` at grid boundary)
+- Radius: 8px (rounded thumbnail + card)
+- Padding: 0px on image; 8-10px gap to metadata
+- Image: 4:3 or 1:1 thumbnail, 8px radius, `#f0f0f0` placeholder
+- Shadow: none
+- Use: Default project listing card — thumbnail, title, creator, funding % + bar
+
+**Featured Card (Editorial)**
+- Background: `#ffffff` (or full-bleed project image)
+- Border: none
+- Radius: 12px
+- Padding: 0px (image) / 16px (text block)
+- Use: Curated home-feed spotlight, "에디터의 선택"
+
+**Reward Card**
+- Background: `#ffffff`
+- Border: 1px solid `#e4e4e4`
+- Radius: 12px
+- Padding: 20px
+- Selected: 1.5px solid `#fd5744`
+- Use: Pledge-tier / reward selection on the project page
+
+### Funding Progress Bar
+
+**Progress Bar (signature component)**
+- Track: `#f0f0f0`
+- Fill: `#fd5744`
+- Border: none
+- Radius: 9999px (pill track + fill)
+- Height: 6-8px
+- Accompanying label: percentage in 16px/700 `#fd5744` tabular ("152% 달성"), backer count + days-left in 13px/400 `#6d6d6d`
+- Use: The emotional heart of every project card and detail page — momentum made visible
+
+### Badges & Tags
+
+**Category Tag (Default)**
+- Background: `#f0f0f0`
+- Text: `#545454`
+- Border: none
+- Radius: 9999px (pill)
+- Padding: 6px 12px
+- Font: 13px / 700 / Pretendard
+- Use: Category filter chips (출판, 게임, 음악, 디자인)
+
+**Category Tag (Selected)**
+- Background: `#000000`
+- Text: `#ffffff`
+- Border: none
+- Radius: 9999px (pill)
+- Padding: 6px 12px
+- Font: 13px / 700 / Pretendard
+- Use: Active category filter
+
+**Status Flag (Coral)**
+- Background: `#fd5744`
+- Text: `#ffffff`
+- Border: none
+- Radius: 4px
+- Padding: 3px 6px
+- Font: 11px / 700 / Pretendard
+- Use: "오픈예정", "마감임박" time-sensitive project flags
+
+**New / Editor Flag**
+- Background: `#ffffff`
+- Text: `#000000`
+- Border: 1px solid `#000000`
+- Radius: 4px
+- Padding: 3px 6px
+- Font: 11px / 700 / Pretendard
+- Use: "NEW", "에디터의 선택" — outline keeps the thumbnail dominant
+
+### Navigation
+- Top header: `#ffffff` background, ~64px height, hairline bottom border. Wordmark left (텀블벅), pill search center, `창작자센터` outline-pill + profile right.
+- Category nav: horizontal pill chips (홈 / 인기 / 신규 / 마감임박 / 카테고리), 14px/700, active = black-fill pill.
+- Bottom tab bar (mobile): `홈`, `검색`, `찜`, `마이`. Active label `#000000`, inactive `#9e9e9e`. Weight + black do the work; coral is reserved for the funding CTA.
+
+## 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 ~1200px
+- Inter-card spacing: 16-24px between project cards in the grid
+- Inter-section vertical spacing: 40-56px between editorial feed blocks
+
+### Grid & Container
+- Mobile: 1-2 column project grid
+- Tablet: 2-3 column project grid
+- Desktop: 3-4 column project grid, centered ~1200px column
+- Editorial spotlight: full-bleed on mobile, max 1200px on desktop
+- The project grid is the homepage — a curated magazine of creative projects
+
+### Whitespace Philosophy
+- **Thumbnails breathe**: White space between project cards is the primary rhythm — the monochrome chrome lets each thumbnail stand out.
+- **Editorial sections earn space**: 40-56px gaps mark curated shifts; within a section 16-24px suffices.
+- **The funding bar gets focus**: The progress bar + percentage sit with clear space so the momentum reads at a glance.
+
+### Border Radius Scale
+- Subtle (4px): Status flags, small badges
+- Standard (8px): Project cards, thumbnails, inputs
+- Soft (12px): Featured cards, reward cards
+- Pill (9999px): Buttons, category chips, search bar, funding-progress bar
+- Note: Tumblbug is a *friendly-rounded* system — full-pill buttons and chips keep it human and warm, distinct from corporate sharp-corner platforms.
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Page background, project thumbnails, default state |
+| Hairline (Level 1) | 1px solid `#f0f0f0` / `#e4e4e4` | Card / grid separation, header border |
+| Soft (Level 2) | `0px 2px 8px rgba(0,0,0,0.06)` | Sticky header on scroll, dropdown menus |
+| Floating (Level 3) | `0px 4px 16px rgba(0,0,0,0.10)` | Bottom sheets, modal dialogs, snackbar |
+
+**Shadow Philosophy**: Tumblbug keeps elevation minimal. Project thumbnails have no shadow — their boundary is the rounded image edge against white. Shadows appear only when an element must detach (sticky bar, modal). No brand-tinted shadows; the coral lives in fills and the funding bar, not in depth. Editorial restraint keeps the creators' project art dominant.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use Tumblbug Coral (`#fd5744`) for the "후원하기" CTA, funding bars, and percentage raised
+- Keep type monochrome (black/gray) — let project thumbnails be the color
+- Use full-pill radius on buttons, chips, and the search bar — friendly and human
+- Render the funding percentage in 700 coral with tabular figures
+- Default project cards to 8px rounded thumbnails on white, no shadow
+- Use black-fill pills for selected category chips and strong neutral CTAs
+- Give the funding-progress bar clear space — momentum at a glance
+
+### Don't
+- Don't introduce a second brand hue — coral is the only accent
+- Don't put coral on body text, navigation, or decoration — funding actions only
+- Don't sharpen buttons to 0-4px corners — full-pill is the friendly brand signal
+- Don't add shadows to project thumbnails — they compete with the art
+- Don't let chrome color compete with the project imagery
+- Don't bump body above 14-16px — the editorial grid wants density
+- Don't use coral for errors as decoration — reserve it for funding momentum
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <768px | 1-2 column grid, pill search, bottom tab bar |
+| Tablet | 768-1024px | 2-3 column grid, side filters appear |
+| Desktop | >1024px | 3-4 column grid, max ~1200px, persistent category nav |
+
+### Touch Targets
+- Primary CTA pill: 48-52px height
+- Category chips: 36-40px height
+- Bottom tab items: 56px height
+- Project card: full card (thumbnail + metadata) tap area
+
+### Collapsing Strategy
+- Desktop side filters → mobile bottom-sheet filter
+- Desktop 4-column grid → mobile 1-2 column grid
+- Project detail: desktop two-column (story + sticky reward sidebar) → mobile single-column with sticky bottom coral CTA
+
+### Image Behavior
+- Project thumbnails: 4:3 or 1:1, 8px radius, lazy-loaded with `#f0f0f0` placeholder
+- Creator avatars: circular, 32-40px
+- Editorial covers: 16:9 or full-bleed, scrim for overlaid text
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary CTA: Tumblbug Coral (`#fd5744`)
+- CTA Hover: Coral Light (`#f86453`)
+- CTA Pressed: Coral Deep (`#e53c41`)
+- Background: Pure White (`#ffffff`)
+- Heading text: Pure Black (`#000000`)
+- Body text: Gray 800 (`#3d3d3d`)
+- Metadata: Gray 500 (`#6d6d6d`)
+- Placeholder: Gray 400 (`#9e9e9e`)
+- Border: Gray 200 (`#e4e4e4`)
+- Surface fill: Gray 100 (`#f0f0f0`)
+- Funding bar fill: Coral (`#fd5744`)
+- Funding bar track: Gray 100 (`#f0f0f0`)
+
+### Example Component Prompts
+- "Create a Tumblbug project card: white bg, no shadow, 8px radius. 4:3 thumbnail with 8px radius, #f0f0f0 placeholder. Below: 8px gap, creator name 13px/700 #3d3d3d, title 16px/700 #000000 (2 lines, ellipsis), 8px gap, funding bar (track #f0f0f0, fill #fd5744, 6px, pill radius) + '152% 달성' 16px/700 #fd5744 tabular + '32일 남음' 13px/400 #6d6d6d."
+- "Build a primary CTA: #fd5744 bg, white text, 16px weight 700 Pretendard, padding 14px 24px, full-pill radius (9999px). Hover #f86453, pressed #e53c41. Label '후원하기'."
+- "Design a category chip bar: horizontal scroll, 8px gap. Default: #f0f0f0 bg, #545454 13px/700, full-pill, 6px 12px padding. Selected: #000000 bg, white text."
+- "Create a Tumblbug header: white bg, 64px height, hairline bottom border #f0f0f0. Left: 텀블벅 wordmark 700 #000000. Center: pill search #f0f0f0 bg, 9999px radius, placeholder #6d6d6d. Right: 창작자센터 outline-pill (1px #e4e4e4, #545454 14px/700) + profile."
+- "Design a funding progress bar: pill track #f0f0f0 6px tall, coral #fd5744 fill, percentage label '78% 달성' in 16px/700 #fd5744 tabular, backer count + days-left in 13px/400 #6d6d6d below."
+
+### Iteration Guide
+1. Coral `#fd5744` is the sole accent — 후원하기 CTA, funding bar, percentage raised
+2. Type is monochrome black/gray; project thumbnails carry the color
+3. Full-pill radius on buttons, chips, search bar — friendly and human
+4. Funding percentage: 700 weight, coral, tabular figures
+5. Project cards: 8px rounded thumbnails on white, no shadow
+6. Body 14px tight `-0.2px` tracking — editorial grid density
+7. Black-fill pills for selected chips and strong neutral CTAs
+
+---
+
+## 10. Voice & Tone
+
+Tumblbug speaks like an encouraging curator who believes in independent creators and wants you to believe too — warm, supportive, and a little romantic about the power of taste and culture. The voice celebrates the creator and invites the backer into a shared bet on something new. Korean copy uses friendly, inviting endings (`-요`, `-해요`) and warm imperatives (`후원하기`, `프로젝트 올리기`). The platform's positioning — *당신의 취향이 세상을 바꿉니다* (your taste changes the world) — frames backing a project as a small act of cultural participation, not a transaction.
+
+| Context | Tone |
+|---|---|
+| CTAs | Warm Korean (`후원하기`, `프로젝트 올리기`, `이 리워드 선택`, `팔로우`) |
+| Funding status | Encouraging momentum (`152% 달성`, `32일 남음`, `1,204명이 후원했어요`). |
+| Creator invitation | Inspiring, low-barrier (`좋은 아이디어를 가지고 있으신가요?`). |
+| Empty states | Gentle + suggestion (`아직 찜한 프로젝트가 없어요` + `프로젝트 둘러보기`). Never `데이터가 없습니다`. |
+| Error messages | Blameless + actionable (`다시 시도해 주세요`). No `오류가 발생했습니다` boilerplate. |
+| Project story | Creator's own voice — the platform stays out of the way, lets makers sound like makers. |
+| Pledge confirmation | Celebratory + grateful (`후원해 주셔서 감사해요!`). |
+
+**Forbidden phrases.** `대박 펀딩!!!`, `지금 안 하면 후회`, `초대박 프로젝트`, `데이터가 없습니다`, `오류가 발생했습니다`, `불편을 드려 죄송합니다`. The brand sells creative participation, not hype or scarcity-pressure. Emoji are welcome in creator stories and community, but not in error states or chrome microcopy.
+
+**Voice samples.**
+
+- `크리에이터를 위한 크라우드펀딩` — homepage / product positioning. <!-- cited: live tumblbug.com, 2026-05 -->
+- `당신의 취향이 세상을 바꿉니다` — Google Play subtitle / brand slogan. <!-- cited: play.google.com Tumblbug listing, 2026-05 -->
+- `좋은 아이디어를 가지고 있으신가요?` — creator-invitation prompt. <!-- cited: tumblbug.com homepage, 2026-05 -->
+- `후원하기` — primary back-this-project CTA. <!-- illustrative: standard Tumblbug CTA pattern -->
+- `152% 달성` — funding-progress label. <!-- illustrative: standard Tumblbug funding-status pattern -->
+
+## 11. Brand Narrative
+
+Tumblbug (텀블벅) is Korea's leading creator-focused crowdfunding platform, where cultural creators across film, music, art, publishing, illustration, design, games, and more present projects and supporters pledge to fund them ([en.namu.wiki — Tumblbug](https://en.namu.wiki/w/%ED%85%80%EB%B8%94%EB%B2%85), [e27.co — Tumblbug profile](https://e27.co/startups/tumblbug/)). Where Western crowdfunding skews toward gadgets and hardware, Tumblbug built its identity around independent *creative* and cultural work — a magazine of art-and-culture projects you can help bring into the world. The platform's tagline frames the act of backing as cultural agency: *당신의 취향이 세상을 바꿉니다* — your taste changes the world ([play.google.com — 텀블벅](https://play.google.com/store/apps/details?id=com.tumblbug.app)).
+
+The design follows from that creative-first positioning. Because the projects span every visual genre imaginable — a graphic novel, an indie album, a board game, a documentary — the platform itself stays monochrome so it never clashes with the creators' art. The single warm coral `#fd5744` provides one consistent emotional cue: the funding-progress bar and the "후원하기" button, the two moments where a backer's support turns into a project's momentum. Full-pill buttons and rounded thumbnails keep the chrome friendly and human, matching a community built on enthusiasm rather than commerce.
+
+What Tumblbug refuses: the gadget-catalog feel of hardware crowdfunding, the cold conversion-optimized urgency of e-commerce, and any chrome that competes with the creator's work. Its bet is emotional — that people will fund culture they believe in — and the design's job is to make that belief visible: the project art front and center, the momentum rising in coral, and one warm button that says *back this.*
+
+## 12. Principles
+
+1. **The creator's work is the color.** The platform is monochrome so project art across every genre stands out. *UI implication:* keep chrome black/white; never tint it to compete with thumbnails.
+2. **One coral, for momentum.** `#fd5744` marks the funding bar, the percentage, and the back-this CTA — the moments of support. *UI implication:* if coral appears on navigation or decoration, it has drifted; reserve it for funding actions.
+3. **Momentum made visible.** The funding-progress bar and percentage are the emotional heart of every card. *UI implication:* the bar gets clear space and the percentage renders in 700 coral tabular — never bury the momentum.
+4. **Friendly, human chrome.** Full-pill buttons and rounded cards signal a creative community, not a corporate store. *UI implication:* default buttons and chips to pill radius; sharp corners read as transactional.
+5. **The platform stays out of the way.** In project stories, the creator's voice and imagery lead. *UI implication:* storytelling surfaces minimize chrome and let makers sound like makers.
+6. **Belief over urgency.** Backing is framed as cultural participation, not a scarcity-driven purchase. *UI implication:* copy avoids hype and pressure; momentum is shown, never shouted.
+
+## 13. Personas
+
+*Personas are fictional archetypes informed by Tumblbug's publicly described user base (Korean creators and culture-loving backers across art, publishing, music, games, and more), not individual people.*
+
+**소영 (Soyoung), 26, Seoul.** Illustrator funding her first art book on Tumblbug. Spent weeks crafting the project story and reward tiers; refreshes the coral funding bar obsessively as it climbs past 100%. Chose Tumblbug because it's where Korean indie creators and their audiences actually are.
+
+**준영 (Junyoung), 33, Seoul.** Board-game enthusiast and frequent backer. Browses the 마감임박 (ending-soon) section for projects to support before they close. Backs 2-3 projects a month — treats it as collecting culture he believes in, not shopping.
+
+**하늘 (Haneul), 29, Busan.** Indie musician crowdfunding a first album. Shares the project link on Instagram; the monochrome card with the rising coral percentage looks clean in her feed. Values that the platform showcases her cover art rather than burying it in chrome.
+
+**도윤 (Doyoon), 22, Seoul.** University student who discovered Tumblbug through a friend's webcomic project. Backed it for the reward, stayed to browse other creative projects. Reads project stories like a magazine, finds the supportive tone genuinely motivating.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (no liked projects)** | Single line (`아직 찜한 프로젝트가 없어요`) in 14px/400 `#545454`, 12px gap, outline-pill CTA `프로젝트 둘러보기`. No harsh empty illustration. |
+| **Empty (search no results)** | One line `'{검색어}'에 대한 결과가 없어요` 14px/400 `#545454`, then recommended projects below. Never a dead-end. |
+| **Empty (filter cleared)** | `조건에 맞는 프로젝트가 없어요` 14px/400 `#6d6d6d`. No CTA — user adjusts filters. |
+| **Loading (project grid)** | Skeleton cards at `#f0f0f0`: thumbnail rectangle (8px radius), title line, a funding-bar placeholder line. Shimmer 1.2s, 6% white highlight. No spinner overlay. |
+| **Loading (infinite scroll)** | 2-4 skeleton cards appended at grid bottom. Existing cards stay rendered. No spinner. |
+| **Loading (pledge action)** | Coral button text swaps to a 24px `#ffffff` spinner on the existing `#fd5744` pill — geometry unchanged for frame-stability. Prevents double-pledge. |
+| **Error (inline form)** | Input border `#e53c41` 1px, helper text 13px/400 `#e53c41` below. One actionable sentence. |
+| **Error (toast)** | `#000000` background, white 14px/500 text, 8px radius, 3s auto-dismiss. Bottom of screen. One sentence, no icon. |
+| **Error (network / blocking)** | Centered: 16px/700 `#000000` headline, 14px/400 `#6d6d6d` subline, coral retry pill. No illustration. |
+| **Success (project liked)** | Bottom snackbar: `#000000` bg, white 14px/500 `찜한 프로젝트에 담았어요`, white-text `보러가기` on right. 3s auto-dismiss. |
+| **Success (pledge complete)** | Dedicated confirmation screen: `후원해 주셔서 감사해요!` 22px/700 `#000000`, pledge summary card, the project's updated coral funding bar, `프로젝트 보기` CTA. Warm, grateful — a modest celebration. |
+| **Funding goal reached** | The coral funding bar fills past 100%; the percentage label stays coral and may gain a small "달성" status flag. The moment is celebrated quietly on the card, not with confetti spam. |
+| **Skeleton** | `#f0f0f0` blocks at exact card dimensions, shimmer 1.2s. Title and funding slots blank until resolved. |
+| **Disabled** | Pill bg drops to `#e4e4e4`, text `#9e9e9e`. 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` | 220ms | Default — card taps, tab switches, dropdown reveals |
+| `motion-slow` | 320ms | Sheet presentations, success-screen entry |
+| `motion-page` | 280ms | Route push/pop |
+| `motion-fund` | 600ms | Funding-bar fill animation on load |
+
+**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 — cards, tab content |
+| `ease-fund` | `cubic-bezier(0.22, 1, 0.36, 1)` | Funding-bar fill — confident ease-out so momentum reads as it settles |
+
+**Signature motions.**
+
+1. **Funding-bar fill.** On a card / detail load, the coral fill animates from 0 to its current percentage over `motion-fund` with `ease-fund` — momentum that *arrives* with confidence. The number counts up in sync. The one place the system invests motion on emotion.
+2. **Pledge confirm.** On a successful pledge, the project's funding bar nudges forward with a brief `ease-fund` step and the grateful confirmation screen enters (`motion-slow / ease-enter`). Modest, warm — no confetti spam.
+3. **Card tap.** Thumbnail dims to 94% opacity on press (`motion-fast / ease-standard`), releases on tap-up. The card does not scale — scale on a magazine grid breaks the editorial metaphor.
+4. **Filter sheet.** Bottom sheet rises from `y+40px` (`motion-standard / ease-enter`) with a backdrop fade to `rgba(0,0,0,0.5)`. Dismissal `motion-fast / ease-exit`.
+5. **Reduce motion.** Under `prefers-reduced-motion: reduce`, the funding bar renders at its final fill with no count-up animation, all `motion-*` collapse to `motion-instant`, cross-fades replace slides. The platform stays fully usable.
+
+<!--
+OmD v0.1 Sources — Philosophy Layer (sections 10–15)
+
+Tier 1 — Direct verification (MCP playwright, 2026-05-27):
+- https://tumblbug.com/ (live home surface). Confirmed: body
+  font-family "Pretendard"; body color rgb(0,0,0) (dominant black,
+  ~5,173 occurrences); base size 14px; signature accent rgb(253,87,68)
+  = #fd5744 (~65 occurrences) with lighter rgb(248,100,83) = #f86453
+  and deep rgb(229,60,65) = #e53c41; grays rgb(61,61,61)/rgb(84,84,84)/
+  rgb(109,109,109)/rgb(158,158,158); borders rgb(228,228,228) /
+  rgb(240,240,240); surface fill rgb(246,246,246); pill controls
+  (border-radius ~9999px observed as 3.35544e+07px clamp); outline-pill
+  "창작자센터" #fff bg / #545454 / 30px radius / 14px·700; modal scrim
+  oklab(0 0 0 / 0.5).
+
+Tier 2 — Press / secondary (WebSearch, 2026-05):
+- https://en.namu.wiki/w/텀블벅 — Korean crowdfunding for art/culture
+  creators across film, music, art, publishing, design, games, etc.
+- https://e27.co/startups/tumblbug/ — startup profile, creative/cultural
+  crowdfunding positioning.
+- https://play.google.com/store/apps/details?id=com.tumblbug.app
+  — "당신의 취향이 세상을 바꿉니다" slogan; creator crowdfunding.
+- https://tumblbug.com/start — "프로젝트 시작하기" creator entry;
+  "좋은 아이디어를 가지고 있으신가요?" invitation copy.
+
+ASSUMED-VS-VERIFIED NOTE: The task brief assumed coral #FF5A5F. Live
+inspect found the signature coral is #fd5744 (rgb(253,87,68)) — very
+close to but distinct from the assumed value. This DESIGN.md uses the
+live-verified #fd5744 as primary_color.
+
+Personas (§13) are fictional archetypes informed by Tumblbug's publicly
+described user base (Korean creators + culture-loving backers). Any
+resemblance to specific individuals is unintended.
+
+Interpretive claims (editorial, not documented Tumblbug statements):
+- "Momentum made visible" / "belief over urgency" framing (§1, §11,
+  §12) — editorial reading of the funding-bar + creative-first
+  positioning.
+- The 6 numbered principles (§12) — synthesized from observed surface
+  behavior + the creative-crowdfunding positioning; not a published
+  design-principles list.
+- Component-internal geometry beyond observed tokens (card radii, badge
+  values, progress-bar height, shadow specs) is reconciled from the
+  live pill-and-rounded monochrome surface; re-verify in a stable
+  session before treating as authoritative DS specs.
+- The funding-bar motion (§15) — derived from the momentum-centric
+  product posture, not a documented Tumblbug motion rule.
+-->
+
+---
+
+**Verified:** 2026-05-27 (omd:add-reference initial create — Tier 1 live inspect / Tier 2 press confirmed)
+**Tier 1 sources:** tumblbug.com (live playwright inspect — Pretendard, body `#000` base 14px, signature coral `#fd5744` + `#f86453` + `#e53c41`, gray scale `#3d3d3d`/`#6d6d6d`/`#9e9e9e`, borders `#e4e4e4`/`#f0f0f0`, surface `#f6f6f6`, full-pill controls, outline-pill 창작자센터 30px/14px·700, scrim oklab 0.5).
+**Tier 2 sources:** getdesign.md/tumblbug — not checked. styles.refero.design — not checked. Namu Wiki + e27 + Google Play + tumblbug.com/start (Korean creative-crowdfunding positioning, "당신의 취향이 세상을 바꿉니다", creator-invitation copy).
+**Style ref:** `musinsa` (KR monochrome editorial neighbor format retained for tone scaffolding).
+**Conflicts unresolved:** Assumed coral `#FF5A5F` (from task brief) refined to live-verified `#fd5744` (rgb(253,87,68)). Component-internal geometry reconciled from surface treatment; re-run Tier 2 (getdesign/refero) to lock token values.