canvas
var(--canvas)清晰的规则。
一致的体验。
从颜色和字距，到菜单、标签页与弹窗。让同一套界面语言在网站、工具和工作台之间延续。
01 / START BUILDING
一次引入，处处一致。
无需 UI 框架。CSS 负责外观，轻量模块增强原生 HTML；已有项目也可只使用 tokens。
<link rel="stylesheet" href="./tokens.css">
<link rel="stylesheet" href="./fonts.css">
<link rel="stylesheet" href="./design-system.css">
<script type="module" src="./design-system.js"></script>
<body data-mudsx>
<a class="mx-button mx-button--primary" href="/projects">
探索产品
</a>
</body>---
import Button from './components/ui/Button.astro';
---
<Button href="/projects" variant="primary">探索产品</Button>.my-panel {
color: var(--mudsx-ink);
background: var(--mudsx-card);
border: 1px solid var(--mudsx-hairline);
border-radius: var(--mudsx-radius);
padding: var(--mudsx-space-6);
}组件包包含 CSS、JavaScript、类型声明、字体许可和独立示例。网站专属布局不进入共享包。
02 / FOUNDATIONS
少量颜色，明确层级。
中性浅色与深色画布、主次文字和语义状态；与工作台、登录页使用同一份核心。
canvas-soft
var(--surface-solid)card
var(--surface-solid)ink
var(--text)body
var(--text)muted
var(--muted)subtle
var(--muted)hairline
var(--line)border
var(--line)border-hover
var(--muted)03 / TYPOGRAPHY
以比例建立重点。
DISPLAY / 60 → 36 / 500
为日常创造。
HEADING / 40 → 30 / 500
让复杂更简单。
BODY / 16 / 26
共享 xVf 与系统中文字体承载正文，Geist Mono 区分技术标签。标题和控件使用 500，正文保持 400。
04 / COMPONENTS
可直接使用的基础组件。
05 / INTERACTION
行为也是设计的一部分。
导航与菜单
桌面支持悬停、点击和键盘展开；产品菜单展示对应公开预览。移动端使用全屏菜单，锁定背景滚动与焦点，关闭后回到触发按钮。
标签页与复制
标签页支持左右方向键、Home 与 End。复制操作使用真实剪贴板并报告成功或失败，未授权时保留手动复制路径。
动效与状态
按钮反馈 150ms，选择指示 220ms，弹窗 180ms，内容折叠 300ms；导航共享位置与尺寸弹簧。系统减少动态效果时取消过渡；内容不会依赖动画才能出现。
渐进增强
链接、内容与原生 disclosure 不依赖客户端框架。未启用 JavaScript 时所有代码示例仍可阅读，模态演示不会改变任何业务数据。
06 / QUALITY
可读、可达、可复用。
使用契约
- 44px 主要操作触达区域与可见键盘焦点。
- 颜色不作为唯一状态提示。
- 标签页、弹窗和导航保持明确的焦点顺序。
- 缩放与窄屏下内容可以重排。
边界与许可
设计代码供 MUDSX 自有项目复用。xVf 是 x.ai 实站公开字体资产，不声明开源许可；Inter 与 Geist Mono 许可随包附带。只包含公开 UI，不包含 hub.mudsx.com 私人工作台的数据或认证逻辑。
无障碍说明 ↗