oh-my-design-cli 1.6.6 → 1.7.0

package/web/references/cohere/DESIGN.md

@@ -16,6 +16,54 @@ ds:
   type: brand
   description: Cohere's press kit with logos, symbols, and media resources.
   og_image: "https://cdn.sanity.io/images/rjtqmwfu/web3-prod/0750efbc3db33b1a67bc77575525b076f0137f26-1200x630.jpg?w=1200&h=630"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-08"
+  note: "primary_color #39594d is the brand green token; live UI is near-monochrome — primary interactive accent is Interaction Blue #1863dc"
+  colors:
+    primary: "#1863dc"
+    primary-hover: "#1863dc"
+    brand: "#39594d"
+    canvas: "#ffffff"
+    foreground: "#000000"
+    muted: "#93939f"
+    on-primary: "#ffffff"
+    near-black: "#212121"
+    deep-dark: "#17171c"
+    ring-blue: "#4c6ee6"
+    focus-purple: "#9b60aa"
+    snow: "#fafafa"
+    surface-alt: "#f2f2f2"
+    hairline: "#f2f2f2"
+    border-cool: "#d9d9dd"
+    border-light: "#e5e7eb"
+  typography:
+    family: { display: "CohereText", sans: "Unica77 Cohere Web", mono: "CohereMono" }
+    display-hero:    { size: 72, weight: 400, lineHeight: 1.00, tracking: -1.44, use: "Hero, serif authority" }
+    display-secondary: { size: 60, weight: 400, lineHeight: 1.00, tracking: -1.2, use: "Large section headings" }
+    section:         { size: 48, weight: 400, lineHeight: 1.20, tracking: -0.48, use: "Feature section titles" }
+    subheading:      { size: 32, weight: 400, lineHeight: 1.20, tracking: -0.32, use: "Card headings, feature names" }
+    feature-title:   { size: 24, weight: 400, lineHeight: 1.30, use: "Smaller section titles" }
+    body-lg:         { size: 18, weight: 400, lineHeight: 1.40, use: "Intro paragraphs" }
+    body:            { size: 16, weight: 400, lineHeight: 1.50, use: "Standard body, button text" }
+    button-medium:   { size: 14, weight: 500, lineHeight: 1.71, use: "Smaller buttons, emphasized labels" }
+    caption:         { size: 14, weight: 400, lineHeight: 1.40, use: "Metadata, descriptions" }
+    uppercase-label: { size: 14, weight: 400, lineHeight: 1.40, tracking: 0.28, use: "Uppercase section labels" }
+    small:           { size: 12, weight: 400, lineHeight: 1.40, use: "Smallest text, footer links" }
+    code-micro:      { size: 8, weight: 400, lineHeight: 1.40, tracking: 0.16, use: "Tiny uppercase code labels" }
+  spacing: { xs: 4, sm: 8, md: 16, base: 16, lg: 24, xl: 32, xxl: 40, section: 60 }
+  rounded: { sm: 4, md: 8, lg: 16, xl: 20, signature: 22, full: 9999 }
+  shadow:
+    soft: "none — depth via background contrast and cool-gray borders"
+  components_harvested: true
+  components:
+    button-ghost: { type: button, fg: "#000000", use: "Transparent fill; hover text shifts to #1863dc; focus 2px solid #1863dc outline — the base button style" }
+    button-dark-solid: { type: button, bg: "#000000", fg: "#ffffff", use: "Dark fill, pill or standard radius — CTA on light surfaces" }
+    button-outlined: { type: button, use: "Border-based containment for secondary actions" }
+    card: { type: card, bg: "#ffffff", radius: 22, use: "Signature radius, 1px solid #f2f2f2 border, shadow-free" }
+    input: { type: input, use: "Focus border #9b60aa 1px solid; focus outline 2px solid #1863dc" }
+    uppercase-code-tag: { type: badge, use: "CohereMono uppercase with positive letter-spacing as section markers" }
+    purple-hero-band: { type: card, radius: 22, use: "Full-width deep purple section housing product screenshots" }
 ---
 
 # Design System Inspiration of Cohere

package/web/references/coinbase/DESIGN.md

@@ -10,6 +10,67 @@ logo:
   slug: coinbase
 verified: "2026-05-15"
 omd: "0.1"
