oh-my-design-cli 1.6.7 → 1.7.0

package/web/references/musinsa/DESIGN.md

@@ -10,6 +10,54 @@ logo:
   slug: "https://www.google.com/s2/favicons?domain=musinsa.com&sz=128"
 verified: "2026-05-15"
 omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    primary: "#000000"
+    primary-hover: "#222222"
+    brand: "#000000"
+    canvas: "#ffffff"
+    surface: "#f5f5f5"
+    foreground: "#333333"
+    muted: "#999999"
+    on-primary: "#ffffff"
+    hairline: "#eeeeee"
+    border-mid: "#dddddd"
+    error: "#ff003b"
+    accent-star: "#ffb900"
+  typography:
+    family: { sans: "Pretendard", mono: "Pretendard" }
+    display:      { size: 28, weight: 700, lineHeight: 1.29, tracking: -0.4, use: "Editorial banner / event title" }
+    heading-lg:   { size: 22, weight: 700, lineHeight: 1.36, tracking: -0.4, use: "Category page title" }
+    heading:      { size: 18, weight: 700, lineHeight: 1.44, tracking: -0.4, use: "Section header" }
+    title:        { size: 15, weight: 700, lineHeight: 1.47, tracking: -0.3, use: "Product detail page title" }
+    body-lg:      { size: 14, weight: 400, lineHeight: 1.43, tracking: -0.3, use: "Standard product card title" }
+    body:         { size: 13, weight: 400, lineHeight: 1.38, tracking: -0.3, use: "Default body, listings text" }
+    body-bold:    { size: 13, weight: 700, lineHeight: 1.38, tracking: -0.3, use: "Brand name above product title" }
+    caption:      { size: 12, weight: 400, lineHeight: 1.33, tracking: -0.3, use: "Metadata, review counts" }
+    micro:        { size: 11, weight: 500, lineHeight: 1.27, tracking: -0.2, use: "Badge text, fine print" }
+  spacing: [2, 4, 8, 12, 16, 20, 24, 32, 40, 56, 80]
+  rounded: { sm: 2, md: 4, lg: 4, full: 9999 }
+  shadow:
+    soft: "0px 2px 8px rgba(0,0,0,0.06)"
+    floating: "0px 4px 16px rgba(0,0,0,0.10)"
+  components_harvested: true
+  components:
+    button-primary: { type: button, bg: "#000000", fg: "#ffffff", radius: "4px", padding: "14px 20px", font: "15px / 700", states: "hover #222222, pressed #333333, disabled #cccccc", use: "Primary CTA" }
+    button-outline: { type: button, bg: "#ffffff", fg: "#000000", border: "1px solid #000000", radius: "4px", padding: "14px 20px", font: "15px / 700", states: "hover #f5f5f5", use: "Secondary CTA" }
+    button-neutral: { type: button, bg: "#f5f5f5", fg: "#222222", border: "1px solid #eeeeee", radius: "4px", padding: "12px 16px", font: "14px / 500", states: "hover #eeeeee", use: "Tertiary actions" }
+    button-sale: { type: button, bg: "#ff003b", fg: "#ffffff", radius: "4px", padding: "12px 18px", font: "14px / 700", use: "Time-limited sale CTA, scarce" }
+    input: { type: input, bg: "#ffffff", fg: "#222222", border: "1px solid #dddddd", radius: "4px", padding: "12px 14px", font: "14px / 400", focus: "1px solid #000000", use: "Default text input" }
+    input-search: { type: input, bg: "#f5f5f5", radius: "4px", padding: "12px 16px 12px 40px", font: "14px / 400", focus: "bg #ffffff, 1px solid #000000", use: "Header search bar" }
+    card-product: { type: card, bg: "#ffffff", radius: "0px", shadow: "none", use: "Default product listing card, image edge is card edge" }
+    card-brand: { type: card, bg: "#fafafa", border: "1px solid #eeeeee", radius: "4px", padding: "16px", use: "Brand-of-the-day entry" }
+    badge-sale: { type: badge, bg: "transparent", fg: "#ff003b", font: "13px / 700", radius: "0px", use: "Inline sale percentage on product cards" }
+    badge-exclusive: { type: badge, bg: "#000000", fg: "#ffffff", font: "11px / 700", padding: "3px 6px", radius: "2px", use: "무신사 단독 / 선발매 exclusive flags" }
+    badge-outline: { type: badge, bg: "#ffffff", fg: "#000000", border: "1px solid #000000", font: "11px / 700", padding: "3px 6px", radius: "2px", use: "NEW, 무료배송 minor flags" }
+    chip: { type: badge, bg: "#ffffff", fg: "#222222", border: "1px solid #dddddd", font: "13px / 500", padding: "8px 14px", radius: "999px", active: "bg #000000, fg #ffffff, 13px / 700", use: "Category / size / color filter pills" }
+    tab: { type: tab, font: "14px / 700", active: "2px black bottom border, fg #000000", use: "Category nav, active item underline" }
+    toast: { type: toast, bg: "#000000", fg: "#ffffff", radius: "4px", font: "14px / 500", use: "Error / add-to-cart snackbar, 3s auto-dismiss" }
 ---
 
 # Design System Inspiration of Musinsa (무신사)

