oh-my-design-cli 1.6.7 → 1.7.1

package/web/references/upstage/DESIGN.md

@@ -17,6 +17,44 @@ ds:
   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"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    primary: "#5b52ff"
+    primary-hover: "#1e116e"
+    primary-deep: "#281ca5"
+    accent: "#d2ff95"
+    body: "#70757f"
+    heading: "#0a0d14"
+    muted: "#6e7191"
+    canvas: "#ffffff"
+    subtle: "#f9fafb"
+    footer: "#191722"
+    plum: "#3c043b"
+    lavender: "#f0ecfd"
+    purple-100: "#dde3ff"
+    border: "#eeeeee"
+    border-subtle: "#f7f7fc"
+    on-primary: "#ffffff"
+  typography:
+    family: { sans: "Geist", mono: "monospace" }
+    hero-h1:    { size: 58, weight: 600, use: "Hero headline (Espeak face)" }
+    section-h2: { size: 40, weight: 600, use: "Section headings" }
+    body-lg:    { size: 18, weight: 400, use: "Dominant body size" }
+    body:       { size: 16, weight: 400, use: "Standard body" }
+    button:     { size: 16, weight: 500, use: "Button + nav labels" }
+    caption:    { size: 14, weight: 400, use: "Small / caption" }
+    micro:      { size: 12, weight: 400, use: "Legal / micro" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 }
+  rounded: { sm: 8, md: 8, lg: 8, full: 9999 }
+  shadow:
+    none: "none"
+  components:
+    button-primary: { type: button, bg: "#5b52ff", fg: "#ffffff", radius: 8, font: "16px/500", use: "Try now persistent nav CTA" }
+    card: { type: card, bg: "transparent", fg: "#70757f", radius: 8, use: "Product/solution/customer card; no shadow, inline Learn more link" }
+    nav: { type: tab, bg: "transparent", fg: "#0a0d14", radius: 8, use: "Transparent over hero, white below; 5 categories + Try now CTA" }
+  components_harvested: true
 ---
 
 # Upstage — DESIGN.md

package/web/references/velog/DESIGN.md

@@ -15,6 +15,34 @@ ds:
   url: "https://github.com/velog-io/velog"
   type: system
   description: velog's production frontend is fully open-source (MIT); its design tokens live in src/lib/styles (themes.ts + palette.ts), built on the Open Color palette.
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    primary: "#12b886"
+    primary-alt: "#20c997"
+    destructive: "#ff6b6b"
+    text: "#212529"
+    body: "#495057"
+    muted: "#868e96"
+    canvas: "#f8f9fa"
+    surface: "#ffffff"
+    border: "#e9ecef"
+    border-strong: "#dee2e6"
+  typography:
+    family: { sans: "system-ui", mono: "ui-monospace" }
+    body:  { size: 16, weight: 400, use: "Body copy, reading surface" }
+    login: { size: 16, weight: 700, use: "Login pill label" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 }
+  rounded: { sm: 4, md: 8, lg: 16, full: 9999 }
+  shadow:
+    none: "none"
+  components:
+    button-login: { type: button, bg: "#212529", fg: "#ffffff", radius: 16, font: "16px/700", use: "Dark sign-in pill, top-right header, h32" }
+    button-write: { type: button, bg: "#12b886", fg: "#ffffff", use: "Brand teal primary-action — compose a post" }
+    header: { type: card, bg: "#ffffff", fg: "#212529", font: "16px", use: "Top navigation surface" }
+    page: { type: card, bg: "#f8f9fa", fg: "#212529", font: "16px", use: "Soft-gray reading canvas framing white blocks" }
+  components_harvested: true
 ---
 # Design System Inspiration of velog
 

package/web/references/vercel/DESIGN.md

@@ -16,6 +16,50 @@ ds:
   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"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    primary: "#171717"