+tokens:
+  source: design-system
+  extracted: "2026-06-08"
+  components_harvested: true
+  colors:
+    primary: "#0052ff"
+    primary-hover: "#578bfa"
+    brand: "#0052ff"
+    canvas: "#ffffff"
+    foreground: "#0a0b0d"
+    muted: "#5b616e"
+    on-primary: "#ffffff"
+    surface: "#eef0f3"
+    surface-dark: "#282b31"
+    dark-section: "#0a0b0d"
+    link: "#0667d0"
+  typography:
+    family: { sans: "CoinbaseSans", display: "CoinbaseDisplay", body: "CoinbaseText", icon: "CoinbaseIcons" }
+    display-hero:      { size: 80, weight: 400, lineHeight: 1.00, use: "Hero headlines, maximum impact" }
+    display-secondary: { size: 64, weight: 400, lineHeight: 1.00, use: "Sub-hero headlines" }
+    display-third:     { size: 52, weight: 400, lineHeight: 1.00, use: "Third-tier display" }
+    section-heading:   { size: 36, weight: 400, lineHeight: 1.11, use: "Feature section titles" }
+    card-title:        { size: 32, weight: 400, lineHeight: 1.13, use: "Card headings" }
+    feature-title:     { size: 18, weight: 600, lineHeight: 1.33, use: "Feature emphasis" }
+    body-bold:         { size: 16, weight: 700, lineHeight: 1.50, use: "Strong body" }
+    body-semibold:     { size: 16, weight: 600, lineHeight: 1.25, use: "Buttons, nav" }
+    body:              { size: 18, weight: 400, lineHeight: 1.56, use: "Standard reading" }
+    body-small:        { size: 16, weight: 400, lineHeight: 1.50, use: "Secondary reading" }
+    button:            { size: 16, weight: 600, lineHeight: 1.20, tracking: 0.16, use: "Button labels" }
+    caption:           { size: 14, weight: 600, lineHeight: 1.50, use: "Metadata" }
+    small:             { size: 13, weight: 600, lineHeight: 1.23, use: "Tags" }
+  spacing: { xs: 4, sm: 8, md: 16, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 }
+  rounded: { sm: 4, md: 8, lg: 16, xl: 40, pill: 56, full: 100000 }
+  shadow:
+    soft: "minimal — depth from dark/light section contrast, not box-shadow"
+  components:
+    button-primary:      { type: button, bg: "#0052ff", fg: "#ffffff", radius: "100000px", border: "1px solid #0052ff", font: "16px / 600", hover: "bg #578bfa", focus: "2px solid black outline", states: "loading hides label + ProgressCircle · sizes Compact/Default/Block", use: "High-emphasis primary CTA, one per screen" }
+    button-secondary:    { type: button, bg: "#eef0f3", fg: "#0a0b0d", radius: "100000px", border: "1px solid #eef0f3", font: "16px / 600", use: "Medium-emphasis equal-weight actions" }
+    button-tertiary:     { type: button, bg: "#eef0f3", fg: "#0a0b0d", radius: "100000px", states: "transparent-until-interaction", use: "Low-emphasis action" }
+    button-inverse:      { type: button, bg: "#282b31", fg: "#ffffff", radius: "100000px", use: "High contrast on dark sections" }
+    button-negative:     { type: button, fg: "#ffffff", radius: "100000px", use: "Destructive only, used sparingly" }
+    button-transparent:  { type: button, bg: "transparent", fg: "#0a0b0d", radius: "100000px", states: "container visible only on hover/press · sizes Compact/Default/Block · startIcon+endIcon slots", use: "Transparent modifier on any variant" }
+    button-blue-bordered: { type: button, bg: "transparent", fg: "#0052ff", radius: "100000px", border: "1px solid #0052ff", font: "16px / 600", use: "Secondary CTA pairing" }
+    icon-button:         { type: button, bg: "transparent", radius: "100000px", height: "56px", use: "Icon-only action, 56px round hit-target" }
+    chip:                { type: badge, bg: "#eef0f3", fg: "#0a0b0d", radius: "100000px", states: "selected bg #0052ff", use: "Pill selectable token" }
+    nav-tab-chip:        { type: tab, fg: "#0667d0", radius: "16px", padding: "4px 16px", font: "14px / 400", use: "Header category chip" }
+    text-input:          { type: input, bg: "#ffffff", fg: "#0a0b0d", border: "1px solid rgba(91,97,110,0.2)", radius: "8px", height: "56px", padding: "16px", font: "16px / 400", states: "label outside/inside-float · negative sets aria-invalid + 'Error: …' helper · positive validated · read-only secondary bg · disabled distinct", use: "Bordered text field" }
+    search-input:        { type: input, bg: "transparent", fg: "#0a0b0d", border: "none", font: "16px / 400", states: "borderless inline · leading search glyph", use: "Inline search field" }
+    switch:              { type: toggle, states: "control #0052ff when checked · optional thumb elevation", use: "On/off toggle" }
+    checkbox-radio:      { type: toggle, active: "selected fill #0052ff", states: "Cell + Group wrappers", use: "Checkbox and Radio selection" }
+    segmented-control:   { type: tab, bg: "#eef0f3", active: "active segment #0052ff", radius: "100000px", use: "Time-range and view switches" }
+    card:                { type: card, bg: "#ffffff", border: "1px solid rgba(91,97,110,0.2)", radius: "8px–40px", shadow: "none — depth from section contrast", states: "ContentCard Header/Body/Footer · DataCard/MediaCard/NudgeCard/UpsellCard", use: "Content container family" }
+    data-table:          { type: card, border: "1px solid rgba(91,97,110,0.2)", states: "desktop-only (Lists View on mobile) · variants default/graph/ruled · required header row · sortable · sticky header · TableCellFallback skeleton", use: "Tabular data, desktop only" }
+    list-cell:           { type: listItem, fg: "#0a0b0d", states: "leading CellMedia + title/subtitle", use: "Mobile substitute for Table, asset rows" }
+    modal:               { type: dialog, bg: "#ffffff", shadow: "scrim overlay + FocusTrap", states: "visible + onRequestClose · restoreFocusOnUnmount=false for chains · FullscreenModal/Tray/Alert/FullscreenAlert siblings", use: "Header/Body/Footer modal" }
+    toast:               { type: toast, states: "bottom-anchored · auto-dismiss 5s base + close button · bgPositive/bgNegative/bgWarning · role=alert · persists on hover", use: "Transient status message" }
+    tooltip:             { type: card, states: "Tooltip + PopoverPanel + Coachmark", use: "Contextual hints and first-run tours" }
+    banner:              { type: card, border: "global avoids custom radius — flush with status bar", states: "styles global/inline/contextual · variants informational/warning/error/promotional · startIcon+title+children+primaryAction+secondaryAction+showDismiss", use: "Feedback and status messaging" }
+    progress:            { type: card, fg: "#0052ff", states: "ProgressCircle determinate 0–100% / indeterminate fgMuted arc · stroke thin 2px/normal 4px/semiheavy 8px/heavy 12px · ProgressBar + Spinner", use: "Determinate/indeterminate progress" }
+    sparkline:           { type: card, fg: "#0052ff", states: "Sparkline/LineChart/AreaChart/BarChart/PercentageBarChart · live price ticks flash green/red (disabled under reduced-motion)", use: "Inline price/chart visualization" }
+    dark-section:        { type: card, bg: "#0a0b0d", fg: "#ffffff", active: "accent links #0052ff", use: "Dark feature section" }
 ---
 
 # Design System Inspiration of Coinbase
