oh-my-design-cli 1.6.7 → 1.7.0

package/web/references/millie/DESIGN.md

@@ -11,6 +11,57 @@ logo:
   slug: "https://www.google.com/s2/favicons?domain=millie.co.kr&sz=128"
 verified: "2026-05-27"
 omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    primary: "#1b6dda"
+    primary-hover: "#1860c2"
+    primary-pressed: "#1554ad"
+    primary-tint: "#f2f6fd"
+    canvas: "#ffffff"
+    ink: "#242424"
+    purple: "#a451f7"
+    coral: "#ff5b4f"
+    yellow: "#ffc004"
+    system-blue: "#007aff"
+    gray-800: "#333333"
+    gray-700: "#555555"
+    gray-600: "#6f6f6f"
+    gray-500: "#8b8b8b"
+    gray-400: "#c1c1c1"
+    border: "#ececec"
+    surface: "#f2f2f2"
+    surface-tint: "#f7f7f7"
+  typography:
+    family: { sans: "Pretendard", mono: "Pretendard" }
+    display:      { size: 28, weight: 700, lineHeight: 1.36, tracking: -0.4, use: "Editorial banner / original-content title" }
+    heading-lg:   { size: 22, weight: 700, lineHeight: 1.36, tracking: -0.4, use: "Feed section title" }
+    heading:      { size: 18, weight: 700, lineHeight: 1.44, tracking: -0.3, use: "Sub-section header, shelf label" }
+    title:        { size: 16, weight: 600, lineHeight: 1.50, tracking: -0.3, use: "Book detail title, modal header" }
+    body-lg:      { size: 16, weight: 400, lineHeight: 1.50, tracking: -0.2, use: "Book description, reading text" }
+    body:         { size: 14, weight: 400, lineHeight: 1.57, tracking: -0.2, use: "Default body, listing metadata" }
+    tab:          { size: 14, weight: 600, lineHeight: 1.43, tracking: -0.2, use: "Category tab label" }
+    caption:      { size: 13, weight: 400, lineHeight: 1.38, tracking: -0.2, use: "Author/publisher, review counts" }
+    micro:        { size: 12, weight: 500, lineHeight: 1.33, tracking: -0.2, use: "Fine print, control labels" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 20, xl: 24, xxl: 32, section: 48 }
+  rounded: { sm: 4, md: 8, lg: 12, full: 9999 }
+  shadow:
+    card: "0px 2px 8px rgba(0,0,0,0.08)"
+  components:
+    button-primary: { type: button, bg: "#1b6dda", fg: "#ffffff", radius: 8, padding: "14px 20px", font: "16px/700", use: "Primary subscription CTA" }
+    button-dark: { type: button, bg: "#333333", fg: "#ffffff", radius: 4, padding: "0px 12px", font: "12px/400", use: "Compact chrome action, login" }
+    button-outline: { type: button, bg: "#ffffff", fg: "#1b6dda", radius: 8, padding: "14px 20px", font: "16px/600", use: "Secondary CTA" }
+    button-neutral: { type: button, bg: "#f2f2f2", fg: "#333333", radius: 8, padding: "12px 16px", font: "14px/500", use: "Tertiary action" }
+    input: { type: input, bg: "#ffffff", fg: "#242424", radius: 8, padding: "12px 14px", font: "14px/400", use: "Default text input" }
+    search: { type: input, bg: "#f2f2f2", fg: "#242424", radius: 8, padding: "12px 16px", font: "14px/400", use: "Header/discovery search bar" }
+    book-tile: { type: card, bg: "#f2f2f2", radius: 6, use: "Default book unit in feed grid" }
+    feed-card: { type: card, bg: "#ffffff", radius: 12, use: "Curated feed promotion, banner" }
+    tab-active: { type: tab, bg: "#333333", fg: "#ffffff", radius: 10, padding: "0px 10px", font: "14px/600", active: "#333333 fill", use: "Active genre/category filter" }
+    tag-original: { type: badge, bg: "#a451f7", fg: "#ffffff", radius: 4, padding: "3px 6px", font: "11px/700", use: "밀리 오리지널 flag" }
+    tag-promo: { type: badge, bg: "#ff5b4f", fg: "#ffffff", radius: 4, padding: "3px 6px", font: "11px/700", use: "Time-limited promotion flag" }
+    pill-scrim: { type: toggle, fg: "#ffffff", radius: 9999, padding: "4px 10px", font: "16px/400", use: "Floating carousel control over imagery" }
+  components_harvested: true
 ---
 
 # Design System Inspiration of Millie (밀리의서재)