package/web/references/mustit/DESIGN.md

@@ -7,9 +7,55 @@ homepage: "https://www.mustit.co.kr"
 primary_color: "#D00000"
 logo:
   type: favicon
-  slug: "https://www.google.com/s2/favicons?domain=mustit.co.kr&sz=256"
+  slug: "https://static-ux.mustit.co.kr/img/front/favicon.ico"
 verified: "2026-06-03"
 omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    primary: "#d00000"
+    brand: "#1f1f2c"
+    canvas: "#ffffff"
+    surface: "#fafafa"
+    foreground: "#222222"
+    muted: "#888888"
+    on-primary: "#ffffff"
+    accent-info: "#3083e4"
+    accent-outlet: "#8c1e46"
+    surface-mid: "#f5f5f5"
+    hairline: "#e6e6e6"
+    border-subtle: "#f0f0f0"
+    disabled: "#cccccc"
+  typography:
+    family: { sans: "Pretendard", mono: "Pretendard" }
+    display:    { size: 28, weight: 700, lineHeight: 1.35, use: "Section hero titles" }
+    title-l:    { size: 24, weight: 700, lineHeight: 1.33, use: "Modal, page headers" }
+    title-m:    { size: 20, weight: 700, lineHeight: 1.35, use: "Section headers" }
+    title-s:    { size: 18, weight: 600, lineHeight: 1.5, use: "Card group titles" }
+    body-l:     { size: 16, weight: 500, lineHeight: 1.5, use: "Navigation links" }
+    body-m:     { size: 15, weight: 600, lineHeight: 1.47, use: "Button labels, product name" }
+    body-s:     { size: 14, weight: 700, lineHeight: 1.43, use: "Product price, form labels" }
+    caption-l:  { size: 13, weight: 700, lineHeight: 1.38, use: "Search keyword, chips" }
+    caption-s:  { size: 12, weight: 700, lineHeight: 1.33, use: "Metadata, sizes" }
+    label:      { size: 11, weight: 700, lineHeight: 1.45, use: "Badges, micro-copy" }
+    fine:       { size: 10, weight: 400, lineHeight: 1.6, use: "Legal, cart count" }
+  spacing: [8, 10, 12, 16]
+  rounded: { sm: 2, md: 4, lg: 8, full: 9999 }
+  shadow:
+    level1: "0 2px 4px 0 rgba(0,0,0,.03)"
+    level2: "0 2px 8px 0 rgba(0,0,0,.05)"
+  components_harvested: true
+  components:
+    button-primary: { type: button, bg: "#333333", fg: "#ffffff", radius: "4px", height: "48px", padding: "0 16px", font: "15px / 600", use: "Primary black CTA" }
+    button-confirm: { type: button, bg: "#d00000", fg: "#ffffff", border: "1px solid #d00000", radius: "4px", height: "48px", font: "18px / 500", use: "Red confirm CTA" }
+    button-outline: { type: button, bg: "#ffffff", fg: "#222222", border: "1px solid #333333", radius: "4px", height: "32px", font: "13px / 600", use: "Secondary action" }
+    button-disabled: { type: button, bg: "#ffffff", fg: "#888888", border: "1px solid #dddddd", radius: "4px", use: "Disabled action" }
+    tab: { type: tab, fg: "#aaaaaa", font: "16px / 500", active: "2px solid #222222 bottom border, fg #222222, 16px / 700", use: "Section tabs" }
+    badge-outlet: { type: badge, bg: "#8c1e46", fg: "#ffffff", radius: "2px", height: "22px", padding: "0 8px", font: "11px / 700", use: "Outlet badge" }
+    badge-info: { type: badge, fg: "#3083e4", border: "1px solid #3083e4", radius: "2px", height: "24px", font: "12px / 400", use: "Info tag" }
+    chip: { type: badge, border: "1px solid #cccccc", radius: "17px", height: "34px", active: "1px solid #d00000", use: "Filter chip" }
+    input-search: { type: input, bg: "#ffffff", fg: "#222222", radius: "4px", height: "40px", padding: "0 12px", font: "15px / 600", use: "Search input, placeholder #aaaaaa" }
 ---
 
 # MUSTIT