@@ -124,9 +185,82 @@ Minimal shadow system — depth from color contrast between dark/light sections.
 - Don't use the blue decoratively — it's functional only
 - Don't use sharp corners on CTAs — 56px minimum
 
-## 8. Responsive Behavior
+## 8. Component Patterns
 
-Breakpoints: 400px, 576px, 640px, 768px, 896px, 1280px, 1440px, 1600px
+Coinbase open-sourced its design system — **Coinbase Design System (CDS)**, internally codenamed Cedar — at `cds.coinbase.com` and `github.com/coinbase/cds`. It is a cross-platform React / React Native library of 100+ components. The patterns below combine CDS-documented semantics with values measured live from `coinbase.com` (playwright `getComputedStyle`, 2026-06). Color roles map to CDS semantic tokens: `fgPrimary`/`bgPrimary` = Blue70 (`#0052ff`), `fgMuted`/`line` = Gray60 (the `#5b616e` muted role at 20% opacity), `fgInverse`/`bg` = Gray0/white, foreground text = `#0a0b0d`.
+
+### Actions
+
+**button-primary** — CDS `Button` `variant="primary"`. High-emphasis, limit one per screen. Coinbase Blue (`#0052ff`) fill, white label, `16px·600` CoinbaseSans, `+0.16px` tracking. Pill geometry: measured `100000px` radius on full-pill CTAs, `16px` on compact nav chips. Hover lightens to `#578bfa`; focus `2px solid black` outline. Sizes: Compact / Default / Block (fills width). Slots: `startIcon`, `endIcon`. Loading state hides the label and shows an indeterminate ProgressCircle.
+
+**button-secondary** — `variant="secondary"`, medium emphasis for equal-weight actions. Cool-gray (`#eef0f3`) fill, `#0a0b0d` label, `1px solid` matching border.
+
+**button-tertiary / inverse / negative** — Tertiary: low emphasis, muted background, transparent-until-interaction. Inverse: high contrast for dark sections — `#282b31` fill, white label. Negative: destructive-only, used sparingly.
+
+**button-transparent** — modifier on any variant; the container surface only becomes visible on hover/press.
+
+**button-blue-bordered** — transparent fill, `1px solid #0052ff` border, `#0052ff` label. Secondary CTA pairing.
+
+**icon-button** — icon-only `IconButton`. Measured `56px` round hit-target on the homepage utility row, transparent fill.
+
+### Navigation
+
+**top-nav** — sticky `header` containing brand wordmark, category chips, search, and Sign in / Sign up CTAs. Nav category chip measured `16px` radius, `4px 16px` padding, `14px` CoinbaseSans; link text in Link Blue (`#0667d0`).
+
+**tabs** — CDS `Tabs` (the current component; `TabNavigation` is deprecated). Primary and secondary variants, active tab tracked by `value`, underline `TabIndicator`, full W3C tab keyboard pattern with arrow-key wrap-around and overflow arrows.
+
+**segmented-tabs / SegmentedControl** — pill track, `#eef0f3` track surface with `#0052ff` active segment. Used for time-range and view switches.
+
+**stepper / pagination** — `Stepper` for multi-step flows (mirrors the Submitted → Confirming → Confirmed transaction pattern), `Pagination` for paged tables.
+
+### Forms
+
+**text-input** — CDS `TextInput`. Bordered by default (`1px solid` at the `#5b616e`-derived line color, 20% opacity); measured `56px` height, `16px` padding, CoinbaseSans `16px`. Label `outside` (above) or `inside` (floats when unfocused). `variant="negative"` auto-sets `aria-invalid="true"` and expects `"Error: …"` helper text; `variant="positive"` for validated values. Read-only inputs take a secondary background and remain focusable; disabled inputs are visually distinct.
+
+**search-input** — CDS `SearchInput`, borderless inline with a leading search glyph, `#0a0b0d` text.
+
+**switch** — CDS `Switch` on/off toggle. `controlColor` resolves to `#0052ff` when checked; optional thumb elevation/shadow.
+
+**checkbox / radio** — `Checkbox` and `Radio` with `Cell` and `Group` wrappers; selected state fills Coinbase Blue (`#0052ff`).
+
+### Data display
+
+**card** — CDS `ContentCard` family (`Header` / `Body` / `Footer`), plus `DataCard`, `MediaCard`, `NudgeCard`, `UpsellCard`. Radius `8px–40px`, `1px solid rgba(91,97,110,0.2)` border, depth from section contrast rather than box-shadow.
+
+**data-table** — CDS `Table`, explicitly desktop-only (mobile falls back to Lists View). Variants: default / graph (grid lines) / ruled (horizontal lines). Requires a header row; supports sortable headers, row/column spans, sticky header, and `TableCellFallback` skeleton rows.
+
+**list-cell** — `ListCell` / `ContentCell` with leading `CellMedia` (asset logo) + title/subtitle; the mobile substitute for tables and the basis of asset rows.
+
+**sparkline / charts** — `Sparkline`, `LineChart`, `AreaChart`, `BarChart`, `PercentageBarChart` with `XAxis`/`YAxis`/`Scrubber`. Series accent Coinbase Blue (`#0052ff`); live price ticks flash green/red on the cell (disabled under `prefers-reduced-motion`).
+
+### Overlays
+
+**modal** — CDS `Modal` with `ModalHeader` / `ModalBody` / `ModalFooter`. Scrim overlay + `FocusTrap`; `visible` + `onRequestClose` control; `restoreFocusOnUnmount={false}` for chained modals. Siblings: `FullscreenModal`, `Tray` (bottom sheet), `Alert`, `FullscreenAlert`.
+
+**toast** — CDS `Toast`, bottom-anchored (`bottomOffset` clears bottom nav). Auto-dismiss = 5s base + content/action adjustments, plus a default close button; variants `bgPositive` / `bgNegative` / `bgWarning` surge the background; `role="alert"`, persists on hover.
+
+**tooltip / popover** — `Tooltip`, `PopoverPanel`, and `Coachmark` for contextual hints and first-run tours.
+
+### Feedback & status
+
+**banner** — CDS `Banner` in `global` / `inline` / `contextual` styles, variants informational / warning / error / promotional. Slots: `startIcon`, `title`, `children`, `primaryAction`, `secondaryAction`, optional `showDismiss`. Global banners avoid custom radius to stay flush with the status bar.
+
+**progress** — `ProgressCircle` (determinate 0–100% with % overlay, or indeterminate `fgMuted` arc) with stroke weights thin `2px` / normal `4px` / semiheavy `8px` / heavy `12px`; plus `ProgressBar` (fixed and floating label variants) and `Spinner`.
+
+## Responsive Behavior
+
+| Breakpoint | px | Notes |
+|---|---|---|
+| xs | 400 | Smallest phone |
+| sm | 576 | Phone landscape |
+| md | 640 | Large phone / small tablet |
+| lg | 768 | Tablet |
+| xl | 896 | Tablet landscape |
+| xxl | 1280 | Desktop |
+| 3xl | 1440 | Wide desktop |
+| 4xl | 1600 | Max content width |
+
+Measured live viewport 1440px. `Table` is desktop-only and swaps to `ListCell` / Lists View below tablet; `Tray` (bottom sheet) replaces `Modal` on small screens.
 
 ## 9. Agent Prompt Guide
 
