oh-my-design-cli 1.6.7 → 1.7.1

package/web/references/flo/DESIGN.md

@@ -10,6 +10,49 @@ logo:
   slug: "https://www.google.com/s2/favicons?domain=music-flo.com&sz=256"
 verified: "2026-06-03"
 omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    primary: "#3f3fff"
+    primary-hover: "#2f2fae"
+    primary-pressed: "#1a1a86"
+    blue-mid: "#576aff"
+    blue-light: "#7286ff"
+    indigo: "#525cfd"
+    error: "#ff4d78"
+    canvas: "#ffffff"
+    heading: "#181818"
+    body: "#333333"
+    meta: "#989898"
+    placeholder: "#c4c4c4"
+    divider: "#ebebeb"
+    surface-grey: "#f5f5f5"
+    track-grey: "#323232"
+  typography:
+    family: { sans: "Pretendard Variable", mono: "Pretendard Variable" }
+    display-lg:    { size: 34, weight: 700, lineHeight: 1.20, use: "Hero callouts, large feature text" }
+    display-sm:    { size: 24, weight: 700, lineHeight: 1.20, use: "Promotional copy, chart numbers" }
+    section-title: { size: 18, weight: 600, lineHeight: 1.20, use: "Major section headings" }
+    subhead:       { size: 16, weight: 600, lineHeight: 1.20, use: "Section headers, modal titles" }
+    body-primary:  { size: 15, weight: 400, lineHeight: 1.20, use: "Track titles, main UI copy" }
+    body:          { size: 14, weight: 400, lineHeight: 1.20, use: "Metadata, list items" }
+    label:         { size: 13, weight: 500, lineHeight: 1.20, use: "Secondary labels, nav items" }
+    small:         { size: 12, weight: 400, lineHeight: 1.20, use: "Timestamps, tags, chip labels" }
+  spacing: { xs: 5, sm: 9, md: 14, base: 15, lg: 25, xl: 50, section: 60 }
+  rounded: { sm: 5, md: 8, lg: 16, full: 9999 }
+  shadow:
+    floating: "rgba(0,0,0,0.10) 0px 4px 20px 0px"
+    modal: "rgba(0,0,0,0.20) 0px 6px 15px 0px"
+  components:
+    button-primary: { type: button, bg: "#3f3fff", fg: "#ffffff", radius: "5px", padding: "0 15px", font: "14px / 400", use: "Standard blue CTA, 36px height" }
+    button-pill: { type: button, bg: "#3f3fff", fg: "#ffffff", radius: "15px", padding: "0 12px", font: "12px / 500", use: "Small round action button, 28px height" }
+    button-ghost: { type: button, bg: "#ffffff", fg: "#3f3fff", radius: "16px", padding: "9px 15px", font: "12px / 500", use: "Outline chip with 0.5px blue border" }
+    input-text: { type: input, bg: "#ffffff", fg: "#181818", radius: "0px", font: "15px / 400", use: "Bottom-border-only text input, 58px height; focus #181818, error #ff4d78, valid #3f3fff" }
+    card-voucher: { type: card, bg: "#f4f5f8", radius: "8px", padding: "50px 60px", use: "Voucher / subscription card surface" }
+    card-voucher-active: { type: card, bg: "#525cfd", fg: "#ffffff", radius: "8px", use: "Active voucher card" }
+    tab-nav: { type: tab, bg: "#ffffff", fg: "#6d6d6d", active: "Active tab #3f3fff text + 2px bottom border #3f3fff", use: "Main navigation tabs; inactive on #f5f5f5" }
+  components_harvested: true
 ---
 
 # FLO

package/web/references/framer/DESIGN.md

@@ -16,6 +16,44 @@ ds:
   type: brand
   description: Framer's brand and trademark guidelines with logo rules and color palette.
   og_image: "https://framerusercontent.com/assets/MFmOCFlEnwFAS9IP2HbUEH68axo.jpg"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    canvas: "#000000"