package/web/references/minimax/DESIGN.md

@@ -10,6 +10,59 @@ logo:
   slug: minimax
 verified: "2026-05-15"
 omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    brand-blue: "#1456f0"
+    sky-blue: "#3daeff"
+    brand-pink: "#ea5ec1"
+    primary-200: "#bfdbfe"
+    primary-light: "#60a5fa"
+    primary-500: "#3b82f6"
+    primary-600: "#2563eb"
+    primary-700: "#1d4ed8"
+    brand-deep: "#17437d"
+    text-primary: "#222222"
+    button-text: "#18181b"
+    charcoal: "#181e25"
+    text-secondary: "#45515e"
+    text-muted: "#8e8e93"
+    helper: "#5f5f5f"
+    canvas: "#ffffff"
+    surface: "#f0f0f0"
+    border-light: "#f2f3f5"
+    border: "#e5e7eb"
+    success-bg: "#e8ffea"
+    dark: "#333333"
+  typography:
+    family: { sans: "DM Sans", mono: "Roboto" }
+    display-hero: { size: 80, weight: 500, lineHeight: 1.10, use: "Hero headlines, DM Sans/Outfit" }
+    section:      { size: 31, weight: 600, lineHeight: 1.50, use: "Feature section titles, Outfit" }
+    card-title:   { size: 28, weight: 500, lineHeight: 1.71, use: "Product card headings, Outfit" }
+    subheading:   { size: 24, weight: 500, lineHeight: 1.50, use: "Mid-tier headings, Poppins" }
+    feature:      { size: 18, weight: 500, lineHeight: 1.50, use: "Feature names, Poppins" }
+    body-lg:      { size: 20, weight: 500, lineHeight: 1.50, use: "Emphasized body, DM Sans" }
+    body:         { size: 16, weight: 400, lineHeight: 1.50, use: "Standard body, DM Sans" }
+    nav:          { size: 14, weight: 500, lineHeight: 1.50, use: "Navigation, links, DM Sans" }
+    button-sm:    { size: 13, weight: 600, lineHeight: 1.50, use: "Compact buttons, DM Sans" }
+    caption:      { size: 13, weight: 400, lineHeight: 1.70, use: "Metadata, DM Sans/Poppins" }
+    label:        { size: 12, weight: 500, lineHeight: 1.50, use: "Tags, badges, DM Sans" }
+  spacing: { xs: 4, sm: 8, md: 11, base: 16, lg: 20, xl: 24, xxl: 32, section: 48 }
+  rounded: { sm: 8, md: 13, lg: 20, full: 9999 }
+  shadow:
+    standard: "rgba(0,0,0,0.08) 0px 4px 6px"
+    soft-glow: "rgba(0,0,0,0.08) 0px 0px 22.576px"
+    brand-glow: "rgba(44,30,116,0.16) 0px 0px 15px"
+    card-elevation: "rgba(36,36,36,0.08) 0px 12px 16px -4px"
+  components:
+    button-primary: { type: button, bg: "#181e25", fg: "#ffffff", radius: 8, padding: "11px 20px", use: "Primary CTA Get Started/Learn More" }
+    button-nav: { type: button, fg: "#18181b", radius: 9999, use: "Navigation tabs, filter toggles" }
+    button-white: { type: button, bg: "#ffffff", radius: 9999, use: "Secondary nav, inactive tabs" }
+    button-secondary: { type: button, bg: "#f0f0f0", fg: "#333333", radius: 8, padding: "11px 20px", use: "Secondary actions" }
+    product-card: { type: card, radius: 20, use: "Vibrant gradient product card with brand glow" }
+    matrix-card: { type: card, bg: "#ffffff", radius: 13, use: "AI product card, white with subtle shadow" }
+  components_harvested: true
 ---
 
 # Design System Inspiration of MiniMax

package/web/references/mintlify/DESIGN.md

@@ -10,6 +10,51 @@ logo:
   slug: mintlify
 verified: "2026-05-15"
 omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    ink: "#0d0d0d"