@@ -212,8 +346,8 @@ Easings: standard cubic-bezier; no bounce. **Live price updates** flash green/re
 
 ---
 
-**Verified:** 2026-05-08 (B2 loop)
-**Tier 1 sources:** coinbase.com (live DOM via playwright — round 56px icon buttons; Sign up `#0052ff` 56px / 16px·600 / 47-60px height)
-**Tier 2 sources:** styles.refero.design / getdesign.md — no record.
+**Verified:** 2026-06-08 (component harvest — TIER 1)
+**Tier 1 sources:** coinbase.com (live DOM via playwright across /, /explore, /about — round 56px icon buttons; nav chip 16px radius 4px·16px; input 56px·16px pad; pill 100000px; link `#0667d0`; surface `#eef0f3`). Coinbase Design System (CDS / "Cedar") — cds.coinbase.com + github.com/coinbase/cds: component inventory (100+ across Layout/Inputs/Cards/Data Display/Feedback/Overlay/Navigation/Charts) and per-component specs (Button variants/sizes/states, TextInput, Banner, Modal, Toast, ProgressCircle, Table, Switch).
+**Tier 2 sources:** styles.refero.design — no record. getdesign.md/coinbase — cross-checked.
 **Tier 1 (Philosophy):** coinbase.com homepage; Brian Armstrong public talks; SEC public filings.
 **Style ref:** `stripe`. **Conflicts unresolved:** none.

package/web/references/coinone/DESIGN.md

@@ -15,6 +15,45 @@ ds:
   url: "https://coinonecorp.com/company/brand"
   type: brand
   description: "Official BI/brand guideline (v4.0) — Coinone Blue color system, signature logo lockups, clear-space rules."
+tokens:
+  source: prose-derived
+  extracted: "2026-06-08"
+  note: "primary = live filled-CTA blue (#0B59D5); brand = BI 'Coinone Blue' identity (#006BD6) — applied shades of the same blue, not a conflict"
+  colors:
+    primary: "#0B59D5"
+    primary-hover: "#194386"
+    brand: "#006BD6"
+    point: "#0090FF"
+    canvas: "#FFFFFF"
+    foreground: "#040505"
+    muted: "#6B7684"
+    on-primary: "#FFFFFF"
+    accent-outline: "#1772F8"
+    body: "#17181B"
+    hairline: "#DDE4EB"
+    surface-tint: "#EBF0F5"
+    skeleton: "#EEEFF0"
+    disabled: "#CFD0D3"
+    navy: "#062554"
+  typography:
+    family: { sans: "Pretendard", mono: "SFMono-Regular" }
+    hero:        { size: 32, weight: 700, lineHeight: 1.2, use: "Hero / section titles, near-black #040505" }
+    control:     { size: 15, weight: 700, lineHeight: 1.0, use: "Primary control / button label" }
+    body:        { size: 14, weight: 400, lineHeight: 1.5, use: "Body & list rows (13-15px / 400-500)" }
+    figure:      { size: 14, weight: 600, lineHeight: 1.3, use: "Trading numerals — dense, right-aligned, weighted when changing" }
+    micro:       { size: 12, weight: 400, lineHeight: 1.4, use: "Micro-labels & helper, muted #6B7684" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 8, lg: 18, xl: 32, xxl: 48, section: 64 }
+  rounded: { sm: 3, chip: 6, md: 8, lg: 10, full: 9999 }
+  shadow:
+    soft: "rgba(0,0,0,0.05) 0px 1px 2px 0px"
+  components_harvested: true
+  components:
+    button-primary: { type: button, bg: "#0B59D5", fg: "#FFFFFF", radius: 8, font: "15/700", use: "Primary CTA, 46px height — one per view" }
+    button-secondary: { type: button, bg: "#FFFFFF", fg: "#040505", radius: 8, font: "15/500", use: "White fill, 1px #DDE4EB border" }
+    accent-outline: { type: button, fg: "#1772F8", radius: 3, use: "Transparent fill, 1px #1772F8 border — signup/inline emphasis" }
+    filter-chip: { type: badge, bg: "#FFFFFF", radius: 6, use: "1px #DDE4EB border, 32px height; active = 1px #040505 border + 700" }
+    store-button: { type: button, bg: "#EBF0F5", radius: 10, font: "13/700", use: "Light or dark (#040505) fill, 48px height" }
+    icon-button: { type: button, fg: "#040505", radius: 9999, padding: "5px", use: "Circular semi-transparent fill" }
 ---
 
 # Coinone