+    on-dark: "#ffffff"
+    accent: "#0099ff"
+    muted: "#a6a6a6"
+    surface-elevated: "#090909"
+    link-default: "#0000ee"
+  typography:
+    family: { sans: "GT Walsheim Framer Medium", mono: "Azeret Mono" }
+    display-hero:    { size: 110, weight: 500, lineHeight: 0.85, tracking: -5.5, use: "Hero display, extreme compressed tracking" }
+    section-display: { size: 85, weight: 500, lineHeight: 0.95, tracking: -4.25, use: "Section display headlines" }
+    section-heading: { size: 62, weight: 500, lineHeight: 1.00, tracking: -3.1, use: "Section headings" }
+    feature-heading: { size: 32, weight: 500, lineHeight: 1.13, tracking: -1, use: "Feature headings" }
+    card-title:      { size: 24, weight: 400, lineHeight: 1.30, tracking: -0.01, use: "Card titles, Inter" }
+    feature-title:   { size: 22, weight: 700, lineHeight: 1.20, tracking: -0.8, use: "Feature titles, Inter" }
+    body-lg:         { size: 18, weight: 400, lineHeight: 1.30, tracking: -0.01, use: "Large body, Inter" }
+    body:            { size: 15, weight: 400, lineHeight: 1.30, tracking: -0.01, use: "Standard body / nav, Inter" }
+    caption:         { size: 14, weight: 400, lineHeight: 1.40, use: "Captions, Inter" }
+    label:           { size: 13, weight: 500, lineHeight: 1.60, use: "Labels, Inter" }
+    code:            { size: 10.4, weight: 400, lineHeight: 1.60, use: "Micro code, Azeret Mono" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 15, lg: 20, xl: 30, section: 80 }
+  rounded: { sm: 5, md: 8, lg: 15, full: 9999 }
+  shadow:
+    ring-blue: "rgba(0,153,255,0.15) 0px 0px 0px 1px"
+    ring-dark: "rgb(9,9,9) 0px 0px 0px 2px"
+    floating: "rgba(255,255,255,0.1) 0px 0.5px 0px 0.5px, rgba(0,0,0,0.25) 0px 10px 30px"
+  components:
+    button-primary: { type: button, bg: "#ffffff", fg: "#000000", radius: "100px", padding: "10px 15px", font: "15px / 400", use: "Solid white pill, primary CTA on dark" }
+    button-frosted: { type: button, bg: "rgba(255,255,255,0.1)", fg: "#ffffff", radius: "40px", padding: "10px 15px", font: "15px / 400", use: "Glass-effect frosted pill on dark" }
+    button-ghost: { type: button, bg: "transparent", fg: "#ffffff", radius: "40px", padding: "10px 15px", use: "Tertiary text-only action, frosted on hover" }
+    input-dark: { type: input, bg: "#090909", fg: "#ffffff", radius: "8px", padding: "10px 12px", use: "Dark theme form input; focus #0099ff ring + blue glow" }
+    card-dark: { type: card, bg: "#090909", fg: "#ffffff", radius: "12px", padding: "24px", use: "Standard dark surface card with blue ring border" }
+    card-elevated: { type: card, bg: "#090909", fg: "#ffffff", radius: "12px", padding: "24px", use: "Elevated card, white top highlight + deep ambient shadow" }
+    badge-default: { type: badge, bg: "rgba(255,255,255,0.1)", fg: "#ffffff", radius: "9999px", padding: "4px 10px", font: "12px / 400", use: "Frosted pill badge on dark" }
+  components_harvested: true
 ---
 
 # Design System Inspiration of Framer

package/web/references/freee/DESIGN.md