+    canvas: "#ffffff"
+    brand: "#18e299"
+    brand-light: "#d4fae8"
+    brand-deep: "#0fa76e"
+    amber: "#c37d0d"
+    blue: "#3772cf"
+    error: "#d45656"
+    gray-700: "#333333"
+    gray-500: "#666666"
+    gray-400: "#888888"
+    border: "#e5e5e5"
+    surface: "#f5f5f5"
+    surface-tint: "#fafafa"
+  typography:
+    family: { sans: "Inter", mono: "Geist Mono" }
+    display-hero: { size: 64, weight: 600, lineHeight: 1.15, tracking: -1.28, use: "Hero headlines" }
+    section:      { size: 40, weight: 600, lineHeight: 1.10, tracking: -0.8, use: "Feature section titles" }
+    subheading:   { size: 24, weight: 500, lineHeight: 1.30, tracking: -0.24, use: "Card headings, sub-sections" }
+    card-title:   { size: 20, weight: 600, lineHeight: 1.30, tracking: -0.2, use: "Feature card titles" }
+    body-lg:      { size: 18, weight: 400, lineHeight: 1.50, use: "Hero descriptions, intros" }
+    body:         { size: 16, weight: 400, lineHeight: 1.50, use: "Standard reading text" }
+    body-medium:  { size: 16, weight: 500, lineHeight: 1.50, use: "Navigation, emphasized text" }
+    button:       { size: 15, weight: 500, lineHeight: 1.50, use: "Button labels" }
+    link:         { size: 14, weight: 500, lineHeight: 1.50, use: "Navigation links, small CTAs" }
+    label:        { size: 13, weight: 500, lineHeight: 1.50, tracking: 0.65, use: "Uppercase section labels" }
+    mono-code:    { size: 12, weight: 500, lineHeight: 1.50, tracking: 0.6, use: "Uppercase technical labels, Geist Mono" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 }
+  rounded: { sm: 8, md: 16, lg: 24, full: 9999 }
+  shadow:
+    card: "rgba(0,0,0,0.03) 0px 2px 4px"
+    button: "rgba(0,0,0,0.06) 0px 1px 2px"
+  components:
+    button-primary: { type: button, bg: "#0d0d0d", fg: "#ffffff", radius: 9999, padding: "8px 24px", font: "15px/500", use: "Primary CTA Get Started" }
+    button-secondary: { type: button, bg: "#ffffff", fg: "#0d0d0d", radius: 9999, padding: "4.5px 12px", font: "15px/500", use: "Secondary action Request Demo" }
+    button-nav: { type: button, bg: "transparent", fg: "#0d0d0d", radius: 8, padding: "5px 6px", use: "Navigation items, icon buttons" }
+    button-accent: { type: button, bg: "#18e299", fg: "#0d0d0d", radius: 9999, padding: "8px 24px", use: "Special promotional CTAs" }
+    card: { type: card, bg: "#ffffff", radius: 16, padding: "24px", use: "Standard card, border-led" }
+    card-featured: { type: card, bg: "#ffffff", radius: 24, padding: "32px", use: "Featured card" }
+    input: { type: input, bg: "#ffffff", fg: "#0d0d0d", radius: 9999, padding: "0px 12px", use: "Email input, pill matching buttons" }
+  components_harvested: true
 ---
 
 # Design System Inspiration of Mintlify

package/web/references/miro/DESIGN.md

@@ -16,6 +16,53 @@ ds:
   type: system
   description: Miro's CSS component library for apps built on the Miro platform.
   og_image: "https://www.mirotone.xyz/cover.png"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    brand-yellow: "#ffd02f"
