oh-my-design-cli 1.6.6 → 1.7.0

package/web/references/toss-securities/DESIGN.md

@@ -11,25 +11,42 @@ logo:
   slug: "https://www.google.com/s2/favicons?domain=tossinvest.com&sz=256"
 verified: "2026-05-15"
 omd: "0.1"
-
-## 14. Do's and Don'ts
-
-### Do
-- Build dark-mode-first, layering surfaces from deepest #101013 to body rgb(23,23,28) to overlay #202025 for sheets
-- Encode the KR-finance locale by using red #dc2e47 for positive/up ticks and blue #3182f6 for negative/down ticks via the positive/negative semantic tokens
-- Create depth with translucent rgba(214,224,239,0.09) 1px borders and layered surface alpha instead of elevation
-- Keep the two-tier radius scale, using 8px for cards, inputs, and buttons and 32px for pill controls like memo and filter chips
-- Set type from the observed hierarchy: 24px/700 section H2, 18.72px/700 sub-section H3, 15px/500 nav links, and 16px/400 body
-- Use Toss Product Sans tabular numerals so price ticks, order-book columns, and percent changes align by column
-
-### Don't
-- Copy positive=red / negative=blue into non-KR/JP/TW locales without inverting positive-* to green and negative-* to red
-- Assume Toss Blue #3182f6 always means brand CTA, since on this surface it is also the down-tick fill and only context disambiguates
-- Introduce box-shadow as elevation language; this system deliberately uses translucent borders plus layered surface alphas
-- Add a third radius tier beyond the deliberate two-tier 8px / 32px scale
-- Introduce a display-only accent typeface; restraint is the rule and there is no decorative accent face
-- Decorate data surfaces with illustration; the price chart itself is the imagery
-
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    primary: "#3182f6"
+    primary-hover: "#2562b9"
+    primary-pressed: "#29518e"
+    brand-text: "#4391ff"
+    positive: "#dc2e47"
+    positive-hover: "#ad2136"
+    positive-pressed: "#8d222f"
+    positive-text: "#f5445a"
+    negative: "#3182f6"
+    negative-text: "#4391ff"
+    canvas: "#101013"
+    overlay: "#202025"
+    on-primary: "#ffffff"
+  typography:
+    family: { sans: "Toss Product Sans", mono: "Toss Product Sans" }
+    section-h2:  { size: 24, weight: 700, use: "Section headers" }
+    sub-h3:      { size: 19, weight: 700, use: "Sub-section headers" }
+    nav:         { size: 15, weight: 500, use: "Global nav links" }
+    body:        { size: 16, weight: 400, use: "Body and button text" }
+    input:       { size: 15, weight: 400, use: "Form field text" }
+    memo-chip:   { size: 12, weight: 600, use: "Contextual pill action" }
+    on-cta:      { size: 16, weight: 400, use: "White on tinted-fill button" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48 }
+  rounded: { sm: 4, md: 8, lg: 16, full: 9999 }
+  shadow:
+    none: "none"
+  components_harvested: true
+  components:
+    button-brand: { type: button, bg: "#3182f6", fg: "#ffffff", use: "Primary CTA brand fill" }
+    badge-positive: { type: badge, fg: "#f5445a", font: "12/600", use: "Up-tick / 매수 indicator (KR red-up)" }
+    badge-negative: { type: badge, fg: "#4391ff", font: "12/600", use: "Down-tick / 매도 indicator (KR blue-down)" }
+    input-field: { type: input, font: "15/400", use: "Form field on dark surface" }
 ---
 
 # Design System Inspiration of Toss Securities (토스증권)
