oh-my-design-cli 1.6.6 → 1.7.0

package/web/references/17live/DESIGN.md

@@ -9,6 +9,49 @@ logo:
   type: favicon
   slug: "https://www.google.com/s2/favicons?domain=17.live&sz=128"
 verified: "2026-05-19"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-08"
+  note: "primary = 17 Pink #FF4F6E; dark-stage palette and non-primary hexes are grounded approximations pending live re-inspection (see §2 note)"
+  colors:
+    primary: "#FF4F6E"
+    primary-hover: "#E8455F"
+    canvas: "#121212"
+    surface-1: "#1C1C1E"
+    surface-2: "#2C2C2E"
+    foreground: "#FFFFFF"
+    on-primary: "#FFFFFF"
+    rank-gold: "#FFC83D"
+    vip-purple: "#8B5CF6"
+    success: "#27C76F"
+    warning: "#F5A623"
+    error: "#FF453A"
+  typography:
+    family: { default: "-apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif", tc: "\"PingFang TC\", \"Microsoft JhengHei\", sans-serif", jp: "\"Hiragino Kaku Gothic Pro\", \"Meiryo\", sans-serif", sc: "\"PingFang SC\", \"Microsoft YaHei\", sans-serif" }
+    micro:    { size: 11, weight: 700, use: "Viewer count, LIVE badge, gamified numbers" }
+    caption:  { size: 12, weight: 400, use: "Chat meta, captions, metadata" }
+    body:     { size: 14, weight: 400, use: "Chat message, body text" }
+    liver-name: { size: 16, weight: 700, use: "LIVER name, list title, key labels" }
+    section:  { size: 20, weight: 600, use: "Section heading, tab labels" }
+    hero:     { size: 28, weight: 700, use: "Hero / spotlight headline" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24 }
+  rounded: { sm: 4, md: 12, lg: 24, full: 9999 }
+  shadow:
+    sheet: "soft top shadow over rgba(0,0,0,0.5) scrim"
+  components_harvested: true
+  components:
+    button-primary: { type: button, bg: "#FF4F6E", fg: "#FFFFFF", radius: "24px", padding: "12px 24px", font: "16px / 700", states: "pressed #E8455F", use: "GO LIVE, primary CTAs, sign-up" }
+    button-follow: { type: button, bg: "#FF4F6E", fg: "#FFFFFF", radius: "16px", padding: "6px 16px", font: "14px / 600", states: "following → transparent + 1px rgba(255,255,255,0.3), fg rgba(255,255,255,0.7)", use: "Follow / Following toggle" }
+    button-secondary: { type: button, bg: "transparent", fg: "#FFFFFF", border: "1px solid rgba(255,255,255,0.3)", radius: "24px", padding: "12px 24px", font: "16px / 600", use: "Secondary actions, Maybe later" }
+    button-gift: { type: button, bg: "#FF4F6E → #FF2D8E gradient", fg: "#FFFFFF", radius: "20px", use: "Send-gift — highest-energy transaction" }
+    input: { type: input, bg: "#2C2C2E", fg: "#FFFFFF", radius: "12px", padding: "12px 16px", focus: "1px solid #FF4F6E", use: "Search, login, profile; placeholder rgba(255,255,255,0.45)" }
+    chat-input: { type: input, bg: "#2C2C2E", radius: "24px", use: "Live-chat composer overlay, trailing pink #FF4F6E send icon" }
+    stream-card: { type: card, radius: "12px", use: "Discover grid — thumbnail + rgba(0,0,0,0.5) bottom gradient, LIVE badge + viewer count + LIVER name" }
+    card: { type: card, bg: "#1C1C1E", radius: "12px", padding: "12px", use: "LIVER lists, ranking rows, fan-club cards" }
+    badge-live: { type: badge, bg: "#FF4F6E", fg: "#FFFFFF", radius: "4px", padding: "2px 6px", font: "11px / 700", use: "Live-now indicator (or #27C76F dot)" }
+    badge-rank: { type: badge, bg: "#FFC83D", fg: "#121212", radius: "50%", use: "Leaderboard / top-fan #1 status" }
+    avatar: { type: avatar, radius: "50%", use: "LIVER and viewer avatars, optional pink/gradient ring for live or VIP" }
+    tab-bar: { type: tab, use: "Bottom tab bar; center GO LIVE elevated pink", active: "#FF4F6E label", states: "inactive rgba(255,255,255,0.45)" }
 omd: "0.1"
 ---
 