+    ink: "#1c1c1e"
+    canvas: "#ffffff"
+    blue: "#5b76fe"
+    blue-pressed: "#2a41b6"
+    coral: "#ffc6c6"
+    teal: "#c3faf5"
+    teal-dark: "#187574"
+    orange: "#ffe6cd"
+    rose: "#ffd8f4"
+    pink: "#fde0f0"
+    red: "#fbd4d4"
+    success: "#00b473"
+    slate: "#555a6a"
+    placeholder: "#a5a8b5"
+    border: "#c7cad5"
+    border-input: "#e9eaef"
+  typography:
+    family: { sans: "Roobert PRO", mono: "Roobert PRO" }
+    display-hero: { size: 56, weight: 400, lineHeight: 1.15, tracking: -1.68, use: "Hero, Roobert PRO Medium" }
+    section:      { size: 48, weight: 400, lineHeight: 1.15, tracking: -1.44, use: "Section heading, Roobert PRO Medium" }
+    card-title:   { size: 24, weight: 400, lineHeight: 1.15, tracking: -0.72, use: "Card title, Roobert PRO Medium" }
+    subheading:   { size: 22, weight: 400, lineHeight: 1.35, tracking: -0.44, use: "Sub-heading, Noto Sans" }
+    feature:      { size: 18, weight: 600, lineHeight: 1.35, use: "Feature, Roobert PRO Medium" }
+    body:         { size: 18, weight: 400, lineHeight: 1.45, use: "Body, Noto Sans" }
+    body-std:     { size: 16, weight: 400, lineHeight: 1.50, tracking: -0.16, use: "Standard body, Noto Sans" }
+    button:       { size: 17.5, weight: 700, lineHeight: 1.29, tracking: 0.175, use: "Button, Roobert PRO Medium" }
+    caption:      { size: 14, weight: 400, lineHeight: 1.71, use: "Caption, Roobert PRO Medium" }
+    micro:        { size: 10.5, weight: 400, lineHeight: 0.90, use: "Uppercase micro label, Roobert PRO" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 }
+  rounded: { sm: 8, md: 12, lg: 24, full: 9999 }
+  shadow:
+    ring: "rgb(224,226,232) 0px 0px 0px 1px"
+  components:
+    button-primary: { type: button, bg: "#5b76fe", fg: "#ffffff", radius: 8, padding: "7px 12px", font: "17.5px/700", use: "Primary CTA, blue" }
+    button-outline: { type: button, bg: "transparent", fg: "#1c1c1e", radius: 8, padding: "7px 12px", font: "17.5px/700", use: "Secondary outlined button" }
+    button-circle: { type: button, bg: "#ffffff", radius: 9999, padding: "12px", use: "Circular icon button, ring shadow" }
+    input: { type: input, bg: "#ffffff", fg: "#1c1c1e", radius: 8, padding: "16px", font: "16px/400", use: "Standard input" }
+    card: { type: card, bg: "#ffffff", radius: 12, padding: "16px", use: "Default card with ring-shadow border" }
+    card-pastel: { type: card, bg: "#ffc6c6", fg: "#1c1c1e", radius: 12, padding: "24px", use: "Feature card with pastel surface" }
+    badge: { type: badge, bg: "#5b76fe", fg: "#ffffff", radius: 8, padding: "4px 8px", font: "12px/400", use: "Default badge" }
+    badge-success: { type: badge, bg: "#00b473", fg: "#ffffff", radius: 8, padding: "4px 8px", use: "Success badge" }
+  components_harvested: true
 ---
 
 # Design System Inspiration of Miro

package/web/references/mistral.ai/DESIGN.md

@@ -16,6 +16,43 @@ ds:
   type: brand
   description: Mistral AI's logo, colors, typography, and brand asset kit.
   og_image: "https://mistral.ai/-/brand/opengraph-image-1robrb.png"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    primary: "#fa520f"