package/web/references/myrealtrip/DESIGN.md

@@ -10,6 +10,55 @@ logo:
   slug: "https://www.google.com/s2/favicons?domain=myrealtrip.com&sz=128"
 verified: "2026-05-19"
 omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    primary: "#2b96ed"
+    primary-hover: "#1583db"
+    brand: "#0250cb"
+    accent: "#8238fa"
+    canvas: "#ffffff"
+    surface: "#f8f8f8"
+    foreground: "#0f0f0f"
+    body: "#333333"
+    muted: "#767676"
+    on-primary: "#ffffff"
+    hairline: "#e5e5e5"
+    border-strong: "#d1d1d1"
+    success: "#22c55e"
+    error: "#ff4d4f"
+    warning: "#faad14"
+  typography:
+    family: { sans: "Pretendard", mono: "Pretendard" }
+    hero:     { size: 32, weight: 700, lineHeight: 1.25, use: "Home hero, campaign titles" }
+    section:  { size: 24, weight: 700, lineHeight: 1.35, use: "Row headers" }
+    card-title: { size: 16, weight: 600, lineHeight: 1.4, use: "Tour/accommodation card titles" }
+    body:     { size: 14, weight: 400, lineHeight: 1.5, use: "Descriptions, list copy" }
+    cta:      { size: 14, weight: 600, lineHeight: 1.4, use: "Buttons, nav" }
+    price:    { size: 18, weight: 700, lineHeight: 1.3, use: "Price emphasis on cards" }
+    caption:  { size: 12, weight: 400, lineHeight: 1.4, use: "Metadata, badges, fine print" }
+  spacing: [4, 8, 12, 16, 24, 32, 40]
+  rounded: { sm: 6, md: 8, lg: 12, xl: 16, full: 9999 }
+  shadow:
+    subtle: "0 1px 3px rgba(0,0,0,0.04)"
+    hover: "0 2px 8px rgba(0,0,0,0.06)"
+    floating: "0 4px 16px rgba(0,0,0,0.1)"
+    modal: "0 8px 24px rgba(0,0,0,0.16)"
+  components_harvested: true
+  components:
+    button-primary: { type: button, bg: "#2b96ed", fg: "#ffffff", radius: "12px", padding: "0 24px", height: "40px", font: "14px / 600", states: "hover #1583db", use: "Login/signup, primary booking action" }
+    button-promo: { type: button, bg: "#8238fa", fg: "#ffffff", radius: "12px", padding: "0 24px", font: "14px / 600", use: "Membership / benefit CTAs" }
+    button-secondary: { type: button, bg: "#ffffff", fg: "#2b96ed", border: "1px solid #2b96ed", radius: "12px", padding: "0 24px", font: "14px / 600", use: "Secondary action" }
+    button-ghost: { type: button, bg: "transparent", fg: "#333333", radius: "8px", font: "14px / 600", use: "Tertiary nav, 더보기" }
+    input: { type: input, bg: "#ffffff", fg: "#0f0f0f", border: "1px solid #e5e5e5", radius: "12px", padding: "12px 16px", font: "14px / 400", focus: "border #2b96ed", use: "Search / text field" }
+    card: { type: card, bg: "#ffffff", border: "1px solid #e5e5e5", radius: "8px", shadow: "hover 0 2px 8px rgba(0,0,0,0.06)", use: "Tour / accommodation card" }
+    badge-confirm: { type: badge, bg: "rgba(34,197,94,0.12)", fg: "#22c55e", radius: "6px", padding: "2px 8px", font: "12px / 600", use: "Instant-confirm badge" }
+    badge-discount: { type: badge, bg: "transparent", fg: "#ff4d4f", font: "14px / 700", use: "Discount percentage on cards" }
+    chip: { type: badge, bg: "#f8f8f8", fg: "#333333", radius: "999px", padding: "6px 14px", font: "13px / 500", use: "Category filter chip" }
+    tab: { type: tab, fg: "#767676", font: "14px / 600", active: "2px bottom bar #2b96ed, fg #0f0f0f", use: "Top nav category item" }
+    toast: { type: toast, bg: "#0f0f0f", fg: "#ffffff", radius: "8px", padding: "12px 16px", use: "Snackbar transient feedback" }
+    dialog: { type: dialog, bg: "#ffffff", fg: "#0f0f0f", radius: "16px", padding: "24px", shadow: "rgba(0,0,0,0.5) backdrop", use: "Login, date picker, bottom sheet" }
 ---
 
 # Design System Inspiration of MyRealTrip (마이리얼트립)