package/web/references/29cm/DESIGN.md

@@ -9,6 +9,47 @@ logo:
   type: favicon
   slug: "https://asset.29cm.co.kr/icon/apple-icon-144x144.png"
 verified: "2026-05-15"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-08"
+  note: "monochrome system — brand 'color' is the absence of color; #000 ink on #fff, single muted grey, sale-red badge-only accent"
+  colors:
+    primary: "#000000"
+    foreground: "#000000"
+    body: "#000000"
+    canvas: "#ffffff"
+    background: "#ffffff"
+    on-primary: "#ffffff"
+    hairline: "#c4c4c4"
+    border: "#c4c4c4"
+    sale: "#ff0066"
+    error: "#ff003c"
+    skeleton: "#f5f5f5"
+  typography:
+    family: { sans: "Pretendard Variable" }
+    section-headline: { size: 30, weight: 700, lineHeight: 1.13, use: "Special-Order / 29Magazine section headlines, lowercase-English / mixed Korean editorial" }
+    sub-headline:     { size: 24, weight: 700, lineHeight: 1.21, use: "Smaller category nav items" }
+    card-title:       { size: 22, weight: 700, lineHeight: 1.36, use: "Signature editorial card title — PT subjects, themed collections" }
+    card-body:        { size: 15, weight: 400, lineHeight: 1.50, use: "Card descriptions, editorial blurbs" }
+    nav-link:         { size: 16, weight: 200, use: "Primary nav link — 200 inactive, 800 active BEST/current section" }
+    floating-cta:     { size: 15, weight: 400, use: "FAQ / 1:1 문의 — black bg, white text, 2px radius" }
+    ghost-cta:        { size: 14, weight: 700, use: "더보기 — white bg, 1px #c4c4c4 border" }
+    footer-heading:   { size: 13, weight: 700, lineHeight: 1.40, use: "Caps Latin section labels — NOTICE, ABOUT US, MY ORDER, HELP" }
+    product-name:     { size: 12, weight: 400, lineHeight: 1.36, use: "Card product name, restrained, under the image" }
+    product-price:    { size: 12, weight: 700, lineHeight: 1.36, use: "Card price — same size as name, never dominates" }
+    price-caption:    { size: 12, weight: 400, lineHeight: 1.36, use: "옵션비 별도 in muted grey" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, page: 20, lg: 24, xl: 32, margin: 48 }
+  rounded: { sm: 2, md: 4 }
+  shadow:
+    flat: "none — depth comes from photography on white, not box-shadow"
+    inverted: "#000000 background on #ffffff page — elevation by colour inversion"
+  components_harvested: true
+  components:
+    ghost-outline: { type: button, bg: "#ffffff", fg: "#000000", radius: 4, padding: "52px height", font: "14px/700", use: "workhorse 더보기 CTA, 1px solid #c4c4c4 border" }
+    inverted-solid: { type: button, bg: "#000000", fg: "#ffffff", radius: 2, padding: "31px height", font: "15px/400", use: "floating FAQ / 1:1 문의 help control" }
+    editorial-tile: { type: card, bg: "#ffffff", radius: 0, font: "22px/700 title + 15px/400 body", use: "full-bleed editorial image, no border, no shadow" }
+    product-card: { type: card, bg: "#ffffff", radius: 0, font: "12px/400 name, 12px/700 price", use: "card name then price (#ff0066 if on sale); caption in muted grey" }
+    sale-pill: { type: badge, fg: "#ff0066", radius: 0, font: "12px/700", use: "percent-off badge only" }
 omd: "0.1"
 ---
 