+    primary-hover: "#fb6424"
+    brand: "#ff8105"
+    canvas: "#fffaeb"
+    surface: "#fff0c2"
+    foreground: "#1f1f1f"
+    on-primary: "#ffffff"
+    accent-sunshine: "#ffa110"
+    accent-gold: "#ffd900"
+    accent-block-gold: "#ffe295"
+  typography:
+    family: { sans: "Arial", mono: "Arial" }
+    display:     { size: 82, weight: 400, lineHeight: 1.00, tracking: -2.05, use: "Hero headlines, billboard scale" }
+    section:     { size: 56, weight: 400, lineHeight: 0.95, use: "Feature section anchors" }
+    subheading-lg: { size: 48, weight: 400, lineHeight: 0.95, use: "Secondary section titles" }
+    subheading:  { size: 32, weight: 400, lineHeight: 1.15, use: "Card headings, feature names" }
+    card-title:  { size: 30, weight: 400, lineHeight: 1.20, use: "Mid-level headings" }
+    feature:     { size: 24, weight: 400, lineHeight: 1.33, use: "Small headings" }
+    body:        { size: 16, weight: 400, lineHeight: 1.50, use: "Standard body, button text" }
+    caption:     { size: 14, weight: 400, lineHeight: 1.43, use: "Metadata, secondary links" }
+  spacing: [2, 4, 8, 10, 12, 16, 20, 24, 32, 40, 48, 64, 80, 98, 100]
+  rounded: { sm: 0, md: 0, lg: 0, full: 9999 }
+  shadow:
+    golden: "rgba(127,99,21,0.12) -8px 16px 39px, rgba(127,99,21,0.1) -33px 64px 72px, rgba(127,99,21,0.06) -73px 144px 97px"
+  components_harvested: true
+  components:
+    button-primary: { type: button, bg: "#1f1f1f", fg: "#ffffff", padding: "12px", radius: "0px", font: "16px / 400", use: "Primary action, dark on warm" }
+    button-secondary: { type: button, bg: "#fff0c2", fg: "#1f1f1f", radius: "0px", font: "16px / 400", use: "Warm inviting secondary CTA" }
+    button-ghost: { type: button, bg: "transparent", fg: "#1f1f1f", radius: "0px", states: "opacity 0.4", use: "Secondary/de-emphasized actions" }
+    button-text: { type: button, bg: "transparent", fg: "#1f1f1f", padding: "8px 0px 0px", use: "Tertiary navigation links" }
+    card: { type: card, bg: "#fffaeb", radius: "0px", shadow: "golden amber 5-layer cascade", use: "Feature cards, golden-hour float" }
+    input: { type: input, border: "1px solid hsl(240,5.9%,90%)", radius: "0px", focus: "accent color ring", use: "Form fields" }
+    block-identity: { type: badge, bg: "gradient #ffd900 to #fa520f", radius: "0px", use: "Mistral block gradient brand mark" }
 ---
 
 # Design System Inspiration of Mistral AI

package/web/references/momoshop/DESIGN.md

@@ -10,6 +10,49 @@ logo:
   slug: "https://www.google.com/s2/favicons?domain=momoshop.com.tw&sz=256"
 verified: "2026-06-03"
 omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    primary: "#d62872"
+    primary-hover: "#d9006c"
+    brand: "#e5047e"
+    canvas: "#f2f2f2"
+    surface: "#fafafa"
+    foreground: "#404040"
+    muted: "#727272"
+    on-primary: "#ffffff"
+    accent-link: "#027bff"
+    error: "#dd2222"
+    error-delete: "#ea3323"
+    accent-rank: "#ffaa3b"
+    hairline: "#ededed"
+    border-medium: "#b3b3b3"
+  typography:
+    family: { sans: "Microsoft JhengHei UI", mono: "Oxygen" }
+    heading:  { size: 17, weight: 700, lineHeight: 1.41, use: "Search suggest titles, headings" }
+    body:     { size: 15, weight: 400, lineHeight: 1.33, use: "Product list items, UI labels" }
+    caption:  { size: 13, weight: 400, lineHeight: 1.38, use: "Captions, metadata" }
+    badge:    { size: 12, weight: 400, use: "Badges" }
+    micro:    { size: 11, weight: 400, use: "Heat/rank metadata labels" }
+  spacing: [3, 5, 6, 8, 10, 12, 16, 20, 24]
+  rounded: { sm: 4, md: 8, lg: 16, full: 9999 }
+  shadow:
+    card: "0 1px 2px 0 rgba(0,0,0,.05)"
+    panel: "0 1px 3px rgba(0,0,0,.1)"
+    modal: "0 4px 6px -1px rgba(0,0,0,.1)"
+  components_harvested: true
+  components:
+    header-bar: { type: card, bg: "#d62872", fg: "#ffffff", height: "44px", font: "26px / 700", use: "Primary header bar" }
+    cart-badge: { type: badge, bg: "#e5047e", fg: "#ffffff", radius: "8px", font: "12px / 400", use: "Cart notification badge" }
+    input: { type: input, bg: "#ffffff", border: "1px solid #b3b3b3", height: "36px", padding: "8px 8px 8px 10px", radius: "4px", font: "15px / 400", use: "Search input desktop" }
+    chip: { type: badge, bg: "#f2f2f2", fg: "#404040", height: "32px", radius: "16px", padding: "6px 8px", font: "13px / 400", use: "Recent/suggest search chip" }
+    button-primary: { type: button, bg: "#d62872", fg: "#ffffff", height: "38px", radius: "4px", font: "16px / 700", states: "hover #d9006c", use: "Primary CTA" }
+    button-destructive: { type: button, bg: "#ea3323", fg: "#ffffff", height: "44px", radius: "22px", font: "17px / 400", use: "Delete all action" }
+    button-secondary: { type: button, bg: "#ffffff", fg: "#999999", border: "1px solid #b3b3b3", radius: "13px", padding: "3px 5px 3px 8px", font: "13px / 400", use: "Secondary rules button" }
+    trend-card: { type: card, bg: "linear-gradient(180deg,#fff5f9,#f9f9f9)", border: "1px solid #fbe9f1", radius: "15px", use: "Search trend card" }
+    rank-badge: { type: badge, bg: "linear-gradient(0.34deg,#ffaa3b,#ff9203)", fg: "#ffffff", radius: "4px", font: "15px / 400", use: "Top rank number badge" }
+    tooltip: { type: card, bg: "rgba(0,0,0,.8)", fg: "#ffffff", radius: "8px", padding: "12px", font: "15px / 700", use: "Search dialog tooltip" }
 ---
 
 # momo購物網