package/web/references/naver/DESIGN.md

@@ -4,7 +4,7 @@ name: Naver
 country: KR
 category: consumer-tech
 homepage: "https://www.naver.com"
-primary_color: "#000000"
+primary_color: "#03c75a"
 logo:
   type: simpleicons
   slug: naver
@@ -16,6 +16,55 @@ ds:
   type: brand
   description: "NAVER Corp's official brand guide — logo usage, NAVER Green #03C75A, and identity rules."
   og_image: "https://www.navercorp.com/img/og/OG_TAG_1_Main.png"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    primary: "#03c75a"
+    primary-hover: "#02b350"
+    primary-active: "#02a046"
+    brand: "#03c75a"
+    canvas: "#ffffff"
+    surface: "#f5f6f7"
+    foreground: "#333333"
+    muted: "#767676"
+    on-primary: "#ffffff"
+    hairline: "#dadce0"
+    border-subtle: "#e9ebee"
+    accent-link: "#0068c3"
+    accent-visited: "#6633b9"
+    error: "#e74c3c"
+    warning: "#f5a623"
+    secondary-text: "#5f6368"
+  typography:
+    family: { sans: "Apple SD Gothic Neo", mono: "D2Coding" }
+    display:     { size: 32, weight: 700, lineHeight: 1.38, use: "Brand campaign hero, editorial titles" }
+    page-title:  { size: 22, weight: 700, lineHeight: 1.36, use: "Section headers on portal/SERP" }
+    card-title:  { size: 17, weight: 700, lineHeight: 1.41, use: "News headlines, shopping card titles" }
+    body-lg:     { size: 17, weight: 400, lineHeight: 1.62, tracking: -0.34, use: "Search-result body, blog body" }
+    body:        { size: 14, weight: 400, lineHeight: 1.5, use: "Standard list rows" }
+    body-small:  { size: 13, weight: 400, lineHeight: 1.38, use: "Secondary metadata, attributions" }
+    caption:     { size: 12, weight: 400, lineHeight: 1.33, use: "Timestamps, source bylines" }
+  spacing: [4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64]
+  rounded: { sm: 4, md: 8, lg: 16, full: 9999 }
+  shadow:
+    subtle: "0 1px 2px rgba(0,0,0,0.06)"
+    standard: "0 2px 8px rgba(0,0,0,0.1)"
+    prominent: "0 4px 16px rgba(0,0,0,0.12)"
+  components_harvested: true
+  components:
+    button-primary: { type: button, bg: "#03c75a", fg: "#ffffff", radius: "4px", height: "48px", font: "16px / 700", states: "hover #02b350, pressed #02a046, disabled #dadce0", use: "Primary action CTA" }
+    button-secondary: { type: button, bg: "#ffffff", fg: "#333333", border: "1px solid #dadce0", radius: "4px", states: "hover #f5f6f7", use: "취소, 닫기, secondary action" }
+    button-ghost: { type: button, bg: "transparent", fg: "#03c75a", padding: "8px 12px", font: "14px / 500", use: "더보기, 전체보기 expand affordance" }
+    chip: { type: badge, bg: "#f5f6f7", fg: "#333333", radius: "9999px", height: "32px", padding: "0 14px", active: "bg #03c75a, fg #ffffff", use: "Search refinement / category chip" }
+    input-search: { type: input, bg: "#ffffff", fg: "#333333", border: "2px solid #03c75a", height: "56px", padding: "0 56px 0 16px", font: "17px / 400", use: "The 녹색창 — treat as a logo" }
+    input: { type: input, bg: "#ffffff", border: "1px solid #dadce0", radius: "4px", height: "40px", padding: "0 12px", focus: "2px solid #03c75a", use: "Standard text input" }
+    card-news: { type: card, bg: "#ffffff", border: "1px solid #e9ebee", radius: "4px", padding: "16px", use: "News / headline card" }
+    card-shopping: { type: card, bg: "#ffffff", border: "1px solid #e9ebee", radius: "8px", use: "Shopping / 가격비교 grid item" }
+    tile: { type: card, bg: "#ffffff", radius: "16px", padding: "16px", shadow: "0 1px 2px rgba(0,0,0,0.06) on hover", use: "Service tile (서비스 바로가기)" }
+    badge-ad: { type: badge, bg: "#ffffff", fg: "#03c75a", border: "1px solid #03c75a", radius: "2px", use: "광고 ad label" }
+    tab: { type: tab, fg: "#5f6368", font: "16px / 400", active: "fg #03c75a, weight 700, 3px green underline", use: "SERP vertical tabs" }
+    toast: { type: toast, bg: "#333333", fg: "#ffffff", font: "14px / 400", use: "Login / save confirmation, 2.5s dismiss" }
 ---
 
 # Design System Inspiration of Naver (네이버)