package/web/references/composio/DESIGN.md

@@ -10,6 +10,52 @@ logo:
   slug: composiohq
 verified: "2026-05-15"
 omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-08"
+  note: "primary_color field (#6366f1) is an indigo approximation; the live DS brand is Composio Cobalt #0007cd. Dark-canvas system: many roles use white-opacity (rgba) borders/text — only stated 6-digit hexes promoted to colors; opacity variants live in shadow/note context."
+  colors:
+    primary: "#0007cd"
+    brand: "#0007cd"
+    accent-cyan: "#00ffff"
+    accent-signal: "#0089ff"
+    accent-ocean: "#0096ff"
+    canvas: "#0f0f0f"
+    surface: "#000000"
+    hairline: "#2c2c2c"
+    foreground: "#ffffff"
+    muted: "#444444"
+    on-primary: "#ffffff"
+    light-border: "#e0e0e0"
+  typography:
+    family: { sans: "abcDiatype", mono: "JetBrains Mono" }
+    display-hero:   { size: 64, weight: 400, lineHeight: 0.87, use: "Massive compressed hero headings" }
+    section:        { size: 48, weight: 400, lineHeight: 1.00, use: "Major feature section titles" }
+    subheading-lg:  { size: 40, weight: 400, lineHeight: 1.00, use: "Secondary section markers" }
+    subheading:     { size: 28, weight: 400, lineHeight: 1.20, use: "Card titles, feature names" }
+    card-title:     { size: 24, weight: 500, lineHeight: 1.20, use: "Medium-emphasis card headings" }
+    feature-label:  { size: 20, weight: 500, lineHeight: 1.20, use: "Smaller card titles, labels" }
+    body-lg:        { size: 18, weight: 400, lineHeight: 1.20, use: "Intro paragraphs" }
+    body:           { size: 16, weight: 400, lineHeight: 1.50, use: "Body text, nav links, buttons" }
+    body-sm:        { size: 15, weight: 400, lineHeight: 1.63, use: "Longer-form body text" }
+    caption:        { size: 14, weight: 400, lineHeight: 1.63, use: "Descriptions, metadata" }
+    label:          { size: 13, weight: 500, lineHeight: 1.50, use: "UI labels, badges" }
+    overline:       { size: 12, weight: 500, lineHeight: 1.00, tracking: 0.3, use: "Uppercase overline labels" }
+    code:           { size: 16, weight: 400, lineHeight: 1.50, tracking: -0.32, use: "Inline code, terminal output (JetBrains Mono)" }
+    code-sm:        { size: 14, weight: 400, lineHeight: 1.50, tracking: -0.28, use: "Code snippets, technical labels (JetBrains Mono)" }
+  spacing: { xs: 4, sm: 8, md: 16, base: 16, lg: 24, xl: 32, xxl: 40, section: 80 }
+  rounded: { sm: 2, md: 4, lg: 37, full: 9999 }
+  shadow:
+    brutalist: "rgba(0,0,0,0.15) 4px 4px 0px 0px"
+    floating: "rgba(0,0,0,0.5) 0px 8px 32px"
+    glow-cyan: "rgba(0,255,255,0.12) radial halo"
+  components_harvested: true
+  components:
+    button-primary: { type: button, bg: "#ffffff", fg: "#0f0f0f", radius: 4, padding: "8px 24px", use: "White fill, near-black text, no border" }
+    button-cyan: { type: button, radius: 4, use: "Electric cyan 12% bg, 1px ocean blue #0096ff border, glow-from-within" }
+    button-ghost: { type: button, radius: 4, padding: "10px", use: "Transparent fill, 1px signal blue #0089ff or charcoal #2c2c2c border" }
+    card: { type: card, bg: "#000000", radius: 4, use: "Pure black surface, white-opacity 4-12% border, optional brutalist shadow" }
+    code-block: { type: card, bg: "#000000", radius: 4, use: "JetBrains Mono, white-opacity 10% border, syntax-highlighted" }
 ---
 
 # Design System Inspiration of Composio

package/web/references/cookpad/DESIGN.md

@@ -10,6 +10,43 @@ logo:
   slug: "https://www.google.com/s2/favicons?domain=cookpad.com&sz=128"
 verified: "2026-05-19"
 omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    primary: "#FF9933"