package/web/references/money-forward/DESIGN.md

@@ -15,6 +15,48 @@ ds:
   url: "https://github.com/moneyforward/cloud-react-ui"
   type: system
   description: Money Forward's open-source React component library and theme tokens for the Money Forward Cloud business suite — buttons, forms, and a typed styled-components theme published on GitHub.
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    primary: "#3b7de9"
+    primary-hover: "#0054ac"
+    brand: "#3b7de9"
+    canvas: "#ffffff"
+    surface: "#ecf2fd"
+    foreground: "#333333"
+    muted: "#999999"
+    on-primary: "#ffffff"
+    hairline: "#d4d8dd"
+    error: "#d0021b"
+    success: "#65ab51"
+    warning-bg: "#fcf8e3"
+    warning-text: "#8a6d3b"
+    error-bg: "#ffeeeb"
+  typography:
+    family: { sans: "Noto Sans JP", mono: "Noto Sans JP" }
+    xSmall:     { size: 10, use: "Fine print, dense table footnotes" }
+    small:      { size: 12, use: "Captions, helper text" }
+    middle:     { size: 13, use: "Secondary labels, table cells" }
+    large:      { size: 14, weight: 400, use: "Body / button default" }
+    xlarge:     { size: 16, use: "Emphasized body" }
+    xxlarge:    { size: 18, weight: 700, use: "Subheadings" }
+    xxxLarge:   { size: 20, weight: 700, use: "Section headings" }
+    xxxxLarge:  { size: 24, weight: 700, use: "Page headings" }
+  spacing: [12, 16, 52]
+  rounded: { sm: 4, md: 4, lg: 4, full: 9999 }
+  shadow:
+    active: "0 0 2px rgba(212,216,221,0.3)"
+  components_harvested: true
+  components:
+    button-primary: { type: button, bg: "linear-gradient(to bottom,#3b7de9,#0054ac)", fg: "#ffffff", border: "1px solid rgba(0,0,0,0.15)", radius: "4px", height: "32px", padding: "0 12px", font: "14px / 400", states: "hover gradient flips, active 0 0 2px rgba(212,216,221,0.3)", use: "Single primary action per screen" }
+    button-default: { type: button, bg: "linear-gradient(to bottom,#ffffff,#ecf2fd)", fg: "#333333", border: "1px solid #d4d8dd", radius: "4px", font: "14px / 400", states: "hover gradient flips", use: "Secondary / cancel actions" }
+    button-danger: { type: button, bg: "linear-gradient(to bottom,#ffffff,#ecf2fd)", fg: "#d0021b", border: "1px solid #d4d8dd", radius: "4px", use: "Destructive actions, danger in text not fill" }
+    button-disabled: { type: button, bg: "#d4d8dd", fg: "#999999", border: "1px solid rgba(0,0,0,0.1)", radius: "4px", use: "Unavailable actions" }
+    block: { type: card, bg: "#ffffff", border: "1px solid #d4d8dd", radius: "4px", use: "Content panel / card container" }
+    input: { type: input, bg: "#ffffff", fg: "#333333", border: "1px solid #d4d8dd", radius: "4px", focus: "border #3b7de9", use: "Form fields" }
+    notice-error: { type: card, bg: "#ffeeeb", fg: "#d0021b", radius: "4px", use: "Error / danger banner" }
+    notice-warning: { type: card, bg: "#fcf8e3", fg: "#8a6d3b", use: "Caution banner" }
 ---
 
 # Design System Inspiration of Money Forward