+    black: "#000000"
+    canvas: "#ffffff"
+    ship: "#ff5b4f"
+    preview: "#de1d8d"
+    develop: "#0a72ef"
+    link: "#0072f5"
+    body: "#4d4d4d"
+    muted: "#666666"
+    placeholder: "#808080"
+    border: "#ebebeb"
+    surface-tint: "#fafafa"
+    badge-bg: "#ebf5ff"
+    badge-text: "#0068d6"
+    on-primary: "#ffffff"
+  typography:
+    family: { sans: "Geist", mono: "Geist Mono" }
+    display-hero: { size: 48, weight: 600, lineHeight: 1.10, tracking: -2.4, use: "Hero, billboard impact" }
+    section:      { size: 40, weight: 600, lineHeight: 1.20, tracking: -2.4, use: "Feature section titles" }
+    subheading:   { size: 32, weight: 600, lineHeight: 1.25, tracking: -1.28, use: "Card headings, sub-sections" }
+    card-title:   { size: 24, weight: 600, lineHeight: 1.33, tracking: -0.96, use: "Feature cards" }
+    body-lg:      { size: 20, weight: 400, lineHeight: 1.80, use: "Introductions, descriptions" }
+    body:         { size: 18, weight: 400, lineHeight: 1.56, use: "Standard reading text" }
+    body-medium:  { size: 16, weight: 500, lineHeight: 1.50, use: "Navigation, emphasized text" }
+    button:       { size: 14, weight: 500, lineHeight: 1.43, use: "Buttons, links" }
+    caption:      { size: 12, weight: 400, lineHeight: 1.33, use: "Metadata, tags" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 }
+  rounded: { sm: 4, md: 6, lg: 12, full: 9999 }
+  shadow:
+    subtle: "rgba(0,0,0,0.04) 0px 2px 2px"
+    border: "rgba(0,0,0,0.08) 0px 0px 0px 1px"
+    card: "rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, rgba(0,0,0,0.04) 0px 8px 8px -8px"
+  components:
+    button-primary: { type: button, bg: "#171717", fg: "#ffffff", radius: 6, padding: "8px 16px", use: "Primary CTA Start Deploying" }
+    button-secondary: { type: button, bg: "#ffffff", fg: "#171717", radius: 6, padding: "0 6px", use: "Shadow-bordered secondary; ring 1px #ebebeb" }
+    badge: { type: badge, bg: "#ebf5ff", fg: "#0068d6", radius: 9999, padding: "0 10px", font: "12px/500", use: "Status badges, tags, feature labels" }
+    card: { type: card, bg: "#ffffff", radius: 8, use: "Shadow-bordered card; border via 1px shadow" }
+    input: { type: input, bg: "#ffffff", radius: 6, use: "Border via shadow technique; focus blue ring" }
+    nav: { type: tab, bg: "#ffffff", fg: "#171717", font: "14px/500", use: "Sticky horizontal nav; dark pill CTAs", active: "weight 600 or underline" }
+  components_harvested: true
 ---
 
 # Design System Inspiration of Vercel

package/web/references/voicetube/DESIGN.md

@@ -10,6 +10,45 @@ logo:
   slug: "https://www.google.com/s2/favicons?domain=tw.voicetube.com&sz=256"
 verified: "2026-06-03"
 omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    primary: "#7e3aaf"
+    vibrant: "#a73aaf"
+    gradient-start: "#653aaf"
+    deep-purple: "#210040"
+    canvas: "#18131d"
+    surface: "#251633"
+    nav-end: "#1d102b"
+    tint: "#e0d0ec"
+    body: "#e3e3e3"
+    secondary: "#b4b4b4"
+    placeholder: "#9ca3af"
+    error: "#ed4f55"
+    success: "#33991d"
+    link: "#4283e4"
+    on-primary: "#ffffff"
+  typography:
+    family: { sans: "PingFang TC", mono: "ui-monospace" }
+    h2xl:   { size: 24, weight: 700, lineHeight: 1.425, use: "Largest headings" }
+    xl:     { size: 20, weight: 600, lineHeight: 1.425, use: "Section heads" }
+    lg:     { size: 18, weight: 500, lineHeight: 1.425, use: "Sub-heads" }
+    base:   { size: 16, weight: 400, lineHeight: 1.425, use: "Body, button labels" }
+    sm:     { size: 14, weight: 400, lineHeight: 1.425, use: "Secondary text, tags" }
+    xs:     { size: 12, weight: 400, lineHeight: 1.425, use: "Captions, fine print" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 }
+  rounded: { sm: 4, md: 4, lg: 8, full: 9999 }
+  shadow:
+    none: "none"
+  components:
+    button-primary: { type: button, bg: "#653aaf", fg: "#ffffff", radius: 9999, padding: "0 20px", font: "16px/500", use: "Gradient CTA #653AAF→#A73AAF, h40" }
+    button-outline: { type: button, bg: "transparent", fg: "#e3e3e3", radius: 9999, padding: "0 20px", font: "16px/500", use: "Ghost/secondary; 1px #e3e3e3 border, h40" }
+    nav: { type: tab, bg: "#210040", fg: "#e3e3e3", use: "Top nav gradient #210040→#1D102B, h64" }
+    sidebar-item: { type: listItem, bg: "#251633", fg: "#e3e3e3", radius: 0, padding: "12px 8px", font: "14px/400", use: "Sidebar nav item; active rgba purple tint" }
+    tag: { type: badge, bg: "#7e3aaf", fg: "#e3e3e3", radius: 4, padding: "2.5px 12px", font: "14px/400", use: "Brand tag chip" }
+    input: { type: input, bg: "transparent", fg: "#e3e3e3", radius: 4, use: "Text input; 1px #e3e3e3 border, focus #7e3aaf, error #ed4f55" }
+  components_harvested: true
 ---
 
 # VoiceTube

package/web/references/voltagent/DESIGN.md

@@ -10,6 +10,50 @@ logo:
   slug: VoltAgent
 verified: "2026-05-15"
 omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    primary: "#00d992"
