oh-my-design-cli 1.6.7 → 1.7.0

package/web/references/raycast/DESIGN.md

@@ -15,6 +15,51 @@ ds:
   url: "https://www.raycast.com/templates/brand-guidelines"
   type: brand
   description: Raycast's brand guidelines with colors, logos, and asset kit.
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    background: "#07080a"
+    surface: "#101111"
+    card: "#1b1c1e"
+    white: "#ffffff"
+    accent: "#ff6363"
+    body: "#f9f9f9"
+    secondary: "#cecece"
+    silver: "#c0c0c0"
+    link: "#9c9c9d"
+    dim: "#6a6b6c"
+    dark-gray: "#434345"
+    border: "#2f3031"
+    button-fg: "#18191a"
+    key-start: "#121212"
+    key-end: "#0d0d0d"
+  typography:
+    family: { sans: "Inter", mono: "GeistMono" }
+    display-hero: { size: 64, weight: 600, lineHeight: 1.10, tracking: 0, use: "Hero display" }
+    section:      { size: 56, weight: 400, lineHeight: 1.17, tracking: 0.2, use: "Section display" }
+    heading:      { size: 24, weight: 500, tracking: 0.2, use: "Section heading" }
+    card-heading: { size: 22, weight: 400, lineHeight: 1.15, tracking: 0, use: "Card heading" }
+    body:         { size: 16, weight: 500, lineHeight: 1.60, tracking: 0.2, use: "Primary body text" }
+    button:       { size: 16, weight: 600, lineHeight: 1.15, tracking: 0.3, use: "Button label" }
+    caption:      { size: 14, weight: 500, lineHeight: 1.14, tracking: 0.2, use: "Small labels, metadata" }
+    code:         { size: 14, weight: 500, lineHeight: 1.60, tracking: 0.3, use: "Code blocks (GeistMono)" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 40, section: 80 }
+  rounded: { sm: 6, md: 8, lg: 12, full: 9999 }
+  shadow:
+    subtle: "rgba(0,0,0,0.28) 0px 1.189px 2.377px"
+    button-inset: "rgba(255,255,255,0.1) 0px 1px 0px 0px inset"
+    warm-glow: "rgba(215,201,175,0.05) 0px 0px 20px 5px"
+  components:
+    button-primary: { type: button, bg: "transparent", fg: "#ffffff", radius: 9999, padding: "10px 16px", font: "16/600", use: "Primary pill button, inset white highlight" }
+    button-cta: { type: button, fg: "#18191a", radius: 9999, padding: "10px 16px", use: "Hero Download CTA, translucent white fill" }
+    button-ghost: { type: button, bg: "transparent", fg: "#6a6b6c", radius: 9999, padding: "10px 16px", use: "Tertiary action, gray text brightens on hover" }
+    input: { type: input, bg: "#07080a", fg: "#f9f9f9", radius: 8, padding: "10px 12px", use: "Form input on dark, blue focus glow" }
+    card: { type: card, bg: "#101111", fg: "#ffffff", radius: 12, padding: "16px", use: "Default dark card, faint white border" }
+    card-feature: { type: card, bg: "#101111", radius: 20, padding: "24px", use: "Hero/feature card with warm glow" }
+    badge: { type: badge, bg: "#1b1c1e", fg: "#ffffff", radius: 6, padding: "0 6px", font: "14/500", use: "Categorization badge" }
+    nav-top: { type: tab, bg: "#07080a", fg: "#9c9c9d", font: "16/500", use: "Top nav links, white on hover", active: "white text on hover, underline" }
+  components_harvested: true
 ---
 
 # Design System Inspiration of Raycast

package/web/references/remember/DESIGN.md

@@ -16,6 +16,50 @@ ds:
   type: system
   description: Remember (drama&company) UI library — public Storybook deploy with components for the business-card / B2B networking product.
   og_image: "https://cdn.rememberapp.co.kr/logos/remember/rmbr_og_image.png"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    action: "#000000"
