oh-my-design-cli 1.6.7 → 1.7.0

package/web/references/krds/DESIGN.md

@@ -16,6 +16,69 @@ ds:
   type: system
   description: "행정안전부 주관 범정부 통합 디자인 시스템. Government Blue #256EF4, Pretendard GOV, WCAG/KWCAG 2.2 a11y-first tokens and components."
   og_image: "https://www.krds.go.kr/resources/img/guide/KRDS_Open_Graph.png"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    primary: "#256ef4"
+    primary-hover: "#0b50d0"
+    primary-deep: "#083891"
+    brand: "#256ef4"
+    canvas: "#ffffff"
+    foreground: "#1e2124"
+    muted: "#6d7882"
+    on-primary: "#ffffff"
+    surface: "#f4f5f6"
+    surface-primary: "#ecf2fe"
+    hairline: "#b1b8be"
+    border-strong: "#58616a"
+    body: "#464c53"
+    secondary: "#346fb2"
+    point: "#d63d4a"
+    danger: "#de3412"
+    warning: "#ffb114"
+    success: "#228738"
+    information: "#0b78cb"
+  typography:
+    family: { sans: "Pretendard GOV", mono: "SF Mono" }
+    display-large:  { size: 60, weight: 700, lineHeight: 1.5, tracking: "1px", use: "Marketing/banner display (no body use)" }
+    display-small:  { size: 36, weight: 700, lineHeight: 1.5, tracking: "1px", use: "Small display banner" }
+    heading-xlarge: { size: 40, weight: 700, lineHeight: 1.5, tracking: "1px", use: "H1 page/section top title (28px mobile)" }
+    heading-large:  { size: 32, weight: 700, lineHeight: 1.5, tracking: "1px", use: "H1 narrow / H2" }
+    heading-medium: { size: 24, weight: 700, lineHeight: 1.5, use: "H2 / H3" }
+    heading-small:  { size: 19, weight: 700, lineHeight: 1.5, use: "H3 / H4" }
+    heading-xsmall: { size: 17, weight: 700, lineHeight: 1.5, use: "H4 / H5" }
+    body-large:     { size: 19, weight: 400, lineHeight: 1.5, use: "Emphasized body / key copy" }
+    body-medium:    { size: 17, weight: 400, lineHeight: 1.5, use: "Standard body (default)" }
+    body-small:     { size: 15, weight: 400, lineHeight: 1.5, use: "Caption / small label" }
+    body-xsmall:    { size: 13, weight: 400, lineHeight: 1.5, use: "Annotation / meta / footer" }
+  spacing: { xs: 2, sm: 4, md: 8, base: 16, lg: 24, xl: 32, xxl: 40 }
+  rounded: { sm: 4, md: 6, lg: 8, full: 1000 }
+  shadow:
+    focus: "0 0 0 0.4rem #256ef4"
+    modal: "0 0.2rem 0 0 rgba(0,0,0,0.1), 0 0.4rem 0.8rem 0 rgba(0,0,0,0.1)"
+  components_harvested: true
+  components:
+    button-primary: { type: button, bg: "#256ef4", fg: "#ffffff", border: "1px solid #256ef4", radius: "6px", padding: "0 16px", height: "48px", font: "17px / 400", hover: "#0b50d0", active: "#083891", disabled: "bg #cdd1d5 fg #6d7882", use: "Core action 신청하기/확인 (1 per screen)" }
+    button-secondary: { type: button, bg: "#ecf2fe", fg: "#0b50d0", border: "1px solid #256ef4", radius: "6px", padding: "0 16px", height: "48px", font: "17px / 400", use: "Secondary action 자세히 보기/이전 단계" }
+    button-tertiary: { type: button, bg: "transparent", fg: "#1e2124", border: "1px solid #58616a", radius: "6px", padding: "0 16px", height: "48px", font: "17px / 400", hover: "#f4f5f6", use: "Cancel/reset 취소/초기화/닫기" }
+    button-floating: { type: button, bg: "#256ef4", fg: "#ffffff", radius: "1000px", shadow: "weak box-shadow", use: "Bottom-right floating action 맨 위로/챗봇" }
+    input-text: { type: input, bg: "#ffffff", fg: "#464c53", border: "1px solid #58616a", radius: "8px", padding: "0 16px", height: "56px", font: "19px / 400", focus: "0 0 0 4px #256ef4 halo", disabled: "bg #cdd1d5 fg #6d7882 border #b1b8be", states: "error border 2px solid #de3412", use: "Standard text input (large default)" }
+    select: { type: input, bg: "#ffffff", fg: "#1e2124", border: "1px solid #58616a", radius: "6px", padding: "0 48px 0 16px", height: "56px", font: "19px / 400", disabled: "bg #cdd1d5 border #b1b8be", states: "error border 2px solid #ab2b36", use: "Native select with chevron" }
+    toggle-checkbox: { type: toggle, bg: "#ffffff", border: "1px solid #58616a", radius: "4px", active: "bg #256ef4 + white check icon", use: "Multi-select checkbox" }
+    toggle-switch: { type: toggle, bg: "#b1b8be", fg: "#ffffff", radius: "1000px", active: "#256ef4 track, white thumb right", disabled: "bg #cdd1d5", use: "On/off toggle switch" }
+    card: { type: card, bg: "#ffffff", border: "1px solid #b1b8be", radius: "8px", padding: "24px", shadow: "none", use: "Standard content panel, border-defined" }
+    card-info: { type: card, bg: "#ecf2fe", fg: "#1e2124", radius: "8px", padding: "16px 24px", use: "Info/help panel 안내·도움말" }
+    card-critical: { type: card, bg: "#de3412", fg: "#ffffff", radius: "0", use: "Full-bleed urgent notice banner top of page" }
+    dialog: { type: dialog, bg: "#ffffff", fg: "#1e2124", radius: "12px", padding: "40px", shadow: "0 0.2rem 0 0 rgba(0,0,0,0.1), 0 0.4rem 0.8rem 0 rgba(0,0,0,0.1)", use: "Modal dialog, backdrop fade 0->0.5 black, min-height 264px" }
+    badge-primary: { type: badge, bg: "#256ef4", fg: "#ffffff", border: "1px solid #256ef4", radius: "4px", padding: "0 8px", height: "24px", font: "15px / 400", use: "Content classification, action emphasis" }
+    badge-point: { type: badge, bg: "#d63d4a", fg: "#ffffff", radius: "4px", padding: "0 8px", height: "24px", font: "15px / 400", use: "Emphasis/new/important (red point)" }
+    badge-success: { type: badge, bg: "#228738", fg: "#ffffff", radius: "4px", padding: "0 8px", height: "24px", font: "15px / 400", use: "Completed / success" }
+    badge-danger: { type: badge, bg: "#de3412", fg: "#ffffff", radius: "4px", padding: "0 8px", height: "24px", font: "15px / 400", use: "Error / rejected" }
+    badge-warning: { type: badge, bg: "#ffb114", fg: "#1e2124", radius: "4px", padding: "0 8px", height: "24px", font: "15px / 400", use: "Caution (black text on warning bg)" }
+    badge-tag: { type: badge, bg: "#ffffff", fg: "#1e2124", border: "1px solid #cdd1d5", radius: "1000px", padding: "8px 10px", font: "15px / 400", active: "bg #ecf2fe fg #0b50d0 border #256ef4", use: "Selectable filter chip with delete button" }
+    tab-horizontal: { type: tab, bg: "transparent", fg: "#464c53", font: "17px / 400", active: "fg #256ef4 700 + 2px bottom border #256ef4", use: "In-page section switch, keyboard L/R nav" }
+    toast: { type: toast, bg: "#1e2124", fg: "#ffffff", radius: "8px", padding: "16px", use: "Center/bottom card, 3s auto-dismiss" }
 ---
 
 # Design System Inspiration of KRDS (대한민국 정부 디자인 시스템)