@@ -15,6 +15,54 @@ ds:
   url: "https://vibes.freee.co.jp"
   type: system
   description: freee's open-source design system with accessibility-focused components.
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    primary: "#285ac8"
+    primary-hover: "#3264dc"
+    primary-active: "#1e46aa"
+    accent: "#73a5ff"
+    canvas: "#ffffff"
+    bg-tint: "#ebf3ff"
+    surface-subtle: "#f0eded"
+    column: "#f7f5f5"
+    border: "#e9e7e7"
+    text: "#323232"
+    text-muted: "#6e6b6b"
+    text-caption: "#8c8989"
+    alert: "#dc1e32"
+    alert-bg: "#fad2d7"
+    notice: "#be8c14"
+    notice-bg: "#fff0d2"
+    success: "#006e2d"
+    success-bg: "#cdebd7"
+    info-bg: "#dce8ff"
+  typography:
+    family: { sans: "-apple-system", mono: "-apple-system" }
+    headline1: { size: 24, weight: 700, lineHeight: 1.5, use: "Headline 1, dashboard titles" }
+    headline2: { size: 16, weight: 700, lineHeight: 1.5, use: "Headline 2, section headers" }
+    headline3: { size: 14, weight: 700, lineHeight: 1.5, use: "Headline 3, subsection" }
+    body:      { size: 14, weight: 400, lineHeight: 1.5, use: "Normal body text" }
+    caption:   { size: 12, weight: 400, lineHeight: 1.5, use: "Captions, badge labels" }
+    icon:      { size: 10, weight: 400, lineHeight: 1.5, use: "Smallest icon font" }
+  spacing: { xs: 4, sm: 8, base: 16, lg: 24, xl: 32, xxl: 48 }
+  rounded: { sm: 4, md: 4, lg: 4, full: 9999 }
+  shadow:
+    card: "0 0 1rem rgba(0,0,0,0.1), 0 0.125rem 0.25rem rgba(0,0,0,0.2)"
+    floating: "0 0 1.5rem rgba(0,0,0,0.1), 0 0.25rem 0.5rem rgba(0,0,0,0.2)"
+    popup: "0 0 2rem rgba(0,0,0,0.1), 0 0.375rem 0.75rem rgba(0,0,0,0.2)"
+  components:
+    button-primary: { type: button, bg: "#285ac8", fg: "#ffffff", radius: "4px", padding: "8px 16px", font: "14px / 500", use: "Primary CTA, 36px height; hover #3264dc, active #1e46aa" }
+    button-accent: { type: button, bg: "#73a5ff", fg: "#ffffff", radius: "4px", padding: "8px 16px", use: "Hover / secondary brand action" }
+    input-default: { type: input, bg: "#ffffff", fg: "#323232", radius: "4px", padding: "8px 12px", use: "Form input, 36px height; focus border #285ac8, error #dc1e32" }
+    card-panel: { type: card, bg: "#ffffff", radius: "4px", padding: "16px", use: "Standard panel, 1px #e9e7e7 border" }
+    card-subtle: { type: card, bg: "#f7f5f5", radius: "4px", padding: "24px", use: "Subtle differentiation panel" }
+    badge-success: { type: badge, bg: "#cdebd7", fg: "#006e2d", radius: "4px", padding: "2px 8px", font: "12px / 500", use: "Success / confirmation status" }
+    badge-alert: { type: badge, bg: "#fad2d7", fg: "#dc1e32", radius: "4px", padding: "2px 8px", font: "12px / 500", use: "Error / destructive status" }
+    badge-notice: { type: badge, bg: "#fff0d2", fg: "#be8c14", radius: "4px", padding: "2px 8px", font: "12px / 500", use: "Warning / notice status" }
+    badge-info: { type: badge, bg: "#dce8ff", fg: "#285ac8", radius: "4px", padding: "2px 8px", font: "12px / 500", use: "Informational status" }
+  components_harvested: true
 ---
 
 # Design System Inspiration of freee

package/web/references/fugle/DESIGN.md

@@ -7,9 +7,49 @@ homepage: "https://www.fugle.tw"
 primary_color: "#f4af1c"
 logo:
   type: favicon
-  slug: "https://www.google.com/s2/favicons?domain=fugle.tw&sz=256"
+  slug: "https://www.fugle.tw/images/favicon.ico"
 verified: "2026-06-03"
 omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    primary: "#f4af1c"
