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

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

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

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.

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.
• 당신의 취향이 세상을 바꿉니다 — Google Play subtitle / brand slogan.
• 좋은 아이디어를 가지고 있으신가요? — creator-invitation prompt.
• 후원하기 — primary back-this-project CTA.
• 152% 달성 — funding-progress label.

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, e27.co — Tumblbug profile). 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 — 텀블벅).

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

15. Motion & Easing

Durations (named, not raw milliseconds):

Easings:

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.

---

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.