+    body: "#222222"
+    white: "#ffffff"
+    on-orange: "#fffff9"
+    signup-orange: "#ff5414"
+    brand-orange: "#ff6a0d"
+    success: "#239e7b"
+    surface-mint: "#d9fcf2"
+    neutral-50: "#fafafa"
+    neutral-100: "#f2f2f2"
+    neutral-200: "#ebebeb"
+    neutral-300: "#d4d4d4"
+    neutral-400: "#bdbdbd"
+    neutral-500: "#808080"
+    neutral-700: "#424242"
+  typography:
+    family: { sans: "Pretendard", mono: "Pretendard" }
+    section-h2: { size: 20, weight: 600, lineHeight: 1.30, use: "Career feed section headers" }
+    card-h3:    { size: 16, weight: 400, lineHeight: 1.45, use: "Job-card and company-card titles" }
+    body:       { size: 16, weight: 400, lineHeight: 1.5, use: "Job-description, community-post body" }
+    button:     { size: 14, weight: 400, use: "Login / signup / nav buttons" }
+    cta-label:  { size: 12, weight: 400, use: "Signup conversion CTA label" }
+    caption:    { size: 12, weight: 400, use: "Timestamps, D-day badges, location" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 40, section: 56 }
+  rounded: { sm: 4, md: 6, lg: 12, full: 9999 }
+  shadow:
+    subtle: "0px 1px 2px rgba(0,0,0,0.04)"
+    standard: "0px 2px 8px rgba(0,0,0,0.08)"
+    modal: "0px 8px 24px rgba(0,0,0,0.16)"
+  components:
+    button-primary: { type: button, bg: "#000000", fg: "#ffffff", radius: 4, padding: "0 12px", font: "14/400", use: "Login, primary auth, search submit — the fingerprint button" }
+    button-secondary: { type: button, bg: "#ffffff", fg: "#000000", radius: 6, padding: "0 12px", font: "14/400", use: "Sign-up secondary button on dark header" }
+    button-outline: { type: button, bg: "transparent", fg: "#ffffff", radius: 6, padding: "0 12px", font: "14/400", use: "B2B nav button, 1px white border on dark" }
+    button-growth: { type: button, bg: "#ff5414", fg: "#fffff9", radius: 4, padding: "6.5px 13px", font: "12/400", use: "Signup growth CTA, single saturated punch" }
+    filter-chip: { type: badge, bg: "transparent", fg: "#222222", radius: 4, padding: "10px 16px", font: "16/400", use: "Filter facet, 1px #d4d4d4 border", active: "#222222 bg, #ffffff text" }
+    search-input: { type: input, bg: "#f2f2f2", fg: "#222222", radius: 4, padding: "0 0 0 56px", font: "16/400", use: "Hero search, 52px tall, #808080 placeholder" }
+    job-card: { type: card, bg: "transparent", fg: "#000000", radius: 0, font: "16/400", use: "Career feed atomic unit, chromeless, density-led" }
+    company-card: { type: card, bg: "#ffffff", fg: "#222222", radius: 8, padding: "16px", use: "Premium company carousel card, 1px #ebebeb border" }
+    status-pill: { type: badge, bg: "#d9fcf2", fg: "#239e7b", radius: 4, padding: "2px 8px", font: "12/400", use: "Accepted-status badge in history" }
+  components_harvested: true
 ---
 
 # Design System Inspiration of Remember (리멤버)

package/web/references/renault/DESIGN.md

@@ -10,6 +10,48 @@ logo:
   slug: renault
 verified: "2026-05-15"
 omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    yellow: "#efdf00"
