oh-my-design-cli 1.6.7 → 1.7.0

package/web/references/appier/DESIGN.md

@@ -9,6 +9,51 @@ logo:
   type: favicon
   slug: "https://www.google.com/s2/favicons?domain=appier.com&sz=128"
 verified: "2026-05-19"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-08"
+  note: "primary = electric Klein-adjacent blue (#1D2EFF, brief-provided + brand); secondary palette is grounded B2B approximation pending live re-inspection (per §2 note)"
+  colors:
+    primary: "#1D2EFF"
+    primary-hover: "#1626D9"
+    primary-tint: "#EBEDFF"
+    accent: "#00D4FF"
+    canvas: "#FFFFFF"
+    surface-soft: "#F5F6FA"
+    ink: "#101130"
+    foreground: "#101130"
+    body: "#4A4E69"
+    muted: "#8A8FA3"
+    disabled: "#C4C7D4"
+    on-primary: "#FFFFFF"
+    hairline: "#E6E8F0"
+    border: "#D1D5E3"
+    success: "#16A34A"
+    warning: "#F59E0B"
+    error: "#DC2626"
+  typography:
+    family: { sans: "-apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif", tc: "PingFang TC, Microsoft JhengHei, sans-serif", jp: "Hiragino Kaku Gothic Pro, Meiryo, sans-serif" }
+    caption:      { size: 13, weight: 400, use: "Caption, metadata" }
+    body:         { size: 16, weight: 400, lineHeight: 1.5, use: "Body, descriptions" }
+    body-lg:      { size: 18, weight: 400, use: "Body large / lead" }
+    card-heading: { size: 22, weight: 600, use: "Card titles, subheads" }
+    section:      { size: 32, weight: 700, use: "Section headings" }
+    hero:         { size: 48, weight: 700, use: "Hero headlines, value proposition" }
+    stat:         { size: 48, weight: 700, use: "Case-study stat figures, in Appier Blue" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, section: 64, section-lg: 96 }
+  rounded: { sm: 6, md: 8, lg: 12, full: 9999 }
+  shadow:
+    card: "0 4px 16px rgba(16,17,48,0.08)"
+    header: "0 1px 4px rgba(16,17,48,0.06)"
+    modal: "0 12px 40px rgba(16,17,48,0.2)"
+  components_harvested: true
+  components:
+    button-primary: { type: button, bg: "#1D2EFF", fg: "#FFFFFF", radius: 8, padding: "12px 24px", font: "16px/600", use: "primary CTA, flat; hover #1626D9" }
+    button-secondary: { type: button, bg: "#FFFFFF", fg: "#1D2EFF", radius: 8, use: "1px #1D2EFF border; hover #EBEDFF bg" }
+    input: { type: input, bg: "#FFFFFF", radius: 8, padding: "12px 14px", use: "1px #D1D5E3 border; focus #1D2EFF; error #DC2626" }
+    card-solution: { type: card, bg: "#FFFFFF", radius: 12, padding: "24px", use: "1px #E6E8F0 border, blue Learn more link" }
+    card-dark: { type: card, bg: "#101130", fg: "#FFFFFF", radius: 12, use: "deep-ink bg, blue to cyan gradient accent" }
+    badge-credential: { type: badge, bg: "#F5F6FA", fg: "#101130", radius: 6, use: "1px #E6E8F0 border, 4-6px radius" }
 omd: "0.1"
 ---
 

package/web/references/apple/DESIGN.md

@@ -16,6 +16,53 @@ ds:
   type: system
   description: Apple's official design guidelines for iOS, macOS, watchOS, and visionOS.
   og_image: "https://docs.developer.apple.com/tutorials/developer-og.jpg"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-08"