+    mint: "#2fd6a1"
+    emerald: "#10b981"
+    purple: "#818cf8"
+    cobalt: "#306cce"
+    canvas: "#050507"
+    surface: "#101010"
+    border: "#3d3a39"
+    text: "#f2f2f2"
+    on-primary: "#ffffff"
+    body: "#b8b3b0"
+    muted: "#8b949e"
+    success: "#008b00"
+    warning: "#ffba00"
+    danger: "#fb565b"
+    info: "#4cb3d4"
+  typography:
+    family: { sans: "system-ui", mono: "SFMono-Regular" }
+    display:     { size: 60, weight: 400, lineHeight: 1.00, tracking: -0.65, use: "Hero, compressed blocks" }
+    section:     { size: 36, weight: 400, lineHeight: 1.11, tracking: -0.9, use: "Section headings" }
+    subheading:  { size: 24, weight: 700, lineHeight: 1.33, tracking: -0.6, use: "Bold emphasis sub-heads" }
+    overline:    { size: 20, weight: 600, lineHeight: 1.40, tracking: 0.5, use: "Uppercase section labels" }
+    feature:     { size: 20, weight: 500, lineHeight: 1.40, use: "Card headings, feature names" }
+    body:        { size: 16, weight: 400, lineHeight: 1.50, use: "Body, nav links, buttons" }
+    caption:     { size: 14, weight: 400, lineHeight: 1.43, use: "Descriptions, metadata, badges" }
+    micro:       { size: 12, weight: 400, lineHeight: 1.33, use: "Smallest sans text" }
+    code:        { size: 14, weight: 400, lineHeight: 1.43, use: "Inline code, terminal output" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 }
+  rounded: { sm: 4, md: 6, lg: 8, full: 9999 }
+  shadow:
+    haze: "rgba(92,88,85,0.2) 0px 0px 15px"
+    dramatic: "rgba(0,0,0,0.7) 0px 20px 60px"
+  components:
+    button-ghost: { type: button, bg: "transparent", fg: "#ffffff", radius: 6, padding: "12px 16px", use: "Default interactive; 1px #3d3a39 border" }
+    button-primary: { type: button, bg: "#101010", fg: "#2fd6a1", radius: 6, padding: "12px 16px", use: "Powered-on CTA; mint text on dark, mint outline" }
+    button-container: { type: button, bg: "#101010", fg: "#f2f2f2", radius: 8, padding: "20px", use: "Card-like button for larger surfaces; 3px #3d3a39 border" }
+    card: { type: card, bg: "#101010", fg: "#f2f2f2", radius: 8, use: "Content card; 1px #3d3a39 border, 2px #00d992 if active; haze shadow" }
+    input: { type: input, bg: "#101010", fg: "#f2f2f2", use: "Inferred; #3d3a39 border, mint focus ring" }
+    nav: { type: tab, bg: "#050507", fg: "#f2f2f2", font: "14px/500", use: "Sticky top nav; links shift green on hover" }
+  components_harvested: true
 ---
 
 # Design System Inspiration of VoltAgent

package/web/references/wadiz/DESIGN.md

@@ -10,25 +10,59 @@ logo:
   slug: "https://www.google.com/s2/favicons?domain=wadiz.kr&sz=256"
 verified: "2026-05-14"
 omd: "0.1"