@@ -210,3 +227,21 @@ Motion timing tokens not captured this pass (no live transition introspection pe
 - **Tier 3 live capture**: ✓ CDP `:9222` getComputedStyle on **two surfaces** — homepage (601 DOM samples, 416 `:root` vars) + stock order surface (`A005930/order`). 12 raw_samples retained in `.live-inspect-proof.json` (≥5 floor).
 - **IP guardrails**: brand assets reference-only; no verbatim Toss Securities taglines/copy reproduced; voice samples in §9 are fresh derivations; logo not redistributed; persona block in §10 explicitly marked `[FILL IN]` (no fabricated quotes).
 - **Flagged for UPDATE**: (a) motion timing tokens not captured this pass; (b) light-mode variant — `--tw-adaptive-*` namespace implies a theme switch but only dark default observed live; (c) personas pending public-research sourcing; (d) primary CTA visual not directly sampled (token tree confirms `#3182f6` fill but live surface served ghost-button variants on inspected paths).
+
+## 14. Do's and Don'ts
+
+### Do
+- Build dark-mode-first, layering surfaces from deepest #101013 to body rgb(23,23,28) to overlay #202025 for sheets
+- Encode the KR-finance locale by using red #dc2e47 for positive/up ticks and blue #3182f6 for negative/down ticks via the positive/negative semantic tokens
+- Create depth with translucent rgba(214,224,239,0.09) 1px borders and layered surface alpha instead of elevation
+- Keep the two-tier radius scale, using 8px for cards, inputs, and buttons and 32px for pill controls like memo and filter chips
+- Set type from the observed hierarchy: 24px/700 section H2, 18.72px/700 sub-section H3, 15px/500 nav links, and 16px/400 body
+- Use Toss Product Sans tabular numerals so price ticks, order-book columns, and percent changes align by column
+
+### Don't
+- Copy positive=red / negative=blue into non-KR/JP/TW locales without inverting positive-* to green and negative-* to red
+- Assume Toss Blue #3182f6 always means brand CTA, since on this surface it is also the down-tick fill and only context disambiguates
+- Introduce box-shadow as elevation language; this system deliberately uses translucent borders plus layered surface alphas
+- Add a third radius tier beyond the deliberate two-tier 8px / 32px scale
+- Introduce a display-only accent typeface; restraint is the rule and there is no decorative accent face
+- Decorate data surfaces with illustration; the price chart itself is the imagery

package/web/references/tossbank/DESIGN.md

@@ -10,6 +10,63 @@ logo:
   slug: "https://www.google.com/s2/favicons?domain=tossbank.com&sz=128"
 verified: "2026-05-27"
 omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    primary: "#3182f6"
+    primary-hover: "#2272eb"
+    primary-light: "#e8f3ff"
+    brand: "#0064ff"
+    brand-gray: "#202632"
+    canvas: "#ffffff"
+    surface: "#f2f4f6"
+    grey-50: "#f9fafb"
+    heading: "#191f28"
+    grey-800: "#333d4b"
+    grey-700: "#4e5968"
+    body: "#6b7684"
+    muted: "#8b95a1"
+    placeholder: "#b0b8c1"
+    border: "#e5e8eb"
+    border-strong: "#d1d6db"
+    on-primary: "#ffffff"
+    error: "#f04452"
+    success: "#03b26c"
+    warning: "#fe9800"
+    caution: "#ffc342"
+  typography:
+    family: { sans: "Toss Product Sans", mono: "SF Mono" }
+    display-hero: { size: 30, weight: 700, lineHeight: 1.33, use: "Onboarding, hero moments" }
+    display-lg:   { size: 26, weight: 700, lineHeight: 1.38, use: "Section headers, key metrics" }
+    heading-lg:   { size: 22, weight: 700, lineHeight: 1.36, use: "Feature titles, modal headers" }
+    heading:      { size: 20, weight: 600, lineHeight: 1.40, use: "Card headings, sub-sections" }
+    subtitle:     { size: 16, weight: 600, lineHeight: 1.50, use: "List headers, nav titles" }
+    body-lg:      { size: 16, weight: 400, lineHeight: 1.50, use: "Descriptions, explanations" }
+    body:         { size: 14, weight: 400, lineHeight: 1.57, use: "Standard reading text" }
+    caption:      { size: 12, weight: 400, lineHeight: 1.50, use: "Timestamps, fine print, rate disclaimers" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48 }
+  rounded: { sm: 8, md: 12, lg: 16, full: 9999 }
+  shadow:
+    standard: "0px 2px 8px rgba(0,0,0,0.08)"
+    elevated: "0px 4px 12px rgba(0,0,0,0.12)"
+    sheet: "0px -4px 12px rgba(0,0,0,0.08)"
+  components_harvested: true
+  components:
+    button-fill-primary: { type: button, bg: "#3182f6", fg: "#ffffff", radius: 16, padding: "0 20px", font: "17/600", use: "Primary CTA, 56px tall" }
+    button-fill-dark: { type: button, bg: "#4e5968", fg: "#ffffff", radius: 16, padding: "0 20px", font: "17/600", use: "Strong neutral action" }
+    button-fill-danger: { type: button, bg: "#f04452", fg: "#ffffff", radius: 16, padding: "0 20px", font: "17/600", use: "Destructive confirmation" }
+    input-box: { type: input, fg: "#333d4b", radius: 14, padding: "14px 16px", font: "17/400", use: "Standard form input" }
+    input-error: { type: input, fg: "#333d4b", radius: 14, padding: "14px 16px", font: "17/400", use: "hasError state, 1px border #f04452" }
+    card-account: { type: card, bg: "#ffffff", radius: 16, padding: "24px", use: "Account/balance hero card" }
+    card-standard: { type: card, bg: "#ffffff", radius: 12, padding: "20px", use: "Transaction summary, product cards" }
+    card-compact: { type: listItem, bg: "#ffffff", radius: 8, padding: "12px", use: "Transaction list row, 1px border #e5e8eb" }
+    badge-blue: { type: badge, bg: "#3182f6", fg: "#ffffff", radius: 12, padding: "3px 7px", font: "13/700", use: "Status emphasis NEW" }
+    badge-elephant: { type: badge, fg: "#4e5968", radius: 12, padding: "3px 7px", font: "13/700", use: "Neutral metadata badge" }
+    toast: { type: toast, bg: "#191f28", fg: "#ffffff", radius: 8, padding: "12px 16px", font: "14/500", use: "Transient feedback" }
+    sheet: { type: dialog, bg: "#ffffff", fg: "#191f28", radius: 16, padding: "24px 20px", use: "Bottom sheet, top corners only" }
+    segmented: { type: tab, bg: "#f2f4f6", fg: "#8b95a1", radius: 12, padding: "8px 16px", font: "14/600", use: "Segmented switch", active: "bg #ffffff, text #191f28" }
+    toggle: { type: toggle, bg: "#3182f6", radius: 9999, use: "On #3182f6 / off #d1d6db, white 18px thumb" }
 ---
 
 # Design System Inspiration of Toss Bank (토스뱅크)

package/web/references/trenbe/DESIGN.md

@@ -10,6 +10,47 @@ logo:
   slug: "https://www.google.com/s2/favicons?domain=trenbe.com&sz=256"
 verified: "2026-06-03"
 omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    primary: "#7620F6"
+    primary-ui: "#7351EC"
+    marketing-cta: "#7618F1"
+    black: "#000000"
+    canvas: "#FFFFFF"
+    text01: "#2F2E2B"
+    text02: "#4F4E4B"
+    text03: "#6F6E6B"
+    border: "#CFCECB"
+    surface: "#F7F6F5"
+    secondary: "#EC5151"
+    success: "#1EB789"
+    caution: "#FFAB1E"
+    disabled-text: "#AFAEAB"
+  typography:
+    family: { sans: "Pretendard", mono: "Pretendard" }
+    display01:  { size: 32, weight: 700, lineHeight: 1.31, use: "Largest display headline" }
+    display02:  { size: 24, weight: 700, lineHeight: 1.33, use: "Secondary display" }
+    title:      { size: 18, weight: 600, lineHeight: 1.44, use: "Section titles" }
+    headline:   { size: 16, weight: 500, lineHeight: 1.50, use: "Subheadings" }
+    body:       { size: 14, weight: 400, lineHeight: 1.57, use: "Body text" }
+    caption:    { size: 12, weight: 400, lineHeight: 1.67, use: "Captions, helper text" }
+    cta:        { size: 18, weight: 600, lineHeight: 1.40, use: "Marketing CTA label" }
+  spacing: { xs: 2, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 }
+  rounded: { sm: 2, md: 4, lg: 8, full: 9999 }
+  shadow:
+    scrim: "rgba(0,0,0,0.5)"
+  components:
+    button-primary: { type: button, bg: "#000000", fg: "#FFFFFF", radius: "2px", padding: "6px 12px", font: "13px / 400", use: "Primary black CTA in shopping UI" }
+    button-ghost: { type: button, bg: "#FFFFFF", fg: "#000000", radius: "2px", padding: "6px 12px", font: "13px / 400", use: "Default outlined action" }
+    button-disabled: { type: button, bg: "#FFFFFF", fg: "#AFAEAB", radius: "2px", use: "Disabled action" }
+    button-marketing: { type: button, bg: "#7618F1", fg: "#FFFFFF", radius: "4px", padding: "0 24px", font: "18px / 600", use: "Brand purple CTA on marketing surfaces" }
+    input-default: { type: input, bg: "#FFFFFF", fg: "#6F6E6B", radius: "0px", padding: "6px 12px", font: "13px / 400", use: "Default text field" }
+    badge-primary: { type: badge, bg: "#000000", fg: "#FFFFFF", radius: "0px", padding: "0.2em 0.6em 0.3em", use: "Primary black label" }
+    badge-sale: { type: badge, bg: "#EC5151", fg: "#FFFFFF", radius: "4px", use: "Sale / accent badge" }
+    card: { type: card, bg: "#FFFFFF", radius: "8px", use: "Product card, hairline border" }
+  components_harvested: true
 ---
 
 # Trenbe

package/web/references/triple/DESIGN.md

@@ -10,6 +10,53 @@ logo:
   slug: "https://www.google.com/s2/favicons?domain=triple.guide&sz=128"
 verified: "2026-05-19"
 omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    primary: "#368fff"
+    primary-pressed: "#1a85e8"
+    sky-accent: "#1aadf6"
+    blue-tint: "#f1f7ff"
+    canvas: "#ffffff"
+    surface: "#f5f6f7"
+    heading: "#1b1d1f"
+    body: "#3a3e41"
+    secondary: "#7e848a"
+    tertiary: "#adb1b5"
+    border: "#e8eaec"
+    border-strong: "#d5d8db"
+    success: "#22c55e"
+    highlight-teal: "#0ecedb"
+    error: "#ff3b30"
+    warning: "#faad14"
+  typography:
+    family: { sans: "-apple-system", mono: "-apple-system" }
+    hero:        { size: 32, weight: 700, lineHeight: 1.3, use: "Intro hero, feature headlines" }
+    section:     { size: 22, weight: 700, lineHeight: 1.35, use: "Itinerary day headers, section titles" }
+    card-title:  { size: 16, weight: 600, lineHeight: 1.4, use: "Place/itinerary card titles" }
+    cta:         { size: 18, weight: 700, lineHeight: 1.4, use: "Primary buttons" }
+    body:        { size: 16, weight: 400, lineHeight: 1.5, use: "Descriptions, tip copy" }
+    meta:        { size: 14, weight: 400, lineHeight: 1.4, use: "Place metadata, distance, hours" }
+    caption:     { size: 12, weight: 400, lineHeight: 1.4, use: "Badges, fine print" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48 }
+  rounded: { sm: 12, md: 12, lg: 20, full: 9999 }
+  shadow:
+    none: "none"
+  components_harvested: true
+  components:
+    button-primary: { type: button, bg: "#368fff", fg: "#ffffff", radius: 9999, padding: "0 28px", font: "18/700", use: "Primary CTA, 56px pill" }
+    button-outline: { type: button, bg: "#ffffff", fg: "#368fff", radius: 9999, padding: "0 28px", font: "18/700", use: "Secondary action, 1px border #368fff" }
+    button-soft: { type: button, bg: "#f1f7ff", fg: "#368fff", radius: 9999, padding: "0 24px", font: "16/600", use: "Low-emphasis action" }
+    button-ghost: { type: button, fg: "#3a3e41", font: "16/600", use: "Tertiary nav, 더보기" }
+    input-search: { type: input, bg: "#f5f6f7", fg: "#1b1d1f", radius: 12, padding: "12px 16px", font: "16/400", use: "Destination/place search" }
+    card-place: { type: card, bg: "#ffffff", radius: 20, padding: "16px", use: "Place/itinerary card, 1px border #e8eaec" }
+    card-tip: { type: card, bg: "#f1f7ff", fg: "#3a3e41", radius: 20, padding: "20px", font: "16/400", use: "Travel tips, contextual info" }
+    chip-filter: { type: badge, bg: "#f5f6f7", fg: "#3a3e41", radius: 9999, padding: "6px 14px", font: "13/500", use: "Place-type filters", active: "text #368fff" }
+    chip-selected: { type: badge, fg: "#368fff", radius: 12, use: "Selected itinerary item, 1px border #368fff" }
+    tab-nav: { type: tab, fg: "#7e848a", font: "12/500", use: "Bottom/top nav switcher", active: "icon+label #368fff" }
+    toast: { type: toast, bg: "#1b1d1f", fg: "#ffffff", radius: 12, padding: "12px 16px", use: "Snackbar transient feedback" }
+    sheet: { type: dialog, bg: "#ffffff", fg: "#1b1d1f", radius: 20, padding: "24px", use: "Modal / bottom sheet" }
 ---
 
 # Design System Inspiration of Triple (트리플)

package/web/references/tumblbug/DESIGN.md

@@ -11,6 +11,54 @@ logo:
   slug: "https://www.google.com/s2/favicons?domain=tumblbug.com&sz=128"
 verified: "2026-05-27"
 omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    primary: "#fd5744"
+    primary-hover: "#f86453"
+    primary-pressed: "#e53c41"
+    canvas: "#ffffff"
+    foreground: "#000000"
+    gray-900: "#1c1c1c"
+    gray-800: "#3d3d3d"
+    gray-600: "#545454"
+    gray-500: "#6d6d6d"
+    gray-400: "#9e9e9e"
+    border: "#e4e4e4"
+    surface: "#f0f0f0"
+    gray-50: "#f6f6f6"
+    error: "#e53c41"
+  typography:
+    family: { sans: "Pretendard", mono: "Pretendard" }
+    display:       { size: 28, weight: 700, lineHeight: 38, tracking: -0.4, use: "Editorial banner / featured project title" }
+    heading-lg:    { size: 22, weight: 700, lineHeight: 30, tracking: -0.4, use: "Section header" }
+    heading:       { size: 18, weight: 700, lineHeight: 26, tracking: -0.3, use: "Project detail title, sub-section" }
+    title:         { size: 16, weight: 700, lineHeight: 24, tracking: -0.3, use: "Card project title" }
+    body-lg:       { size: 16, weight: 400, lineHeight: 24, tracking: -0.2, use: "Project story body" }
+    body:          { size: 14, weight: 400, lineHeight: 22, tracking: -0.2, use: "Default body, card metadata" }
+    body-bold:     { size: 14, weight: 700, lineHeight: 22, tracking: -0.2, use: "Creator name, emphasis, nav" }
+    caption:       { size: 13, weight: 400, lineHeight: 18, tracking: -0.2, use: "Days-left, backer count, timestamps" }
+    micro:         { size: 12, weight: 500, lineHeight: 16, tracking: -0.2, use: "Fine print, category labels" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48 }
+  rounded: { sm: 4, md: 8, lg: 12, full: 9999 }
+  shadow:
+    none: "none"
+  components_harvested: true
+  components:
+    button-primary: { type: button, bg: "#fd5744", fg: "#ffffff", radius: 9999, padding: "14px 24px", font: "16/700", use: "Primary CTA 후원하기" }
+    button-secondary: { type: button, bg: "#000000", fg: "#ffffff", radius: 9999, padding: "14px 24px", font: "16/700", use: "Strong neutral action" }
+    button-outline: { type: button, bg: "#ffffff", fg: "#545454", radius: 9999, padding: "11.5px 16px", font: "14/700", use: "Secondary actions, 1px border #e4e4e4" }
+    button-ghost: { type: button, fg: "#000000", radius: 9999, padding: "8px 12px", font: "14/700", use: "Inline nav / utility action" }
+    input-default: { type: input, bg: "#ffffff", fg: "#000000", radius: 8, padding: "12px 14px", font: "14/400", use: "Default text input, 1px border #e4e4e4" }
+    input-search: { type: input, bg: "#f0f0f0", fg: "#000000", radius: 9999, padding: "12px 16px 12px 40px", font: "14/400", use: "Header pill search bar" }
+    input-error: { type: input, bg: "#ffffff", fg: "#000000", radius: 8, padding: "12px 14px", font: "14/400", use: "Validation failure, 1px border #e53c41" }
+    card-project: { type: card, bg: "#ffffff", radius: 8, use: "Project listing card, thumbnail + funding bar" }
+    card-reward: { type: card, bg: "#ffffff", radius: 12, padding: "20px", use: "Pledge-tier reward, selected 1.5px #fd5744" }
+    badge-category: { type: badge, bg: "#f0f0f0", fg: "#545454", radius: 9999, padding: "6px 12px", font: "13/700", use: "Category filter chip", active: "bg #000000, text #ffffff" }
+    badge-status: { type: badge, bg: "#fd5744", fg: "#ffffff", radius: 4, padding: "3px 6px", font: "11/700", use: "Time-sensitive project flag" }
+    badge-new: { type: badge, bg: "#ffffff", fg: "#000000", radius: 4, padding: "3px 6px", font: "11/700", use: "NEW / editor flag, 1px border #000000" }
+    tab-bottom: { type: tab, fg: "#9e9e9e", use: "Bottom tab bar", active: "label #000000" }
 ---
 
 # Design System Inspiration of Tumblbug (텀블벅)

package/web/references/tving/DESIGN.md

@@ -11,6 +11,46 @@ logo:
   slug: "https://www.google.com/s2/favicons?domain=tving.com&sz=256"
 verified: "2026-05-15"
 omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    primary: "#ff153c"
+    canvas: "#000000"
+    on-primary: "#ffffff"
+    surface: "#2e2e2e"
+    surface-modal: "#111111"
+    surface-overlay: "#262626"
+    text-secondary: "#b3b3b3"
+    text-tertiary: "#a3a3a3"
+    disabled-bright: "#d9d9d9"
+    muted: "#6e6e6e"
+    disabled-deep: "#4f4f4f"
+    cate-home: "#ff1f45"
+    cate-live: "#ff584a"
+    cate-clip: "#fd8163"
+    cate-vod: "#387dff"
+    cate-movie: "#7d57fc"
+    cate-ad: "#fcc800"
+  typography:
+    family: { sans: "Pretendard", mono: "Pretendard" }
+    hero:         { size: 43, weight: 700, use: "Hero headline, onboarding h2" }
+    cta:          { size: 19, weight: 700, use: "Primary CTA label" }
+    secondary-nav: { size: 16, weight: 400, use: "Secondary nav" }
+    footer:       { size: 16, weight: 400, use: "Footer link" }
+    nav-cta:      { size: 14, weight: 700, use: "Nav CTA 티빙 시작하기" }
+    body:         { size: 12, weight: 400, use: "Body baseline" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48 }
+  rounded: { sm: 3, md: 8, lg: 16, full: 9999 }
+  shadow:
+    none: "none"
+  components_harvested: true
+  components:
+    button-cta-hero: { type: button, bg: "#ff153c", fg: "#ffffff", radius: 12, font: "19/700", use: "Primary hero CTA" }
+    button-cta-nav: { type: button, bg: "#ff153c", fg: "#ffffff", radius: 8, font: "14/700", use: "Header inline CTA 티빙 시작하기" }
+    card-poster: { type: card, radius: 16, use: "Poster card, top-corners-only radius, art bleeds bottom edge" }
+    chip-meta: { type: badge, radius: 3, use: "Fine chip / tag / meta-label" }
+    avatar: { type: avatar, radius: 9999, use: "Avatar / circular icon" }
 ---
 
 # Design System Inspiration of TVING (티빙)

package/web/references/uber/DESIGN.md

@@ -15,6 +15,42 @@ ds:
   url: "https://baseweb.design"
   type: system
   description: Uber's React implementation of Base — a living component system.
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    primary: "#000000"
+    canvas: "#ffffff"
+    hover-gray: "#e2e2e2"
+    hover-light: "#f3f3f3"
+    chip-gray: "#efefef"
+    body: "#4b4b4b"
+    muted: "#afafaf"
+    link: "#0000ee"
+    on-primary: "#ffffff"
+  typography:
+    family: { sans: "UberMove", mono: "system-ui" }
+    display:    { size: 52, weight: 700, lineHeight: 1.23, use: "Hero, billboard presence" }
+    section:    { size: 36, weight: 700, lineHeight: 1.22, use: "Major section anchors" }
+    card-title: { size: 32, weight: 700, lineHeight: 1.25, use: "Card and feature headings" }
+    subheading: { size: 24, weight: 700, lineHeight: 1.33, use: "Secondary section headers" }
+    nav:        { size: 18, weight: 500, lineHeight: 1.33, use: "Navigation links, prominent UI" }
+    body:       { size: 16, weight: 400, lineHeight: 1.50, use: "Body text, button labels" }
+    caption:    { size: 14, weight: 400, lineHeight: 1.43, use: "Metadata, small links" }
+    micro:      { size: 12, weight: 400, lineHeight: 1.67, use: "Fine print, legal" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 }
+  rounded: { sm: 4, md: 8, lg: 12, full: 9999 }
+  shadow:
+    light: "rgba(0,0,0,0.12) 0px 4px 16px 0px"
+    medium: "rgba(0,0,0,0.16) 0px 2px 8px 0px"
+  components:
+    button-primary: { type: button, bg: "#000000", fg: "#ffffff", radius: 9999, padding: "10px 12px", font: "16px/500", use: "Primary CTA — bold high-contrast pill" }
+    button-secondary: { type: button, bg: "#ffffff", fg: "#000000", radius: 9999, padding: "10px 12px", use: "Secondary action; hover #e2e2e2" }
+    chip-filter: { type: tab, bg: "#efefef", fg: "#000000", radius: 9999, padding: "14px 16px", use: "Nav chips / category selectors", active: "black bg #000000 with white #ffffff text" }
+    button-floating: { type: button, bg: "#ffffff", fg: "#000000", radius: 9999, padding: "14px", use: "Map controls, FAB; shadow rgba(0,0,0,0.16)" }
+    card: { type: card, bg: "#ffffff", radius: 8, use: "Content card defined by shadow not stroke" }
+    input: { type: input, bg: "#ffffff", fg: "#000000", radius: 8, use: "Form input, 1px solid #000000 border" }
+  components_harvested: true
 ---
 
 # Design System Inspiration of Uber