+  note: "single chromatic accent = Apple Blue #0071e3 (interactive only); link #0066cc on light / #2997ff on dark; binary canvas = #000000 dark / #f5f5f7 light"
+  colors:
+    primary: "#0071e3"
+    brand: "#000000"
+    canvas: "#f5f5f7"
+    canvas-dark: "#000000"
+    foreground: "#1d1d1f"
+    on-primary: "#ffffff"
+    surface: "#ffffff"
+    surface-dark: "#272729"
+    link: "#0066cc"
+    link-on-dark: "#2997ff"
+  typography:
+    family: { display: "SF Pro Display", text: "SF Pro Text" }
+    display-hero:   { size: 56, weight: 600, lineHeight: 1.07, tracking: -0.28, use: "Product launch headlines, maximum impact" }
+    section:        { size: 40, weight: 600, lineHeight: 1.10, use: "Feature section titles" }
+    tile-heading:   { size: 28, weight: 400, lineHeight: 1.14, tracking: 0.196, use: "Product tile headlines" }
+    card-title:     { size: 21, weight: 700, lineHeight: 1.19, tracking: 0.231, use: "Bold card headings" }
+    subheading:     { size: 21, weight: 400, lineHeight: 1.19, tracking: 0.231, use: "Regular card headings" }
+    nav-heading:    { size: 34, weight: 600, lineHeight: 1.47, tracking: -0.374, use: "Large navigation headings" }
+    sub-nav:        { size: 24, weight: 300, lineHeight: 1.50, use: "Light sub-navigation text" }
+    body:           { size: 17, weight: 400, lineHeight: 1.47, tracking: -0.374, use: "Standard reading text" }
+    body-emphasis:  { size: 17, weight: 600, lineHeight: 1.24, tracking: -0.374, use: "Emphasized body text, labels" }
+    button-lg:      { size: 18, weight: 300, lineHeight: 1.00, use: "Large button text, light weight" }
+    button:         { size: 17, weight: 400, lineHeight: 2.41, use: "Standard button text" }
+    link:           { size: 14, weight: 400, lineHeight: 1.43, tracking: -0.224, use: "Body links, Learn more" }
+    caption:        { size: 14, weight: 400, lineHeight: 1.29, tracking: -0.224, use: "Secondary text, descriptions" }
+    micro:          { size: 12, weight: 400, lineHeight: 1.33, tracking: -0.12, use: "Fine print, footnotes" }
+    nano:           { size: 10, weight: 400, lineHeight: 1.47, tracking: -0.08, use: "Legal text, smallest size" }
+  spacing: { xs: 2, sm: 4, base: 8, md: 11, lg: 14, xl: 17, xxl: 20, section: 24 }
+  rounded: { sm: 5, md: 8, lg: 12, full: 980 }
+  shadow:
+    card: "rgba(0,0,0,0.22) 3px 5px 30px 0px"
+    nav-glass: "backdrop-filter: saturate(180%) blur(20px)"
+  components_harvested: true
+  components:
+    button-marketing-pill: { type: button, bg: "#0071e3", fg: "#ffffff", radius: 980, padding: "11px 21px", font: "17px/400", use: "marketing pill CTA" }
+    button-neutral-pill: { type: button, bg: "#1d1d1f", fg: "#ffffff", radius: 980, use: "paired secondary CTA" }
+    button-commerce-compact: { type: button, bg: "#0071e3", fg: "#ffffff", radius: 8, padding: "8px 15px", font: "14px", use: "checkout actions" }
+    card-white: { type: card, bg: "#ffffff", radius: 28, use: "no border, no shadow — lifts via color contrast" }
+    card-dark: { type: card, bg: "#000000", fg: "#ffffff", radius: 28, use: "max-contrast product detail" }
+    input-search: { type: input, radius: 8, use: "grey fill, active 2px solid #2997ff" }
+    nav-global: { type: tab, radius: 0, use: "translucent fog, backdrop blur(20px), 44px height" }
+    text-link: { type: badge, fg: "#0066cc", use: "link color, underline on hover, not a pill" }
 ---
 
 # Design System Inspiration of Apple

package/web/references/baemin/DESIGN.md

@@ -9,6 +9,67 @@ logo:
   type: favicon
   slug: "https://www.baemin.com/favicon.ico"
 verified: "2026-05-15"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-08"
