颜色先进入语义 token
品牌色、强调色、背景、边框、文本、状态色都从当前 CSS 变量读取。
Visual System / Live Reference
Joosure视觉规范活文档
这个页面直接链接当前项目的设计 token、全站样式和页面生成链路，用于给人工与 AI coding agent 校准导航、按钮、CTA、字体层级、颜色 token、正文配色和代码生成配图规范。
Live Source 同步中
颜色源assets/design-tokens.css
全站组件assets/site.css
页面组件src/components/DesignSystemPageSections.astro
更新时间读取中
01 / Source of Truth
规范不靠记忆，靠 token、组件和检查链路同步
新增视觉效果时，先确认能否复用现有 token；需要新颜色时，先进入 `design-tokens.css`，再在页面样式中引用。
页面模块必须有明确前缀
新模块使用页面或模块前缀，避免污染导航、按钮、表单和页脚。
从组件和页面注册生成路由壳
修改页面内容先改 src/components 中的页面组件，再运行生成与校验命令，保持路由壳与 sitemap 同步。
02 / Design Tokens
当前允许使用的颜色、文本、布局与动效 token
以下内容由脚本从 `assets/design-tokens.css` 读取。修改 token 文件后，刷新本页即可看到同步结果。
推荐新 UI 使用
brand / accent / site / text兼容与底层 token
bg / fg / border / aliases字体、容器与动效
font / container / radius / motion03 / Typography
标题、正文、说明文字与代码标签
中文产品内容使用当前 `--site-font`，代码、状态、编号和系统标签使用 `--font-mono`。
Hero H1
让 AI 从会生成，走向会交付
用于首页首屏和重大产品叙事，保持强信息密度和清晰层级。
Section H2
企业缺的不是更多生成，而是可控的交付闭环
用于章节标题，表达问题、能力或价值主张。
Body
卓术科技帮助企业把 AI Agent 安全纳入现有研发与业务流程。从需求理解、代码变更、测试验证到发布归档，每一步都在企业既有工具链和治理规则中完成。
Mono Label
06 / ENTERPRISE SCENARIOS 只用于编号、状态、日志、ID 和系统标签，不用于大段正文。
04 / Components
标准组件与 token 驱动示例
以下组件由脚本根据 live token 动态生成，覆盖重大标题高亮渐变、卡片层级、状态标签、首页交付闭环动效、导航、按钮、CTA 与页脚标准。
05 / Code-generated Visuals
允许使用的代码生成配图模式
官网优先使用真实产品界面、结构化面板、流程图、证据卡和代码窗口。代码生成配图必须由 token 驱动，服务理解，不做装饰性背景。
06 / AI Agent Workflow
未来修改视觉时的可靠流程
任何静态原型进入主站，都必须先映射到当前 token、容器、按钮、导航和页面生成链路。
01读取 AGENTS.md
确认源文件、生成产物、设计规范和必须运行的命令。
02复用或新增 token
新增颜色先进 `design-tokens.css`，页面 CSS 只引用变量。
03保持 CSS scoped
新模块使用页面或模块前缀，不覆盖全站导航、按钮和表单。
04运行检查
`lint:design`、`lint:cta`、`check:generated`、`check:astro`、`build`、`smoke:dist`。