package/web/references/kream/DESIGN.md

@@ -10,6 +10,38 @@ logo:
   slug: "https://www.google.com/s2/favicons?domain=kream.co.kr&sz=256"
 verified: "2026-05-15"
 omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    primary: "#222222"
+    foreground: "#000000"
+    canvas: "#ffffff"
+    surface: "#f5f5f5"
+    muted: "#787878"
+    hairline: "#ebebeb"
+    on-primary: "#ffffff"
+  typography:
+    family: { sans: "Pretendard Variable", mono: "Pretendard Variable" }
+    display:    { size: 32, weight: 700, lineHeight: 1.2, use: "Page title / H1" }
+    search:     { size: 24, weight: 700, lineHeight: 1.2, use: "Search query input — typed keyword as headline" }
+    tab-active: { size: 16, weight: 700, lineHeight: 1.4, use: "Active tab label" }
+    body:       { size: 16, weight: 400, lineHeight: 1.4, use: "Default copy, inactive tab, card title" }
+    chip:       { size: 13, weight: 400, lineHeight: 1.4, use: "Filter chip, category pill" }
+    ghost:      { size: 13, weight: 300, lineHeight: 1.4, use: "Ghost button label" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48 }
+  rounded: { sm: 6, md: 8, lg: 16, full: 9999 }
+  shadow:
+    none: "none"
+  components_harvested: true
+  components:
+    chip-filter: { type: badge, bg: "#f4f4f4", fg: "#222222", radius: "30px", height: "30px", padding: "0 12px", font: "13px / 400", use: "Search filter row chip (배송/카테고리/색상/사이즈/가격대)" }
+    pill-category: { type: badge, bg: "#ffffff", fg: "#222222", border: "1px solid #ebebeb", radius: "6px", height: "30px", font: "13px / 400", use: "Secondary category quick-row" }
+    shortcut-keyword: { type: listItem, bg: "#fafafa", fg: "#222222", radius: "6px", height: "48px", font: "16px / 400", use: "Popular keyword shortcut anchor" }
+    card-banner: { type: card, bg: "#f5f5f5", fg: "#222222", radius: "16px", padding: "0", font: "16px / 700", use: "Hero / merchandising banner tile (1188x475)" }
+    input-search: { type: input, bg: "transparent", fg: "#222222", radius: "0", font: "24px / 700", use: "Homepage hero search — typed keyword as headline" }
+    button-ghost: { type: button, bg: "transparent", fg: "#000000", border: "1px solid rgba(0,0,0,0.6)", radius: "8px", height: "36px", font: "13px / 300", use: "Fallback / secondary recovery action (홈으로 가기)" }
+    tab-strip: { type: tab, bg: "transparent", fg: "#222222", font: "16px / 700", active: "2px bottom border #222222", use: "Tab strip 상품/스타일/프로필 — weight + underline signals selection" }
 ---
 
 # Design System Inspiration of KREAM