+    primary-hover: "#e49b00"
+    primary-tint: "#fef4cf"
+    secondary: "#4c85a0"
+    secondary-hover: "#36708c"
+    canvas: "#ffffff"
+    bg-secondary: "#f5f5f5"
+    border: "#eaeaea"
+    border-heavy: "#dfdfdf"
+    text: "#323232"
+    text-muted: "#8b8a8a"
+    dark-surface: "#131313"
+    rise: "#f3746d"
+    fall: "#6c9c46"
+    error: "#d12a2a"
+  typography:
+    family: { sans: "Lato", mono: "Lato" }
+    highlight: { size: 24, weight: 700, lineHeight: 1.4, use: "Data highlight values" }
+    heading:   { size: 20, weight: 700, lineHeight: 1.4, use: "Dialog / section headings" }
+    modal:     { size: 16, weight: 400, lineHeight: 1.5, use: "Modal body, form inputs" }
+    body:      { size: 14, weight: 400, lineHeight: 1.4, use: "Dense data rows" }
+    label:     { size: 12, weight: 400, lineHeight: 1.4, use: "Secondary labels, timestamps" }
+  spacing: { xs: 5, sm: 8, base: 16, lg: 20, xl: 32, section: 50 }
+  rounded: { sm: 4, md: 4, lg: 8, full: 9999 }
+  shadow:
+    card: "0 2px 2px 0 rgba(0,0,0,.08), 0 2px 7px 0 rgba(0,0,0,.1)"
+    popover: "0 0 24px 0 rgba(0,0,0,.08)"
+    modal: "0 0 17px 0 rgba(0,0,0,.14), 0 8px 9px 0 rgba(0,0,0,.12)"
+  components:
+    button-primary: { type: button, bg: "#f4af1c", fg: "#ffffff", radius: "4px", font: "14px / 700", use: "Amber CTA; hover #e49b00" }
+    input-default: { type: input, bg: "#eaeaea", radius: "4px", padding: "0 5px", font: "16px / 400", use: "Search / trade input, 32px height" }
+    list-item-stock: { type: listItem, bg: "#ffffff", radius: "0px", font: "14px / 400", use: "Watchlist row, 55px height, 1px #eaeaea border; hover rgba(0,0,0,0.04)" }
+    card-trade: { type: card, bg: "#ffffff", radius: "4px", padding: "20px 0", use: "Surface trade box card" }
+    card-info: { type: card, bg: "#eaeaea", radius: "8px", use: "Highlighted info box" }
+    dialog: { type: dialog, bg: "#ffffff", radius: "4px", padding: "16px", font: "16px / 400", use: "Modal dialog container" }
+  components_harvested: true
 ---
 
 # Fugle

package/web/references/gangnamunni/DESIGN.md

@@ -8,7 +8,7 @@ homepage: "https://www.gangnamunni.com"
 primary_color: "#d54300"
 logo:
   type: favicon
-  slug: "https://www.gangnamunni.com/images/icon/apple-icon-180x180.png"
+  slug: "https://www.google.com/s2/favicons?domain=gangnamunni.com&sz=128"
 verified: "2026-05-15"
 omd: "0.1"
 ds:
@@ -17,6 +17,62 @@ ds:
   type: brand
   description: Healience design team blog — the Cell + Welchis two-system architecture behind Gangnamunni's medical-platform UI.
   og_image: "https://blog.gangnamunni.com/contents/posts/238d9338-d3d4-80ac-a8c6-da95db5bc8bc/cover/7d41f721-4cf0-408c-b2fd-f7aa403a5cbe.png"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    brand: "#d54300"