package/web/references/naverwebtoon/DESIGN.md

@@ -10,6 +10,54 @@ logo:
   slug: "https://www.google.com/s2/favicons?domain=comic.naver.com&sz=128"
 verified: "2026-05-27"
 omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    primary: "#00dc64"
+    primary-hover: "#00c758"
+    brand: "#00dc64"
+    canvas: "#ffffff"
+    surface: "#f7f7f7"
+    foreground: "#1a1a1a"
+    body: "#666666"
+    muted: "#999999"
+    on-primary: "#ffffff"
+    hairline: "#eeeeee"
+    border-strong: "#dddddd"
+    accent-like: "#ff4d6d"
+    accent-star: "#ffb300"
+    error: "#f5444c"
+    viewer-black: "#000000"
+  typography:
+    family: { sans: "Pretendard", mono: "Pretendard" }
+    display:    { size: 28, weight: 700, lineHeight: 1.3, use: "Featured banner, event headers" }
+    section:    { size: 20, weight: 700, lineHeight: 1.35, use: "Row headers" }
+    title-card: { size: 16, weight: 600, lineHeight: 1.4, use: "Webtoon title under thumbnail" }
+    author:     { size: 13, weight: 400, lineHeight: 1.4, use: "Author name, genre line" }
+    body:       { size: 14, weight: 400, lineHeight: 1.6, use: "Synopsis, descriptions" }
+    label:      { size: 14, weight: 600, lineHeight: 1.4, use: "Buttons, day tabs" }
+    caption:    { size: 12, weight: 400, lineHeight: 1.4, use: "View/like counts, timestamps" }
+    rank:       { size: 22, weight: 700, use: "Chart rank, tabular" }
+  spacing: [4, 8, 12, 16, 20, 24, 32]
+  rounded: { sm: 4, md: 8, lg: 12, full: 9999 }
+  shadow:
+    subtle: "0px 2px 8px rgba(0,0,0,0.06)"
+    floating: "0px 4px 12px rgba(0,0,0,0.12)"
+    toast: "0px 4px 12px rgba(0,0,0,0.16)"
+  components_harvested: true
+  components:
+    button-primary: { type: button, bg: "#00dc64", fg: "#ffffff", radius: "8px", padding: "10px 18px", font: "14px / 600", states: "hover #00c758, disabled bg #eeeeee fg #bbbbbb", use: "Primary read CTA" }
+    button-outline: { type: button, bg: "#ffffff", fg: "#333333", border: "1px solid #dddddd", radius: "8px", padding: "10px 18px", font: "14px / 600", use: "Secondary action" }
+    button-subscribe: { type: button, bg: "rgba(0,220,100,0.10)", fg: "#00c758", radius: "8px", padding: "10px 18px", font: "14px / 600", use: "관심웹툰 subscribe toggle, green-tinted when active" }
+    input-search: { type: input, bg: "#f7f7f7", fg: "#333333", radius: "8px", padding: "12px 14px", font: "14px / 400", focus: "1px border #00dc64", use: "Title/author search" }
+    card-thumbnail: { type: card, bg: "transparent", radius: "8px", states: "hover scale 1.03 + title emphasis", use: "Webtoon thumbnail card, art is the card" }
+    card-info: { type: card, bg: "#ffffff", radius: "12px", padding: "20px", shadow: "0px 2px 8px rgba(0,0,0,0.06)", use: "Title-detail header" }
+    badge-up: { type: badge, bg: "#00dc64", fg: "#ffffff", radius: "4px", padding: "1px 5px", font: "11px / 700", use: "UP / new-episode flag, the green ritual" }
+    chip: { type: badge, bg: "#f7f7f7", fg: "#666666", radius: "999px", padding: "6px 14px", font: "13px / 500", active: "bg #00dc64, fg #ffffff", use: "요일별 day tabs, genre filters" }
+    badge-rating: { type: badge, bg: "transparent", fg: "#ffb300", font: "12px / 700", use: "별점 average beside a star" }
+    tab: { type: tab, fg: "#999999", font: "15px / 600", active: "fg #00dc64, 2px #00dc64 underline", use: "Day-of-week tab" }
+    toast: { type: toast, bg: "#1a1a1a", fg: "#ffffff", radius: "8px", padding: "12px 16px", shadow: "0px 4px 12px rgba(0,0,0,0.16)", font: "14px / 500", use: "Transient feedback, 3s auto-dismiss" }
 ---
 
 # Design System Inspiration of Naver Webtoon (네이버웹툰)