package/web/references/91app/DESIGN.md

@@ -9,6 +9,37 @@ logo:
   type: favicon
   slug: "https://www.google.com/s2/favicons?domain=91app.com&sz=128"
 verified: "2026-06-01"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-08"
+  note: "navy #061C3D is the structural primary (text + headings + primary button); coral #E85040 is the lone action accent, kept rare"
+  colors:
+    primary: "#061C3D"
+    brand: "#061C3D"
+    foreground: "#061C3D"
+    body: "#061C3D"
+    heading: "#061C3D"
+    accent: "#E85040"
+    error: "#CB200E"
+    muted: "#F7F6FB"
+    canvas: "#FFFFFF"
+    on-primary: "#FFFFFF"
+  typography:
+    family: { sans: "Noto Sans TC", fallback: "Helvetica" }
+    hero:   { size: 44, weight: 700, use: "Top-of-page hero heading in structural navy, carries brand authority" }
+    body:   { size: 16, weight: 400, use: "Standard reading text, calm and scannable" }
+    button: { size: 16, weight: 600, use: "Primary / neutral button label" }
+    button-accent: { size: 16, weight: 500, use: "Coral CTA label" }
+  spacing: { sm: 8, base: 16, lg: 24, xl: 32 }
+  rounded: { sm: 3, lg: 16 }
+  shadow:
+    flat: "none — separation via color/fill contrast, no literal shadow stacking"
+  components_harvested: true
+  components:
+    button-primary: { type: button, bg: "#061C3D", fg: "#FFFFFF", radius: 16, padding: "48px height", font: "16px/600", use: "dominant action" }
+    button-coral: { type: button, bg: "#E85040", fg: "#FFFFFF", radius: 16, padding: "40px height", font: "16px/500", use: "lone decisive accent, kept rare" }
+    button-neutral: { type: button, bg: "#F7F6FB", fg: "#061C3D", radius: 3, padding: "48px height", font: "16px/600", use: "secondary action" }
+    hero-heading: { type: card, fg: "#061C3D", font: "44px/700 Noto Sans TC", use: "top-of-page authority heading" }
 omd: "0.1"
 ---
 # Design System Inspiration of 91APP

package/web/references/ably/DESIGN.md

@@ -10,6 +10,60 @@ logo:
   type: favicon
   slug: "https://www.google.com/s2/favicons?domain=a-bly.com&sz=128"
 verified: "2026-05-15"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-08"
