oh-my-design-cli 1.6.7 → 1.7.0

package/web/references/kakaobank/DESIGN.md

@@ -4,7 +4,7 @@ name: KakaoBank
 country: KR
 category: fintech
 homepage: "https://www.kakaobank.com"
-primary_color: "#000000"
+primary_color: "#ffe300"
 logo:
   type: simpleicons
   slug: kakaotalk
@@ -16,6 +16,60 @@ ds:
   type: brand
   description: "KakaoBank Brand Identity Guidelines V2.0 — logo system, KakaoBank Yellow #FFE300, downloadable CI assets."
   og_image: "https://www.kakaobank.com/view/images/kkb_og_img.png"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  components_harvested: true
+  colors:
+    primary: "#ffe300"
+    base: "#1e1e1e"
+    canvas: "#ffffff"
+    gray: "#a3a3a3"
+    light-gray: "#cccccc"
+    surface-fill: "#f7f7f7"
+    surface-subtle: "#f9f9f9"
+    error: "#e02000"
+    link: "#007aff"
+    success: "#0fbe6c"
+    warning: "#ff9800"
+    inactive-tab: "#888888"
+    border-subtle: "#e6e6e6"
+    on-primary: "#1e1e1e"
+  typography:
+    family: { sans: "Pretendard Variable", mono: "SF Mono" }
+    hero-mega:     { size: 90, weight: 800, lineHeight: 1.10, use: "Corporate hero" }
+    display:       { size: 42, weight: 700, lineHeight: 1.25, use: "Service page h1" }
+    section-title: { size: 32, weight: 700, lineHeight: 1.30, use: "Mid-page h2" }
+    heading:       { size: 20, weight: 600, lineHeight: 1.40, use: "Footer column h3" }
+    title:         { size: 18, weight: 600, lineHeight: 1.44, use: "List section titles, modal headers" }
+    body-large:    { size: 16, weight: 400, lineHeight: 1.50, use: "Default body, card descriptions" }
+    body:          { size: 14, weight: 400, lineHeight: 1.55, use: "Sub-nav, dense list rows, button labels" }
+    caption:       { size: 13, weight: 400, lineHeight: 1.55, use: "Timestamps, helper text" }
+    micro:         { size: 12, weight: 400, lineHeight: 1.50, use: "Disclaimers, footer fine print" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 20, xl: 24, xxl: 32, section: 80 }
+  rounded: { sm: 8, md: 12, lg: 16, full: 9999 }
+  shadow:
+    whisper: "0 1px 2px rgba(0,0,0,0.04)"
+    subtle: "0 2px 8px rgba(0,0,0,0.06)"
+    sheet: "0 -2px 16px rgba(0,0,0,0.08)"
+  components:
+    button-yellow-solid: { type: button, bg: "#ffe300", fg: "#1e1e1e", radius: 12, padding: "14px 20px", font: "16px/600", use: "Primary CTA in product flows" }
+    button-black-solid: { type: button, bg: "#1e1e1e", fg: "#ffffff", radius: 12, padding: "14px 20px", font: "16px/600", use: "Secondary high-emphasis CTA" }
+    button-outline: { type: button, bg: "transparent", fg: "#1e1e1e", radius: 12, padding: "14px 20px", font: "16px/600", use: "Tertiary actions" }
+    button-nav-link: { type: button, bg: "transparent", fg: "#1e1e1e", padding: "0 20px", font: "14px/600", use: "Top navigation items" }
+    button-critical: { type: button, bg: "#e02000", fg: "#ffffff", radius: 12, padding: "14px 20px", font: "16px/600", use: "Destructive actions" }
+    tab-subnav: { type: tab, bg: "transparent", fg: "#888888", padding: "20px 0", font: "14px/400", active: "#1e1e1e text", use: "Sub-section nav" }
+    tab-service: { type: tab, bg: "transparent", fg: "#1e1e1e", padding: "16px 0", font: "16px/400", use: "Product-category tabs" }
+    tab-segmented: { type: tab, bg: "transparent", fg: "#a3a3a3", radius: 12, font: "14px/600", active: "#ffffff bg + #1e1e1e text", use: "Segmented control" }
+    card-product: { type: card, bg: "#ffffff", radius: 12, padding: "24px", use: "Corporate product card" }
+    card-section-fill: { type: card, bg: "#f7f7f7", radius: 16, padding: "32px", use: "Mid-page promotional sections" }
+    card-debit: { type: card, bg: "#ffe300", radius: 16, use: "Debit/savings card visualization, CR-80 aspect" }
+    input-default: { type: input, bg: "#ffffff", fg: "#1e1e1e", radius: 12, padding: "14px 16px", font: "16px/400", use: "Form fields, amount entry" }
+    input-amount: { type: input, bg: "transparent", fg: "#1e1e1e", font: "32px/700", use: "Transfer amount hero numeral" }
+    badge-notification: { type: badge, bg: "#e02000", fg: "#ffffff", radius: 9999, padding: "2px 6px", font: "11px/700", use: "Unread notification dot" }
+    badge-status-positive: { type: badge, fg: "#0fbe6c", radius: 9999, padding: "4px 10px", font: "12px/600", use: "이체 완료, 적금 진행중" }
+    badge-status-critical: { type: badge, fg: "#e02000", radius: 9999, padding: "4px 10px", font: "12px/600", use: "이체 실패, 기한 만료" }
+    listItem-account: { type: listItem, bg: "#ffffff", padding: "16px 20px", use: "Account row, 64px min-height, 40px rounded-square avatar" }
 ---
 
 # Design System Inspiration of KakaoBank (카카오뱅크)

