Design System Inspiration of PeopleFund

1. Visual Theme & Atmosphere

PeopleFund (피플펀드), now rebranded as 크플 (Cple), is Korea's online P2P real-estate lending and investment platform, and its design system reads as a confident, minimal financial product with a single bold accent: the brand amber #ffc32d. The canvas is pure white (#ffffff) with a soft cool-grey body background (#f6f6f6) segmenting content into breathable zones. Text is set in near-pure black (#000000) — not a warmed navy or charcoal — projecting directness and legibility over refinement. The amber appears almost exclusively on status badges (NOTICE, HOT, NEW, 마감임박) where it punches through the monochromatic field to signal urgency and brand identity simultaneously.

The typographic personality is anchored entirely in Pretendard — Korea's de facto product font — at a consistent SemiBold (weight 600) for all headings and quieter weight 400-600 for body and UI. Headings compress tightly: H2 at 29px with -0.4px letter-spacing, H3 at 23px with -0.3px — a controlled but not extreme scale. The system avoids hero-sized display type; the largest visible heading in the live homepage is 29px, giving the product an information-dense, data-board feel appropriate for a P2P investment platform rather than a mass-market consumer app.

What defines PeopleFund's visual character is its flatness and restraint. There are essentially no drop shadows; the invest-page background (#f5f5f5) and the homepage grey (#f6f6f6) do separation work by tint alone. The product cards are white on grey — clean and scannable. The dark footer (#263238) grounds the page. The amber status label is a surgical accent: one color, maximum signal, deployed only where real urgency exists (a product 95% funded, a NOTICE, a HOT ranking). This is a fintech brand that trusts data density over decoration.

Key Characteristics:

• Pretendard SemiBold (weight 600) for all headings — consistent, legible, Korean-optimized
• Pure black (#000000) body text — no warm navy or grey subtlety; directness is the value
• Single brand amber (#ffc32d) reserved for status and urgency signals
• Flat depth: no shadows; separation via #f6f6f6 surface tint
• White cards on grey body — data-board aesthetic for an investment platform
• Tight negative tracking on headings (-0.4px at 29px, -0.3px at 23px and 19px)
• Dark charcoal (#2e303b) for secondary UI text (nav links, action buttons)
• Dark blue-grey footer (#263238) — grounding anchor
• Primary CTA "상품 보러가기": white button, black text, zero radius — deliberately un-styled

2. Color Palette & Roles

Primary

• Brand Amber (#ffc32d): The single saturated brand accent. Deployed exclusively on status badges (NOTICE, HOT, NEW, 마감임박) to signal urgency on investment listings. Confirmed in Tailwind source class bg-[#FFC32D].
• Pure Black (#000000): Primary body text, heading text, and text on the amber badge. Chosen for maximum legibility contrast with white and grey surfaces.
• Pure White (#ffffff): Canvas, card surfaces, nav background, and button backgrounds.

Neutral & Surface

• Surface Grey (#f6f6f6): Body background on the new homepage. Provides gentle section separation without harsh borders.
• Surface Alt (#f5f5f5): Body background on the invest product listing page — a nearly identical grey variant.
• Hairline (#d0d8dc): Border color on outline buttons (signup/login) and form inputs. The primary separation device in UI chrome.
• Charcoal (#2e303b): Secondary UI text — used for nav link labels and action button text where pure black would be too stark against the white button background.

Text Hierarchy

• Pure Black (#000000): Primary headings and body text throughout the new homepage.
• Ink Secondary (#2e2e2e): Slightly softened dark for body text in legacy areas.
• Muted Grey (#6a6a6a): Secondary body text on the invest listing page — the workhorse muted color for descriptions, metadata, footer text.
• Muted Light (#90a4af): Light muted for lowest-emphasis elements, placeholders.

Semantic & Dark

• Footer Dark (#263238): Dark blue-grey footer background. Professional, grounding, financial-grade.
• Error Red (#ff4d4f): Error and warning states. Measured intensity — not alarming but clearly negative.
• Success Green (#37c94d): Success / completion states on transaction-level feedback.
• Progress Blue (#2054ae): Accent for funded-percentage progress bars on investment cards. A secondary accent outside the amber primary.

3. Typography Rules

Font Family

• Primary: Pretendard, with fallback Lato, "Noto Sans KR", sans-serif
• Pretendard is used for every text level — headings, body, nav, buttons. No secondary display font.

Hierarchy

Principles

• Single font system: Pretendard does everything. No separate display or monospace font is visible on the main product surfaces.
• Weight 600 as the heading anchor: All headings use SemiBold. There is no ExtraBold (800) headline, unlike more expressive KR fintechs like Finda or Toss.
• Tight tracking at display sizes: -0.4px at 29px, -0.3px at 23px and 19px. Headlines compress but not dramatically — a measured, professional cadence.
• 400 for body and nav action buttons: The split between 600 (heading/CTA) and 400 (body/nav-action) is the system's primary hierarchy signal.

4. Component Stylings

Buttons

Primary CTA (View Products)

• Background: #ffffff
• Text: #000000
• Radius: 0px
• Height: 46px
• Font: 15px Pretendard weight 600
• Use: "상품 보러가기" (View Products) CTA on each investment card in the hero carousel

Nav Action Outline

• Background: #ffffff
• Text: #2e303b
• Border: 1px solid #d0d8dc
• Radius: 10px
• Padding: 0px 20px
• Height: 50px
• Font: 16px Pretendard weight 400
• Use: Header signup (투자회원가입) and login (로그인) actions

Dark Pill (Contact)

• Background: rgba(0, 0, 0, 0.2)
• Text: #000000
• Border: 1px solid rgba(255, 255, 255, 0.2)
• Radius: 30px
• Padding: 17px 32px
• Height: 58px
• Font: 16px Pretendard weight 400
• Use: Phone number (1600-9613) and FAQ pill buttons on the dark hero section

Inputs

Default

• Background: #ffffff
• Border: 1px solid #d0d8dc
• Radius: 10px
• Font: 16px Pretendard weight 400
• Use: Standard form inputs for signup, login, and investment flow

Cards & Containers

Product Card

• Background: #ffffff
• Text: #000000
• Radius: 8px
• Use: Investment listing cards on the product board — white on #f6f6f6 grey background, no shadow

Feature Card

• Background: #f6f6f6
• Text: #000000
• Radius: 8px
• Use: Homepage feature highlight sections (three attraction points)

Badges & Tags

Status Badge (Amber)

• Background: #ffc32d
• Text: #000000
• Radius: 0px
• Padding: 3px 6px
• Font: 12px Pretendard weight 600
• Use: Investment product status labels — NOTICE, HOT, NEW, 마감임박 (Near-close)

Progress Badge (Blue)

• Background: #2054ae
• Text: #ffffff
• Radius: 4px
• Font: 12px Pretendard weight 400
• Use: Funded-percentage status on investment card listings

Navigation

• Background: #ffffff
• Height: 80px header
• Text: #2e303b, 16px Pretendard weight 500
• Active: text #000000 bold on active nav item
• Right actions: outline signup and login buttons
• Use: Top horizontal sticky nav

---

Verified: 2026-07-02 Tier 1 sources: https://peoplefund.co.kr/ (redirects to https://www.cple.co.kr/ — homepage live computed style), https://tech.peoplefund.co.kr/ (PeopleFund engineering tech blog) Tier 2 sources: getdesign.md/peoplefund — not found; styles.refero.design/?q=peoplefund — not found (KR brand, typical Tier-2 gap) Conflicts unresolved: none

5. Layout Principles

Spacing System

• Base unit: ~4px
• Scale: 3px, 6px, 12px, 20px, 32px, 48px, 64px
• Notable: Card horizontal padding 20px; section vertical gap 48–64px; tight body padding reflecting dense investment-data presentation

Grid & Container

• Centered single-column hero with investment product carousel as the anchor
• Product listing section: horizontal scrolling card row (visible on homepage)
• Feature sections: 3-up grid (three attraction points)
• Full-width dark sections (#000000 bg) for "Contact us" callouts with white text H3 headings
• White sections alternate with #f6f6f6 tinted sections for separation

Whitespace Philosophy

• Data density over breathing room: the product serves investors who want to scan multiple investment options; the layout is relatively dense with information
• Flat separation: #f6f6f6 vs #ffffff bands do all separation work, no shadow elevation
• Single accent per screen: the amber #ffc32d on status badges is the only saturated color; everything else is white, grey, black, and charcoal — so the amber always reads immediately

Border Radius Scale

• Zero (0px): Primary CTA buttons — deliberately raw and un-styled
• Small (10px): Nav outline action buttons, form inputs
• Medium (8px): Cards and containers — the workhorse
• Pill (30px): Contact/phone/FAQ pill buttons in the dark hero section

6. Depth & Elevation

Shadow Philosophy: PeopleFund is a flat, near-shadowless system. Live DOM inspection found box-shadow: none across all visible elements. Depth and grouping come from tinted background bands (#f6f6f6) and thin #d0d8dc hairline borders. This is a deliberate choice for a P2P investment platform: flat UIs load faster on mobile and avoid the "bank software" heaviness that can reduce trust perception in the crowdfunding-adjacent segment. The amber badge does the hierarchy work that shadows would otherwise do.

7. Do's and Don'ts

Do

• Use Pretendard SemiBold (weight 600) for all headings — it is the single heading anchor
• Reserve amber (#ffc32d) for urgency and status signals — NOTICE, HOT, NEW, 마감임박
• Separate sections with flat tinted surfaces (#f6f6f6) and #d0d8dc hairlines, not shadows
• Use pure black (#000000) for primary text — directness is the brand value
• Use charcoal (#2e303b) for secondary UI chrome (nav text, button text) to soften pure black in interactive contexts
• Apply tight negative letter-spacing to headings (-0.4px at 29px, -0.3px at 23px)
• Use 0px radius on the primary product CTA button — its un-styled nature signals content confidence

Don't

• Spread amber across decorative elements — dilutes the urgency signal
• Use drop shadows for elevation — PeopleFund is a flat system
• Use a second accent color outside #ffc32d and #2054ae — palette discipline is the system's restraint
• Apply large pill radius to product cards or standard buttons — only contact/phone pill buttons use 30px
• Use display-size type (48px+) — the system's max heading is 29px; density over drama
• Use light font weights (300 or below) for headings — SemiBold (600) is the minimum heading weight
• Use warm-tinted greys for text — #000000 and #2e303b are the text colors; keep them cool and direct

8. Responsive Behavior

Breakpoints

Touch Targets

• Product "상품 보러가기" buttons: 46px height — comfortable for tap
• Nav action buttons: 50px height with 20px horizontal padding — generously tappable
• Contact pill buttons: 58px height — large hit area for phone number tap

Collapsing Strategy

• Hero investment carousel: multi-card horizontal scroll → single centered card on mobile
• H2 headings maintain 29px on mobile (size scale is conservative enough to not compress further)
• Feature 3-up grid → stacked single column on mobile
• Footer: multi-column links collapse to stacked single column

Image Behavior

• Investment product images carry no shadow at any size — consistent with flat system
• Cards maintain 8px radius across breakpoints

9. Agent Prompt Guide

Quick Color Reference

• Brand accent / status: PeopleFund Amber (#ffc32d)
• Background: Pure White (#ffffff)
• Tinted surface: Surface Grey (#f6f6f6)
• Primary text: Pure Black (#000000)
• Secondary UI text: Charcoal (#2e303b)
• Muted text: Muted Grey (#6a6a6a)
• Hairline: #d0d8dc
• Footer: Dark Blue-Grey (#263238)
• Error: #ff4d4f
• Success: #37c94d
• Progress/accent: Blue (#2054ae)

Example Component Prompts

• "Create a hero section on white background. Section heading 29px Pretendard SemiBold (600), letter-spacing -0.4px, color #000000. Below it, a product card row: white #ffffff cards on #f6f6f6 surface, 8px radius. Amber status badge #ffc32d, black text, 0px radius, 3px 6px padding, 12px 600. CTA button: white bg, black text, 0px radius, 15px 600, 46px height — 'View Products'."
• "Design a product card: white #ffffff background, 8px radius, no shadow. Title 19px Pretendard weight 600 -0.3px tracking, black. Metadata 16px weight 400 #6a6a6a. Amber badge top-left #ffc32d for status. Progress indicator in blue #2054ae."
• "Build top nav: white 80px header. Pretendard 16px weight 500 links, #2e303b text. Two outline action buttons: white bg, #2e303b text, 10px radius, 50px height, 1px solid #d0d8dc border, 16px weight 400 — 투자회원가입, 로그인."
• "Create a dark hero callout section: #000000 background, white text. H3 heading 23px Pretendard 600 -0.3px, white. Two pill contact buttons: rgba(0,0,0,0.2) bg, black text, 1px solid rgba(255,255,255,0.2) border, 30px radius, 58px height, 16px weight 400."

Iteration Guide

1. Pretendard SemiBold (600) for every heading; Pretendard 400 for body and nav actions
2. Amber (#ffc32d) is for urgency signals only — NOTICE, HOT, NEW, 마감임박
3. No shadows — separate with #f6f6f6 tint and #d0d8dc hairlines
4. CTA button is 0px radius — un-styled white on dark bg sections
5. Charcoal #2e303b for secondary UI text, not pure black
6. Negative tracking on headings: -0.4px at 29px, -0.3px at 23px and 19px
7. Footer always #263238 dark blue-grey

---

10. Voice & Tone

PeopleFund's voice is direct, data-forward, and quietly ambitious — a platform that speaks to investors as rational adults who want yields and returns, not lifestyle aspirations. The homepage title "크플 - 대한민국 최상위 온투금융(투자, 대출)" (크플 - Korea's Top Online Investment Finance) sets the register: declarative, superlative in claim but specific in domain. The section headline "폭풍성장 크플" ("Storm-growth Cple") reads as bold shorthand for performance, not hype. Copy is dense and numeric — funding percentages (95.1%), product codes (21548호), annualized return rates — because the user is here to decide whether to commit capital.

Voice samples (verbatim from live homepage):

• "크플 - 대한민국 최상위 온투금융(투자, 대출)" — page title (domain authority claim). (verified live 2026-07-02)
• "폭풍성장 크플" — section heading (performance claim, colloquial strength). (verified live 2026-07-02)
• "세 가지 매력 포인트" — feature section heading (structured promise). (verified live 2026-07-02)

Forbidden register: vague lifestyle marketing ("unlock your financial future"), undifferentiated safety claims without numbers, exclamation-mark-driven urgency, cute mascot language. The amber badge handles urgency — copy stays numeric and factual.

11. Brand Narrative

PeopleFund (피플펀드) was founded in 2015 by 김대윤 (Kim Dae-yoon, CEO) as a marketplace lending platform connecting individual investors with property-secured borrowers — a model Korea permitted under its P2P lending regulatory framework. The founding thesis addressed a Korean market inefficiency: retail investors had almost no access to mid-yield instruments between bank deposits (1-2%) and equity risk, while qualified borrowers were underserved by banks with rigid scoring. PeopleFund proposed a middle path: real-estate-collateralized loans, transparently listed, directly matchable online.

The company rebranded to 크플 (Cple) — 크라우드펀딩 플랫폼 (Crowdfunding Platform) — reflecting its ambition to be the defining Korean online investment finance brand, claiming the position of "대한민국 최상위 온투금융" (Korea's Top Online Finance). This rebrand surfaced in 2024-2025 with the new cple.co.kr domain, though peoplefund.co.kr continues to redirect there. The brand's parent company is PFCT (피에프씨테크놀로지스 / PFC Technologies).

PeopleFund has received recognition including a 2019 국무총리 표창 (Prime Minister's Commendation), coverage from Bloomberg and CNBC, awards at the IFLR APAC Awards, and investment from international firms including CLSA Capital Partners. This institutional recognition is surfaced prominently on the homepage as social proof — appropriate for a platform asking retail investors to commit capital to property loans.

What PeopleFund refuses, visible in its design: the glossy over-promise of neo-bank apps, the lifestyle marketing of mainstream consumer fintech, and the heavy regulatory-compliance aesthetic of old banking. What it embraces: a data-dense, scannable product board, a single amber urgency signal, and the confidence to let the numbers speak.

12. Principles

1. Returns over rhetoric. The product listings lead with funded percentages and product codes, not marketing copy. UI implication: investment card layout prioritizes data fields — funding %, status badge, product ID — before descriptive text.
2. Single accent, maximum signal. Amber #ffc32d appears only on status labels. UI implication: do not add a second accent color; the amber's power comes from its singularity. Every new use dilutes the urgency signal.
3. Flat and fast. No shadows, no depth tricks. UI implication: separate content zones with tint (#f6f6f6) and hairlines (#d0d8dc); avoid elevation layers that add visual noise without adding meaning.
4. Pretendard all the way. A single font across all levels signals system coherence. UI implication: do not introduce a second typeface; vary weight (400 body, 600 heading/CTA) to create hierarchy.
5. Credibility through specificity. Awards, partner logos, return rates, and product percentages anchor trust. UI implication: always prefer a specific number ("95.1% 마감임박") over a generic quality claim.

13. Personas

Personas below are fictional archetypes informed by publicly observable PeopleFund user segments (Korean retail investors, property-secured borrowers), not individual people.

박준혁, 38, 서울 강남. A salaried professional with 2,000만원 in savings looking for yield beyond 2% bank deposits. Compares PeopleFund listings by annual return rate and collateral-to-loan ratio before committing. The amber "마감임박" badge triggers action — he doesn't want to miss a 10%+ product. Trusts the platform because of the Prime Minister's Commendation badge on the homepage; distrusts anything that looks too slick.

이민정, 44, 인천. A small business owner who borrowed through PeopleFund for short-term bridge financing on a commercial property. Values the faster approval relative to banks and appreciates seeing her own product listed transparently on the platform — she knows exactly who is funding her loan.

최동현, 29, 부산. A first-time P2P investor who downloaded the app after seeing the Bloomberg mention. Starts with 100만원 on a 6-month product. The clean, data-board UI made him trust the platform more than a more "designed" competitor that felt more like a lifestyle brand. He wants a spreadsheet, not a mood board.

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: Motion is functional and minimal — appropriate for a P2P investment platform where the user is making financial decisions, not consuming entertainment. Product cards fade into view at motion-standard / ease-enter as the list loads. The amber status badge does not animate — static signals are trusted signals; a pulsing badge would feel like manipulation on a financial platform. No spring or bounce anywhere. Under prefers-reduced-motion: reduce, all transitions collapse to instant; the platform remains fully usable and data-accessible.