+  note: "primary = Ably Pink #FA2E5F; sale/urgency collapses into the brand pink by design. Active states use filled black #222222, not pink."
+  colors:
+    primary: "#FA2E5F"
+    primary-disabled: "#FFC2D2"
+    hot-deal: "#FF2D55"
+    discount: "#F0124B"
+    free-shipping: "#00C8B4"
+    canvas: "#FFFFFF"
+    foreground: "#222222"
+    body: "#333333"
+    secondary: "#666666"
+    muted: "#999999"
+    lightest: "#BBBBBB"
+    on-primary: "#FFFFFF"
+    surface-fill: "#F5F5F5"
+    surface-subtle: "#FAFAFA"
+    hairline: "#EEEEEE"
+    border-subtle: "#F0F0F0"
+    success: "#00C896"
+    error: "#F0124B"
+    info-link: "#2680EB"
+  typography:
+    family: { sans: "Pretendard", mono: "SF Mono" }
+    display:        { size: 28, weight: 700, lineHeight: 1.30, tracking: -0.02, use: "Hero banners, promo screens" }
+    heading-lg:     { size: 22, weight: 700, lineHeight: 1.36, tracking: -0.01, use: "Screen titles, modal headers" }
+    heading:        { size: 18, weight: 700, lineHeight: 1.40, use: "Section titles in feeds" }
+    title:          { size: 16, weight: 600, lineHeight: 1.44, use: "Product names in cards" }
+    body:           { size: 14, weight: 400, lineHeight: 1.50, use: "Description, list rows" }
+    body-sm:        { size: 13, weight: 400, lineHeight: 1.54, use: "Secondary metadata" }
+    caption:        { size: 12, weight: 400, lineHeight: 1.50, use: "Timestamps, seller name" }
+    caption-bold:   { size: 12, weight: 700, lineHeight: 1.50, use: "Badge text (무료배송, 쇼킹딜)" }
+    micro:          { size: 11, weight: 500, lineHeight: 1.45, use: "Tab bar labels" }
+    price-sale:     { size: 16, weight: 700, lineHeight: 1.30, use: "Discounted price, #FA2E5F" }
+    price-strike:   { size: 13, weight: 400, lineHeight: 1.30, use: "Strikethrough comparison, #999999" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 20, xl: 24, xxl: 32 }
+  rounded: { sm: 4, md: 8, lg: 12, xl: 16, full: 9999 }
+  shadow:
+    subtle: "0px 1px 2px rgba(0,0,0,0.04)"
+    standard: "0px 2px 8px rgba(0,0,0,0.08)"
+    elevated: "0px 4px 16px rgba(0,0,0,0.12)"
+    sheet: "0px -4px 16px rgba(0,0,0,0.08)"
+  components_harvested: true
+  components:
+    button-primary: { type: button, bg: "#FA2E5F", fg: "#FFFFFF", radius: 8, font: "16px/700", use: "52px full-width bottom CTA; disabled #FFC2D2" }
+    button-secondary: { type: button, bg: "#FFFFFF", fg: "#222222", radius: 8, font: "14px/600", use: "secondary action, 1px grey border" }
+    chip-filter: { type: badge, bg: "#FFFFFF", fg: "#333333", radius: 9999, use: "filter chip, 1px grey border; active = #222222 fill, white text" }
+    badge-free-shipping: { type: badge, bg: "#FFFFFF", fg: "#FA2E5F", radius: 4, font: "11px/700", use: "무료배송, 1px #FA2E5F border" }
+    badge-hot-deal: { type: badge, bg: "#FA2E5F", fg: "#FFFFFF", radius: 4, font: "11px/700", use: "쇼킹딜 urgency badge" }
+    product-card: { type: card, bg: "#FFFFFF", radius: 4, use: "1:1 image, top radius, flat (no shadow), #EEEEEE divider" }
+    tab-bar: { type: tab, bg: "#FFFFFF", use: "56px + safe-area, 6 items; inactive #999999; notification dot #FA2E5F", active: "#222222 filled" }
+    bottom-sheet: { type: dialog, bg: "#FFFFFF", radius: 16, use: "top radius, grey handle, sheet shadow over backdrop" }
 omd: "0.1"
 ---
 

package/web/references/airbnb/DESIGN.md

@@ -16,6 +16,64 @@ ds:
   type: brand
   description: Airbnb's brand guidelines hub with logo, color, and visual identity rules.
   og_image: "https://firebasestorage.googleapis.com/v0/b/standards-site-beta.appspot.com/o/documents%2Fa130cd31136%2F099b28f7432%2Fmeta%2Fstandards---project-thumbnail.png?alt=media&token=b1ee4a9a-cb2a-4dd9-ae43-01dd309d6f17"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-08"
