oh-my-design-cli 1.3.9 → 1.5.0

package/web/references/upstage/DESIGN.md

@@ -0,0 +1,214 @@
+---
+id: upstage
+name: Upstage
+display_name_kr: 업스테이지
+country: KR
+category: ai
+homepage: "https://www.upstage.ai"
+primary_color: "#d2ff95"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=upstage.ai&sz=256"
+verified: "2026-05-15"
+omd: "0.1"
+ds:
+  name: Upstage Brand Resource Center
+  url: "https://www.upstage.ai/resources/brand-resource-center"
+  type: brand
+  description: "Upstage's brand resource hub — logo / symbol assets + IP rights statement. Token spec lives only in production CSS (Geist + Espeak proprietary face + violet #5B52FF × plum #3C043B + Solar accent #D2FF95)."
+  og_image: "https://cdn.prod.website-files.com/6743d5190bb2b52f38e99e37/680a25ee07a17eed6deeff74_OG.avif"
+---
+
+# Upstage — DESIGN.md
+
+> Reference research only. Brand assets, logo, and the proprietary Espeak display face are property of Upstage Co., Ltd. (주식회사 업스테이지). No verbatim taglines, marketing copy, or asset binaries are reproduced. Token values quoted below are factual CSS custom property values observed via live runtime inspection of the public `www.upstage.ai` surface, under analytical fair-use.
+
+## 1. Visual Theme & Atmosphere
+
+Upstage looks like an enterprise AI company that decided to spend its visual budget on **one purple, one display face, and one rotating word** — and then on absolutely nothing else. The home surface ships in a deep plum hero canvas (`#3C043B`, exposed as `--colors--grey-background`), pairs it with a near-mint Solar accent (`#D2FF95`, a vivid mid-step of the `--colors--green-yellow-*` ladder), and reserves a single interactive violet (`#5B52FF`, observed 55 times across CTAs and links) as the only chromatic gesture that ever does work. The page is built on Webflow, layers Untitled UI and Spark Library tokens underneath an Upstage-namespaced override layer (74 `--*` custom properties on `:root`), and exposes the seams honestly — `_sub---untitled-ui--*`, `_sub---spark-library--*`, and `_sub---elements-webflow-library--*` all coexist on the document root, with the `--colors--*` and `--style--*` prefixes representing the brand's actual decisions. Type is even more disciplined: **Geist** runs 869 of ~930 sampled text elements (~93%), a single custom display face called **Espeak** lights up the hero H1 at 57.6px / weight 600, and the variable industry word inside the hero (`Insurance`, `Healthcare`, `Manufacturing`, `Financial Services`) shifts to a humble **monospace** mid-sentence — a typographic gesture that says *this slot is configurable* without spending a single color or weight to mark it. Radius is binary (797 elements at 0px, 134 at 8px, nothing meaningful between), elevation is effectively zero (the underlying Webflow library exposes one 10%-alpha shadow token, almost never applied), and rhythm comes from surface-color shifts band to band — plum hero → white product band → dark industry grid → white customer band → dark deployment matrix → near-black footer (`#191722`, slightly violet-tinted, not pure black). The atmosphere reads *competent, technical, restrained* — the visual equivalent of an enterprise pitch deck that knows it doesn't need to shout.
+
+**Atmospheric anchors**:
+- **Plum-violet axis, not blue.** Where most enterprise AI brands default to a corporate blue, Upstage commits to violet primary (`#5B52FF`) on a plum canvas (`#3C043B`) — distinguishable in a sea of cobalt competitors.
+- **Solar yellow-green as scarcity asset.** `#D2FF95` appears only adjacent to the Solar product narrative — never as a default button surface or section background.
+- **One body family, one display face, one swap.** 93% Geist coverage + Espeak-only hero + monospace industry word = three families, three jobs, no overlap.
+- **Type-as-imagery on industry cards.** Each high-stakes industry (Insurance / Healthcare / Manufacturing / Financial Services) presents as a giant industry word on a dark surface — no stock photography, no industry icons.
+- **Binary geometry.** Sharp (0px) for sections, cards, hero, footer; soft (8px) only for pressable controls and a few content chips. Nothing in between.
+
+## 2. Color System
+
+### Brand
+| Token | Hex | Live source | Role |
+|---|---|---|---|
+| Upstage Violet (primary) | `#5B52FF` | live computed `rgb(91,82,255)` on `.button.is-secondary` × 2 sampled CTAs; 55 element occurrences | Interactive foreground; link; secondary-button text; filled-primary button background variant |
+| Violet pressed | `#1E116E` | `--_sub---spark-library--foreground-interactive-hover` | Hover / pressed state of primary |
+| Violet deep | `#281CA5` | `--elements-webflow-library--secondary--color-1` | Emphasis / filled-button alt |
+| Solar yellow-green | `#D2FF95` | mid-step of `--colors--green-yellow-*` (50 = `#f6ffe5`); live-observed as decorative accent | **Single-use chromatic accent** tied to the Solar product narrative |
+
+### Ink (text)
+| Token | Hex | Frequency in DOM | Role |
+|---|---|---|---|
+| Body gray | `#70757F` | **428 elements (dominant text color)** | Default body, paragraph, muted subhead |
+| Near-black | `#0A0D14` | 58 elements | Headings on light surfaces |
+| Muted purple-gray | `#6E7191` | 20 elements | Secondary muted / footnote |
+| White | `#FFFFFF` | 213 elements | Text & UI on dark surfaces |
+| White @50% | `rgba(255,255,255,0.5)` | 14 elements | Muted secondary copy on dark hero |
+
+### Surface
+| Token | Hex | Role |
+|---|---|---|
+| Page white | `#FFFFFF` | Default page background |
+| Subtle band | `#F9FAFB` | `--colors--base--subtle` — light section break |
+| Footer near-black | `#191722` | Footer band — *intentionally violet-tinted, not pure `#000`* |
+| Plum decorative | `#3C043B` | `--colors--grey-background` — hero canvas. **Non-obvious choice**: a deep plum named as "grey" in the token system. |
+| Lavender interactive | `#F0ECFD` | `--_sub---spark-library--background--interactive` — active/hover surface |
+| Purple-100 | `#DDE3FF` | `--colors--purple-100` — cool tint for chips / info |
+
+### Border
+| Token | Hex | Role |
+|---|---|---|
+| Default hairline | `#EEEEEE` | `--border-color--border-primary` |
+| Neutral subtle | `#F7F7FC` | `--_sub---elements-webflow-library--neutral--200` |
+
+### Ladders observed (under-layer)
+Untitled UI primary scale (`#fcfaff 25 / #f9f5ff 50 / #f4ebff 100 / #d6bbfb 300 / #6941c6 700`) and Untitled UI gray scale (`#eaecf0 200 / #475467 600 / #101828 900`) sit underneath the Upstage-namespaced surface tokens. Treat them as inherited primitives, not Upstage decisions.
+
+## 3. Typography
+
+| Slot | Family | Size / Weight | Live evidence |
+|---|---|---|---|
+| Hero H1 | **Espeak**, Arial, sans-serif | 57.6px / 600 | 3 sampled hero phrases |
+| Hero H1 industry swap word | **monospace** (browser default) | 48px / 600 | 4 industry-word swaps |
+| Section H2 | Geist | ~36-48px / 600 | "High-performance AI built by experts" et al. |
+| Body large | Geist | 18px / 400 | **603 elements (dominant body size)** |
+| Body | Geist | 16px / 400 | 115 elements |
+| Button | Geist | 16-18px / 500 | `.button.is-secondary` + inline arrow CTA |
+| Caption / small | Geist | 14px / 400 | 30 elements |
+| Micro / legal | Geist | 12px / 400 | 23 elements |
+
+**Weight discipline** (observed): 400 = 786 elements, 500 = 129 (buttons + nav + emphasised body), 600 = 15 (all headings), 700 = 8 (stat/proof labels). **Six weights are not the system — four are.**
+
+**Critical voice rule on type**: the hero rotates `Insurance / Finance / Healthcare / Manufacturing` by changing the *font family* mid-sentence (Espeak → monospace), not the color or weight. Any port that wants to reproduce this rotating-vertical hero must keep the typographic shift as the variable-slot signal.
+
+## 4. Radius & Geometry
+
+| Value | Frequency | Role |
+|---|---|---|
+| `0px` | 797 elements | Sections, cards, hero, footer, images |
+| `8px` | 134 elements | Buttons, content chips, hero secondary surfaces |
+| `100%` | 5 elements | Avatar / icon circles |
+| `100px` | 1 element | Single pill |
+| `50%` | 1 element | One round element |
+
+**Binary rule**: Upstage's geometry encodes pressability. Sharp = layout. 8px = "you can click this." Nothing in between, no `4px / 12px / 16px` middle terms. Token: `--style--radius-8px: 8px`.
+
+## 5. Elevation
+
+Effectively **zero box-shadow** on observed elements. The underlying Webflow library exposes `--_sub---elements-webflow-library--general--shadow-03: #14142b1a` (violet-black 10%), but production almost never invokes it. Depth = surface-color contrast (plum → white → dark → near-black) + hairline borders. *Do not import drop-shadow card patterns from neighbour systems if porting this brand — Upstage doesn't ship them.*
+
+## 6. Spacing & Layout
+
+- **Canvas**: 1280px desktop sweet spot; `--style--max-full-width: 100vw`.
+- **No `--space-*` ladder** exposed on `:root`. Section vertical rhythm appears to use ~64-96px band gaps with 16/24/32 internal step (Webflow class-driven, not token-driven).
+- **Hero alignment**: left-aligned starting ~10% from canvas edge, not centered.
+- **Vertical rhythm = surface flips**: each H2 section change is also a background-color change. The rhythm is *chromatic*, not numerical.
+
+## 7. Interactive Components
+
+### Primary CTA — multiple variants, one violet
+1. **`Try now`** — persistent top-right of nav. Filled violet `#5B52FF` background, white text, 8px radius, weight 500.
+2. **`Try demo`** — hero inline arrow. Transparent background, white text, `→` arrow glyph, 18px / 500.
+3. **`Learn more →`** — repeated inline across every product / solution card. Text-color inherits section surface (white on dark, violet on light), 18px / 500, no chrome.
+4. **`.button.is-secondary`** (e.g. *Developer Console*, *Learn more* on solution cards) — white pill surface, violet text `#5B52FF`, 8px radius, weight 500. 16px.
+
+### Nav (top)
+Transparent over hero, white below. Five primary categories (Products / Solutions / Resources / Company / Pricing) + persistent `Try now` filled CTA on the right.
+
+### Card
+Product / solution / customer cards: 8px radius, transparent background, `#70757F` body paragraph, no drop shadow, inline `Learn more →` link as the only interactive affordance.
+
+### Industry card (signature)
+Giant industry word (`Insurance` / `Healthcare` / `Manufacturing` / `Financial Services`) at 48px+ as the entire card front. **Typography is the imagery.**
+
+## 8. Motion (partially captured)
+
+CDP single-pass did not extract transition durations or cubic-bezier curves. Inferred from observed `--_sub---spark-library--background--interactive: #F0ECFD` hover surface: standard Webflow ~150-200ms ease for interactive state changes. **Flagged for UPDATE pass** — exact motion tokens not authoritative here.
+
+## 9. Accessibility (observed)
+
+- **Body gray `#70757F` on white** ≈ 4.6:1 — passes WCAG AA for normal text (≥4.5:1).
+- **Violet `#5B52FF` on white** (secondary-button text) ≈ 5.2:1 — passes AA comfortably.
+- **White on plum `#3C043B`** = ≥10:1 — strong pass for hero copy.
+- **White @ 50% on plum hero** = ≈5:1 — at AA edge; acceptable for ≥18px text but borderline for finer hero subhead at smaller weights. Flagged as observed-as-shipped trade-off, not a guideline.
+- **No landmark / role inventory verified** in this CDP pass — `<header>`, `<footer>`, `<nav>` are used semantically (positive), but a deeper axe-style audit is out of scope.
+
+## 10. Voice & Microcopy (analyst characterisation, no verbatim copy)
+
+Upstage's marketing voice is **declarative, enterprise-confident, lightly punchy**. Sentences are short. Heroes state a verb-object intent rather than a feature list. Industry callouts are single nouns (`Insurance`, `Healthcare`) — the brand trusts the reader to fill in the relevance. Section H2s read as engineering-credible category claims ("High-performance AI built by experts", "Flexible deployment, enterprise-ready anywhere") — proof-of-capability framing, not benefit framing.
+
+**Tone vector**: technically grounded · enterprise-formal · zero-hype · pragmatic-bilingual (Korean root, English-first marketing).
+
+**Fresh OmD-derivation alternatives** (not Upstage copy — illustrative shape-only):
+- *Build the AI. Ship the workflow. We bring the model.*
+- *Enterprise-grade Solar. Deploy where your data lives.*
+- *One model. Four industries. Production-ready.*
+
+**Do NOT reproduce** any verbatim Upstage hero, button label, or proof statement in derivative work — voice is the shape only.
+
+## 11. Brand Narrative (factual)
+
+Upstage Co., Ltd. (주식회사 업스테이지) is a Korean LLM and enterprise AI company headquartered in Gangnam, Seoul, with offices at the Korea Science and Technology Center (한국과학기술회관 2관, 스파크플러스 강남5호점 812-817호, 22 Teheran-ro 7-gil, Gangnam-gu). CEO is **Sunghun Kim (김성훈)**. Business Registration No. 830-88-01918. The company's flagship is the **Solar** family of LLMs (Solar Pro 3 / Pro 2 / Mini) and the **Syn Pro** Japanese-locally-trained LLM. Product surface includes **Document Parse** (PDF/scan → structured), **Information Extract** (key-value structuring), **Studio** (build/deploy agents), **AI Space**, and the **Upstage Marketplace**. Deployment matrix spans API, on-premise, and marketplace channels. Stated industry focus: insurance, healthcare, manufacturing, financial services. Source: live capture of the home + footer + brand-resource-center surfaces on 2026-05-15.
+
+Founding-year, total-funding, headcount, and investor list **not verified in this pass** — public profiles (Crunchbase / TheVC) were not consulted to keep scope tight. Flagged for UPDATE.
+
+## 12. Personas (inferred — verify before reuse)
+
+These are reasoned inferences from the surface IA and proof bands, not user research:
+
+- **Enterprise IT decision-maker** — insurance/healthcare/manufacturing CIO or VP of Engineering. Comes in via the Solutions tab, leaves via *Contact us* or *Try demo*. Cares about: deployment options (on-prem vs API), customer logos, compliance posture.
+- **AI/ML engineer** — practitioner evaluating Solar models for production. Comes in via Products → Solar Pro 3 → Developer Console, leaves via Documentation. Cares about: benchmark numbers, pricing per token, latency, fine-tuning paths.
+- **Procurement / partnership lead** — coming in via Partners / Public tenders. Cares about: business credentials (KR business-info disclosure), Newsroom signals, certifications.
+
+`[FILL IN]` named personas, demographics, and motivations require Upstage-internal data — left as placeholders.
+
+## 13. Anti-Patterns (what NOT to import)
+
+1. **Do not introduce a third type family**. Geist + Espeak + monospace-swap is the entire system. A fourth face breaks the rotating-word gesture.
+2. **Do not import drop-shadow card chrome.** Upstage achieves depth via surface-color contrast and hairline borders. Adding `box-shadow: 0 8px 24px rgba(0,0,0,0.08)` will read as a different system entirely.
+3. **Do not soften the binary radius.** Adding `4px` / `12px` / `16px` middle terms erases the layout-vs-pressable distinction.
+4. **Do not over-saturate the Solar yellow-green.** `#D2FF95` works *because* it appears once, near the Solar narrative. Repeating it as a default highlight color cheapens it.
+5. **Do not default to blue.** Cobalt primary is the enterprise-AI cliche Upstage is consciously avoiding. If porting, stay on the violet-plum axis or pick a different non-blue.
+6. **Do not center-align the hero.** Left-aligned hero with the typographic-swap industry word is the brand-defining composition.
+
+## 14. References & Citations
+
+- **Live capture, home**: `https://www.upstage.ai/` — 44 curated DOM samples, 930+ element frequency sweep, 74 `:root` CSS custom properties, viewport 1280×713 dpr=1, captured 2026-05-15. Method: Chrome DevTools Protocol :9222 / `Runtime.evaluate getComputedStyle`. Browser: Chrome/148.0.7778.97. Raw artifacts in `references/upstage/assets/_reference/_root-vars.json`, `_raw-capture.json`, `_curated-samples.json`, `_structure-raw.json`.
+- **Live capture, Tier-1 brand surface**: `https://www.upstage.ai/resources/brand-resource-center` — HTTP 200, H1 "Brand Resource Center", categories Brand Identity / Product Identity / Media kit / Our leadership, asset distribution only (no token specs). Captured 2026-05-15. Artifact: `_brand-resource-center.json`.
+- **Tier-1 negative**: `design.upstage.ai`, `brand.upstage.ai`, `www.upstage.ai/brand`, `www.upstage.ai/brand-resources` — all 000/404 (verified 2026-05-15 via curl).
+- **Tier-1 codebase negative**: `github.com/UpstageAI` — 12 public repos, all AI/research/cookbook (`UpstageAI/cookbook`, `UpstageAI/Gym`, `UpstageAI/mcp-upstage`, `UpstageAI/opencode`, `UpstageAI/solar-prompt-cookbook`, `UpstageAI/vllm`, …). **Zero design-system / Storybook / token-library repo** as of 2026-05-15.
+- **Tier-2 indexes**: `getdesign.md/upstage` → 200 but no curated entry; `styles.refero.design/?q=upstage` → 200 search shell, no result cards. Both verified 2026-05-15.
+- **Business factual**: `https://www.upstage.ai/resources/brand-resource-center` footer block — KR-mandated business-information disclosure (CEO, registration number, address) reproduced as factual reference, not promotional.
+
+## 15. Verification Footer
+
+**Verification date**: 2026-05-15
+**Verification method**: live CDP :9222 + Tier 1/2 URL probes + GitHub org enumeration
+**Live-inspect proof**: `references/upstage/assets/_reference/.live-inspect-proof.json` (8 raw_samples, ≥5 required floor)
+**Confidence per section**:
+- §1 Visual theme & §2 Color & §3 Typography & §4 Radius & §5 Elevation & §7 Interactive: **High** (live computed-style evidence)
+- §6 Spacing: **Medium** (no `--space-*` ladder exposed; observations are visual not token-derived)
+- §8 Motion: **Low** — single-pass CDP did not capture transition tokens; flagged UPDATE
+- §9 A11y: **Medium** — contrast computed, but no landmark/role audit run
+- §10 Voice: **High** (analyst characterisation only — no verbatim reproduction)
+- §11 Brand narrative: **High** for HQ / CEO / registration / product names (sourced from public footer); **Low** for funding/headcount/founding-year (not verified this pass)
+- §12 Personas: **Low** (inferred — `[FILL IN]` required before product reuse)
+- §13 Anti-patterns: **High** (derived from live evidence)
+
+**Flags (carry into audit row)**:
+1. Tier-1 official DS = **partial-positive** (asset distribution surface exists; token specification does not).
+2. Tier-2 indexes both empty for `upstage` — consistent with the systemic KR-coverage gap.
+3. Espeak display face is a proprietary commissioned typeface — reference-only; substitute with a tonally similar open display in any derivative work.
+4. Solar yellow-green `#D2FF95` is a single-use chromatic accent — repeating it broadly will read as a different brand.
+5. The rotating-industry hero word ships as a **typographic shift (monospace mid-sentence)**, not a color or weight shift — preserve that gesture or the hero composition breaks.
+6. Motion tokens and component-state coverage incomplete — UPDATE pass recommended on a product detail page (e.g. `/products/solar-pro-3`) and Documentation surface.
+
+**IP guardrails confirmed**: brand assets reference-only (logos / Espeak face not redistributed); no verbatim Upstage marketing copy quoted; §10 voice samples are fresh OmD-derived shape-only alternatives; KR business-information block reproduced as factual disclosure, not promotion.

