{
  "schemaVersion": 1,
  "source": {
    "sourceName": "getdesign.md",
    "originalDetailUrl": "https://getdesign.md/raycast/design-md",
    "fallbackRawUrl": "https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/raycast/DESIGN.md",
    "mirrorSource": "github:VoltAgent/awesome-design-md",
    "websiteUrl": "https://www.raycast.com/"
  },
  "identity": {
    "id": "P0-18",
    "slug": "raycast",
    "brand": "Raycast",
    "titleZh": "Raycast 主题",
    "titleEn": "Raycast",
    "descriptionZh": "Raycast 的 Design.md 主题展示，围绕效率工具、媒体内容、暗色界面、SaaS 产品组织页面。",
    "descriptionEn": "Productivity launcher. Sleek dark chrome, vibrant gradient accents."
  },
  "tags": {
    "sourceTags": [],
    "generatedTags": [
      "productivity",
      "request-flow",
      "media",
      "dark"
    ],
    "designTags": [],
    "distributionTags": [
      "效率工具",
      "媒体内容",
      "暗色界面",
      "SaaS 产品",
      "开发工具",
      "浅色界面",
      "B2B 产品",
      "专业工具"
    ]
  },
  "assets": {
    "designMd": {
      "path": "DESIGN.md",
      "sourcePath": ".local/design-md-batch-regression/getdesign/raycast/DESIGN.md"
    },
    "tailwind": {
      "path": "tw.css",
      "sourcePath": ".local/design-md-batch-regression/getdesign/raycast/tw.css"
    },
    "tokens": {
      "path": "assets/tokens.json",
      "method": "derived_from_design_md_and_metadata"
    },
    "cover": null,
    "previewHtml": {
      "type": "local-preview",
      "path": "assets/official-homepage.webp",
      "publicPath": "assets/official-homepage.webp",
      "importPath": "./assets/official-homepage.webp?url",
      "sourcePath": "assets/official-homepage.webp"
    }
  },
  "tokens": {
    "palette": [
      "#07080a",
      "#101111",
      "#0d0d0d",
      "#ffffff",
      "#e8e8e8",
      "#f4f4f6",
      "#000000",
      "#cdcdcd",
      "#d3d3d4",
      "#9c9c9d",
      "#6a6b6c",
      "#434345"
    ],
    "typography": {
      "display": "Inter",
      "body": "Inter",
      "mono": "ui-monospace",
      "hints": [
        "Inter",
        "ui-monospace",
        "Geist Mono",
        "Geist"
      ]
    },
    "radius": {
      "control": "8px",
      "card": "10px",
      "preview": "0px",
      "pill": "9999px",
      "source": "design-md"
    },
    "spacing": {
      "xxs": "2px",
      "xs": "4px",
      "sm": "8px",
      "md": "12px",
      "lg": "16px",
      "xl": "24px",
      "xxl": "32px",
      "section": "96px",
      "source": "design-md"
    }
  },
  "previewImages": [
    {
      "type": "local-preview",
      "path": "assets/official-homepage.webp"
    }
  ],
  "display": {
    "brand": "Raycast 主题",
    "brandAlias": "Raycast",
    "description": "Raycast 的 Design.md 主题展示，围绕效率工具、媒体内容、暗色界面、SaaS 产品组织页面。",
    "descriptionEn": "Productivity launcher. Sleek dark chrome, vibrant gradient accents.",
    "variant": "saas-devtool",
    "distributionTags": [
      "效率工具",
      "媒体内容",
      "暗色界面",
      "SaaS 产品",
      "开发工具",
      "浅色界面",
      "B2B 产品",
      "专业工具"
    ],
    "fontStylesheets": [
      "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
    ],
    "palette": [
      {
        "color": "#07080a",
        "labelZh": "主色",
        "labelEn": "Primary",
        "textColor": "#ffffff"
      },
      {
        "color": "#101111",
        "labelZh": "主色悬停",
        "labelEn": "Primary Hover",
        "textColor": "#ffffff"
      },
      {
        "color": "#0d0d0d",
        "labelZh": "辅助色",
        "labelEn": "Secondary",
        "textColor": "#ffffff"
      },
      {
        "color": "#ffffff",
        "labelZh": "强调色",
        "labelEn": "Accent",
        "textColor": "#171717"
      },
      {
        "color": "#e8e8e8",
        "labelZh": "背景色",
        "labelEn": "Background",
        "textColor": "#171717"
      },
      {
        "color": "#f4f4f6",
        "labelZh": "表面色",
        "labelEn": "Surface",
        "textColor": "#171717"
      },
      {
        "color": "#000000",
        "labelZh": "文本色",
        "labelEn": "Text",
        "textColor": "#ffffff"
      },
      {
        "color": "#cdcdcd",
        "labelZh": "边框色",
        "labelEn": "Border",
        "textColor": "#171717"
      },
      {
        "color": "#d3d3d4",
        "labelZh": "颜色 9",
        "labelEn": "Color 9",
        "textColor": "#171717"
      },
      {
        "color": "#9c9c9d",
        "labelZh": "颜色 10",
        "labelEn": "Color 10",
        "textColor": "#171717"
      },
      {
        "color": "#6a6b6c",
        "labelZh": "颜色 11",
        "labelEn": "Color 11",
        "textColor": "#ffffff"
      },
      {
        "color": "#434345",
        "labelZh": "颜色 12",
        "labelEn": "Color 12",
        "textColor": "#ffffff"
      }
    ],
    "shadows": [],
    "borders": [
      {
        "label": "边框 1 - Border 1",
        "value": "#242728",
        "cssValue": "#242728",
        "description": "属于: A dark-canvas developer-tools system that treats the marketing page like an extended product screenshot — pure-near-black background, command-palette mockups as the hero, Inter typography with the ss03 stylistic set turned on, and a single white CTA pill that doesn't break the inky atmosphere. The chrome reads like Raycast's own command-palette UI scaled up to a marketing page: monochrome dark surfaces with a faint surface ladder (#07080a → #0d0d0d → #101111), tight 6–10px radius on cards, hairline 1px borders in #242728, and rare splashes of saturated accent (Hacker News yellow, Slack red, Mac green, info blue) reserved for product-tile category illustrations. The signature visual moment is a red gradient hero wordmark — three diagonal red stripes laid across the very top of the home page like a launch-banner — paired with full-bleed product UI screenshots that show Raycast's actual command palette, store, and AI chat surfaces."
      },
      {
        "label": "边框 2 - Border 2",
        "value": "rgba(255,255,255,0.08)",
        "cssValue": "rgba(255,255,255,0.08)",
        "description": "hairline-soft: \"rgba(255,255,255,0.08)\""
      },
      {
        "label": "边框 3 - Border 3",
        "value": "rgba(255,255,255,0.16)",
        "cssValue": "rgba(255,255,255,0.16)",
        "description": "hairline-strong: \"rgba(255,255,255,0.16)\""
      },
      {
        "label": "边框 4 - Border 4",
        "value": "#07080a",
        "cssValue": "#07080a",
        "description": "属于: A dark-canvas developer-tools system that treats the marketing page like an extended product screenshot — pure-near-black background, command-palette mockups as the hero, Inter typography with the ss03 stylistic set turned on, and a single white CTA pill that doesn't break the inky atmosphere. The chrome reads like Raycast's own command-palette UI scaled up to a marketing page: monochrome dark surfaces with a faint surface ladder (#07080a → #0d0d0d → #101111), tight 6–10px radius on cards, hairline 1px borders in #242728, and rare splashes of saturated accent (Hacker News yellow, Slack red, Mac green, info blue) reserved for product-tile category illustrations. The signature visual moment is a red gradient hero wordmark — three diagonal red stripes laid across the very top of the home page like a launch-banner — paired with full-bleed product UI screenshots that show Raycast's actual command palette, store, and AI chat surfaces."
      }
    ],
    "typography": [
      "Inter",
      "ui-monospace",
      "Geist Mono",
      "Geist"
    ],
    "previewImages": [
      {
        "type": "local-preview",
        "path": "assets/official-homepage.webp"
      }
    ],
    "panels": [
      {
        "eyebrow": "产品",
        "title": "开发工具界面",
        "body": "适合工作台、文档、控制台和开发者产品。"
      },
      {
        "eyebrow": "Token",
        "title": "颜色与字体可复用",
        "body": "页面从本地 metadata 与 Design.md 提取 palette、typography 和标签，用于快速预览主题质感。"
      },
      {
        "eyebrow": "组件",
        "title": "面向真实界面片段",
        "body": "按钮、输入、卡片和间距样例保持克制，便于比较不同主题的系统性差异。"
      }
    ],
    "usageGuidance": {
      "do": [
        "建议：Render the entire site in one continuous dark mode. There is no light variant in the system。",
        "建议：Use {colors.primary} (white pill) for every primary CTA. There is no second primary color — white IS the brand action。",
        "建议：Build elevation from the surface-color ladder ({colors.canvas} → {colors.surface} → {colors.surface-elevated} → {colors.surface-card}), never from drop shadows。",
        "建议：Enable {font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss03\"} on the body element. The ss03 alternate {g} is part of the brand identity。",
        "建议：Anchor a {component.command-palette-card} mockup as the hero's load-bearing visual. Real Raycast UI is the brand。"
      ],
      "dont": [
        "避免：introduce a light mode. The system is dark-only by design。",
        "避免：add drop shadows on cards. Elevation is built from the surface ladder, not from shadows。",
        "避免：replace {colors.primary} (white) with a tinted accent for the primary CTA. Pure white is the brand action color。",
        "避免：use the saturated accent colors ({colors.accent-yellow}, {colors.accent-red}, {colors.accent-green}, {colors.accent-blue}) on text, buttons, or chrome surfaces. They belong inside extension illustrations。",
        "避免：repeat the hero stripe gradient outside the top hero band. The one-band rule is the system's restraint。"
      ]
    },
    "radius": {
      "control": "8px",
      "card": "10px",
      "preview": "0px",
      "pill": "9999px",
      "source": "design-md"
    },
    "spacing": {
      "xxs": "2px",
      "xs": "4px",
      "sm": "8px",
      "md": "12px",
      "lg": "16px",
      "xl": "24px",
      "xxl": "32px",
      "section": "96px",
      "source": "design-md"
    }
  },
  "status": {
    "displayPage": "done",
    "collectionErrors": []
  }
}