+  note: "primary = live Rausch Red #ff385c (--palette-bg-primary-core); brand frontmatter primary_color is legacy Rausch #ff5a5f; single brand voltage, photography-first"
+  colors:
+    primary: "#ff385c"
+    primary-active: "#e00b41"
+    brand: "#ff5a5f"
+    luxe: "#460479"
+    plus: "#92174d"
+    canvas: "#ffffff"
+    foreground: "#222222"
+    focused: "#3f3f3f"
+    body: "#6a6a6a"
+    muted: "#929292"
+    on-primary: "#ffffff"
+    error: "#c13515"
+    error-hover: "#b32505"
+    link: "#428bff"
+    hairline: "#dddddd"
+    border: "#c1c1c1"
+    surface: "#f2f2f2"
+    placeholder: "#717171"
+    disabled-bg: "#dddddd"
+  typography:
+    family: { sans: "Airbnb Cereal VF", fallback: "Circular, -apple-system, system-ui, Roboto, Helvetica Neue" }
+    section-heading:    { size: 28, weight: 700, lineHeight: 1.43, use: "Primary headings" }
+    card-heading:       { size: 22, weight: 600, lineHeight: 1.18, tracking: -0.44, use: "Category / card titles" }
+    card-heading-medium: { size: 22, weight: 500, lineHeight: 1.18, tracking: -0.44, use: "Lighter card-title variant" }
+    subheading:         { size: 21, weight: 700, lineHeight: 1.43, use: "Bold sub-headings" }
+    feature-title:      { size: 20, weight: 600, lineHeight: 1.20, tracking: -0.18, use: "Feature headings" }
+    ui-medium:          { size: 16, weight: 500, lineHeight: 1.25, use: "Nav, emphasized text" }
+    ui-semibold:        { size: 16, weight: 600, lineHeight: 1.25, use: "Strong emphasis" }
+    button:             { size: 16, weight: 500, lineHeight: 1.25, use: "Button labels" }
+    body:               { size: 14, weight: 400, lineHeight: 1.43, use: "Standard body, links" }
+    body-medium:        { size: 14, weight: 500, lineHeight: 1.29, use: "Medium body" }
+    caption-salt:       { size: 14, weight: 600, lineHeight: 1.43, use: "Caption with salt feature" }
+    small:              { size: 13, weight: 400, lineHeight: 1.23, use: "Descriptions" }
+    tag:                { size: 12, weight: 400, lineHeight: 1.33, use: "Tags, prices" }
+    badge:              { size: 11, weight: 600, lineHeight: 1.18, use: "Badge with salt feature" }
+    micro-uppercase:    { size: 8, weight: 700, lineHeight: 1.25, tracking: 0.32, use: "Uppercase micro labels" }
+  spacing: { xs: 4, sm: 8, base: 16, md: 22, lg: 24, xl: 32 }
+  rounded: { sm: 4, md: 8, badge: 14, lg: 20, xl: 32, full: 9999 }
+  shadow:
+    card: "rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px"
+    hover: "rgba(0,0,0,0.08) 0px 4px 12px"
+    listing-hover: "rgba(0,0,0,0.12) 0px 8px 24px"
+    focus-ring: "rgb(255,255,255) 0px 0px 0px 4px"
+  components_harvested: true
+  components:
+    button-primary: { type: button, bg: "#ff385c", fg: "#ffffff", radius: 8, padding: "14px 24px", font: "16px/600", use: "primary CTA; active #e00b41; disabled #dddddd" }
+    button-secondary: { type: button, bg: "#ffffff", fg: "#222222", radius: 8, use: "secondary action, 1px #222222 border" }
+    search-orb: { type: button, bg: "#ff385c", fg: "#ffffff", radius: 9999, use: "48px round search submit, white icon" }
+    icon-button-circle: { type: button, bg: "#f2f2f2", fg: "#222222", radius: 9999, use: "32x32 dense circular control" }
+    listing-card: { type: card, bg: "#ffffff", radius: 12, use: "no shadow (photography-led); hover scale + listing-hover shadow" }
+    card-standard: { type: card, bg: "#ffffff", radius: 12, padding: "24px", use: "three-layer card shadow" }
+    search-field: { type: input, bg: "#ffffff", radius: 9999, use: "66px tall header search bar, 1px #dddddd border, pill radius" }
+    category-pill: { type: tab, fg: "#222222", font: "14px/500", use: "category nav", active: "2px #222222 bottom border" }
 ---
 
 # Design System Inspiration of Airbnb