+    black: "#000000"
+    white: "#ffffff"
+    soft-yellow: "#f8eb4c"
+    blue: "#1883fd"
+    warm-gray: "#d9d9d6"
+    charcoal: "#222222"
+    pale-silver: "#f2f2f2"
+    border-gray: "#d1d1d1"
+    success: "#8dc572"
+    error: "#be6464"
+    warning: "#f0ad4e"
+    info: "#337ab7"
+  typography:
+    family: { sans: "NouvelR", mono: "NouvelR" }
+    hero-title:    { size: 56, weight: 700, lineHeight: 0.95, use: "Hero titles, all-caps model names" }
+    section:       { size: 40, weight: 700, lineHeight: 0.95, use: "PromoCard section headings" }
+    card-heading:  { size: 32, weight: 700, lineHeight: 0.95, use: "Medium card headings" }
+    subheading:    { size: 24, weight: 700, lineHeight: 0.95, use: "Section sub-titles" }
+    body:          { size: 14, weight: 400, lineHeight: 1.40, use: "Paragraph and descriptive content" }
+    button:        { size: 14.4, weight: 700, lineHeight: 1.00, tracking: 0.144, use: "Primary button text" }
+    nav-link:      { size: 13, weight: 700, lineHeight: 1.50, use: "Navigation and footer links" }
+    caption:       { size: 12.8, weight: 400, lineHeight: 1.10, use: "Small descriptive text" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 40, section: 80 }
+  rounded: { sm: 2, md: 3, lg: 4, full: 9999 }
+  shadow:
+    soft: "rgba(0,0,0,0.2) 0px 4px 8px"
+    medium: "rgba(0,0,0,0.2) 0px 0px 18px"
+    deep: "rgba(0,0,0,0.15) 0px 40px 80px"
+  components:
+    button-super-primary: { type: button, bg: "#efdf00", fg: "#000000", radius: 0, padding: "10px 15px", font: "16/700", use: "Highest-emphasis CTA, 1px #efdf00 border, 46px min" }
+    button-primary: { type: button, bg: "#000000", fg: "#ffffff", radius: 0, padding: "10px 15px", font: "16/700", use: "Default action; inverted #ffffff bg on dark" }
+    button-ghost: { type: button, bg: "transparent", fg: "#ffffff", radius: 0, padding: "10px 15px", font: "16/700", use: "Transparent outline, 1px white border on dark" }
+    text-link: { type: button, bg: "transparent", fg: "#000000", use: "Inline link, hover shifts to #1883fd" }
+    promo-card-light: { type: card, bg: "#ffffff", fg: "#000000", radius: 0, use: "Editorial card, full-bleed photo, dark gradient overlay" }
+    promo-card-dark: { type: card, bg: "#000000", fg: "#ffffff", radius: 0, use: "Cinematic alternative-mode card" }
+    input: { type: input, bg: "#ffffff", fg: "#000000", radius: 9999, padding: "6px 35px 6px 15px", font: "12.8/400", use: "Pill search input, 1px #d1d1d1 border" }
+  components_harvested: true
 ---
 
 # Design System Inspiration of Renault

package/web/references/replicate/DESIGN.md

@@ -10,6 +10,45 @@ logo:
   slug: replicate
 verified: "2026-05-15"
 omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    dark: "#202020"
+    red: "#ea2804"
+    secondary-red: "#dd4425"
+    status-green: "#2b9a66"
+    github-dark: "#24292e"
+    white: "#ffffff"
+    near-white: "#fcfcfc"
+    medium-gray: "#646464"
+    warm-gray: "#4e4e4e"
+    mid-silver: "#8d8d8d"
+    light-silver: "#bbbbbb"
+    black: "#000000"
+  typography:
+    family: { sans: "basier-square", mono: "jetbrains-mono" }
+    display-mega: { size: 128, weight: 700, lineHeight: 1.00, use: "Closing manifesto (rb-freigeist-neue)" }
+    display-hero: { size: 72, weight: 700, lineHeight: 1.00, tracking: -1.8, use: "Hero headline (rb-freigeist-neue)" }
+    section:      { size: 48, weight: 700, lineHeight: 1.00, use: "Feature section titles (rb-freigeist-neue)" }
+    subheading:   { size: 30, weight: 600, lineHeight: 1.20, use: "Card headings (rb-freigeist-neue)" }
+    body-lg:      { size: 20, weight: 400, lineHeight: 1.40, use: "Intro paragraphs" }
+    body:         { size: 16, weight: 400, lineHeight: 1.50, use: "Standard text, buttons" }
+    caption:      { size: 14, weight: 400, lineHeight: 1.43, use: "Metadata, descriptions" }
+    code:         { size: 14, weight: 400, lineHeight: 1.43, use: "Code snippets (jetbrains-mono)" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48, section: 96 }
+  rounded: { sm: 9999, md: 9999, lg: 9999, full: 9999 }
+  shadow:
+    none: "none"
+  components:
+    button-dark: { type: button, bg: "#202020", fg: "#fcfcfc", radius: 9999, padding: "0 4px", use: "Maximum-emphasis dark pill on light surface" }
+    button-outline: { type: button, bg: "#ffffff", fg: "#202020", radius: 9999, use: "Outlined pill, 1px #202020 border, secondary actions" }
+    button-glass: { type: button, bg: "transparent", fg: "#202020", radius: 9999, padding: "6px 56px 6px 28px", use: "Frosted glass search/input button, 1px #bbbbbb outline" }
+    card: { type: card, bg: "#ffffff", fg: "#202020", radius: 9999, use: "Container, 1px #202020 border; #ea2804 border when featured" }
+    input: { type: input, bg: "transparent", fg: "#202020", radius: 9999, padding: "6px 56px 6px 28px", use: "Frosted glass search-style input" }
+    status-badge: { type: badge, bg: "#2b9a66", fg: "#ffffff", radius: 9999, font: "14/400", use: "Operational/running status indicator" }
+    code-block: { type: card, bg: "#24292e", fg: "#ffffff", radius: 9999, font: "14/400", use: "Code block (jetbrains-mono)" }
+  components_harvested: true
 ---
 
 # Design System Inspiration of Replicate