package/web/references/mongodb/DESIGN.md

@@ -15,6 +15,50 @@ ds:
   url: "https://www.mongodb.design"
   type: system
   description: MongoDB's open-source design system with an extensive React component library.
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    primary: "#00ed64"
+    brand: "#00ed64"
+    primary-dark: "#00684a"
+    canvas: "#001e2b"
+    foreground: "#ffffff"
+    on-primary: "#000000"
+    accent-blue: "#006cfa"
+    accent-blue-hover: "#3860be"
+    accent-teal: "#1eaedb"
+    surface: "#1c2d38"
+    hairline: "#b8c4c2"
+    border-dark: "#3d4f58"
+    muted: "#5c6c75"
+  typography:
+    family: { sans: "Euclid Circular A", mono: "Source Code Pro" }
+    display-hero:    { size: 96, weight: 400, lineHeight: 1.20, use: "Serif authority hero (MongoDB Value Serif)" }
+    display-secondary: { size: 64, weight: 400, lineHeight: 1.00, use: "Serif sub-hero (MongoDB Value Serif)" }
+    section:         { size: 36, weight: 500, lineHeight: 1.33, use: "Section heading" }
+    subheading:      { size: 24, weight: 500, lineHeight: 1.33, use: "Feature titles" }
+    body-lg:         { size: 20, weight: 400, lineHeight: 1.60, use: "Introductions" }
+    body:            { size: 18, weight: 400, lineHeight: 1.33, use: "Standard body" }
+    body-light:      { size: 16, weight: 300, lineHeight: 1.50, use: "Light-weight reading text" }
+    nav:             { size: 16, weight: 500, tracking: 0.16, use: "Navigation, emphasized" }
+    caption:         { size: 14, weight: 400, lineHeight: 1.71, use: "Metadata" }
+    code-label:      { size: 14, weight: 500, lineHeight: 1.14, tracking: 1, use: "Uppercase Source Code Pro labels" }
+  spacing: [4, 7, 8, 10, 12, 14, 16, 18, 20, 24, 32]
+  rounded: { sm: 4, md: 16, lg: 24, full: 9999 }
+  shadow:
+    subtle: "rgba(0,0,0,0.1) 0px 2px 4px"
+    standard: "rgba(0,0,0,0.15) 0px 3px 20px"
+    forest: "rgba(0,30,43,0.12) 0px 26px 44px, rgba(0,0,0,0.13) 0px 7px 13px"
+  components_harvested: true
+  components:
+    button-primary: { type: button, bg: "#00684a", fg: "#000000", border: "1px solid #00684a", radius: "100px", shadow: "rgba(0,0,0,0.06) 0px 1px 6px", states: "hover scale 1.1, active scale 0.85", use: "Primary green button on dark surface" }
+    button-dark-teal: { type: button, bg: "#1c2d38", fg: "#5c6c75", border: "1px solid #3d4f58", radius: "100px", states: "hover bg #1eaedb, text white, translateX(5px)", use: "Dark teal pill button" }
+    button-outlined: { type: button, bg: "transparent", fg: "#001e2b", border: "1px solid #b8c4c2", radius: "8px", states: "hover background tint", use: "Outlined button on light surface" }
+    card: { type: card, bg: "#ffffff", border: "1px solid #b8c4c2", radius: "16px", shadow: "rgba(0,30,43,0.12) 0px 26px 44px", use: "Light-mode card" }
+    card-dark: { type: card, bg: "#001e2b", border: "1px solid #3d4f58", radius: "16px", use: "Dark-mode card" }
+    input: { type: input, fg: "#e8edeb", border: "1px solid #b8c4c2", padding: "12px 12px 12px 8px", radius: "4px", use: "Textarea / form field" }
+    code-label: { type: badge, fg: "#00ed64", font: "14px / 500", use: "Uppercase Source Code Pro section label, 1-2px tracking" }
 ---
 
 # Design System Inspiration of MongoDB