package/web/references/kakaopay/DESIGN.md

@@ -16,6 +16,65 @@ ds:
   type: brand
   description: "KakaoPay's design narrative blog — 3 pillars (Color · Icon · Type), the 3:1 contrast accessibility policy, and the KPDS internal design system context."
   og_image: "https://i0.wp.com/story.kakaopay.com/wp-content/uploads/2024/03/kakaopay_thumb.png"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  components_harvested: true
+  colors:
+    primary: "#ffeb00"
+    ink: "#060b11"
+    canvas: "#ffffff"
+    ivory: "#fefffa"
+    wild-willow: "#c5c17a"
+    olive: "#7f7600"
+    surface-footer: "#f8f9fa"
+    surface-soft: "#f2f4f6"
+    border: "#e5e8eb"
+    border-subtle: "#eef0f3"
+    body-slate: "#374151"
+    caption-grey: "#6b7684"
+    placeholder: "#b0b8c1"
+    success: "#03b26c"
+    error: "#f04452"
+    warning: "#ffa94d"
+    info: "#3182f6"
+    header-ink: "#1a1d24"
+    brand-badge-bg: "#fffbcc"
+    on-primary: "#060b11"
+  typography:
+    family: { sans: "Noto Sans KR", mono: "Noto Sans KR" }
+    display-hero:  { size: 44, weight: 700, lineHeight: 1.20, tracking: -0.4, use: "Marketing hero" }
+    display-large: { size: 32, weight: 700, lineHeight: 1.25, tracking: -0.3, use: "Secondary marketing headlines" }
+    section:       { size: 22, weight: 500, lineHeight: 1.45, tracking: -0.2, use: "Workhorse heading, megamenu H2" }
+    subheading:    { size: 18, weight: 500, lineHeight: 1.40, tracking: -0.1, use: "Card titles, group labels" }
+    body-strong:   { size: 16, weight: 500, lineHeight: 1.50, use: "Important paragraph copy" }
+    body:          { size: 14, weight: 400, lineHeight: 1.50, use: "Default body, Korean-web baseline" }
+    body-light:    { size: 14, weight: 300, lineHeight: 1.57, use: "Inactive nav, secondary text" }
+    caption:       { size: 13, weight: 400, lineHeight: 1.50, use: "Helper text, metadata" }
+    small:         { size: 12, weight: 400, lineHeight: 1.40, use: "Legal, fine print" }
+    amount:        { size: 24, weight: 700, lineHeight: 1.20, use: "Balance and amount display" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 20, xl: 24, xxl: 32, section: 64 }
+  rounded: { sm: 8, md: 12, lg: 16, full: 9999 }
+  shadow:
+    subtle: "0px 1px 2px rgba(0,0,0,0.04)"
+    soft: "0px 2px 8px rgba(0,0,0,0.04)"
+    lifted: "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: "#060b11", fg: "#ffffff", radius: 12, padding: "14px 20px", font: "16px/500", use: "Primary functional CTA on white" }
+    button-brand-yellow: { type: button, bg: "#ffeb00", fg: "#060b11", radius: 12, padding: "14px 20px", font: "16px/700", use: "Kakao ecosystem moment, on dark" }
+    button-secondary: { type: button, bg: "#ffffff", fg: "#060b11", radius: 12, padding: "14px 20px", font: "16px/500", use: "Secondary paired with primary, 1px border" }
+    button-tertiary: { type: button, bg: "#f2f4f6", fg: "#060b11", radius: 12, padding: "14px 20px", font: "16px/500", use: "Low-emphasis action" }
+    button-link: { type: button, bg: "transparent", fg: "#3182f6", font: "14px/500", use: "Inline text link" }
+    card-standard: { type: card, bg: "#ffffff", radius: 16, padding: "20px", use: "Service tile, summary panel" }
+    card-soft: { type: card, bg: "#f8f9fa", radius: 16, padding: "20px", use: "Grouped content, inset panel" }
+    card-brand: { type: card, bg: "#1a1d24", fg: "#ffffff", radius: 20, padding: "24px", use: "Yellow-on-dark brand moment" }
+    badge-neutral: { type: badge, bg: "#f2f4f6", fg: "#374151", radius: 9999, padding: "4px 10px", font: "12px/500", use: "Neutral metadata pill" }
+    badge-brand: { type: badge, bg: "#fffbcc", fg: "#7f7600", radius: 9999, padding: "4px 10px", font: "12px/500", use: "Brand-tinted badge" }
+    badge-success: { type: badge, fg: "#03b26c", radius: 9999, padding: "4px 10px", font: "12px/500", use: "Success badge" }
+    badge-error: { type: badge, fg: "#f04452", radius: 9999, padding: "4px 10px", font: "12px/500", use: "Error badge" }
+    input-default: { type: input, bg: "#ffffff", fg: "#060b11", radius: 12, padding: "14px 16px", font: "16px/400", use: "Form field, 52px height" }
+    tab-bar: { type: tab, bg: "#ffffff", fg: "#6b7684", font: "11px/400", active: "#060b11 icon + #060b11 label", use: "Mobile app tab bar" }
 ---
 
 # Design System Inspiration of KakaoPay