+    brand: "#FF9933"
+    canvas: "#F8F6F2"
+    surface: "#FFFFFF"
+    cream-tint: "#FEF9EE"
+    warm-gray: "#ECEBE9"
+    foreground: "#0F0F0F"
+    body: "#4A4A4A"
+    muted: "#4A4A4A"
+    on-primary: "#FFFFFF"
+    accent-yellow: "#E9B83F"
+    pale-yellow: "#FAF5D7"
+  typography:
+    family: { sans: "Noto Sans" }
+    section:  { size: 22, weight: 700, lineHeight: 1.3, use: "Section headings" }
+    title:    { size: 16, weight: 600, lineHeight: 1.4, use: "Recipe card title" }
+    button:   { size: 16, weight: 600, lineHeight: 1.4, use: "Primary button label" }
+    body:     { size: 16, weight: 400, lineHeight: 1.5, use: "Body / recipe meta / category label" }
+  spacing: { xs: 4, sm: 8, md: 16, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 }
+  rounded: { sm: 8, md: 8, lg: 8, full: 9999 }
+  shadow:
+    soft: "none — depth via warm cream background separating white cards"
+  components_harvested: true
+  components:
+    button-primary: { type: button, bg: "#FF9933", fg: "#FFFFFF", radius: 8, padding: "8px 24px", font: "16/600", use: "Main action — search, post recipe, sign up" }
+    button-secondary: { type: button, bg: "#FFFFFF", fg: "#FF9933", radius: 8, use: "Outline, 1px #FF9933 border — lower-emphasis beside primary" }
+    button-text: { type: button, fg: "#4A4A4A", use: "Transparent tertiary / navigation action" }
+    button-disabled: { type: button, bg: "#ECEBE9", fg: "#4A4A4A", use: "Unavailable action" }
+    category-tile: { type: button, fg: "#0F0F0F", radius: 8, padding: "16px", font: "16/400", use: "Ingredient/category navigation — large tappable icon + label" }
+    recipe-card: { type: card, bg: "#FFFFFF", fg: "#0F0F0F", radius: 8, use: "Food photo top, title + meta below, floating on cream page" }
+    promoted-card: { type: card, bg: "#FEF9EE", radius: 8, use: "Featured / promoted recipe region" }
+    search-input: { type: input, bg: "#FFFFFF", fg: "#0F0F0F", radius: 8, padding: "12px 16px", use: "Central recipe search; focus ring in #FF9933" }
+    rating-badge: { type: badge, bg: "#FAF5D7", fg: "#4A4A4A", radius: 8, use: "Ratings, つくれぽ counts, promoted labels" }
 ---
 
 # Design System Inspiration of Cookpad

package/web/references/coupang/DESIGN.md

@@ -6,8 +6,8 @@ category: ecommerce
 homepage: "https://www.coupang.com"
 primary_color: "#000000"
 logo:
-  type: simpleicons
-  slug: coupang
+  type: favicon
+  slug: "https://www.coupang.com/favicon.ico"
 verified: "2026-05-15"
 omd: "0.1"
 ds:
@@ -16,6 +16,61 @@ ds:
   type: brand
   description: Coupang's official media-asset brand guidelines — logo usage, sizing, and attribution rules.
   og_image: "https://news.coupang.com/wp-content/uploads/2023/01/Coupang_2_1609.jpg"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    primary: "#E94B22"
+    primary-hover: "#C73D17"
+    brand: "#E94B22"
+    canvas: "#ffffff"
+    surface: "#ffffff"
+    foreground: "#111111"
+    body: "#333D4B"
+    muted: "#6B7684"
+    on-primary: "#ffffff"
+    red-tint: "#FFEEE8"
+    wow-magenta: "#A50034"
+    yellow: "#FAC000"
+    green: "#80BC27"
+    blue: "#3DACDC"
+    brown: "#894F24"
+    critical: "#D60404"
+    success: "#03AC0E"
+    link: "#0074E9"
+    surface-alt: "#F7F8FA"
+    surface-muted: "#F2F4F6"
+    hairline: "#E5E8EB"
+    inert: "#B0B8C1"
+  typography:
+    family: { sans: "Pretendard Variable" }
+    display:    { size: 28, weight: 700, lineHeight: 1.29, use: "Hero promo banners, splash takeovers" }
+    headline:   { size: 22, weight: 700, lineHeight: 1.36, use: "Section headers" }
+    title:      { size: 16, weight: 600, lineHeight: 1.38, use: "Product name (truncated 2 lines)" }
+    body:       { size: 14, weight: 400, lineHeight: 1.43, use: "Standard reading, descriptions" }
+    caption:    { size: 12, weight: 400, lineHeight: 1.33, use: "Timestamps, fine print" }
+    price:      { size: 18, weight: 700, lineHeight: 1.33, use: "Primary product price — tabular numerals" }
+    discount:   { size: 14, weight: 700, lineHeight: 1.29, use: "Discount % red label" }
+    badge:      { size: 11, weight: 700, lineHeight: 1.27, use: "로켓배송, BEST badge labels" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 20, xl: 32, xxl: 48, section: 64 }
+  rounded: { sm: 4, md: 4, lg: 8, full: 9999 }
+  shadow:
+    soft: "rgba(17,17,17,0.06) 0px 2px 8px"
+  components_harvested: true
+  components:
+    button-primary: { type: button, bg: "#E94B22", fg: "#ffffff", radius: 4, padding: "12px 20px", font: "16/700", use: "Primary checkout CTA — 구매하기, 장바구니 담기; pressed #C73D17" }
+    button-secondary: { type: button, bg: "#ffffff", fg: "#E94B22", radius: 4, use: "Outlined, 1px #E94B22 border; pressed #FFEEE8 fill" }
+    button-tertiary: { type: button, bg: "#F2F4F6", fg: "#333D4B", radius: 4, use: "Neutral filter toggle, 전체보기, low-emphasis" }
+    button-wow: { type: button, bg: "#A50034", fg: "#ffffff", radius: 4, use: "WOW membership upsell — distinct from primary red" }
+    button-critical: { type: button, bg: "#ffffff", fg: "#D60404", radius: 4, use: "Destructive — 주문 취소, 삭제; 1px #D60404 border" }
+    product-card: { type: card, bg: "#ffffff", radius: 4, padding: "12px", use: "Atomic unit — 1:1 thumbnail, badge, name, rating, price block, delivery promise; hover border #111111" }
+    promo-card: { type: card, bg: "#FFEEE8", radius: 8, padding: "16px", use: "Brand-tinted promo container" }
+    filter-chip: { type: badge, bg: "#ffffff", radius: 4, font: "13/500", use: "32px height, 1px #E5E8EB border; selected = #111111 fill + white text" }
+    rocket-badge: { type: badge, bg: "#ffffff", fg: "#E94B22", font: "11/700", use: "로켓배송 — icon + label, no border/radius" }
+    discount-badge: { type: badge, fg: "#E94B22", font: "14/700", use: "Standalone red percentage; or #E94B22 fill pill for 특가/BEST" }
+    search-input: { type: input, bg: "#ffffff", fg: "#111111", radius: 4, padding: "0 16px", use: "Hero chrome — 2px #E94B22 branded border, 48px height, red search button" }
+    standard-input: { type: input, bg: "#ffffff", fg: "#111111", radius: 4, use: "1px #E5E8EB border, 44px height; focus 1px #E94B22" }
+    category-nav: { type: tab, fg: "#333D4B", font: "14/700", use: "Sticky horizontal bar", active: "#E94B22 text + 2px bottom underline" }
 ---
 
 # Design System Inspiration of Coupang (쿠팡)

