Wadiz (와디즈) is the design language of a crowdfunding marketplace that wants to feel like a clean retail catalog, not a charity drive. Korea has a single dominant rewards-funding platform, and Wadiz long ago decided that the maker's story belongs in the photography and the copy — the chrome around it gets out of the way. The system runs on white surfaces (#ffffff page, #fafbfd surface alt, #f2f5f8 content shelf), Toss-family near-black ink (#191f28 heading, #4e5968 muted, #6b7684 subtle), and one saturated brand mint (#00c4c4) that does every interactive job — CTA fills, checkbox marks, focus outlines, progress fills, loader strokes. The mint is internally labeled mint in the CSS module class system (.Button_mint__2W1nI), and the supporting pastel #e6fafa is its tinted resting surface.
The single most distinctive geometric choice is the radius scale. The production bundle contains 112 occurrences of border-radius: 8px and 56 of 4px — 8px is the workhorse for cards, buttons, badges, and inputs. There are also 24 instances of 16px (mostly for hero-tier modals and the top-rounded sheet pattern 16px 16px 0 0) and 30 instances of 50% (avatars, indicator dots, the circular maker badge). Wadiz is medium-soft: not as flat as Banksalad (2px) and not as plumply consumer as Toss-mobile (12–16px default). 8px reads as retail catalog — confident, photographic-product-grid friendly, not toy-like.
Typography is Pretendard only — no display secondary face — loaded from the Cloudflare CDN (pretendard/1.3.9/dynamic-subset) and declared as the family on every text node in the reset (wui.css). The default weight is 400 (393 declarations) for body and listing text; 700 (358) appears almost as often for funding amounts, percentages, headings, and the maker name; 500 (109) is the medium-emphasis label weight. Base body size is 15px (not the more common 14 or 16), and the size scale climbs through 14 → 16 → 18 → 20 → 24 → 28 → 32 → 40 → 48 → 64px for the home hero. Letter-spacing is essentially zero across the system — Wadiz never tracks Korean tight; only the largest display headings get a -.03em adjustment.
Key Characteristics:
#00c4c4 for all interactive moments (Button_mint, checkbox, focus, progress, loader)#e6fafa as the resting surface of secondary CTAs (tint pattern)#191f28 / #4e5968 / #6b7684 / #8b95a1)mint, yellow #fcc500, blue #4672f9, red #ff5959 — each with solid / outlined / tint shapescontained / outlined / tint / block / circular#ffffff → #fafbfd → #f2f5f8 — quiet shelf stacking0 6px 6px -1px #0a16461a — never colored, never theatrical#fcc500 (yellow) for trending / hot-deal labels — the system's hottest visual moment is promotion, not error#00c4c4): Primary brand color. Filled CTA backgrounds, link color in body copy, checkbox-checked icon, focus outlines, progress-fill, loader stroke, brand wordmark. A teal-cyan close to Tiffany-green but cooler — readable on white, energetic without being playful.#07abae): Foreground color on tinted secondary buttons; text color on hover for outlined mint variants. Wadiz uses a darker mint on hover (opposite of Banksalad's lighten-on-hover convention).#e6fafa): The pastel resting surface for tint mint buttons, the hover surface for outlined mint buttons, the success-state surface.#bef5f5): Tint-mint hover/active surface — one shade more saturated than #e6fafa. Used when a tint button is itself being interacted with.#191f28): Maximum-depth ink for headings, funding amounts, maker names. Never #000.#1d2129): Secondary near-black, used as --dark CSS variable for top-bar and high-emphasis fills.#333d4b): Standard reading text, paragraph copy.#4e5968): Secondary descriptions, metadata, list-item descriptions.#6b7684): Captions, time-remaining text, footer copy.#8b95a1): Input placeholders, the lowest readable tier.#b1b8c3 / #ced4de): Disabled text and icons.#ffffff): Default canvas.#fafbfd): Soft alternation — section dividers, "softly different" panels.#f2f5f8): Content-shelf fills, search-bar resting surface, secondary card surface.#f2f4f6): A second-pass neutral, used in modal interiors.#e3e7ee): Default horizontal rules, table borders.#ced4de): Default input field border.Wadiz exposes four named color variants for LabelBadge, each with three shapes (solid = filled brand; outlined = border-only; tint = pastel surface + saturated foreground). These badges power the funding-state chips that sit on every campaign card — 오픈예정, 오픈중, 얼리버드, 마감임박, 앵콜, 인기.
solid #fcc500 (text #fff), tint surface #fffae1 (text #fcc500). For trending / hot-deal / 인기 (popular).solid #4672f9 (text #fff), tint surface #ecf2ff (text #4672f9), accent surface #d7e3ff, alt #325ad7, pale-link #5a87ff. For info, neutral state tags, secondary CTAs.solid #ff5959 (text #fff), tint surface #fff0f0 (text #ff5959), accent surface #ffdcdc, strong #e43131, softs #ff6666/#ff7777. For 마감임박 (deadline closing), refund, withdraw, validation error.#00c4c4 family used for primary CTA — when used as a label, signals "active funding" / "오픈중".#00af84): Used sparingly — paid / completed / shipped states only. Brand mint is the default success color; this deeper teal-green appears only when a "this is a financial settlement, not just an interaction" tone is needed.#ff5959 family): All error and urgency. The deadline-closing chip is the only place red ever feels celebratory rather than punitive.#ffb9b9): The placeholder background when a reward thumbnail fails to load — a soft pink-red, not a gray, so the failure is visible without being scary.rgba(0,0,0,.06) / .15 / .32 / .4): Tier of darkening overlays for menus, popovers, modals, full-sheet.rgba(255,255,255,.7) / .9 / .95): For sticky headers on photography-rich pages.Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif| Role | Family | Size | Weight | Line Height | Notes |
|---|---|---|---|---|---|
| Hero numeral (funded amount %) | Pretendard | 64px | 700 | 1.1 | The biggest moment — campaign success % on detail pages |
| H1 page | Pretendard | 40–48px | 700 | 1.2 | Home banner copy, category landing |
| H2 section | Pretendard | 32px | 700 | 1.25 | Section titles ("지금 오픈 중", "인기 펀딩") |
| H3 card title | Pretendard | 24px | 700 | 1.3 | Maker name on detail, modal headings |
| Card title (project) | Pretendard | 18px | 700 | 1.35 | Reward card project title (2-line clamp) |
| Lead body | Pretendard | 17px | 400 | 1.5 | Short paragraph leads |
| Body default | Pretendard | 15px | 400 | 1.55 | Description text, body copy (base) |
| Body emphasis | Pretendard | 15px | 500 | 1.55 | In-paragraph emphasis, button labels |
| Label / metadata | Pretendard | 14px | 400/500 | 1.4 | Time-remaining, supporter count, category tag |
| Caption | Pretendard | 13px | 400 | 1.4 | Helper text, fine print |
| Small label | Pretendard | 12px | 400/700 | 1.3 | Badge text, micro-tags |
| Micro | Pretendard | 10px | 400 | 1.3 | Footer fine print only |
Weight distribution (counted in production bundle): 400 = 393×, 700 = 358×, 500 = 109×. The near-parity of 400 and 700 is the signal — every body paragraph is 400, every funding amount and percentage is 700, and the eye learns to bounce between the two. Wadiz never uses 300 (light) — there is no "elegant thin display" in the system.
The system follows a roughly 4-multiple scale, but with specific opinionated stops:
4 → 8 → 12 → 16 → 20 → 24 → 32 → 40 → 48 → 64
Most observed gaps cluster around 16 (card padding), 20 (vertical rhythm between card sections), 24 (between-card gutter), and 32 (between section blocks). The 64px stop is rare — used as the top-padding on hero sections and the spacing under the biggest funding-amount numeral.
rgba(255,255,255,.95) veil so the photography behind it stays half-readable8px is the system default (112 occurrences). The full scale:
16px 16px 0 0, 3x)The 2px radius variant exists (7x) but is reserved for technical contexts — chart legend swatches, image-crop frames — not the user-facing UI.
The most distinctive system in the bundle. Class names follow the pattern .Button_<role>__<hash> with five orthogonal axes:
mint (brand) · blue (info) · red (destructive) · yellow (promo) · green (success)contained (filled) · outlined (border-only, default) · tint (pastel surface + saturated label)block (full-row)circular · badge (chip-sized)hover · active · disabled · loadingPrimary CTA (filled mint contained):
#00c4c4, text #ffffff, border-color #00c4c4, radius 8px#00c4c4 with subtle inner-shadow shift#07abae-familySecondary CTA (outlined mint):
transparent, text #00c4c4, border 1px solid #00c4c4#e6fafa, text #07abaeTint button (the Wadiz signature):
#e6fafa, text #00c4c4, border 1px solid #e6fafa#bef5f5, text #07abaeThe funding-state vocabulary. Pattern .LabelBadge_<color>__<hash>.LabelBadge_<shape>__<hash>:
border: solid 1px <hue>; background-color: <hue>; color: #fff;border: solid 1px <hue>; background-color: #fff; color: <hue>;border: solid 1px <pastel>; background-color: <pastel>; color: <hue>;The 12 combinations cover every funding state (오픈예정 = blue outlined, 오픈중 = mint solid, 얼리버드 = yellow tint, 마감임박 = red solid, 앵콜 = blue solid, 인기 = yellow solid). The reversed badge (ReversalLabelBadge) is for dark-background photography overlays.
The single most-shipped component. Structure:
8px at the top): Lazy-loaded with opacity 0 → 1 0.25s ease-in-out fade — .CardThumbnail_visible__343f4background-color: #ffb9b9 (soft pink-red) — a recognizable Wadiz failure state, not a gray box마감임박 + 얼리버드)font-size: 13px, color: #6b7684 — small, secondaryfont-size: 18px, font-weight: 700, color: #191f28, 2-line clamp28px / 700 / #00c4c4 + supporter count 14px / 400 / #4e59682px, fill #00c4c4, track #f2f5f81px solid #ced4de, radius 8px, padding 12–14px 16px, font 15px / 400 / #333d4b#00c4c4, no shadow ring (Wadiz prefers a colored border change over an outline glow)#fafbfd, text #b1b8c3#ff5959, helper-text below in #ff5959 / 13pxrgba(255,255,255,.95) so photography below stays half-visible0 1px #0000000f — barely a hairline16px, shadow 0 16px 16px -1px #0a16461a, 0 0 5px #0a16460f, max-width ~480px, padding 32px16px 16px 0 0 (top corners only), full-width, slide-uprgba(0,0,0,.4)rgba(17,17,17,.8), text #ffffff, radius 4px, padding 8px 12px, font 12px / 4000 15px 30px #00000026Wadiz's photography is the product. Every campaign supplies its own hero — a kitchen tool against a colored backdrop, a maker holding a prototype in a workshop, a flat-lay of a fashion drop. The system never overrides this with a heavy chrome — the white surface, 8px radii, and quiet shadow exist so the imagery carries the entire emotional load. The home page is essentially a 4-column gallery of other people's photography, separated by #f2f5f8 shelf neutrals.
The single Wadiz-controlled image moment is the loader — a "waffle" loader (the literal class is Loader_waffle-loader-color__sANH-) that animates the brand mint #00c4c4 in a stroked-rectangle pulse. This is the only place Wadiz puts its mint on photography rather than next to it.
#4e5968 for muted nav, #191f28 for primary, #00c4c4 for active)ease-in-out for thumbnail fade-in (0.25s); the system avoids cubic-bezier show-off curvesbox-shadow 0 6px 6px → 0 32px 40px -2px) — the resting elevation thickens, no translate#00c4c4 → #07abae on outlined, background tint deepens on filledopacity 0 → 1, which IS the skeleton)#07abae, tint surface darkens to #bef5f5transition-property: opacity 0.25s ease-in-out is the most common; nothing animates color transitionsWadiz writes in Korean polite-casual — ~해요 / ~하세요 tone, not formal ~합니다. The voice is the assistant standing next to a maker's product, explaining without selling. Funding amounts are stated as facts, not exclamations. The system avoids superlative marketing language ("최고", "최강", "혁신적") — when something is selling well, the label badge does the work (인기 yellow solid), not the copy.
오픈예정 · 오픈중 · 얼리버드 · 마감임박 · 종료 · 앵콜 — short, factual아직 등록된 펀딩이 없어요 (rather than 죄송합니다)확인 / 취소, never 예 / 아니오해당 펀딩은 종료되었어요 rather than "오류가 발생했습니다"3시간 남음 · 5일 남음 (not absolute timestamps in feed)펀딩하기 · 알림받기 · 공유하기 · 더보기 — -하기 gerund pattern, not imperative 해라This DESIGN.md does not quote verbatim Wadiz taglines or marketing copy. The patterns above describe the shape of the voice (gerund -하기 verbs, polite-casual ~해요, factual funding-state labels) and are independently reproducible. Brand assets and product photography referenced in §1 / §6 are observational only — not for redistribution.
#00c4c4 outline with 2px offset (observed on Checkbox_icon)#191f28 on white = 17.1:1 (AAA). Body #333d4b on white = 12.6:1 (AAA). Mint CTA #00c4c4 on white = 2.3:1 — fails AA for text but Wadiz uses #fff text on the filled mint, which is 2.7:1. This is the system's known weak point: filled mint buttons have white text at borderline AA. The outlined and tint variants flip the contrast (#00c4c4 text on #e6fafa surface = 2.4:1, also weak). For accessibility-critical surfaces, the outlined mint with a dark text override should be considered.#b1b8c3 on #fafbfd = ~2.7:1 (intentionally low — disabled IS the signal)#ff5959) + iconography (! icon) + helper text — never color aloneWadiz's design philosophy can be read off the production system without needing brand-published manifestos:
The product is the photograph. White surfaces, 8px radii, hairline shadows — every visual decision in the chrome exists to keep the maker's image at the visual center. The brand mint never colorizes a thumbnail; it only colorizes the chrome that frames the thumbnail.
Funding state is a vocabulary, not a sentiment. Six named states (오픈예정 / 오픈중 / 얼리버드 / 마감임박 / 앵콜 / 인기) × three badge shapes (solid / outlined / tint) × four color hues = 72 valid badges. The system over-builds this surface so that no two campaigns ever feel "the same" in a feed.
Mint is the verb. The brand color appears almost exclusively on things you can do — buttons, links, checkboxes, focus, progress, loader. Mint is never decorative; if it's there, it's interactive.
Korean ink, not black. The #191f28 → #4e5968 → #6b7684 → #8b95a1 scale is the Toss-family ink scale, now standard across Korean fintech-adjacent products. Wadiz adopting it positions itself in the trustworthy Korean product register rather than the international marketplace register that pure black or warm-near-black would suggest.
Tint over outline. The most distinctive button shape in the system is tint — pastel surface + saturated label — and it carries the marketing weight that outline buttons carry on most sites. This is a deliberate softening of the page rhythm: the eye lands on tint surfaces before it lands on outlined ones.
⚠️ The named personas below are inferred from the surfaces, not from a published Wadiz brand document. They are FILL-IN candidates for designers building Wadiz-adjacent products. Replace with audience-specific research before shipping.
서포터): 25–45, mostly mobile, browses on subway during commute, supports 2–6 campaigns/year averaging 30–80k₩ each. Wants short campaign titles, clear 얼리버드 eligibility, and 마감임박 urgency cues. Cares about the maker's story for ~30 seconds before deciding.메이커): 28–45, small studio or 1-person brand, ships 1–3 campaigns/year. Spends days inside Wadiz Studio (the back-office) writing campaign copy and uploading photography. Sees Wadiz as their pop-up retail moment, not their permanent store.구경꾼): 20–40, no recent funding, opens Wadiz on a hot-deal notification ~weekly. Will scroll for 5 minutes, save 2 items, fund 1 in 4 sessions.#000 — #191f28 is the floor/) — the 4-column reward-card grid with funding-state badges/web/wreward/category/<id>) — filtered grid with persistent filter chips/web/campaign/<id>) — hero photography full-bleed, sticky funding panel right rail16px 16px 0 0 rounded top, slide-up, rgba(0,0,0,.4) scrimWhen borrowing Wadiz's language for a related product:
#00c4c4 for your brand hue, keep the Toss-family ink scale, keep the tint-button pattern — that's the broadly-applicable layerVerified: 2026-05-14
Tier 1 — Live capture (primary):
https://www.wadiz.kr/ (home, 58.3KB HTML)https://www.wadiz.kr/web/wreward/category/289 (category listing, 58.0KB HTML)https://www.wadiz.kr/web/main (main route, 58.4KB HTML)https://static.wadiz.kr/main/main.css — 936KB production bundle, authoritative. All #00c4c4 (111×), #191f28 (208×), radius (8px 112×), font-weight (700 358×), and named button-variant classes (Button_mint, Button_blue, Button_red, Button_yellow, LabelBadge_solid/outlined/tint) directly observedhttps://static.wadiz.kr/static/web/wui.css — reset + body font-family canonical declarationassets/_reference/.live-inspect-proof.json (5 surfaces, 8 raw_samples, full token-frequency table)Tier 1 fallback note: CDP :9222 WebSocket connection blocked by Chrome --remote-allow-origins guard (handshake 403). Substituted with direct curl of the production CSS bundle — which is higher signal than runtime sampling because it exposes the entire token system in one file rather than only the styles applied to currently-rendered DOM. Reproducible: any reader can curl -sL https://static.wadiz.kr/main/main.css | grep -c "#00c4c4" and recover the same 111 occurrence count.
Tier 1 brand-owned docs: Wadiz tech blog (blog.wadiz.kr) is known to publish a "와디즈 디자인 시스템 구축하기" article (referenced in Wadiz search results); direct article URL returned 404 on this verification pass — likely renamed or moved. Followup: re-discover the canonical URL in next UPDATE pass. The blog post's existence is acknowledged here, but no claims in §1–14 above depend on it — every claim is sourced to the live production CSS.
Tier 2 — Cross-check directories:
getdesign.md/wadiz → empty (no entry)styles.refero.design/?q=wadiz → empty (no entry)Tier 3 — Reconcile:
#00c4c4 = 2.7:1). Documented in §9, not "fixed" — it is the system as shipped.Confidence: High — single 936KB production CSS bundle is the canonical token source; named variant classes (Button_mint, LabelBadge_yellow) confirm internal design-system vocabulary; three HTML surfaces confirm consistent application. No (unverified live) flags on any §1–9 token.
Known gaps / Followup:
/campaign/<id>) and funding-sheet flows not inspected this pass — UPDATE pass recommended to verify §5 sticky funding panel + funding sheet measurementsWadiz (와디즈) is the design language of a crowdfunding marketplace that wants to feel like a clean retail catalog, not a charity drive. Korea has a single dominant rewards-funding platform, and Wadiz long ago decided that the maker's story belongs in the photography and the copy — the chrome around it gets out of the way. The system runs on white surface
Brand
Accent
Neutrals
Semantic
Type Scale
Rendered in system-ui to clearly show scale & weight.
Fonts
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | compact | |
| Base unit | 4px | |
| Section gap | 32px | |
| Card padding | 16px | |
| Element gap | 12px |
Border Radius
| Element | Value | Preview |
|---|---|---|
| buttons | 8px | |
| inputs | 8px | |
| cards | 8px | |
| dialogs | 8px | |
| badges | 8px | |
| pillPill | 9999px |
Elevation
spec/components-schema.md.