package/web/references/vercel/DESIGN.md

@@ -1,6 +1,21 @@
 ---
-omd: 0.1
-brand: Vercel
+id: vercel
+name: Vercel
+country: US
+category: developer-tools
+homepage: "https://vercel.com"
+primary_color: "#000000"
+logo:
+  type: simpleicons
+  slug: vercel
+verified: "2026-05-15"
+omd: "0.1"
+ds:
+  name: Geist
+  url: "https://vercel.com/geist"
+  type: system
+  description: Vercel's design system with 50+ components, foundations, and brand resources.
+  og_image: "https://assets.vercel.com/image/upload/v1709494095/front/design/geist-og.jpg"
 ---
 
 # Design System Inspiration of Vercel

package/web/references/voltagent/DESIGN.md

@@ -1,3 +1,17 @@
+---
+id: voltagent
+name: VoltAgent
+country: US
+category: ai
+homepage: "https://voltagent.dev"
+primary_color: "#22c55e"
+logo:
+  type: github
+  slug: VoltAgent
+verified: "2026-05-15"
+omd: "0.1"
+---
+
 # Design System Inspiration of VoltAgent
 
 ## 1. Visual Theme & Atmosphere

package/web/references/wadiz/DESIGN.md

@@ -0,0 +1,344 @@
+---
+id: wadiz
+name: Wadiz
+country: KR
+category: fintech
+homepage: "https://www.wadiz.kr"
+primary_color: "#00c4c4"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=wadiz.kr&sz=256"
+verified: "2026-05-14"
+omd: "0.1"
+---
+
+# Design System Inspiration of Wadiz
+
+## 1. Visual Theme & Atmosphere
+
+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:**
+- Pretendard exclusive — no display accent face
+- Brand mint `#00c4c4` for all interactive moments (`Button_mint`, checkbox, focus, progress, loader)
+- Mint pastel `#e6fafa` as the resting surface of secondary CTAs (tint pattern)
+- 8px radius dominance — medium-soft, retail-catalog feel
+- Toss-family Korean ink palette (`#191f28` / `#4e5968` / `#6b7684` / `#8b95a1`)
+- Four named label colors: `mint`, `yellow` `#fcc500`, `blue` `#4672f9`, `red` `#ff5959` — each with `solid` / `outlined` / `tint` shapes
+- Five-state button system: `contained` / `outlined` / `tint` / `block` / `circular`
+- Surface alternation `#ffffff` → `#fafbfd` → `#f2f5f8` — quiet shelf stacking
+- Single-direction blue-black shadow `0 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
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Wadiz Mint** (`#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.
+- **Mint Hover/Active** (`#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).
+- **Mint Tint Surface** (`#e6fafa`): The pastel resting surface for `tint` mint buttons, the hover surface for outlined mint buttons, the success-state surface.
+- **Mint Tint Accent** (`#bef5f5`): Tint-mint hover/active surface — one shade more saturated than `#e6fafa`. Used when a tint button is itself being interacted with.
+
+### Heading & Body (Toss-family ink scale)
+- **Heading** (`#191f28`): Maximum-depth ink for headings, funding amounts, maker names. Never `#000`.
+- **Heading Alt** (`#1d2129`): Secondary near-black, used as `--dark` CSS variable for top-bar and high-emphasis fills.
+- **Body** (`#333d4b`): Standard reading text, paragraph copy.
+- **Muted** (`#4e5968`): Secondary descriptions, metadata, list-item descriptions.
+- **Subtle** (`#6b7684`): Captions, time-remaining text, footer copy.
+- **Placeholder** (`#8b95a1`): Input placeholders, the lowest readable tier.
+- **Disabled** (`#b1b8c3` / `#ced4de`): Disabled text and icons.
+
+### Surface & Border
+- **Page** (`#ffffff`): Default canvas.
+- **Surface Alt** (`#fafbfd`): Soft alternation — section dividers, "softly different" panels.
+- **Surface Neutral** (`#f2f5f8`): Content-shelf fills, search-bar resting surface, secondary card surface.
+- **Surface Neutral 2** (`#f2f4f6`): A second-pass neutral, used in modal interiors.
+- **Divider** (`#e3e7ee`): Default horizontal rules, table borders.
+- **Input Border** (`#ced4de`): Default input field border.
+
+### Label / Badge Family
+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 — *오픈예정*, *오픈중*, *얼리버드*, *마감임박*, *앵콜*, *인기*.
+
+- **Yellow** — `solid` `#fcc500` (text `#fff`), `tint` surface `#fffae1` (text `#fcc500`). For trending / hot-deal / 인기 (popular).
+- **Blue** — `solid` `#4672f9` (text `#fff`), `tint` surface `#ecf2ff` (text `#4672f9`), `accent` surface `#d7e3ff`, alt `#325ad7`, pale-link `#5a87ff`. For info, neutral state tags, secondary CTAs.
+- **Red** — `solid` `#ff5959` (text `#fff`), `tint` surface `#fff0f0` (text `#ff5959`), `accent` surface `#ffdcdc`, strong `#e43131`, softs `#ff6666`/`#ff7777`. For *마감임박* (deadline closing), refund, withdraw, validation error.
+- **Mint** — the same `#00c4c4` family used for primary CTA — when used as a label, signals "active funding" / "오픈중".
+
+### Semantic
+- **Success Green** (`#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.
+- **Alert Red** (`#ff5959` family): All error and urgency. The deadline-closing chip is the only place red ever feels celebratory rather than punitive.
+- **Image Error Thumb** (`#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.
+
+### Overlay / Modal
+- **Scrim Light** (`rgba(0,0,0,.06)` / `.15` / `.32` / `.4`): Tier of darkening overlays for menus, popovers, modals, full-sheet.
+- **White Veil** (`rgba(255,255,255,.7)` / `.9` / `.95`): For sticky headers on photography-rich pages.
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary**: `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`
+- **Display Accent**: None — Pretendard does the entire job
+- Variable-axis Pretendard supplies 400/500/700 weights as needed; subset CSS is dynamic via cdnjs Pretendard 1.3.9
+- Base body size: **15px** (not 14, not 16 — a deliberate Korean-rendering choice; Pretendard's 15px reads cleaner than 14px at typical Korean line lengths)
+
+### Hierarchy
+
+| 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.
+
+### Letter Spacing
+- Default: **0** (no tracking on Korean body)
+- Largest display only: **-0.03em** (rare; visible only in the very biggest home-hero numerals)
+
+## 4. Spacing & Layout
+
+### Spacing Scale (px)
+
+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.
+
+### Layout
+
+- **Page max-width**: ~1200px content rail centered with auto margins; full-bleed hero photography routinely breaks out
+- **Card grid**: 4-column on desktop home (240–280px each), 2-column on tablet, 1-column on mobile
+- **Card aspect**: Reward thumbnail is 4:3, with a 16:9 variant on the hero carousel
+- **Header height**: ~64px fixed, with a `rgba(255,255,255,.95)` veil so the photography behind it stays half-readable
+- **Section vertical rhythm**: 32–48px between sections, 16–20px within a card
+- **Card padding**: 16px on listing cards, 20–24px on detail-page cards
+
+### Radius
+
+`8px` is the system default (112 occurrences). The full scale:
+
+- **3px** (26x): The smallest chip / inline indicator
+- **4px** (56x): Inline tag, mini-badge
+- **8px** (112x): Buttons, cards, inputs, modal — *the default for everything*
+- **16px** (24x): Hero modals, the bottom-sheet pattern (rounded only at top: `16px 16px 0 0`, 3x)
+- **50%** (30x): Avatars, indicator dots, circular maker badges
+- **100px / 999em** (6 + 3x): Pill-shaped filter chips and the "see more" floating button
+
+The 2px radius variant exists (7x) but is reserved for technical contexts — chart legend swatches, image-crop frames — not the user-facing UI.
+
+## 5. Components
+
+### Buttons
+
+The most distinctive system in the bundle. Class names follow the pattern `.Button_<role>__<hash>` with five orthogonal axes:
+
+1. **Color variant**: `mint` (brand) · `blue` (info) · `red` (destructive) · `yellow` (promo) · `green` (success)
+2. **Shape variant**: `contained` (filled) · `outlined` (border-only, default) · `tint` (pastel surface + saturated label)
+3. **Width**: default · `block` (full-row)
+4. **Geometry**: rectangular · `circular` · `badge` (chip-sized)
+5. **State**: default · `hover` · `active` · `disabled` · `loading`
+
+**Primary CTA (filled mint contained)**:
+- Background `#00c4c4`, text `#ffffff`, border-color `#00c4c4`, radius `8px`
+- Hover: background stays `#00c4c4` with subtle inner-shadow shift
+- Active: background and text desaturate to `#07abae`-family
+
+**Secondary CTA (outlined mint)**:
+- Background `transparent`, text `#00c4c4`, border `1px solid #00c4c4`
+- Hover: background `#e6fafa`, text `#07abae`
+
+**Tint button (the Wadiz signature)**:
+- Background `#e6fafa`, text `#00c4c4`, border `1px solid #e6fafa`
+- Hover: background `#bef5f5`, text `#07abae`
+- This is the third button shape — neither filled-loud nor outlined-quiet — and it carries the most visual weight in marketing modules
+
+### Label Badges
+
+The funding-state vocabulary. Pattern `.LabelBadge_<color>__<hash>.LabelBadge_<shape>__<hash>`:
+
+- **solid**: `border: solid 1px <hue>; background-color: <hue>; color: #fff;`
+- **outlined**: `border: solid 1px <hue>; background-color: #fff; color: <hue>;`
+- **tint**: `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.
+
+### Reward Card
+
+The single most-shipped component. Structure:
+
+- **Thumbnail** (4:3, radius `8px` at the top): Lazy-loaded with `opacity 0 → 1` 0.25s ease-in-out fade — `.CardThumbnail_visible__343f4`
+- **Error state**: When the thumbnail fails, `background-color: #ffb9b9` (soft pink-red) — a recognizable Wadiz failure state, not a gray box
+- **LabelBadge row**: 1–2 chips at top-left (`마감임박` + `얼리버드`)
+- **Maker line**: `font-size: 13px`, `color: #6b7684` — small, secondary
+- **Title**: `font-size: 18px`, `font-weight: 700`, `color: #191f28`, 2-line clamp
+- **Funding row**: Percentage `28px / 700 / #00c4c4` + supporter count `14px / 400 / #4e5968`
+- **Progress bar**: 4px tall, radius `2px`, fill `#00c4c4`, track `#f2f5f8`
+
+### Inputs
+
+- Border `1px solid #ced4de`, radius `8px`, padding `12–14px 16px`, font `15px / 400 / #333d4b`
+- Focus: border `#00c4c4`, no shadow ring (Wadiz prefers a colored border change over an outline glow)
+- Disabled: background `#fafbfd`, text `#b1b8c3`
+- Error: border `#ff5959`, helper-text below in `#ff5959 / 13px`
+
+### Header / Navigation
+
+- Fixed top, height ~64px, background `rgba(255,255,255,.95)` so photography below stays half-visible
+- Logo wordmark left, primary nav center (펀딩 · 프리오더 · 비즈니스 · 모집 · 광고 · 와디즈 매니저), search + login right
+- Drop shadow `0 1px #0000000f` — barely a hairline
+
+### Modal / Sheet
+
+- Desktop modal: radius `16px`, shadow `0 16px 16px -1px #0a16461a, 0 0 5px #0a16460f`, max-width `~480px`, padding `32px`
+- Mobile bottom-sheet: radius `16px 16px 0 0` (top corners only), full-width, slide-up
+- Scrim `rgba(0,0,0,.4)`
+
+### Tooltip / Popover
+
+- Background `rgba(17,17,17,.8)`, text `#ffffff`, radius `4px`, padding `8px 12px`, font `12px / 400`
+- Shadow `0 15px 30px #00000026`
+
+## 6. Imagery & Iconography
+
+### Imagery
+
+Wadiz'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.
+
+### Iconography
+
+- **Style**: Outlined, 1.5-2px stroke, 24px default canvas; filled variants exist for active/selected states
+- **Hit area**: 40-44px around 24px icons
+- **Color**: Inherits text color by default (`#4e5968` for muted nav, `#191f28` for primary, `#00c4c4` for active)
+- **Common icons**: Heart (즐겨찾기), bell (알림), search (검색), share (공유), filter (필터), close (X), chevron-down (드롭다운), check (확인 — uses mint), exclamation (마감임박 — uses red)
+
+## 7. Motion & Interaction
+
+- **Default easing**: `ease-in-out` for thumbnail fade-in (0.25s); the system avoids `cubic-bezier` show-off curves
+- **Page transitions**: Instant — Wadiz is a content site, not a marketing scroll experience
+- **Hover**: Cards do a barely-perceptible lift (`box-shadow 0 6px 6px → 0 32px 40px -2px`) — the resting elevation thickens, no translate
+- **CTA hover**: Color shift only (no scale, no shadow change) — text `#00c4c4 → #07abae` on outlined, background tint deepens on filled
+- **Loading**: The waffle loader is the global loading affordance — never a spinner, never a skeleton on the home grid (the imagery loads with `opacity 0 → 1`, which IS the skeleton)
+- **Tap feedback** (mobile): Active state is the same as hover — saturated mint becomes `#07abae`, tint surface darkens to `#bef5f5`
+- **Transitions**: `transition-property: opacity` `0.25s ease-in-out` is the most common; nothing animates color transitions
+- **Scroll**: No parallax, no reveal-on-scroll; the page is a quiet vertical river
+
+## 8. Voice & Microcopy
+
+Wadiz 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.
+
+### Microcopy patterns observed
+
+- Funding status: `오픈예정` · `오픈중` · `얼리버드` · `마감임박` · `종료` · `앵콜` — short, factual
+- Empty state: descriptive without apology — `아직 등록된 펀딩이 없어요` (rather than 죄송합니다)
+- Confirm dialogs: action-oriented buttons — `확인` / `취소`, never `예` / `아니오`
+- Loading: silent (the waffle loader is the only signal — no copy)
+- Errors: specific not vague — `해당 펀딩은 종료되었어요` rather than "오류가 발생했습니다"
+- Time: relative — `3시간 남음` · `5일 남음` (not absolute timestamps in feed)
+- CTA verbs: `펀딩하기` · `알림받기` · `공유하기` · `더보기` — *-하기* gerund pattern, not imperative `해라`
+
+### IP guardrail
+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.
+
+## 9. Accessibility & States
+
+- **Focus ring**: 2px solid `#00c4c4` outline with `2px` offset (observed on `Checkbox_icon`)
+- **Contrast**: Heading `#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.
+- **Disabled**: Text `#b1b8c3` on `#fafbfd` = ~2.7:1 (intentionally low — disabled IS the signal)
+- **Hit area**: Minimum 40x40px (mobile increases to 44x44)
+- **Labels**: All inputs paired with persistent above-field labels, never placeholder-as-label
+- **Error state**: Color (`#ff5959`) + iconography (`!` icon) + helper text — never color alone
+
+## 10. Philosophy & Principles
+
+Wadiz's design philosophy can be read off the production system without needing brand-published manifestos:
+
+1. **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.
+
+2. **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.
+
+3. **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.
+
+4. **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.
+
+5. **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.
+
+## 11. Personas (Speculative — Not Brand-Confirmed)
+
+> ⚠️ 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.
+
+- **The supporter (`서포터`)**: 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.
+- **The maker (`메이커`)**: 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.
+- **The browser (`구경꾼`)**: 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.
+
+## 12. Anti-Patterns (System-Level)
+
+- **No verbatim Wadiz taglines** — voice patterns yes, brand copy no
+- **No "최고" / "최강" / "혁신적" marketing superlatives** — funding state vocabulary does the work
+- **No drop-shadows with brand color** — shadows are always blue-black tinted, never mint
+- **No mint on photography** — mint colorizes chrome, not images (the waffle loader is the single exception)
+- **No 12px+ radius on functional buttons** — that's the consumer-app idiom; Wadiz stays at 8px to read as catalog
+- **No skeleton placeholders on the home grid** — the opacity fade-in IS the loading state
+- **No serif** — Pretendard is the entire system
+- **No black `#000`** — `#191f28` is the floor
+
+## 13. Reference Examples (User-Side)
+
+- **Home rewards feed** (`/`) — the 4-column reward-card grid with funding-state badges
+- **Category listing** (`/web/wreward/category/<id>`) — filtered grid with persistent filter chips
+- **Campaign detail** (`/web/campaign/<id>`) — hero photography full-bleed, sticky funding panel right rail
+- **Funding sheet** (mobile bottom-sheet pattern) — `16px 16px 0 0` rounded top, slide-up, `rgba(0,0,0,.4)` scrim
+
+## 14. Notes on Adaptation
+
+When borrowing Wadiz's language for a related product:
+
+- If you're building a **rewards marketplace**, keep the white-page + 8px-radius + tint-button trio — that's the legible Wadiz signature
+- If you're building a **non-funding catalog** (e.g., gallery commerce), drop the funding-state badges entirely and the system reads as a generic-but-clean Korean catalog (you've lost the IP)
+- If you're building a **fintech adjacent surface**, swap mint `#00c4c4` for your brand hue, keep the Toss-family ink scale, keep the tint-button pattern — that's the broadly-applicable layer
+- The brand color is **the only swap-out point**. Everything else is industry-standard Korean product hygiene and is fine to keep.
+
+## 15. Footer — Verification
+
+**Verified:** 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 observed
+- `https://static.wadiz.kr/static/web/wui.css` — reset + body font-family canonical declaration
+- Proof: `assets/_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:**
+- No conflicts found. The CSS bundle is internally consistent and matches the rendered HTML structure across all three surfaces.
+- Known weak spot: filled mint CTA contrast is borderline AA (white text on `#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:**
+1. Re-discover canonical URL for the "와디즈 디자인 시스템 구축하기" blog post (linked in Wadiz internal search, 404 on direct fetch) — would upgrade §10 from "inferred from production system" to "brand-confirmed"
+2. Detail-page (`/campaign/<id>`) and funding-sheet flows not inspected this pass — UPDATE pass recommended to verify §5 sticky funding panel + funding sheet measurements
+3. §11 personas explicitly marked as inferred — replace with audience research before any production use

package/web/references/wanted/DESIGN.md

@@ -1,6 +1,20 @@
 ---
-omd: 0.1
-brand: Wanted
+id: wanted
+name: Wanted
+country: KR
+category: productivity
+homepage: "https://www.wanted.co.kr"
+primary_color: "#0066ff"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=wanted.co.kr&sz=256"
+verified: "2026-05-15"
+omd: "0.1"
+ds:
+  name: Wanted Montage
+  url: "https://montage.wanted.co.kr/"
+  type: system
+  description: Wanted's Montage design system docs — components, foundations, Wanted Sans, and the brandcenter resource hub.
 ---
 
 # Design System Inspiration of Wanted (원티드)