+    brand-regular: "#f66336"
+    brand-strong-fg: "#ab350c"
+    brand-accent-raw: "#ff540f"
+    brand-tint-100: "#feeee9"
+    brand-tint-50: "#fef6f4"
+    canvas: "#ffffff"
+    heading: "#131517"
+    body: "#3a444d"
+    caption: "#697683"
+    placeholder: "#8694a2"
+    border: "#d8dfe6"
+    border-weak: "#e4e8ec"
+    surface-subtle: "#eff2f5"
+    surface-faint: "#f7f9fa"
+    success: "#27a86d"
+    success-strong: "#1a8656"
+    danger: "#d73f39"
+    warning: "#f9c647"
+    info: "#3270d6"
+  typography:
+    family: { sans: "Pretendard JP Variable", mono: "ui-monospace" }
+    display-md: { size: 28, weight: 700, lineHeight: 1.3, use: "Feature headlines" }
+    title-xl:   { size: 32, weight: 700, lineHeight: 1.3, use: "Landing headlines" }
+    title-lg:   { size: 24, weight: 700, lineHeight: 1.3, use: "Page section titles" }
+    title-md:   { size: 20, weight: 700, lineHeight: 1.4, use: "Card headings, prices" }
+    subhead:    { size: 18, weight: 600, lineHeight: 1.4, use: "Section subheads" }
+    body-lg:    { size: 16, weight: 400, lineHeight: 1.5, use: "Primary body, card titles" }
+    body:       { size: 14, weight: 400, lineHeight: 1.5, use: "Default UI text" }
+    label-sm:   { size: 13, weight: 500, lineHeight: 1.4, use: "Secondary buttons, links" }
+    label-xs:   { size: 12, weight: 500, lineHeight: 1.4, use: "Chips, timestamps, tag pills" }
+    meta:       { size: 11, weight: 400, lineHeight: 1.4, use: "Smallest meta, fine print" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 20, xl: 32, section: 48 }
+  rounded: { sm: 4, md: 12, lg: 16, full: 9999 }
+  shadow:
+    soft: "0 4px 12px rgba(0,0,0,0.08)"
+    modal: "0 12px 32px rgba(0,0,0,0.16)"
+  components:
+    button-primary: { type: button, bg: "#d54300", fg: "#ffffff", radius: "16px", padding: "12px 20px", font: "16px / 600", use: "Primary brand CTA; hover #ab350c, disabled orange-200" }
+    button-accent: { type: button, bg: "#ff540f", fg: "#ffffff", radius: "16px", padding: "12px 20px", font: "16px / 600", use: "Hot-deal / time-limited promo CTA" }
+    button-outline: { type: button, bg: "#ffffff", fg: "#131517", radius: "16px", padding: "10px 16px", font: "14px / 500", use: "Neutral secondary, 1px #d8dfe6 border; hover #f7f9fa" }
+    button-subtle: { type: button, bg: "#fef6f4", fg: "#d54300", radius: "16px", padding: "8px 14px", font: "14px / 600", use: "Secondary brand CTA, tinted" }
+    button-danger: { type: button, bg: "#d73f39", fg: "#ffffff", radius: "16px", padding: "10px 16px", font: "14px / 600", use: "Destructive action" }
+    input-text: { type: input, bg: "#ffffff", fg: "#131517", radius: "12px", padding: "12px 16px", font: "16px / 400", use: "Standard form field, 48px height; focus #d54300, error #d73f39" }
+    card-clinic: { type: card, bg: "#ffffff", radius: "12px", padding: "16px", use: "Hospital / doctor card, 1px #d8dfe6 border, no shadow" }
+    card-promo: { type: card, bg: "#fef6f4", radius: "12px", padding: "16px", use: "Event / promo card, 1px #feeee9 border" }
+    badge-brand: { type: badge, bg: "#ff540f", fg: "#ffffff", radius: "4px", padding: "2px 6px", font: "12px / 700", use: "HOT / 특가 time-sensitive flag" }
+    badge-success: { type: badge, bg: "#e8f6ec", fg: "#1a8656", radius: "9999px", padding: "2px 8px", font: "12px / 600", use: "인증 병원 verification badge" }
+    badge-info: { type: badge, bg: "#ebf2ff", fg: "#1b59bd", radius: "4px", padding: "2px 6px", font: "11px / 600", use: "Regulatory / certification label" }
+    pill-category: { type: badge, bg: "#ffffff", fg: "#131517", radius: "9999px", padding: "6px 12px", font: "14px / 500", use: "Category filter pill; selected #fef6f4 bg + #d54300 text + #fa8563 border" }
+    toast: { type: toast, bg: "#131517", fg: "#ffffff", radius: "12px", padding: "12px 16px", font: "14px / 500", use: "Bottom-center toast, 3s duration" }
+  components_harvested: true
 ---
 
 # Design System Inspiration of Gangnamunni (강남언니)