package/web/references/resend/DESIGN.md

@@ -16,6 +16,50 @@ ds:
   type: brand
   description: Resend's brand guidelines with wordmark, icons, and naming rules.
   og_image: "https://cdn.resend.com/cover-brand.png"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    primary: "#ffffff"
+    brand: "#000000"
+    canvas: "#000000"
+    foreground: "#f0f0f0"
+    muted: "#a1a4a5"
+    on-primary: "#000000"
+    accent-orange: "#ff801f"
+    accent-green: "#11ff99"
+    accent-blue: "#3b9eff"
+    accent-yellow: "#ffc53d"
+    error: "#ff2047"
+  typography:
+    family: { sans: "inter", mono: "commitMono" }
+    display-hero:    { size: 96, weight: 400, lineHeight: 1.00, tracking: -0.96, use: "Domaine Display serif hero headlines" }
+    section:         { size: 56, weight: 400, lineHeight: 1.20, tracking: -2.8, use: "ABC Favorit section headings" }
+    subheading:      { size: 20, weight: 400, lineHeight: 1.30, use: "ABC Favorit sub-headings" }
+    feature-title:   { size: 24, weight: 500, lineHeight: 1.50, use: "Inter section sub-headings" }
+    body-lg:         { size: 18, weight: 400, lineHeight: 1.50, use: "Introductions" }
+    body:            { size: 16, weight: 400, lineHeight: 1.50, use: "Standard body text" }
+    nav-link:        { size: 14, weight: 500, lineHeight: 1.43, tracking: 0.35, use: "ABC Favorit nav links, positive tracking" }
+    button:          { size: 14, weight: 600, lineHeight: 1.43, use: "Buttons, CTAs" }
+    caption:         { size: 14, weight: 400, lineHeight: 1.60, use: "Descriptions" }
+    small:           { size: 12, weight: 500, lineHeight: 1.33, use: "Tags, meta, fine print" }
+    code:            { size: 16, weight: 400, lineHeight: 1.50, use: "Commit Mono code blocks" }
+  spacing: [1, 2, 4, 5, 6, 7, 8, 10, 12, 16, 20, 24, 30, 32, 40]
+  rounded: { sm: 4, md: 8, lg: 16, full: 9999 }
+  shadow:
+    ring: "rgba(176,199,217,0.145) 0px 0px 0px 1px"
+    subtle: "rgba(0,0,0,0.1) 0px 1px 3px, rgba(0,0,0,0.1) 0px 1px 2px -1px"
+    focus: "rgb(0,0,0) 0px 0px 0px 8px"
+  components_harvested: true
+  components:
+    button-primary: { type: button, bg: "#ffffff", fg: "#000000", radius: "9999px", padding: "5px 12px", font: "14px / 600", use: "High-contrast CTA, Get started" }
+    button-ghost: { type: button, bg: "transparent", fg: "#f0f0f0", radius: "9999px", padding: "5px 12px", border: "1px solid rgba(214,235,253,0.19)", hover: "bg rgba(255,255,255,0.28)", use: "Primary CTA on dark, transparent pill with frost border" }
+    button-secondary: { type: button, bg: "transparent", fg: "#f0f0f0", radius: "4px", hover: "subtle background tint", use: "Secondary actions, tab items" }
+    card: { type: card, bg: "transparent", border: "1px solid rgba(214,235,253,0.19)", radius: "16px", shadow: "rgba(176,199,217,0.145) 0px 0px 0px 1px", use: "Feature cards, frost-border panels" }
+    input: { type: input, fg: "#f0f0f0", radius: "4px", focus: "shadow-based ring", use: "Form fields, dark theme inherit" }
+    tab: { type: tab, radius: "8px", active: "subtle background differentiation", use: "Horizontal tab navigation" }
+    badge-accent: { type: badge, fg: "#ffa057", radius: "9999px", font: "12px / 500", use: "Multi-color accent badge, accent bg at low opacity" }
+    code-panel: { type: card, bg: "transparent", border: "1px solid rgba(214,235,253,0.19)", radius: "24px", font: "16px / 400", use: "Commit Mono code preview panel" }
 ---
 
 # Design System Inspiration of Resend