package/web/references/cursor/DESIGN.md

@@ -16,6 +16,50 @@ ds:
   type: brand
   description: Cursor's brand guidelines with logos, icons, and naming conventions.
   og_image: "https://cursor.com/public/opengraph-image.png"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    primary: "#26251e"
+    brand: "#f54e00"
+    canvas: "#f2f1ed"
+    foreground: "#26251e"
+    surface: "#e6e5e0"
+    surface-100: "#f7f7f4"
+    surface-300: "#ebeae5"
+    surface-500: "#e1e0db"
+    accent-gold: "#c08532"
+    error: "#cf2d56"
+    success: "#1f8a65"
+    on-primary: "#f2f1ed"
+  typography:
+    family: { sans: "CursorGothic", mono: "berkeleyMono" }
+    display-hero:    { size: 72, weight: 400, lineHeight: 1.10, tracking: -2.16, use: "Hero statements, max compression" }
+    section:         { size: 36, weight: 400, lineHeight: 1.20, tracking: -0.72, use: "Feature section / CTA headlines" }
+    subheading:      { size: 26, weight: 400, lineHeight: 1.25, tracking: -0.325, use: "Card headings, sub-sections" }
+    title-sm:        { size: 22, weight: 400, lineHeight: 1.30, tracking: -0.11, use: "Smaller titles, list headings" }
+    body-serif:      { size: 19.2, weight: 500, lineHeight: 1.50, use: "Editorial body, jjannon cswh" }
+    body-serif-sm:   { size: 17.28, weight: 400, lineHeight: 1.35, use: "Standard body, descriptions" }
+    body-sans:       { size: 16, weight: 400, lineHeight: 1.50, use: "UI body text" }
+    button:          { size: 14, weight: 400, lineHeight: 1.00, use: "Primary button label" }
+    caption:         { size: 11, weight: 400, lineHeight: 1.50, use: "Small captions, metadata" }
+    mono-body:       { size: 12, weight: 400, lineHeight: 1.67, use: "Code blocks" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 }
+  rounded: { sm: 4, md: 8, lg: 10, full: 9999 }
+  shadow:
+    ambient: "rgba(0,0,0,0.02) 0px 0px 16px, rgba(0,0,0,0.008) 0px 0px 8px"
+    focus: "rgba(0,0,0,0.1) 0px 4px 12px"
+    elevated: "rgba(0,0,0,0.14) 0px 28px 70px, rgba(0,0,0,0.1) 0px 14px 32px"
+  components_harvested: true
+  components:
+    button-primary: { type: button, bg: "#ebeae5", fg: "#26251e", radius: "8px", padding: "10px 12px 10px 14px", font: "14px / 400", hover: "text #cf2d56", focus: "shadow rgba(0,0,0,0.1) 0px 4px 12px", use: "Primary actions, main CTAs" }
+    button-secondary: { type: button, bg: "#e6e5e0", fg: "#26251e", radius: "9999px", padding: "3px 8px", font: "14px / 400", hover: "text #cf2d56", use: "Tags, filters, secondary actions" }
+    button-tertiary: { type: button, bg: "#e1e0db", fg: "#26251e", radius: "9999px", use: "Active filter, selected tags" }
+    button-ghost: { type: button, bg: "rgba(38,37,30,0.06)", fg: "rgba(38,37,30,0.55)", padding: "6px 12px", use: "Tertiary actions, dismiss" }
+    card: { type: card, bg: "#e6e5e0", border: "1px solid rgba(38,37,30,0.1)", radius: "8px", shadow: "rgba(0,0,0,0.14) 0px 28px 70px, rgba(0,0,0,0.1) 0px 14px 32px", hover: "shadow intensifies", use: "Cards, containers" }
+    input: { type: input, bg: "transparent", fg: "#26251e", border: "1px solid rgba(38,37,30,0.1)", focus: "border rgba(38,37,30,0.2) or accent orange", use: "Text inputs, textarea" }
+    tab: { type: tab, fg: "#26251e", active: "1px bottom border rgba(38,37,30,0.1)", use: "Tab navigation" }
+    timeline-step: { type: listItem, fg: "#26251e", states: "thinking #dfa88f, grep #9fc9a2, read #9fbbe0, edit #c0a8dd", use: "AI timeline operation steps" }
 ---
 
 # Design System Inspiration of Cursor

package/web/references/dabang/DESIGN.md

@@ -11,25 +11,45 @@ logo:
   slug: "https://www.google.com/s2/favicons?domain=dabangapp.com&sz=256"
 verified: "2026-05-15"
 omd: "0.1"