package/web/references/airtable/DESIGN.md

@@ -16,6 +16,45 @@ ds:
   type: brand
   description: Airtable's trademark usage and brand guidelines.
   og_image: "https://www.airtable.com/images/airtable-seo.jpg"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-08"
+  note: "primary = Airtable Blue (#1b61c9); brand-amber (#fcb400) from primary_color frontmatter. Color belongs to user data, chrome stays neutral."
+  colors:
+    primary: "#1b61c9"
+    accent-blue: "#254fad"
+    brand: "#fcb400"
+    canvas: "#ffffff"
+    surface: "#f8fafc"
+    foreground: "#181d26"
+    body: "#333333"
+    on-primary: "#ffffff"
+    hairline: "#e0e2e6"
+    success: "#006400"
+  typography:
+    family: { sans: "Haas", display: "Haas Groot Disp" }
+    display-hero:    { size: 48, weight: 400, lineHeight: 1.15, use: "Hero headlines" }
+    display-bold:    { size: 48, weight: 900, lineHeight: 1.50, use: "Bold display, Haas Groot Disp" }
+    section:         { size: 40, weight: 400, lineHeight: 1.25, use: "Section headings" }
+    subheading:      { size: 32, weight: 450, lineHeight: 1.20, use: "Sub-headings" }
+    card-title:      { size: 24, weight: 400, lineHeight: 1.25, tracking: 0.12, use: "Card titles" }
+    feature:         { size: 20, weight: 400, lineHeight: 1.40, tracking: 0.1, use: "Feature text" }
+    body:            { size: 18, weight: 400, lineHeight: 1.35, tracking: 0.18, use: "Standard reading text" }
+    body-medium:     { size: 16, weight: 500, lineHeight: 1.30, tracking: 0.12, use: "Emphasized body" }
+    button:          { size: 16, weight: 500, lineHeight: 1.28, tracking: 0.08, use: "Button labels" }
+    caption:         { size: 14, weight: 450, lineHeight: 1.30, tracking: 0.18, use: "Captions, small labels" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48 }
+  rounded: { sm: 2, md: 12, lg: 16, xl: 24, xxl: 32, full: 9999 }
+  shadow:
+    soft: "rgba(15,48,106,0.05) 0px 0px 20px"
+    standard: "rgba(0,0,0,0.32) 0px 0px 1px, rgba(0,0,0,0.08) 0px 0px 2px, rgba(45,127,249,0.28) 0px 1px 3px, rgba(0,0,0,0.06) 0px 0px 0px 0.5px inset"
+  components_harvested: true
+  components:
+    button-primary: { type: button, bg: "#1b61c9", fg: "#ffffff", radius: 12, padding: "16x24", font: "Haas 16/500", use: "primary CTA, blue-tinted lift" }
+    button-white: { type: button, bg: "#ffffff", fg: "#181d26", radius: 12, use: "secondary CTA on dark/blue surfaces" }
+    card: { type: card, bg: "#ffffff", radius: 16, use: "1px #e0e2e6 border, 24-32 radius featured, blue-tinted multi-layer shadow" }
+    input: { type: input, bg: "#ffffff", fg: "#181d26", radius: 12, padding: "12x16", use: "1px #e0e2e6 border" }
+    badge: { type: badge, bg: "#f8fafc", fg: "#181d26", radius: 12, font: "Haas 14/500", use: "1px #e0e2e6 border" }
 ---
 
 # Design System Inspiration of Airtable

package/web/references/alipay/DESIGN.md