+  components_harvested: true
+  note: "app-first KR delivery brand — capped at 16 components. App surface (Mint #2AC1BC, 8px) documented from Baemin public brand/color guide + app-store screenshots; web marketing surface (Black Pill #000000 / 9999px, app-download card, carousel dots) measured live via playwright on baemin.com. primary = Baemin Mint #2AC1BC (app surface accent); teal #12B886 is the secondary UI green for confirmation fills"
+  colors:
+    primary: "#2AC1BC"
+    brand: "#2AC1BC"
+    canvas: "#ffffff"
+    surface: "#F8F9FA"
+    surface-subtle: "#F1F3F5"
+    foreground: "#212529"
+    body: "#495057"
+    muted: "#868E96"
+    disabled: "#ADB5BD"
+    on-primary: "#ffffff"
+    accent: "#12B886"
+    accent-light: "#20C997"
+    error: "#FF6B6B"
+    warning: "#FFB347"
+    info: "#74C0FC"
+    promo: "#FF0000"
+    hairline: "#DEE2E6"
+    border-strong: "#343A40"
+  typography:
+    family: { ui: "-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif", mono: "SF Mono, SFMono-Regular, Menlo, Consolas, monospace", brand: "BMHANNA Pro", playful: "BMJua" }
+    display-hero:  { size: 42, weight: 700, lineHeight: 1.20, use: "Splash screens, brand moments (BMHANNA Pro)" }
+    display-large: { size: 36, weight: 700, lineHeight: 1.25, use: "Campaign titles, section heroes" }
+    heading-large: { size: 24, weight: 700, lineHeight: 1.33, use: "Feature section titles" }
+    heading:       { size: 20, weight: 700, lineHeight: 1.40, use: "Card headings, menu categories" }
+    title:         { size: 18, weight: 600, lineHeight: 1.44, use: "Restaurant names, item titles" }
+    body-large:    { size: 16, weight: 400, lineHeight: 1.50, use: "Descriptions, menu details" }
+    body:          { size: 14, weight: 400, lineHeight: 1.57, use: "Standard reading, reviews" }
+    body-small:    { size: 13, weight: 400, lineHeight: 1.54, use: "Secondary info, ingredients" }
+    caption:       { size: 12, weight: 400, lineHeight: 1.50, use: "Timestamps, delivery times" }
+    price:         { size: 20, weight: 700, lineHeight: 1.30, use: "Menu item prices, order totals" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 20, xl: 24, xxl: 32, section: 40, max: 48 }
+  rounded: { sm: 4, md: 8, lg: 12, search: 20, full: 9999 }
+  shadow:
+    natural: "0px 1px 3px rgba(0,0,0,0.04)"
+    deep: "0px 2px 8px rgba(0,0,0,0.08)"
+    sharp: "0px 4px 12px rgba(0,0,0,0.10)"
+    outlined: "0px 4px 16px rgba(0,0,0,0.12)"
+    crisp: "0px 8px 24px rgba(0,0,0,0.16)"
+  components:
+    button-primary:        { type: button, bg: "#2ac1bc", fg: "#ffffff", radius: "8px", height: "48px", padding: "12px 24px", font: "16px / 700", states: "pressed #20a8a4 · disabled bg #dee2e6 / text #adb5bd", use: "Primary CTAs (주문하기, 배달 주문)" }
+    button-ghost:          { type: button, bg: "transparent", fg: "#2ac1bc", border: "1px solid #2ac1bc", radius: "8px", active: "bg rgba(42,193,188,0.08)", use: "Secondary actions (장바구니, 찜하기)" }
+    button-neutral:        { type: button, bg: "#f8f9fa", fg: "#212529", radius: "8px", use: "Tertiary actions, filter toggles" }
+    button-destructive:    { type: button, bg: "#ff6b6b", fg: "#ffffff", radius: "8px", use: "Cancel order, remove item" }
+    button-pill-web:       { type: button, bg: "#000000", fg: "#ffffff", radius: "9999px", height: "58px", padding: "16px 32px", font: "18px / 700", use: "Web corporate CTA (기업용 상품권 구매하기)" }
+    app-download-card:     { type: card, bg: "#ffffff", radius: "12px", height: "54px", padding: "14px 19px", shadow: "none", use: "Store-badge cards (App Store / Google Play)" }
+    card:                  { type: card, bg: "#ffffff", radius: "8px", border: "1px solid #dee2e6", shadow: "0px 2px 8px rgba(0,0,0,0.08)", use: "Standard surface, 12px radius when featured" }
+    restaurant-card:       { type: card, bg: "#ffffff", radius: "12px", padding: "16px", font: "name 18px / 700 #212529 · delivery 13px / 400 #868e96", states: "rating star #ffb347 · 16:9 photo 12px top radius", use: "Restaurant listing card" }
+    tag:                   { type: badge, bg: "#f1f3f5", fg: "#495057", radius: "9999px", font: "12px / 500", use: "Restaurant attribute tags" }
+    search-bar:            { type: input, bg: "#f8f9fa", fg: "#212529", radius: "20px", height: "44px", states: "left search icon #868e96 · placeholder #adb5bd", use: "Restaurant search (맛집을 검색해보세요)" }
+    input:                 { type: input, bg: "#ffffff", fg: "#212529", border: "1px solid #dee2e6", radius: "8px", focus: "2px solid #2ac1bc", states: "placeholder #adb5bd · error 2px solid #ff6b6b", use: "Text fields" }
+    bottom-tab-bar:        { type: tab, bg: "#ffffff", border: "1px solid #dee2e6 top", active: "icon+label #2ac1bc", disabled: "#868e96 inactive", use: "Primary app navigation" }
+    top-app-bar:           { type: tab, bg: "#ffffff", fg: "#212529", font: "18px / 700 centered title", use: "Screen header" }
+    floating-cart-button:  { type: button, bg: "#2ac1bc", fg: "#ffffff", radius: "9999px", height: "56px", shadow: "0px 4px 12px rgba(0,0,0,0.10)", states: "count badge #ff6b6b white 11px / 700", use: "Floating cart access" }
+    badge:                 { type: badge, bg: "#ff6b6b", fg: "#ffffff", radius: "4px", font: "11px / 700", states: "promo #ff6b6b / #ffb347 · delivery #2ac1bc", use: "Promo / delivery status" }
+    toast:                 { type: toast, bg: "#212529", fg: "#ffffff", font: "14px / 400", states: "2.5s auto-dismiss", use: "Transient confirmation (장바구니에 담겼어요)" }
 omd: "0.1"
 ---
 