package/web/references/kakaot/DESIGN.md

@@ -10,6 +10,59 @@ logo:
   slug: "https://www.google.com/s2/favicons?domain=kakaomobility.com&sz=128"
 verified: "2026-05-27"
 omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    primary: "#fee500"
+    primary-hover: "#f2d900"
+    brand: "#fee500"
+    canvas: "#ffffff"
+    foreground: "#191919"
+    muted: "#76787a"
+    on-primary: "#191919"
+    surface: "#f5f6f7"
+    hairline: "#e5e6e8"
+    body: "#4b4f54"
+    text-strong: "#26282b"
+    text-tertiary: "#a2a4a6"
+    success: "#0fb882"
+    info: "#3478f6"
+    warning: "#ff8a00"
+    error: "#f5444c"
+    black: "#000000"
+  typography:
+    family: { sans: "Pretendard", mono: "SF Mono" }
+    display-hero:   { size: 30, weight: 700, lineHeight: 1.3, use: "Marketing hero, onboarding" }
+    heading-large:  { size: 22, weight: 700, lineHeight: 1.35, use: "Sheet headers" }
+    heading:        { size: 18, weight: 600, lineHeight: 1.4, use: "Card titles, vehicle-class headers" }
+    subtitle:       { size: 16, weight: 600, lineHeight: 1.5, use: "List headers, fare summary label" }
+    body-large:     { size: 16, weight: 400, lineHeight: 1.5, use: "Descriptions, address detail" }
+    body:           { size: 14, weight: 400, lineHeight: 1.5, use: "Standard reading text, trip metadata" }
+    label:          { size: 16, weight: 600, lineHeight: 1.4, use: "Button labels" }
+    caption:        { size: 12, weight: 400, lineHeight: 1.4, use: "Timestamps, fine print" }
+    fare-display:   { size: 24, weight: 700, use: "Estimated/final fare, tabular numerals" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 20, xl: 24, xxl: 32 }
+  rounded: { sm: 8, md: 12, lg: 16, full: 9999 }
+  shadow:
+    card: "0px 2px 12px rgba(0,0,0,0.08)"
+    sheet: "0px -4px 16px rgba(0,0,0,0.10)"
+    floating: "0px 4px 16px rgba(0,0,0,0.16)"
+  components_harvested: true
+  components:
+    button-primary: { type: button, bg: "#fee500", fg: "#191919", radius: "12px", padding: "14px 20px", height: "52px", font: "16px / 600", states: "pressed #f2d900", disabled: "bg #f5f6f7 fg #a2a4a6", use: "Primary CTA 호출하기 / 결제하기" }
+    button-dark: { type: button, bg: "#191919", fg: "#ffffff", radius: "12px", padding: "14px 20px", font: "16px / 600", use: "Strong action where yellow too loud 로그인 / 다음" }
+    button-outline: { type: button, bg: "#ffffff", fg: "#26282b", border: "1px solid #d1d3d5", radius: "12px", padding: "14px 20px", font: "16px / 600", use: "Secondary action 취소" }
+    button-danger: { type: button, bg: "#ffffff", fg: "#f5444c", border: "1px solid #f5444c", radius: "12px", padding: "14px 20px", font: "16px / 600", use: "Destructive 호출 취소" }
+    input-search: { type: input, bg: "#f5f6f7", fg: "#26282b", radius: "12px", padding: "14px 16px", font: "16px / 400", focus: "1px border #191919", use: "어디로 갈까요? destination search" }
+    input-error: { type: input, bg: "#ffffff", fg: "#26282b", border: "1px solid #f5444c", radius: "12px", padding: "14px 16px", font: "16px / 400", use: "Invalid input" }
+    card-vehicle: { type: card, bg: "#ffffff", border: "1px solid #e5e6e8", radius: "12px", padding: "16px", active: "2px border #191919 + yellow icon accent", use: "Vehicle-class selection rows" }
+    card-trip: { type: card, bg: "#ffffff", radius: "16px", padding: "20px", shadow: "0px 2px 12px rgba(0,0,0,0.08)", use: "Active-trip summary, ride receipt" }
+    badge-status: { type: badge, bg: "#f5f6f7", fg: "#4b4f54", radius: "999px", padding: "4px 12px", font: "12px / 600", use: "Filter chips, vehicle tags" }
+    badge-live: { type: badge, bg: "rgba(15,184,130,0.12)", fg: "#0fb882", radius: "999px", padding: "4px 10px", font: "12px / 700", use: "도착 / 운행 중 status pill" }
+    dialog-sheet: { type: dialog, bg: "#ffffff", fg: "#191919", radius: "20px", padding: "20px", shadow: "0px -4px 16px rgba(0,0,0,0.10)", use: "Persistent bottom sheet over the map, 36x4px handle" }
+    tab-bottom: { type: tab, bg: "#ffffff", fg: "#a2a4a6", border: "1px solid #e5e6e8", font: "11px / 500", active: "text/icon #191919", use: "홈 / 이용내역 / 결제 / 전체 nav" }
+    toast-snackbar: { type: toast, bg: "#26282b", fg: "#ffffff", radius: "12px", 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 Kakao T (카카오 T)

package/web/references/karrot/DESIGN.md

@@ -15,6 +15,55 @@ ds:
   url: "https://seed-design.io"
   type: system
   description: Karrot (Daangn)'s open-source design system for marketplace apps.
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    primary: "#ff6600"
+    primary-hover: "#e14d00"
+    brand: "#ff6600"
+    canvas: "#ffffff"
+    foreground: "#1a1c20"
+    muted: "#868b94"
+    on-primary: "#ffffff"
+    surface: "#f7f8f9"
+    surface-fill: "#f3f4f5"
+    hairline: "#dcdee3"
+    body: "#555d6d"
+    placeholder: "#b0b3ba"
+    brand-tint: "#fff2ec"
+    error: "#fa342c"
+    info: "#217cf9"
+    success: "#079171"
+    warning: "#9b7821"
+    focus: "#5e98fe"
+  typography:
+    family: { sans: "Pretendard Variable", mono: "SF Mono" }
+    display-xl:     { size: 26, weight: 700, lineHeight: 35, tracking: "0em", use: "Hero headlines, splash screens" }
+    display-large:  { size: 24, weight: 700, lineHeight: 32, tracking: "0em", use: "Section headers" }
+    heading-large:  { size: 20, weight: 700, lineHeight: 27, tracking: "0em", use: "Card headings, sub-sections" }
+    heading:        { size: 18, weight: 700, lineHeight: 24, tracking: "0em", use: "List section headers" }
+    title:          { size: 16, weight: 500, lineHeight: 22, tracking: "0em", use: "Navigation, standard titles" }
+    body:           { size: 14, weight: 400, lineHeight: 19, tracking: "0em", use: "Standard reading text, listings" }
+    body-small:     { size: 13, weight: 400, lineHeight: 18, tracking: "0em", use: "Secondary text, metadata" }
+    caption:        { size: 12, weight: 400, lineHeight: 16, tracking: "0em", use: "Timestamps, small labels" }
+    caption-small:  { size: 11, weight: 400, lineHeight: 15, tracking: "0em", use: "Fine print, badges" }
+  spacing: { xs: 2, sm: 4, md: 8, base: 16, lg: 20, xl: 24, xxl: 32, section: 64 }
+  rounded: { sm: 8, md: 12, lg: 16, full: 9999 }
+  shadow:
+    s1: "0px 1px 4px rgba(0,0,0,0.08)"
+    s2: "0px 2px 10px rgba(0,0,0,0.10)"
+    s3: "0px 4px 16px rgba(0,0,0,0.12)"
+  components_harvested: true
+  components:
+    button-primary: { type: button, bg: "#ff6600", fg: "#ffffff", radius: "12px", height: "52px", font: "16px / 700", states: "pressed #e14d00", disabled: "bg #f3f4f5 fg #d1d3d8", use: "Primary CTA 판매하기 / 채팅하기" }
+    button-neutral: { type: button, bg: "#f3f4f5", fg: "#1a1c20", radius: "8px", states: "pressed #eeeff1", use: "Tertiary actions, filters" }
+    button-outline: { type: button, bg: "transparent", fg: "#1a1c20", border: "1px solid #dcdee3", radius: "8px", states: "pressed #f7f8f9", use: "Cancel, dismiss, low-emphasis" }
+    button-critical: { type: button, bg: "#fa342c", fg: "#ffffff", radius: "8px", use: "Destructive 삭제 / 신고" }
+    card: { type: card, bg: "#ffffff", border: "1px solid rgba(0,0,0,0.08)", radius: "8px", shadow: "0px 2px 10px rgba(0,0,0,0.10)", use: "Standard listing card" }
+    chip: { type: badge, bg: "#f3f4f5", fg: "#1a1c20", radius: "9999px", height: "32px", padding: "0 12px", font: "13px / 500", active: "bg #1a1c20 fg #ffffff", use: "Filter chips, tags" }
+    input: { type: input, bg: "#f7f8f9", fg: "#1a1c20", border: "1px solid #dcdee3", radius: "8px", focus: "2px solid #5e98fe", states: "error border #fa342c", use: "Text input, placeholder #b0b3ba" }
+    tab-bottom: { type: tab, bg: "#ffffff", fg: "#868b94", border: "subtle top border", active: "Karrot Orange icon + label", use: "Bottom tab bar nav" }
 ---
 
 # Design System Inspiration of Karrot (당근)

package/web/references/kbank/DESIGN.md

@@ -10,6 +10,45 @@ logo:
   slug: "https://www.google.com/s2/favicons?domain=kbanknow.com&sz=256"
 verified: "2026-05-14"
 omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  note: "primary = signature K bank Navy #0114a7 (sole brand primary); lime #b6f23d is the sparing energetic accent"
+  colors:
+    primary: "#0114a7"
+    brand: "#0114a7"
+    accent-lime: "#b6f23d"
+    accent-sell: "#047af1"
+    canvas: "#ffffff"
+    foreground: "#020616"
+    muted: "#67748e"
+    on-primary: "#ffffff"
+    surface: "#f7f9fd"
+    surface-strong: "#edf1f7"
+    hairline: "#e0e6f1"
+    body: "#252b37"
+    info: "#066ae5"
+    action: "#2539e9"
+    error: "#e23a32"
+    warning: "#e46f00"
+    success: "#69a305"
+  typography:
+    family: { sans: "Pretendard K Edition", mono: "SF Mono" }
+    body:    { size: 14, weight: 400, lineHeight: "normal", use: "Standard body text" }
+    cta:     { size: 18, weight: 500, use: "Button label, medium weight not bold" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 20, xl: 24, xxl: 32 }
+  rounded: { sm: 0, md: 0, lg: 12, full: 9999 }
+  shadow:
+    none: "Elevation conveyed through 1px borders and g200/g300 fills, not Z-axis"
+  components_harvested: true
+  components:
+    button-primary: { type: button, bg: "#0114a7", fg: "#ffffff", radius: "12px", height: "56px", font: "18px / 500", use: "Primary CTA, medium weight on navy fill" }
+    listItem-link: { type: listItem, fg: "#020616", use: "Nav/body links, underline on hover, dense 14px" }
+    card-tile: { type: card, bg: "#ffffff", border: "1px solid #e0e6f1", radius: "0px", shadow: "none", use: "Square-cornered product tiles separated by 1px borders" }
+    badge-info: { type: badge, bg: "#d1ecff", fg: "#066ae5", use: "Informational banner state" }
+    badge-action: { type: badge, bg: "#e6ebff", fg: "#2539e9", use: "Promo / opportunity callout" }
+    badge-neutral: { type: badge, bg: "#edf1f7", fg: "#4d596f", use: "Quiet badge / chip" }
+    badge-error: { type: badge, bg: "#ffe5e0", fg: "#e23a32", use: "Failure / fraud alert" }
 ---
 
 # K bank — Design Reference

package/web/references/kdan/DESIGN.md

@@ -7,7 +7,7 @@ homepage: "https://www.kdan.com"
 primary_color: "#00DC87"
 logo:
   type: favicon
-  slug: "https://www.google.com/s2/favicons?domain=kdan.com&sz=128"
+  slug: "https://www.kdan.com/apple-touch-icon-152x152.png"
 verified: "2026-06-01"
 omd: "0.1"
 ds:
@@ -15,6 +15,39 @@ ds:
   url: "https://github.com/kdan-mobile-software-ltd/kdan-ui-revamp"
   type: system
   description: "Kdan's open-source UI token library (kdanGreen brand token + neutral scale + semantic colors)."
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  note: "brand = kdanGreen #00dc87 (catalog primary); structural surface + primary action = deep teal-black #002d37; #caff00 = single loud hero accent"
+  colors:
+    primary: "#002d37"
+    brand: "#00dc87"
+    accent-lime: "#caff00"
+    canvas: "#ffffff"
+    foreground: "#191919"
+    muted: "#4b4b4b"
+    on-primary: "#ffffff"
+    surface: "#fafafa"
+    body: "#191919"
+    link: "#007aff"
+    error: "#f25858"
+    disabled: "#afafaf"
+  typography:
+    family: { sans: "Clear Sans", mono: "SF Mono" }
+    hero:       { size: 56, weight: 700, use: "Hero heading, steep declarative top" }
+    hero-cta:   { size: 22, weight: 500, use: "Hero CTA label" }
+    body:       { size: 16, weight: 400, use: "Standard body, document-heavy reading" }
+    button:     { size: 16, weight: 500, use: "Standard button label, medium weight" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32 }
+  rounded: { sm: 4, md: 4, lg: 4, full: 9999 }
+  shadow:
+    hover: "rgba(0,0,0,0.2) overlay token — darkens surface on hover; depth via contrast + borders, not Z-axis"
+  components_harvested: true
+  components:
+    button-primary: { type: button, bg: "#002d37", fg: "#ffffff", border: "1.5px solid #002d37", radius: "4px", height: "38px", font: "16px / 500", hover: "rgba(0,0,0,0.2) overlay", use: "Primary action on live kdan.com" }
+    button-outline: { type: button, bg: "transparent", fg: "#002d37", border: "1.5px solid #002d37", radius: "4px", height: "38px", font: "16px / 500", use: "Secondary action paired with solid primary" }
+    button-hero: { type: button, bg: "#caff00", fg: "#000000", radius: "4px", height: "53px", font: "22px / 500", use: "Single loud high-emphasis hero CTA" }
+    button-disabled: { type: button, bg: "#afafaf", fg: "#4b4b4b", radius: "4px", disabled: "non-interactive", use: "Disabled state" }
 ---
 
 # Design System Inspiration of Kdan Mobile