-
-## 16. Do's and Don'ts
-
-### Do
-- Keep brand pink `#FF3478` (`--pink-500`) on the logo wordmark and large-display contexts only, since at 3.4:1 on white it fails AA for body text
-- Drive all interaction state — selected map markers, focus rings, link emphasis — with action blue `#326CF9` (`--blue-500`) and its `#EEF8FF` (`--blue-50`) hover tint
-- Build depth from 1px `#DFDFDF` (`--gray-400`) hairline borders and background-color steps (white → `#F5F5F5` → `#EEF8FF`), keeping `box-shadow: none` everywhere
-- Set body text in `#222` (`--gray-900`) at 16px/400 and run a binary 400→700 weight rhythm, reserving 500 for map filter-chip labels
-- Preserve the contextual radius ladder by using 32px pills for search-entry CTAs and 42px pills for toggleable map filter chips
-- Render price as the map marker itself (e.g. '전세 3.2억') and let warmth surface only in the AI band — 24px/400 with a single 🔍 emoji
-
-### Don't
-- Spread `--pink-500` into product chrome — keeping it wordmark-only is the system's most disciplined rule, and bleeding it onto the map produces a saturated pink that fights the canvas
-- Adopt the zero-shadow rule without investing in clean 1px `#DFDFDF` hairlines, since borders are doing the depth work shadows would
-- Flatten the 32px and 42px pill radii into one value, which loses the affordance distinction between search-entry CTA and toggle-filter
-- Propagate the 400-weight AI-band tone across the surface — it only reads as editorial because the surrounding section heads are 700-bold at 18-20px
-- Bleed casual `-요` endings into structural labels — warmth lives in the AI surface while category labels stay bare nouns (원/투룸 · 아파트 · 분양)
-- Reuse the dense 14px Korean body stack without re-tuning line-height and letter-spacing, since it is tuned for Pretendard's Korean character rendering
-
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  note: "brand pink #FF3478 stays wordmark-only; functional accent is action blue #326CF9. Strict 3-layer color discipline: pink=brand, blue=action, gray=content."
+  colors:
+    primary: "#326CF9"
+    primary-hover: "#326CF9"
+    brand: "#FF3478"
+    canvas: "#FFFFFF"
+    surface: "#FFFFFF"
+    foreground: "#222222"
+    body: "#222222"
+    muted: "#656565"
+    on-primary: "#FFFFFF"
+    hairline: "#DFDFDF"
+    surface-muted: "#F5F5F5"
+    hover-tint: "#EEF8FF"
+    success: "#1CA885"
+    danger: "#E20724"
+    warning: "#FFB600"
+    premium: "#3E26FD"
+  typography:
+    family: { sans: "Pretendard Variable" }
+    section:  { size: 20, weight: 700, lineHeight: 1.3, use: "Category section heads — position + weight, not size" }
+    ai-band:  { size: 24, weight: 400, lineHeight: 1.3, use: "AI band head — largest yet lightest, editorial signal" }
+    body:     { size: 16, weight: 400, lineHeight: 1.5, use: "Body default, #222222" }
+    chip:     { size: 14, weight: 500, lineHeight: 1.4, use: "Filter-chip label (only 500-weight role)" }
+    caption:  { size: 13, weight: 400, lineHeight: 1.4, use: "Secondary text / meta" }
+  spacing: { xs: 4, sm: 8, md: 16, base: 8, lg: 24, xl: 32, xxl: 48, section: 64 }
+  rounded: { sm: 2, md: 4, lg: 8, xl: 12, entry: 32, filter: 42, full: 9999 }
+  shadow:
+    none: "none — zero box-shadow across surface; depth via 1px borders + bg-color steps"
+  components_harvested: true
+  components:
+    button-entry: { type: button, fg: "#222222", radius: 32, use: "Home search-entry pill — tap to start a search" }
+    filter-chip: { type: toggle, bg: "#FFFFFF", fg: "#222222", radius: 42, font: "14/500", use: "Map filter pill, 1px #DFDFDF border; active = #326CF9 border + #EEF8FF bg" }
+    listing-card: { type: card, bg: "#FFFFFF", radius: 8, use: "Floating left-rail listing card, 1px #DFDFDF border, no shadow" }
+    map-marker: { type: badge, bg: "#FFFFFF", fg: "#222222", radius: 2, use: "Price-bearing pill marker; selected = #326CF9 fill — price is the marker" }
+    icon-control: { type: button, radius: 9999, use: "Circular bookmark / close control" }
 ---
 
 # Design System Inspiration of Dabang (다방)
@@ -227,3 +247,21 @@ shadow:  none (100%)
   - Motion tokens — duration/easing
   - Listing thumbnail aspect ratio
   - Verified Station3 corporate timeline to attribution fidelity
+
+## 16. Do's and Don'ts
+
+### Do
+- Keep brand pink `#FF3478` (`--pink-500`) on the logo wordmark and large-display contexts only, since at 3.4:1 on white it fails AA for body text
+- Drive all interaction state — selected map markers, focus rings, link emphasis — with action blue `#326CF9` (`--blue-500`) and its `#EEF8FF` (`--blue-50`) hover tint
+- Build depth from 1px `#DFDFDF` (`--gray-400`) hairline borders and background-color steps (white → `#F5F5F5` → `#EEF8FF`), keeping `box-shadow: none` everywhere
+- Set body text in `#222` (`--gray-900`) at 16px/400 and run a binary 400→700 weight rhythm, reserving 500 for map filter-chip labels
+- Preserve the contextual radius ladder by using 32px pills for search-entry CTAs and 42px pills for toggleable map filter chips
+- Render price as the map marker itself (e.g. '전세 3.2억') and let warmth surface only in the AI band — 24px/400 with a single 🔍 emoji
+
+### Don't
+- Spread `--pink-500` into product chrome — keeping it wordmark-only is the system's most disciplined rule, and bleeding it onto the map produces a saturated pink that fights the canvas
+- Adopt the zero-shadow rule without investing in clean 1px `#DFDFDF` hairlines, since borders are doing the depth work shadows would
+- Flatten the 32px and 42px pill radii into one value, which loses the affordance distinction between search-entry CTA and toggle-filter
+- Propagate the 400-weight AI-band tone across the surface — it only reads as editorial because the surrounding section heads are 700-bold at 18-20px
+- Bleed casual `-요` endings into structural labels — warmth lives in the AI surface while category labels stay bare nouns (원/투룸 · 아파트 · 분양)
+- Reuse the dense 14px Korean body stack without re-tuning line-height and letter-spacing, since it is tuned for Pretendard's Korean character rendering