@@ -91,46 +152,75 @@ All 12 Baemin fonts are free under OFL license. Four are on Google Fonts (Jua, D
 - **Bold for clarity**: In food ordering, weight 700 is used liberally for menu names, prices, and CTAs. Users scan quickly through many options.
 - **All fonts are free**: Every Baemin typeface is available under OFL license for personal and commercial use.
 
-## 4. Component Stylings
+## 4. Component Patterns
 
-### Buttons
+Baemin runs **two parallel component systems**, and this section is honest about which surface each component comes from. The **app surface** (배달의민족 mobile app — Mint `#2AC1BC` primary, 8px radius, system fonts for chrome) is the brand's real product; its specs are grounded in Baemin's public color/brand guide and app-store screenshots. The **web marketing surface** (baemin.com) is a thin corporate/landing site with a *separate* Black Pill primary — its specs below are measured live via playwright `getComputedStyle`. The app is not web-inspectable (login-gated, native), so this is an honest TIER 3 cap of the components actually documentable, not an exhaustive design-system index.
 
-**Primary (Brand Mint)**
-- Background: `#2AC1BC`
-- Text: `#ffffff`
-- Padding: 12px 24px
-- Radius: 8px
+### Actions
+
+**Button — Primary (Brand Mint)** `[app]`
+- Background: `#2AC1BC`, Text: `#ffffff`
+- Padding: 12px 24px, Radius: 8px, Height: 48px min
 - Font: 16px system weight 700
-- Pressed: `#20A8A4` (darkened mint)
-- Disabled: `#DEE2E6` background, `#ADB5BD` text
+- Pressed: `#20A8A4` (darkened mint); Disabled: `#DEE2E6` bg, `#ADB5BD` text
 - Use: Primary CTAs ("주문하기", "배달 주문")
 
-**Secondary (Ghost)**
-- Background: transparent
-- Text: `#2AC1BC`
-- Border: 1px solid `#2AC1BC`
-- Radius: 8px
+**Button — Ghost (Secondary)** `[app]`
+- Background: transparent, Text: `#2AC1BC`, Border: 1px solid `#2AC1BC`, Radius: 8px
 - Pressed: `rgba(42,193,188,0.08)` background
 - Use: Secondary actions ("장바구니", "찜하기")
 
-**Neutral**
-- Background: `#F8F9FA`
-- Text: `#212529`
-- Radius: 8px
+**Button — Neutral** `[app]`
+- Background: `#F8F9FA`, Text: `#212529`, Radius: 8px
 - Use: Tertiary actions, filter toggles
 
-**Destructive**
-- Background: `#FF6B6B`
-- Text: `#ffffff`
+**Button — Destructive** `[app]`
+- Background: `#FF6B6B`, Text: `#ffffff`, Radius: 8px
 - Use: Cancel order, remove item
 
-### Cards & Containers
-- Background: `#ffffff`
-- Border: 1px solid `#DEE2E6` or no border with shadow
-- Radius: 8px (standard), 12px (featured restaurant cards)
-- Shadow: `0px 2px 8px rgba(0,0,0,0.06)` (standard)
+**Button — Black Pill (Web Corporate CTA)** `[web — measured]`
+- Background: `#000000`, Text: `#ffffff`
+- Radius: 9999px (full pill), Padding: 16px 32px, Height: 58px
+- Font: 18px weight 700
+- Measured on baemin.com ("기업용 상품권 구매하기"). The marketing web deliberately uses high-contrast black, **not** mint, for its highest-impact corporate CTAs — the two systems are intentionally distinct.
+
+**Floating Cart Button** `[app]`
+- 56px circle, `#2AC1BC` fill, white cart icon
+- Count badge: `#FF6B6B` circle, white text 11px weight 700, top-right
+- Shadow: `0px 4px 12px rgba(0,0,0,0.10)` (Sharp / Level 3)
+
+### Navigation
+
+**Bottom Tab Bar** `[app]`
+- White bg, 1px `#DEE2E6` top border
+- Active: `#2AC1BC` icon + label; Inactive: `#868E96`
+
+**Top App Bar** `[app]`
+- White bg, centered title 18px weight 700, `#212529`
+
+**Carousel Dots / Progress** `[web — measured]`
+- Inactive indicator `rgba(0,0,0,0.2)`, active `#000000` track
+- Promo banner carousels on baemin.com use a thin progress-bar segment rather than circular dots.
+
+### Forms
+
+**Search Bar** `[app]`
+- Background: `#F8F9FA`, Radius: 20px, Height: 44px
+- Left search icon (`#868E96`), placeholder `#ADB5BD`, text `#212529`
+- Full-width with 16px margin ("맛집을 검색해보세요")
+
+**Text Input** `[app]`
+- Border: 1px solid `#DEE2E6`, Radius: 8px
+- Text: `#212529`, Placeholder: `#ADB5BD`
+- Focus: 2px solid `#2AC1BC`; Error: 2px solid `#FF6B6B` + 13px/400 red error text below
+
+### Data display
+
+**Card / Container** `[app]`
+- Background: `#ffffff`, Border: 1px solid `#DEE2E6` or no border with shadow
+- Radius: 8px (standard), 12px (featured); Shadow: `0px 2px 8px rgba(0,0,0,0.08)` (Deep / Level 2)
 
-### Restaurant Cards (Key Component)
+**Restaurant Card** `[app]` — key component
 - Image: full-width, 16:9, 12px top radius
 - Name: 18px weight 700, `#212529`
 - Rating: star icon (`#FFB347`) + score 14px weight 600
@@ -138,27 +228,36 @@ All 12 Baemin fonts are free under OFL license. Four are on Google Fonts (Jua, D
 - Tags: pill (9999px radius), `#F1F3F5` bg, `#495057` text, 12px
 - Internal padding: 16px
 
-### Tags & Badges
-- **Category Tag**: `#F1F3F5` bg, `#495057` text, pill radius, 12px font weight 500
-- **Promo Badge**: `#FF6B6B` or `#FFB347` bg, white text, 4px radius, 11px weight 700
-- **Delivery Badge**: `#2AC1BC` bg, white text, 4px radius
+**App-Download Card** `[web — measured]`
+- Background: `#ffffff`, Radius: 12px, Height: 54px, Padding: 14px 19px, no shadow
+- Store-badge cards on the marketing site (App Store / Google Play links).
 
-### Inputs & Forms
-- Border: 1px solid `#DEE2E6`, Radius: 8px
-- Focus: 2px solid `#2AC1BC`
-- Text: `#212529`, Placeholder: `#ADB5BD`
-- Search bar: 20px radius, `#F8F9FA` background, search icon left
+**Tag** `[app]`
+- `#F1F3F5` bg, `#495057` text, pill radius, 12px font weight 500
 
-### Navigation
-- Bottom tab bar: white, top border `#DEE2E6`
-- Active: `#2AC1BC` icon + text, Inactive: `#868E96`
-- Top app bar: white, centered title 18px weight 700
-- Cart badge: `#FF6B6B` circle, white count text
+### Overlays
+
+**Bottom Sheet / Modal** `[app]`
+- Rises from bottom, Outlined shadow `0px 4px 16px rgba(0,0,0,0.12)` (Level 4)
+- Backdrop overlay `rgba(0,0,0,0.5)`; payment-declined uses a centered modal with 18px/700 `#212529` headline + two CTAs (primary mint, neutral cancel)
+
+### Feedback & Status
+
+**Badge** `[app]`
+- Promo badge: `#FF6B6B` or `#FFB347` bg, white text, 4px radius, 11px weight 700
+- Delivery badge: `#2AC1BC` bg, white text, 4px radius
+
+**Toast** `[app]`
+- `#212529` bg, white 14px weight 400 text, 2.5s auto-dismiss ("장바구니에 담겼어요"); floating cart badge increments simultaneously
+
+**Skeleton** `[app]`
+- `#F1F3F5` blocks at exact final card dimensions (16:9 photo slot, name row, meta row), shimmer ≤ 1.2s. Ratings render as an 80px-wide block (never a placeholder star); prices render as `---원` (never `0원`).
 
 ---
 
-**Verified:** 2026-05-08
-**Tier 1 sources:** baemin.com (live DOM via playwright — corporate/marketing surface confirmed: App download cards `#fff` / 12px / 14×19 / 54px height; Black Pill CTA `#000000` / `#fff` / 9999px / 16×32 / 58px / 18px·700 for "기업용 상품권 구매하기")
+**Verified:** 2026-06-09
+**Component harvest:** 2026-06-09 — TIER 3 honest cap. baemin.com re-inspected live via playwright `getComputedStyle`; the marketing web yields only ~3-4 real components (Black Pill CTA, app-download card, carousel dots, header nav). The 배달의민족 app is login-gated / native and not web-inspectable, so app-surface components (§4 Actions/Navigation/Forms/Data display/Overlays/Feedback) are documented from Baemin's public color/brand guide + app-store screenshots, not live DOM. Capped at 16 components — no components invented to inflate the count.
+**Tier 1 sources:** baemin.com (live DOM via playwright — corporate/marketing surface confirmed & re-measured 2026-06-09: App download cards `#fff` / 12px / 14×19 / 54px height; Black Pill CTA `#000000` / `#fff` / 9999px / 16×32 / 58px / 18px·700 for "기업용 상품권 구매하기"; carousel progress `rgba(0,0,0,0.2)` inactive; footer `#000000`)
 **Tier 2 sources:** styles.refero.design — no Baemin record at `?q=Baemin`. getdesign.md/baemin — no record.
 **Tier 2 status:** unavailable; Tier 1 (baemin.com live inspect) authoritative for marketing-web surface.
 **Surface split:** §4 above documents the **app surface** (배달의민족 mobile app — Mint `#2AC1BC` primary, 8px radius, system fonts for chrome). The marketing web (baemin.com) uses a **separate Black Pill** primary at 9999px / 18px·700 (verified above) for high-impact corporate CTAs. Both retained as parallel systems.

package/web/references/banksalad/DESIGN.md

@@ -16,6 +16,73 @@ ds:
   type: brand
   description: Banksalad's public GitHub org including styleguide repos and BPL (Banksalad Product Library) reference material.
   og_image: "https://avatars.githubusercontent.com/u/71009899?s=280&v=4"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-08"
+  colors:
+    primary: "#04c584"
+    primary-hover: "#10df99"
+    brand: "#04c584"
+    canvas: "#ffffff"
+    foreground: "#2b2b2b"
+    muted: "#7b7b7b"
+    on-primary: "#ffffff"
+    surface-alt: "#fbfbfb"
+    surface-neutral: "#f5f5f5"
+    body: "#434444"
+    placeholder: "#999999"
+    disabled: "#acacac"
+    hairline: "#e1e1e1"
+    mint-tint: "#f3fdfa"
+    error: "#fe493d"
+    error-soft: "#ff8a84"
+    warning: "#fd8700"
+    warning-deep: "#f56200"
+    info: "#0099ff"
+    success: "#04c584"
+    chart-1: "#34464b"
+    chart-2: "#5c818a"
+    chart-3: "#1c6c73"
+    chart-4: "#a7c7cf"
+  typography:
+    family: { sans: "Pretendard", display: "BM JUA" }
+    hero-display:     { size: 52, weight: 700, lineHeight: 1.23, tracking: -1, use: "Largest landing headline; sometimes Jua" }
+    display-lg:       { size: 48, weight: 700, lineHeight: 1.2, tracking: -1, use: "Secondary hero" }
+    display:          { size: 44, weight: 700, lineHeight: 1.25, tracking: -1, use: "Section-opening figures (balances, scores)" }
+    section-heading:  { size: 36, weight: 700, lineHeight: 1.3, tracking: -0.5, use: "Marketing section titles" }
+    h1:               { size: 28, weight: 700, lineHeight: 1.14, use: "In-app section titles" }
+    h2:               { size: 24, weight: 700, lineHeight: 1.17, use: "Card titles, panel headings" }
+    h3:               { size: 20, weight: 700, lineHeight: 1.2, use: "Sub-card headings" }
+    subhead:          { size: 18, weight: 700, lineHeight: 1.3, use: "Featured-button text, key callouts" }
+    body-lg:          { size: 16, weight: 500, lineHeight: 1.5, use: "Standard reading text on data screens" }
+    body:             { size: 14, weight: 500, lineHeight: 1.34, use: "Default body text; 500 not 400" }
+    body-tight:       { size: 13, weight: 500, lineHeight: 1.34, use: "Compact labels" }
+    caption:          { size: 12, weight: 500, lineHeight: 1.34, use: "Metadata, helper text" }
+    caption-sm:       { size: 10, weight: 500, lineHeight: 1, use: "Disclosures, smallest labels" }
+    button:           { size: 16, weight: 700, lineHeight: 1, tracking: -1, use: "All CTAs are 700" }
+    financial-amount: { size: 24, weight: 700, lineHeight: 1, use: "Comma-grouped, won unit follows in 500" }
+  spacing: { xs: 4, sm: 8, md: 16, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 }
+  rounded: { sm: 2, md: 4, lg: 8, full: 9999 }
+  shadow:
+    soft: "rgba(0,0,0,0.08) 0px 1px 1px 0px"
+    standard: "rgba(0,0,0,0.12) 0px 2px 5px 0px"
+    elevated: "rgba(0,0,0,0.15) 0px 4px 9px 0px"
+    modal: "rgba(0,0,0,0.19) 0px 17px 50px 0px"
+  components_harvested: true
+  components:
+    button-primary: { type: button, bg: "#04c584", fg: "#ffffff", radius: "2px", height: "42px", padding: "12px 24px", font: "16px / 700", hover: "bg #10df99 (lightens)", use: "Primary CTA on data/transactional flows" }
+    button-primary-large: { type: button, bg: "#04c584", fg: "#ffffff", radius: "2px", height: "56px", padding: "16px 32px", font: "18px / 700", hover: "bg #10df99", use: "Hero CTA on landing surfaces" }
+    button-ghost: { type: button, bg: "#ffffff", fg: "#04c584", border: "1px solid #04c584", radius: "2px", padding: "12px 24px", font: "16px / 700", hover: "bg #f3fdfa mint tint", use: "Secondary action paired with primary" }
+    button-neutral: { type: button, bg: "#f5f5f5", fg: "#434444", radius: "2px", padding: "12px 24px", font: "16px / 700", hover: "bg #e1e1e1", use: "Cancel / dismiss" }
+    button-disabled: { type: button, bg: "#e1e1e1", fg: "#acacac", radius: "2px", font: "16px / 700", use: "Disabled state" }
+    input-text: { type: input, bg: "#ffffff", fg: "#434444", border: "1px solid #e1e1e1", radius: "2px", height: "48px", padding: "0 16px", font: "16px / 500", focus: "border #10df99 + bg #f3fdfa", use: "Default text input" }
+    input-amount: { type: input, bg: "#ffffff", fg: "#2b2b2b", border: "2px solid #f5f5f5", radius: "2px", height: "56px", padding: "0 16px", font: "22px / 700", focus: "border #10df99 + bg #f3fdfa", use: "Won-amount input, right-aligned, money as heading" }
+    card-data: { type: card, bg: "#ffffff", border: "1px solid #e1e1e1", radius: "2px", padding: "20px 24px", shadow: "rgba(0,0,0,0.12) 0px 2px 5px 0px", use: "Recommendation/transaction/summary cards" }
+    card-highlight: { type: card, bg: "#f3fdfa", border: "1px solid #10df99", radius: "2px", padding: "20px 24px", use: "Selected/recommended-pick in comparison lists" }
+    status-pill: { type: badge, bg: "#f3fdfa", fg: "#04c584", radius: "41px", padding: "4px 10px", font: "12px / 500", use: "Filter chips on recommendation pages" }
+    badge-warning: { type: badge, bg: "#ffffff", fg: "#f56200", border: "1px solid #fd8700", radius: "2px", padding: "2px 8px", font: "12px / 700", use: "Rate-warning, expiry indicators" }
+    badge-negative: { type: badge, bg: "#ffffff", fg: "#fe493d", border: "1px solid #fe493d", radius: "2px", padding: "2px 8px", font: "12px / 700", use: "Overdue, declined indicators" }
+    table-row: { type: listItem, bg: "#ffffff", fg: "#434444", border: "1px solid #e1e1e1 bottom", padding: "12px 16px", font: "14px / 500", use: "Transaction rows; alternates #fbfbfb, amounts right-aligned 14px/700 #2b2b2b positive #fe493d negative" }
 ---
 
 # Design System Inspiration of Banksalad

package/web/references/bilibili/DESIGN.md

@@ -10,6 +10,51 @@ logo:
   slug: bilibili
 verified: "2026-05-19"
 omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-08"
+  note: "Only bili pink #FB7299 verified; bili blue, gold coin, and all neutrals are best-fit approximations flagged in prose — no public token layer."
+  colors:
+    primary: "#FB7299"
+    primary-hover: "#F25D8E"
+    primary-tint: "#FFF0F4"
+    brand: "#FB7299"
+    brand-blue: "#00AEEC"
+    brand-blue-dark: "#0089C7"
+    canvas: "#FFFFFF"
+    surface: "#F4F4F4"
+    foreground: "#18191C"
+    muted: "#61666D"
+    hint: "#C9CCD0"
+    hairline: "#E3E5E7"
+    divider: "#F1F2F3"
+    on-primary: "#FFFFFF"
+    coin: "#FFB027"
+    error: "#FF4D4F"
+    success: "#52C41A"
+  typography:
+    family: { sans: "PingFang SC, Source Han Sans SC, 思源黑体, Microsoft YaHei, sans-serif", mono: "monospace" }
+    page-header:   { size: 18, weight: 600, lineHeight: 1.3, use: "Channel titles, section heads" }
+    video-title:   { size: 14, weight: 500, lineHeight: 1.4, use: "Video title in card, 2-line clamp" }
+    body:          { size: 14, weight: 400, lineHeight: 1.5, use: "Video detail, comments" }
+    metadata:      { size: 12, weight: 400, lineHeight: 1.4, use: "UP主 name, view/danmaku counts" }
+    caption:       { size: 11, weight: 400, lineHeight: 1.4, use: "Tags, fine labels, durations" }
+  spacing: { xs: 4, sm: 8, md: 16, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 }
+  rounded: { sm: 4, md: 6, lg: 8, full: 9999 }
+  shadow:
+    hover: "rgba(0,0,0,0.08) 0px 2px 12px 0px"
+    floating: "rgba(0,0,0,0.1) 0px 4px 16px 0px"
+    modal: "rgba(0,0,0,0.12) 0px 6px 24px 0px"
+  components_harvested: true
+  components:
+    button-primary: { type: button, bg: "#FB7299", fg: "#FFFFFF", radius: "6px", padding: "6px 16px", font: "14px / 500", hover: "bg #F25D8E", use: "Follow / Sign up — pink is the action color" }
+    button-secondary: { type: button, bg: "#FFFFFF", fg: "#61666D", border: "1px solid #E3E5E7", radius: "6px", padding: "6px 16px", font: "14px / 500", use: "Following / ghost toggle" }
+    input-search: { type: input, bg: "#FFFFFF", fg: "#18191C", border: "1px solid #E3E5E7", radius: "8px", padding: "8px 14px", font: "14px / 400", focus: "border transitions to bili pink/blue", use: "Top search bar, comment input, form fields" }
+    coin-action: { type: toggle, bg: "transparent", fg: "#FFB027", use: "Signature 投币 give-a-coin reward gesture, gold when active" }
+    video-card: { type: card, bg: "#FFFFFF", radius: "6px", padding: "0 cover / 8px footer", shadow: "rgba(0,0,0,0.08) 0px 2px 12px 0px", hover: "subtle lift + cover preview", use: "16:9 cover + duration/count overlays, 2-line title 14px/500, UP主 name 12px/400 — atomic feed unit" }
+    tag-chip: { type: badge, bg: "#F4F4F4", fg: "#61666D", radius: "4px", padding: "4px 10px", font: "12px / 400", active: "bg #FFF0F4 + fg #FB7299", use: "分区 partition filters above feed" }
+    overlay-pill: { type: badge, bg: "rgba(0,0,0,0.6)", fg: "#FFFFFF", radius: "4px", padding: "2px 6px", font: "12px / 400", use: "Duration + view/danmaku counts over cover" }
+    nav-tab: { type: tab, fg: "#61666D", active: "fg #FB7299 + pink bottom border", use: "Partition (分区) horizontal category nav" }
 ---
 
 # Design System Inspiration of Bilibili

package/web/references/bithumb/DESIGN.md

@@ -10,6 +10,44 @@ logo:
   slug: "https://www.google.com/s2/favicons?domain=bithumb.com&sz=128"
 verified: "2026-06-01"
 omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-08"
+  note: "primary #1C2028 is the measured dominant structural near-black (matches primary_color); bronze #543E35 is the rebrand CTA accent, not the structural primary. Trading red/blue follow Korea convention (red=up, blue=down)."
+  colors:
+    primary: "#1C2028"
+    brand: "#543E35"
+    canvas: "#1C2028"
+    on-primary: "#FFFFFF"
+    cta-text: "#4F3327"
+    cta-surface-text: "#F8F9FA"
+    hairline: "#B6ABA1"
+    muted: "#707882"
+    muted-2: "#93989E"
+    surface-text: "#F8F9FA"
+    foreground: "#FFFFFF"
+    price-up: "#E15241"
+    price-down: "#4880EE"
+  typography:
+    family: { sans: "Bithumb Trading Sans", mono: "Bithumb Trading Sans" }
+    body:        { size: 14, weight: 400, use: "Workhorse readable content in a packed layout" }
+    control:     { size: 13, weight: 500, use: "Buttons, chips, interactive labels" }
+    micro-label: { size: 12, weight: 400, use: "Dense data annotations coexisting with numbers" }
+    chip-active: { size: 13, weight: 600, use: "Active filter chip label" }
+    cta:         { size: 18, weight: 500, use: "Primary exchange CTA label" }
+  spacing: { xs: 4, sm: 8, md: 16, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 }
+  rounded: { sm: 4, md: 8, full: 9999 }
+  shadow:
+    flat: "none — depth is structural (color layering + 1px borders), no drop shadows captured"
+    hairline: "1px solid #B6ABA1"
+    chip-inactive: "1px solid rgba(28,32,40,0.1)"
+  components_harvested: true
+  components:
+    button-primary: { type: button, bg: "#1C2028", fg: "#FFFFFF", radius: "4px", height: "32px", font: "13px / 500", use: "Signup — structural top-chrome action" }
+    cta-filled: { type: button, bg: "#543E35", fg: "#F8F9FA", radius: "4px", height: "56px", font: "18px / 500", use: "Primary exchange CTA — single warmest action" }
+    cta-outline: { type: button, bg: "transparent", fg: "#4F3327", border: "1px solid #B6ABA1", radius: "4px", height: "56px", use: "Secondary action paired with filled bronze CTA" }
+    chip-active: { type: badge, bg: "#1C2028", fg: "#FFFFFF", radius: "8px", height: "36px", font: "13px / 600", use: "Selected filter chip" }
+    chip-inactive: { type: badge, bg: "transparent", fg: "#707882", border: "1px solid rgba(28,32,40,0.1)", radius: "8px", use: "Unselected filter chip" }
 ---
 
 # Design System Inspiration of Bithumb

package/web/references/bmw/DESIGN.md

@@ -10,6 +10,43 @@ logo:
   slug: bmw
 verified: "2026-05-15"
 omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-08"
+  note: "primary = live signature interactive blue --site-context-highlight-color (#1c69d4); differs from primary_color frontmatter (#0066b1, BMW roundel marketing blue)"
+  colors:
+    primary: "#1c69d4"
+    primary-hover: "#0653b6"
+    brand: "#0066b1"
+    canvas: "#ffffff"
+    foreground: "#262626"
+    muted: "#757575"
+    on-primary: "#ffffff"
+    focus: "#0653b6"
+    surface: "#ffffff"
+    dark-surface: "#262626"
+    tertiary: "#bbbbbb"
+  typography:
+    family: { sans: "BMWTypeNextLatin, Helvetica, Arial, Hiragino Kaku Gothic ProN, Hiragino Sans, Meiryo", mono: "monospace" }
+    display-hero:    { size: 60, weight: 300, lineHeight: 1.30, use: "Uppercase hero display, whispered authority" }
+    section-heading: { size: 32, weight: 400, lineHeight: 1.30, use: "Major section titles" }
+    nav-emphasis:    { size: 18, weight: 900, lineHeight: 1.30, use: "Navigation bold items, stark authority" }
+    body:            { size: 16, weight: 400, lineHeight: 1.15, use: "Standard body text" }
+    button-bold:     { size: 16, weight: 700, lineHeight: 1.20, use: "CTA buttons" }
+    button:          { size: 16, weight: 400, lineHeight: 1.15, use: "Standard buttons" }
+  spacing: { xs: 4, sm: 8, md: 16, base: 16, lg: 24, xl: 32, xxl: 48, section: 60 }
+  rounded: { sm: 0, md: 0, lg: 0, full: 0 }
+  shadow:
+    none: "none"
+  components_harvested: true
+  components:
+    button-primary: { type: button, bg: "transparent", fg: "#ffffff", border: "1px solid #ffffff", radius: "0px", padding: "12px 24px", font: "16px / 700", hover: "text stays white, no underline", use: "Primary CTA on dark/hero surfaces" }
+    button-secondary: { type: button, bg: "transparent", fg: "#262626", border: "1px solid #262626", radius: "0px", padding: "12px 24px", font: "16px / 400", use: "Secondary action on light surfaces" }
+    button-highlight: { type: button, bg: "#1c69d4", fg: "#ffffff", radius: "0px", padding: "12px 24px", font: "16px / 700", hover: "bg #0653b6", use: "BMW Blue highlight CTA" }
+    input: { type: input, bg: "#ffffff", fg: "#262626", border: "1px solid #262626", radius: "0px", padding: "12px 16px", font: "16px / 400", focus: "border #0653b6", use: "Default text input" }
+    card: { type: card, bg: "#ffffff", radius: "0px", padding: "24px", border: "none", use: "Light-section content card — sharp rectangular" }
+    dark-hero-container: { type: card, bg: "#262626", fg: "#ffffff", radius: "0px", padding: "0px", use: "Hero/feature with full-bleed automotive photography, edge-to-edge" }
+    badge: { type: badge, bg: "#262626", fg: "#ffffff", radius: "0px", padding: "4px 8px", font: "12px / 700", use: "Label badge" }
 ---
 
 # Design System Inspiration of BMW