package/web/references/kurly/DESIGN.md

@@ -4,12 +4,49 @@ name: Kurly
 country: KR
 category: ecommerce
 homepage: "https://www.kurly.com"
-primary_color: "#000000"
+primary_color: "#5f0080"
 logo:
   type: favicon
   slug: "https://res.kurly.com/icons/favicon-128x128.png"
 verified: "2026-05-15"
 omd: "0.1"
+tokens:
+  source: reconciled
+  extracted: "2026-06-08"
+  components_harvested: true
+  note: "deterministic picks (#bd76ff tint, #1a73e8 Google embed) rejected; canonical = Kurly Purple purple-900"
+  colors:
+    primary: "#5f0080"
+    purple-800: "#672091"
+    purple-700: "#7e3ab0"
+    purple-500: "#9a60ca"
+    purple-100: "#e8dbf3"
+    purple-50: "#f5effa"
+    canvas: "#ffffff"
+    foreground: "#1c1c1c"
+    body: "#393d41"
+    muted: "#464c52"
+    on-primary: "#ffffff"
+  typography:
+    family: { sans: "Noto Sans KR" }
+    display-72:  { size: 72, weight: 700, use: "Hero magazine headlines (web)" }
+    display-44:  { size: 44, weight: 700, use: "Editorial section headers" }
+    headline-36: { size: 36, weight: 700, use: "Page titles, category banners" }
+    headline-28: { size: 28, weight: 700, use: "Subsection headers" }
+    title-24:    { size: 24, weight: 600, use: "Card-cluster / dialog titles" }
+    title-18:    { size: 18, weight: 600, use: "Standard product / modal titles" }
+    body-16:     { size: 16, weight: 400, use: "Default reading text, button labels" }
+  spacing: { xxs: 2, 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:
+    subtle: "0px 2px 2px 0px rgba(0,0,0,0.03)"
+    card-hover: "0px 0px 4px 0px rgba(0,0,0,0.15)"
+    floating: "2px 2px 10px 0px rgba(0,0,0,0.10)"
+  components:
+    button-primary: { type: button, bg: "#5f0080", fg: "#ffffff", radius: "6px", padding: "16px 24px", font: "16px / 600", active: "#672091", disabled: "#dfe4eb bg, #848f9a text", use: "Primary commerce CTAs (구매하기, 장바구니 담기, 주문하기)" }
+    button-secondary: { type: button, bg: "#ffffff", fg: "#5f0080", border: "1px solid #5f0080", radius: "6px", padding: "12px 20px", font: "14px / 600", active: "#f5effa bg", use: "Secondary actions (바로 구매, 옵션 변경)" }
+    button-critical: { type: button, bg: "#e22d2e", fg: "#ffffff", radius: "6px", padding: "12px 20px", font: "14px / 600", active: "#d81b1c", use: "Last-chance sale CTAs, destructive confirms (삭제)" }
+    card: { type: card, bg: "#ffffff", radius: "4px", padding: "12px 4px", shadow: "none", hover: "0px 0px 4px rgba(0,0,0,0.15)", use: "Category list, search results, recommendation rails" }
 ---
 
 # Design System Inspiration of Kurly (컬리 / 마켓컬리)

package/web/references/laftel/DESIGN.md

@@ -10,6 +10,46 @@ logo:
   slug: "https://www.google.com/s2/favicons?domain=laftel.net&sz=256"
 verified: "2026-06-03"
 omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    primary: "#816bff"
+    primary-hover: "#6e58ff"
+    brand: "#816bff"
+    canvas: "#ffffff"
+    foreground: "#121212"
+    muted: "#8a8a8a"
+    surface: "#242537"
+    hairline: "#eeeeee"
+    accent-wash: "#f0edff"
+    error: "#f16361"
+    on-primary: "#ffffff"
+  typography:
+    family: { sans: "Pretendard", mono: "Pretendard" }
+    title-xxl: { size: 40, weight: 700, lineHeight: 1.5, use: "Largest display title" }
+    title-xl:  { size: 32, weight: 700, lineHeight: 1.5, use: "Section title" }
+    title-l:   { size: 28, weight: 700, lineHeight: 1.5, use: "Sub-section title" }
+    title-m:   { size: 24, weight: 700, lineHeight: 1.5, use: "Card / block title" }
+    title-s:   { size: 20, weight: 700, lineHeight: 1.5, use: "Small title" }
+    text-l:    { size: 18, weight: 700, lineHeight: 1.5, use: "Large body / button label" }
+    text-m:    { size: 16, weight: 400, lineHeight: 1.5, use: "Default body" }
+    text-s:    { size: 14, weight: 700, lineHeight: 1.5, use: "Nav link, toast, small label" }
+    text-xs:   { size: 13, weight: 400, lineHeight: 1.5, use: "Metadata" }
+    text-xxs:  { size: 12, weight: 400, lineHeight: 1.5, use: "Fine print" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48 }
+  rounded: { sm: 4, md: 4, lg: 8, full: 9999 }
+  shadow:
+    none: "none"
+  components_harvested: true
+  components:
+    button-primary: { type: button, bg: "#816bff", fg: "#ffffff", radius: "4px", height: "56px", padding: "0 18px", font: "18px / 700", states: "hover #6e58ff", use: "Primary CTA (md)" }
+    button-primary-sm: { type: button, bg: "#816bff", fg: "#ffffff", radius: "4px", height: "48px", padding: "0 20px", font: "16px / 700", use: "Primary CTA (sm)" }
+    button-slight: { type: button, bg: "#f0edff", fg: "#816bff", radius: "4px", height: "56px", font: "18px / 700", states: "hover #d9d3ff", use: "Secondary action" }
+    button-disabled: { type: button, bg: "#eeeeee", fg: "#8a8a8a", radius: "4px", height: "56px", use: "Disabled action" }
+    nav-bar: { type: tab, bg: "#ffffff", fg: "#121212", height: "64px", padding: "0 50px", border: "1px solid #eeeeee", font: "14px / 700", active: "link color #816bff", use: "Desktop nav — active/hover link purple" }
+    badge-notification: { type: badge, bg: "#816bff", fg: "#ffffff", radius: "9999px", height: "17px", font: "10px / 700", use: "Notification count badge" }
+    toast: { type: toast, bg: "#242537", fg: "#ffffff", radius: "4px", padding: "16px 12px", height: "48px", font: "14px / 400", use: "Default toast (#000000 light / #242537 dark)" }
 ---
 
 # Laftel

package/web/references/lamborghini/DESIGN.md

@@ -10,6 +10,60 @@ logo:
   slug: lamborghini
 verified: "2026-05-15"
 omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  components_harvested: true
+  colors:
+    primary: "#ffc000"
+    primary-alt: "#f4c01a"
+    canvas: "#000000"
+    on-primary: "#000000"
+    white: "#ffffff"
+    gold-dark: "#917300"
+    gold-text: "#ffce3e"
+    cyan: "#29abe2"
+    link: "#3860be"
+    teal: "#1eaedb"
+    charcoal: "#202020"
+    dark-iron: "#181818"
+    near-white: "#f8f8f8"
+    mist: "#e6e6e6"
+    smoke: "#f5f5f5"
+    graphite: "#494949"
+    ash: "#7d7d7d"
+    steel: "#969696"
+    slate: "#666666"
+    iron: "#555555"
+    shadow: "#313131"
+  typography:
+    family: { sans: "LamboType", mono: "LamboType" }
+    hero-display: { size: 120, weight: 400, lineHeight: 0.92, use: "Hero, uppercase, maximum impact" }
+    display-2:    { size: 80, weight: 400, lineHeight: 1.13, use: "Major section titles, uppercase" }
+    section:      { size: 54, weight: 400, lineHeight: 1.19, use: "Section title, uppercase" }
+    subsection:   { size: 40, weight: 400, lineHeight: 1.15, use: "Sub-section, uppercase" }
+    feature:      { size: 27, weight: 400, lineHeight: 1.37, use: "Feature heading, uppercase" }
+    card-title:   { size: 24, weight: 400, use: "Card title" }
+    body-large:   { size: 18, weight: 400, lineHeight: 1.56, use: "Body large" }
+    body:         { size: 16, weight: 400, lineHeight: 1.50, use: "Primary body / UI" }
+    button:       { size: 14, weight: 400, lineHeight: 1.00, tracking: 0.2, use: "Ghost buttons, uppercase" }
+    caption:      { size: 14, weight: 700, lineHeight: 1.14, tracking: -0.42, use: "Caption, uppercase, negative tracking" }
+    label:        { size: 12, weight: 400, lineHeight: 1.83, tracking: 0.96, use: "Micro labels, badges, uppercase" }
+    micro:        { size: 10, weight: 400, lineHeight: 1.00, tracking: 0.225, use: "Smallest text, uppercase" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48, section: 56 }
+  rounded: { sm: 0, md: 2, lg: 20, full: 9999 }
+  shadow:
+    overlay: "rgba(0,0,0,0.7)"
+    fog: "rgba(0,0,0,0.5)"
+    mist: "rgba(0,0,0,0.25)"
+  components:
+    button-gold: { type: button, bg: "#ffc000", fg: "#000000", radius: 0, padding: "24px", font: "16px/400", use: "Primary CTA — Discover More, Tickets" }
+    button-ghost: { type: button, bg: "transparent", fg: "#ffffff", radius: 0, padding: "16px", use: "Secondary CTA on dark, 1px white border 50% opacity" }
+    button-white: { type: button, bg: "#ffffff", fg: "#202020", radius: 0, use: "Light-mode primary CTA" }
+    button-black: { type: button, bg: "#000000", fg: "#202020", radius: 0, use: "Inverted CTA on light sections" }
+    button-gray: { type: button, bg: "#969696", fg: "#202020", radius: 0, use: "Subtle/tertiary action" }
+    card-standard: { type: card, bg: "#202020", radius: 0, use: "Card/panel on black canvas, full-bleed photo + white text" }
+    badge-tag: { type: badge, bg: "#969696", fg: "#ffffff", radius: 2, padding: "8px", font: "10px", use: "Metallic pill tag" }
 ---
 
 # Design System Inspiration of Lamborghini