-
-## 16. Do's and Don'ts
-
-### Do
-- Reserve the brand mint #00c4c4 for interactive moments only — CTA fills, links, checkbox marks, focus outlines, progress fills, and the waffle loader — so mint always reads as a verb
-- Default to 8px radius for buttons, cards, inputs, and modals (the 112-occurrence workhorse), reserving 16px for hero modals and the 16px 16px 0 0 bottom-sheet pattern and 50% for avatars and indicator dots
-- Set body text in Pretendard at 15px / 400 and reserve 700 for funding amounts, percentages, headings, and maker names so the eye bounces between the two near-parity weights
-- Use the Toss-family ink scale (#191f28 heading, #4e5968 muted, #6b7684 subtle, #8b95a1 placeholder) for all text instead of pure black
-- Build funding-state chips from the LabelBadge system using solid / outlined / tint shapes across the mint, yellow #fcc500, blue #4672f9, and red #ff5959 hues (오픈중 = mint solid, 마감임박 = red solid, 인기 = yellow solid)
-- Reach for the tint button (#e6fafa surface, #00c4c4 label, hover to #bef5f5 / #07abae) to carry marketing weight, letting it land before outlined buttons in the page rhythm
-
-### Don't
-- Use pure black #000 anywhere — #191f28 is the ink floor of the system
-- Apply mint #00c4c4 onto campaign photography or thumbnails — mint colorizes the chrome that frames the image, with the waffle loader as the single exception
-- Tint drop-shadows with the brand color — shadows stay blue-black (0 6px 6px -1px #0a16461a), never mint, never theatrical
-- Put 12px or larger radius on functional buttons — that consumer-app idiom breaks Wadiz's 8px retail-catalog read
-- Drop skeleton placeholders on the home grid — the thumbnail opacity 0 to 1 fade-in over 0.25s ease-in-out IS the loading state
-- Reach for marketing superlatives like 최고, 최강, or 혁신적, or introduce a serif or 300-weight thin face — the funding-state vocabulary does the selling and Pretendard does the entire type job
-
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    primary: "#00c4c4"
+    primary-hover: "#07abae"
+    tint: "#e6fafa"
+    tint-accent: "#bef5f5"
+    heading: "#191f28"
+    body: "#333d4b"
+    muted: "#4e5968"
+    subtle: "#6b7684"
+    placeholder: "#8b95a1"
+    disabled: "#b1b8c3"
+    canvas: "#ffffff"
+    surface-alt: "#fafbfd"
+    surface-neutral: "#f2f5f8"
+    divider: "#e3e7ee"
+    border: "#ced4de"
+    success: "#00af84"
+    alert: "#ff5959"
+    info: "#4672f9"
+    promo: "#fcc500"
+    on-primary: "#ffffff"
+  typography:
+    family: { sans: "Pretendard", mono: "ui-monospace" }
+    hero-numeral: { size: 64, weight: 700, lineHeight: 1.1, use: "Funded amount % on detail pages" }
+    h1:           { size: 48, weight: 700, lineHeight: 1.2, use: "Home banner, category landing" }
+    h2:           { size: 32, weight: 700, lineHeight: 1.25, use: "Section titles" }
+    h3:           { size: 24, weight: 700, lineHeight: 1.3, use: "Maker name, modal headings" }
+    card-title:   { size: 18, weight: 700, lineHeight: 1.35, use: "Reward card project title" }
+    lead:         { size: 17, weight: 400, lineHeight: 1.5, use: "Short paragraph leads" }
+    body:         { size: 15, weight: 400, lineHeight: 1.55, use: "Description text, body copy" }
+    label:        { size: 14, weight: 400, lineHeight: 1.4, use: "Time-remaining, supporter count" }
+    caption:      { size: 13, weight: 400, lineHeight: 1.4, use: "Helper text, fine print" }
+    small:        { size: 12, weight: 400, lineHeight: 1.3, use: "Badge text, micro-tags" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 20, xl: 24, xxl: 32, section: 64 }
+  rounded: { sm: 4, md: 8, lg: 16, full: 9999 }
+  shadow:
+    header: "0 1px #0000000f"
+    modal: "0 16px 16px -1px #0a16461a, 0 0 5px #0a16460f"
+  components:
+    button-primary: { type: button, bg: "#00c4c4", fg: "#ffffff", radius: 8, use: "Filled mint contained CTA; active #07abae family" }
+    button-secondary: { type: button, bg: "transparent", fg: "#00c4c4", radius: 8, use: "Outlined mint; 1px #00c4c4 border, hover #e6fafa" }
+    button-tint: { type: button, bg: "#e6fafa", fg: "#00c4c4", radius: 8, use: "Wadiz signature tint button; hover #bef5f5" }
+    label-badge-solid: { type: badge, bg: "#00c4c4", fg: "#ffffff", use: "Funding-state chip solid (오픈중)" }
+    label-badge-tint: { type: badge, bg: "#e6fafa", fg: "#00c4c4", use: "Funding-state chip tint (얼리버드)" }
+    reward-card: { type: card, bg: "#ffffff", radius: 8, padding: "16px", use: "Most-shipped component; 4:3 thumbnail, badge row, funding row" }
+    input: { type: input, bg: "#ffffff", fg: "#333d4b", radius: 8, padding: "12px 16px", font: "15px/400", use: "Border 1px #ced4de, focus #00c4c4, error #ff5959" }
+    modal: { type: dialog, bg: "#ffffff", radius: 16, padding: "32px", use: "Desktop modal max-w 480px; mobile bottom-sheet top corners only" }
+    tooltip: { type: card, bg: "#191f28", fg: "#ffffff", radius: 4, padding: "8px 12px", font: "12px/400", use: "Tooltip/popover" }
+    nav: { type: tab, bg: "#ffffff", fg: "#191f28", use: "Fixed top header h64, white veil, hairline shadow" }
+  components_harvested: true
 ---
 
 # Design System Inspiration of Wadiz
@@ -361,3 +395,21 @@ When borrowing Wadiz's language for a related product:
 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
+
+## 16. Do's and Don'ts
+
+### Do
+- Reserve the brand mint #00c4c4 for interactive moments only — CTA fills, links, checkbox marks, focus outlines, progress fills, and the waffle loader — so mint always reads as a verb
+- Default to 8px radius for buttons, cards, inputs, and modals (the 112-occurrence workhorse), reserving 16px for hero modals and the 16px 16px 0 0 bottom-sheet pattern and 50% for avatars and indicator dots
+- Set body text in Pretendard at 15px / 400 and reserve 700 for funding amounts, percentages, headings, and maker names so the eye bounces between the two near-parity weights
+- Use the Toss-family ink scale (#191f28 heading, #4e5968 muted, #6b7684 subtle, #8b95a1 placeholder) for all text instead of pure black
+- Build funding-state chips from the LabelBadge system using solid / outlined / tint shapes across the mint, yellow #fcc500, blue #4672f9, and red #ff5959 hues (오픈중 = mint solid, 마감임박 = red solid, 인기 = yellow solid)
+- Reach for the tint button (#e6fafa surface, #00c4c4 label, hover to #bef5f5 / #07abae) to carry marketing weight, letting it land before outlined buttons in the page rhythm
+
+### Don't
+- Use pure black #000 anywhere — #191f28 is the ink floor of the system
+- Apply mint #00c4c4 onto campaign photography or thumbnails — mint colorizes the chrome that frames the image, with the waffle loader as the single exception
+- Tint drop-shadows with the brand color — shadows stay blue-black (0 6px 6px -1px #0a16461a), never mint, never theatrical
+- Put 12px or larger radius on functional buttons — that consumer-app idiom breaks Wadiz's 8px retail-catalog read
+- Drop skeleton placeholders on the home grid — the thumbnail opacity 0 to 1 fade-in over 0.25s ease-in-out IS the loading state
+- Reach for marketing superlatives like 최고, 최강, or 혁신적, or introduce a serif or 300-weight thin face — the funding-state vocabulary does the selling and Pretendard does the entire type job

package/web/references/wanted/DESIGN.md

@@ -15,6 +15,52 @@ ds:
   url: "https://montage.wanted.co.kr/"
   type: system
   description: Wanted's Montage design system docs — components, foundations, Wanted Sans, and the brandcenter resource hub.
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    primary: "#0066ff"
+    brand-black: "#14191e"
+    accent-orange: "#ff5c00"
+    accent-pink: "#ff8eff"
+    accent-sky: "#00adff"
+    accent-violet: "#8364ff"
+    brand-grey: "#f0f4f8"
+    canvas: "#ffffff"
+    surface-subtle: "#f7f7f8"
+    heading: "#171719"
+    body: "#333333"
+    disabled: "#a0a0a0"
+    divider: "#e5e8eb"
+    error: "#f0483c"
+    success: "#00b97c"
+    warning: "#ffab00"
+  typography:
+    family: { sans: "Pretendard Variable", mono: "Pretendard Variable" }
+    display:    { size: 32, weight: 700, lineHeight: 1.25, use: "Brandcenter, montage hero" }
+    h1:         { size: 24, weight: 700, lineHeight: 1.4, use: "Job detail header" }
+    h2:         { size: 20, weight: 700, lineHeight: 1.4, use: "Section titles" }
+    subtitle:   { size: 16, weight: 600, lineHeight: 1.5, use: "JobCard position title" }
+    body:       { size: 14, weight: 400, lineHeight: 1.6, use: "Standard reading, filter chip label" }
+    body-small: { size: 13, weight: 400, lineHeight: 1.5, use: "Company name on JobCard" }
+    caption:    { size: 12, weight: 400, lineHeight: 1.5, use: "Metadata, dates, location" }
+    micro:      { size: 10, weight: 500, lineHeight: 1.4, use: "Footer link strip" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 20, xl: 24, xxl: 32, section: 64 }
+  rounded: { sm: 6, md: 8, lg: 12, full: 9999 }
+  shadow:
+    floating: "0px 4px 12px rgba(0,0,0,0.08)"
+    modal: "0px 8px 24px rgba(0,0,0,0.12)"
+  components:
+    button-primary: { type: button, bg: "#0066ff", fg: "#ffffff", radius: 8, padding: "7px 14px", font: "14px/400 Pretendard Variable", use: "Sign-up / apply CTA (filled)" }
+    button-secondary: { type: button, fg: "#171719", radius: 8, padding: "7px 14px", font: "14px/400 Pretendard Variable", use: "Header nav text button" }
+    filter-chip: { type: badge, fg: "#171719", radius: 10, padding: "7px 9px 7px 11px", font: "14px/400 Pretendard Variable", use: "Filter taxonomy chip, hover bg #f7f7f8" }
+    jobcard: { type: card, bg: "#ffffff", radius: 12, padding: "12px 16px", use: "Job posting card, no shadow, gutter separation" }
+    segmented: { type: tab, bg: "#f7f7f8", radius: 10, padding: "0 4px", font: "14px/400 Pretendard Variable", use: "Sort control track", active: "white segment 8px radius #333333 text" }
+    reward-badge: { type: badge, fg: "#ffffff", radius: 2, font: "12px/600 Pretendard Variable", use: "합격보상금 overlay on thumbnail" }
+    micro-tag: { type: badge, bg: "#a0a0a0", fg: "#ffffff", radius: 0, padding: "5px 7px", font: "10px/500 Pretendard Variable", use: "Footer legal pill" }
+    search-input: { type: input, fg: "#171719", radius: 9999, font: "14px/400 Pretendard Variable", use: "Header search trigger" }
+    avatar-pill: { type: avatar, bg: "#171719", radius: 9999, use: "Header user avatar 38x38" }
+  components_harvested: true
 ---
 
 # Design System Inspiration of Wanted (원티드)

package/web/references/warp/DESIGN.md

@@ -10,6 +10,43 @@ logo:
   slug: warp
 verified: "2026-05-15"
 omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    parchment: "#faf9f6"
+    earth-gray: "#353534"
+    charcoal: "#454545"
+    stone-gray: "#868584"
+    ash-gray: "#afaeac"
+    muted-purple: "#666469"
+    input-bg: "#1a1a18"
+  typography:
+    family: { sans: "Matter Regular", mono: "Matter Mono Regular" }
+    display-hero:  { size: 80, weight: 400, lineHeight: 1.00, tracking: -2.4, use: "Hero impact" }
+    section:       { size: 56, weight: 400, lineHeight: 1.20, tracking: -0.56, use: "Feature section headings" }
+    feature:       { size: 40, weight: 400, lineHeight: 1.10, tracking: -0.4, use: "Feature block titles" }
+    body-heading:  { size: 24, weight: 400, lineHeight: 1.20, use: "Bold content intros" }
+    card-title:    { size: 22, weight: 500, lineHeight: 1.14, use: "Emphasized card headers" }
+    body-lg:       { size: 20, weight: 400, lineHeight: 1.40, tracking: -0.2, use: "Primary body, relaxed" }
+    body:          { size: 18, weight: 400, lineHeight: 1.30, tracking: -0.18, use: "Standard paragraphs" }
+    nav:           { size: 16, weight: 400, lineHeight: 1.20, use: "Navigation, UI text" }
+    button:        { size: 16, weight: 500, lineHeight: 1.20, use: "Button labels" }
+    caption:       { size: 14, weight: 400, lineHeight: 1.00, tracking: 1.4, use: "Uppercase labels" }
+    small-label:   { size: 12, weight: 400, lineHeight: 1.35, tracking: 2.4, use: "Uppercase micro-labels" }
+    micro:         { size: 11, weight: 400, lineHeight: 1.20, use: "Smallest text" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 36, section: 80 }
+  rounded: { sm: 4, md: 8, lg: 12, full: 50 }
+  shadow:
+    ambient: "rgba(0,0,0,0.2) 0px 5px 15px"
+  components:
+    button-dark-pill: { type: button, bg: "#353534", fg: "#afaeac", radius: 50, padding: "10px", font: "16px/400 Matter Regular", use: "Primary CTA, muted" }
+    button-ghost: { type: button, fg: "#afaeac", radius: 50, padding: "10px", use: "Tertiary text-only, hover underline" }
+    input-default: { type: input, bg: "#1a1a18", fg: "#faf9f6", radius: 8, padding: "10px 12px", font: "16px/400 Matter Regular", use: "Form input, placeholder #868584" }
+    card-bordered: { type: card, bg: "#1a1a18", fg: "#faf9f6", radius: 12, padding: "24px", use: "Containment card, semi-transparent border" }
+    card-terminal: { type: card, bg: "#1a1a18", radius: 12, padding: "0px", use: "Product terminal UI frame" }
+    badge-frosted: { type: badge, fg: "#000000", radius: 6, padding: "1px 6px", font: "12px/400 Matter Regular", use: "Frosted tag/badge" }
+  components_harvested: true
 ---
 
 # Design System Inspiration of Warp

package/web/references/watcha/DESIGN.md

@@ -10,6 +10,46 @@ logo:
   slug: "https://www.google.com/s2/favicons?domain=watcha.com&sz=128"
 verified: "2026-05-19"
 omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    primary: "#f82f62"
+    primary-deep: "#de2a60"
+    brand-pink: "#ff0558"
+    canvas: "#000000"
+    surface-raised-1: "#1a1a1a"
+    surface-raised-2: "#28292a"
+    surface-hover: "#2c2c2c"
+    text-primary: "#ffffff"
+    text-secondary: "#999ca1"
+    text-tertiary: "#6b6e73"
+    success: "#2bc149"
+    error: "#f25c5c"
+  typography:
+    family: { sans: "Pretendard", mono: "Pretendard" }
+    hero:    { size: 32, weight: 700, lineHeight: 1.3, use: "Title-detail hero, billboard" }
+    section: { size: 22, weight: 700, lineHeight: 1.35, use: "Row headers" }
+    card:    { size: 16, weight: 600, lineHeight: 1.4, use: "Poster captions, list titles" }
+    body:    { size: 14, weight: 400, lineHeight: 1.5, use: "Synopsis, descriptions" }
+    label:   { size: 13, weight: 500, lineHeight: 1.4, use: "Buttons, chips" }
+    caption: { size: 12, weight: 400, lineHeight: 1.4, use: "Metadata, fine print" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32 }
+  rounded: { sm: 4, md: 8, lg: 12, full: 9999 }
+  shadow:
+    none: "none"
+  components:
+    button-primary: { type: button, bg: "#f82f62", fg: "#ffffff", radius: 4, padding: "8px 16px", font: "13px/500 Pretendard", use: "Login / subscribe CTA, hover #de2a60" }
+    button-ghost: { type: button, fg: "#ffffff", radius: 4, padding: "8px 16px", font: "13px/500 Pretendard", use: "Secondary, 1px rgba border" }
+    icon-button: { type: button, bg: "#28292a", fg: "#999ca1", radius: 9999, use: "Close / dismiss circle ~30px" }
+    input-text: { type: input, fg: "#ffffff", radius: 4, padding: "12px 14px", font: "15px/400 Pretendard", use: "Login/search, focus border white, error #f25c5c" }
+    poster-card: { type: card, radius: 4, use: "Poster image card, no border, hover scale 1.04" }
+    surface-card: { type: card, bg: "#1a1a1a", radius: 8, padding: "20px", use: "Settings/account panel" }
+    chip: { type: badge, fg: "#ffffff", radius: 9999, padding: "4px 12px", font: "12px/500 Pretendard", use: "Genre/tag chip" }
+    snackbar: { type: toast, bg: "#28292a", fg: "#ffffff", radius: 8, padding: "12px 16px", use: "Transient feedback, 3s" }
+    modal: { type: dialog, bg: "#1a1a1a", fg: "#ffffff", radius: 12, padding: "24px", use: "Login, plan, rating" }
+    nav-item: { type: tab, fg: "#999ca1", font: "14px/500 Pretendard", use: "Top nav switcher", active: "#ffffff weight+color shift" }
+  components_harvested: true
 ---
 
 # Design System Inspiration of Watcha (왓챠)

package/web/references/wavve/DESIGN.md

@@ -7,9 +7,51 @@ homepage: "https://www.wavve.com"
 primary_color: "#1351F9"
 logo:
   type: favicon
-  slug: "https://www.google.com/s2/favicons?domain=wavve.com&sz=128"
+  slug: "https://www.wavve.com/favicon.ico"
 verified: "2026-05-27"
 omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    primary: "#1351f9"
+    primary-bright: "#3a6cff"
+    primary-deep: "#0e3fcc"
+    canvas: "#0a0e1a"
+    surface-raised-1: "#141a2b"
+    surface-raised-2: "#1f2742"
+    text-primary: "#ffffff"
+    text-secondary: "#a7aec0"
+    text-tertiary: "#6b7286"
+    live: "#f5444c"
+    success: "#2bc56f"
+    error: "#ff7a45"
+  typography:
+    family: { sans: "Pretendard", mono: "Pretendard" }
+    billboard: { size: 32, weight: 700, lineHeight: 1.25, use: "Hero/billboard title" }
+    section:   { size: 20, weight: 700, lineHeight: 1.35, use: "Row headers" }
+    card:      { size: 16, weight: 600, lineHeight: 1.4, use: "Poster captions, list titles" }
+    body:      { size: 14, weight: 400, lineHeight: 1.5, use: "Synopsis, descriptions" }
+    label:     { size: 15, weight: 600, lineHeight: 1.4, use: "Play/subscribe, tabs" }
+    caption:   { size: 12, weight: 400, lineHeight: 1.4, use: "Metadata, runtime" }
+    live:      { size: 12, weight: 700, lineHeight: 1.4, use: "LIVE / 실시간 indicators" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32 }
+  rounded: { sm: 4, md: 6, lg: 12, full: 9999 }
+  shadow:
+    snackbar: "0px 4px 16px rgba(0,0,0,0.4)"
+  components:
+    button-primary: { type: button, bg: "#1351f9", fg: "#ffffff", radius: 6, padding: "10px 20px", font: "15px/600 Pretendard", use: "Play/subscribe, hover #3a6cff, pressed #0e3fcc" }
+    button-ghost: { type: button, fg: "#ffffff", radius: 6, padding: "10px 20px", font: "15px/600 Pretendard", use: "Secondary on dark, 1px rgba border" }
+    icon-button: { type: button, fg: "#ffffff", radius: 9999, use: "Carousel/player controls ~40px" }
+    input-text: { type: input, fg: "#ffffff", radius: 6, padding: "12px 14px", font: "15px/400 Pretendard", use: "Login/search, focus border #1351f9, error #ff7a45" }
+    poster-card: { type: card, radius: 6, use: "Poster image card, no border, hover scale 1.05" }
+    surface-card: { type: card, bg: "#141a2b", radius: 10, padding: "20px", use: "Settings/account panel" }
+    chip: { type: badge, fg: "#ffffff", radius: 9999, padding: "4px 12px", font: "12px/500 Pretendard", use: "Genre/tag, active #1351f9 bg" }
+    live-badge: { type: badge, bg: "#f5444c", fg: "#ffffff", radius: 4, padding: "1px 6px", font: "11px/700 Pretendard", use: "실시간 TV indicator" }
+    snackbar: { type: toast, bg: "#1f2742", fg: "#ffffff", radius: 8, padding: "12px 16px", font: "14px/500 Pretendard", use: "Transient feedback, 3s" }
+    modal: { type: dialog, bg: "#141a2b", fg: "#ffffff", radius: 12, padding: "24px", use: "Login, plan selection" }
+    nav-item: { type: tab, fg: "#a7aec0", font: "15px/500 Pretendard", use: "Top nav switcher", active: "#ffffff with 2px #1351f9 underline" }
+  components_harvested: true
 ---
 
 # Design System Inspiration of Wavve (웨이브)

package/web/references/wconcept/DESIGN.md

@@ -10,6 +10,51 @@ logo:
   slug: "https://www.google.com/s2/favicons?domain=wconcept.co.kr&sz=128"
 verified: "2026-05-27"
 omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    primary: "#000000"
+    canvas: "#ffffff"
+    sale: "#ff4600"
+    gray-900: "#222222"
+    gray-700: "#555555"
+    gray-500: "#777777"
+    gray-400: "#999999"
+    gray-300: "#bababa"
+    gray-200: "#e2e2e2"
+    gray-100: "#eeeeee"
+    gray-50: "#f6f6f6"
+  typography:
+    family: { sans: "Pretendard Variable", mono: "Pretendard Variable" }
+    display:       { size: 32, weight: 700, lineHeight: 1.31, tracking: -0.4, use: "Editorial campaign title" }
+    heading-lg:    { size: 24, weight: 700, lineHeight: 1.33, tracking: -0.4, use: "Category page title" }
+    heading:       { size: 20, weight: 700, lineHeight: 1.4, tracking: -0.3, use: "Section header" }
+    title:         { size: 16, weight: 600, lineHeight: 1.5, tracking: -0.3, use: "Product detail title, brand name" }
+    body-lg:       { size: 16, weight: 400, lineHeight: 1.5, tracking: -0.2, use: "Body, product card title" }
+    body:          { size: 14, weight: 400, lineHeight: 1.57, tracking: -0.2, use: "Listings text" }
+    body-bold:     { size: 14, weight: 700, lineHeight: 1.57, tracking: -0.2, use: "Price emphasis, brand name" }
+    caption:       { size: 13, weight: 400, lineHeight: 1.38, tracking: -0.2, use: "Metadata, review counts" }
+    caption-bold:  { size: 13, weight: 700, lineHeight: 1.38, tracking: -0.2, use: "Sale percentage labels" }
+    micro:         { size: 12, weight: 500, lineHeight: 1.33, tracking: -0.2, use: "Badge text, fine print" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 56, section: 80 }
+  rounded: { sm: 0, md: 0, lg: 0, full: 9999 }
+  shadow:
+    soft: "0px 2px 8px rgba(0,0,0,0.06)"
+    floating: "0px 4px 16px rgba(0,0,0,0.10)"
+  components:
+    button-primary: { type: button, bg: "#000000", fg: "#ffffff", radius: 0, padding: "16px 24px", font: "16px/700 Pretendard Variable", use: "Primary CTA, hover #222222" }
+    button-outline: { type: button, bg: "#ffffff", fg: "#000000", radius: 0, padding: "16px 24px", font: "16px/600 Pretendard Variable", use: "Secondary CTA, 1px #000000 border" }
+    button-neutral: { type: button, bg: "#f6f6f6", fg: "#222222", radius: 0, padding: "12px 16px", font: "14px/500 Pretendard Variable", use: "Tertiary, 1px #eeeeee border" }
+    button-sale: { type: button, bg: "#ff4600", fg: "#ffffff", radius: 0, padding: "12px 18px", font: "14px/700 Pretendard Variable", use: "Time-limited sale CTA" }
+    input-default: { type: input, bg: "#ffffff", fg: "#000000", radius: 0, padding: "12px 14px", font: "14px/400 Pretendard Variable", use: "Form input, 1px #e2e2e2, focus #000000, placeholder #999999" }
+    product-card: { type: card, bg: "#ffffff", radius: 0, use: "Product listing, no border/shadow, #f6f6f6 image placeholder" }
+    brand-card: { type: card, bg: "#ffffff", radius: 0, padding: "16px", use: "Designer-spotlight, 1px #eeeeee border" }
+    badge-sale: { type: badge, fg: "#ff4600", radius: 0, font: "14px/700 Pretendard Variable", use: "Inline sale percentage" }
+    badge-exclusive: { type: badge, bg: "#000000", fg: "#ffffff", radius: 0, padding: "3px 6px", font: "11px/700 Pretendard Variable", use: "단독/선론칭 flag" }
+    filter-chip: { type: badge, bg: "#ffffff", fg: "#222222", radius: 0, padding: "8px 14px", font: "13px/500 Pretendard Variable", use: "Filter pill, 1px #e2e2e2; selected bg #000000 fg #ffffff" }
+    toast: { type: toast, bg: "#000000", fg: "#ffffff", radius: 0, use: "Error/success snackbar, 3s" }
+  components_harvested: true
 ---
 
 # Design System Inspiration of W Concept (W컨셉)