@@ -15,6 +15,56 @@ ds:
   url: "https://ant.design"
   type: system
   description: The open-source enterprise design system born inside Ant Group (Alipay's parent), now the most influential Chinese design language and one of the most widely adopted React component libraries in the world.
+tokens:
+  source: prose-derived
+  extracted: "2026-06-08"
+  note: "Ant Design v5 token palette (Alipay/Ant shared language); primary = Daybreak Blue #1677FF; color is strictly semantic; neutral text via black-opacity levels"
+  colors:
+    primary: "#1677FF"
+    primary-hover: "#4096FF"
+    primary-active: "#0958D9"
+    info: "#1677FF"
+    canvas: "#F5F5F5"
+    container: "#FFFFFF"
+    on-primary: "#FFFFFF"
+    heading: "#000000"
+    body: "#000000"
+    disabled: "#000000"
+    border: "#D9D9D9"
+    split: "#000000"
+    fill-hover: "#000000"
+    success: "#52C41A"
+    warning: "#FAAD14"
+    error: "#FF4D4F"
+    table-header: "#FAFAFA"
+    backdrop: "#000000"
+    sider-dark: "#001529"
+  typography:
+    family: { sans: "-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif" }
+    heading1: { size: 38, weight: 600, lineHeight: 1.21, use: "Largest heading, marketing/hero titles" }
+    heading2: { size: 30, weight: 600, lineHeight: 1.27, use: "Section headings" }
+    heading3: { size: 24, weight: 600, lineHeight: 1.33, use: "Sub-section headings" }
+    heading4: { size: 20, weight: 600, lineHeight: 1.40, use: "Card / panel titles" }
+    heading5: { size: 16, weight: 600, lineHeight: 1.50, use: "Smallest heading, labels" }
+    body:     { size: 14, weight: 400, lineHeight: 1.5715, use: "Base body, tables, forms — density anchor" }
+    large:    { size: 16, weight: 400, use: "Large body, emphasized text" }
+    small:    { size: 12, weight: 400, use: "Captions, status tags, helper text" }
+  spacing: { xs: 8, base: 16, lg: 24, marginSM: 12 }
+  rounded: { sm: 4, md: 6, lg: 8 }
+  shadow:
+    tertiary: "0 1px 2px 0 rgba(0,0,0,0.03), 0 1px 6px -1px rgba(0,0,0,0.02), 0 2px 4px 0 rgba(0,0,0,0.02)"
+    secondary: "0 6px 16px 0 rgba(0,0,0,0.08), 0 3px 6px -4px rgba(0,0,0,0.12), 0 9px 28px 8px rgba(0,0,0,0.05)"
+    elevated: "0 6px 16px 0 rgba(0,0,0,0.08)"
+  components_harvested: true
+  components:
+    button-primary: { type: button, bg: "#1677FF", fg: "#FFFFFF", radius: 6, padding: "4px 15px", font: "14px/400", use: "primary CTA, hover #4096FF, active #0958D9, wave ripple" }
+    button-default: { type: button, bg: "#FFFFFF", fg: "#000000", radius: 6, use: "1px #D9D9D9 border, hover shifts to #4096FF" }
+    button-danger: { type: button, bg: "#FF4D4F", fg: "#FFFFFF", radius: 6, use: "destructive confirm" }
+    input: { type: input, bg: "#FFFFFF", radius: 6, use: "1px #D9D9D9 border, height 32px, focus #1677FF, error #FF4D4F" }
+    card: { type: card, bg: "#FFFFFF", radius: 8, padding: "24px", use: "1px #D9D9D9 border, boxShadowTertiary on hover" }
+    table: { type: card, bg: "#FFFFFF", fg: "#000000", use: "#FAFAFA header, low-alpha dividers + hover fill, 16px cell pad" }
+    status-tag: { type: badge, fg: "#52C41A", radius: 4, padding: "0 7px", font: "12px/400", use: "status color at low alpha, semantic only" }
+    modal: { type: dialog, bg: "#FFFFFF", radius: 8, padding: "20px 24px", use: "low-alpha backdrop, elevated boxShadow" }
 ---
 
 # Design System Inspiration of Alipay