用途:这是开发 SIBA(Sistema Bauman)ERP 界面时必须遵循的设计系统参考,适用于创建或修改任何 UI 组件、页面、表单等元素。
主要能力与规则:风格为 Corporate Premium,支持 Dark Mode 与 Light Mode,响应式采用 Desktop-first,需在 375px 以上正常工作。始终使用明暗两种模式并配合 dark: 前缀;禁止使用 emoji,只用 Material Symbols 图标;禁止硬编码颜色,使用 CSS 变量或 Tailwind token;主要操作与激活状态使用 Gold 色板。
视觉规范:字体为 Manrope(Google Fonts,权重 400/500/600/700/800),通过 font-sans 使用。图标引入 Material Symbols Outlined。Gold 主色 #bd8e3d,浅色 #e6c489,柔和 #C5A36A。明色背景 #f8f8f7、表面 #ffffff、边框 #e5e5e3;暗色背景 #121416、表面 #1a1c1e、边框 #37322a。语义色含 success、warning、error、info 的明暗两套值。提供 CSS 变量与 tailwind.config.js 配置示例,darkMode 设为 class。
布局与组件:断点为 md 768px、lg 1024px、xl 1280px。侧边栏在移动端为 Sheet 抽屉,平板折叠 64px,桌面展开 260px;网格列数随断点 1/2/3-4。给出 Sidebar、导航项、激活态、按钮、卡片、空状态与过渡动画的类名示例。
使用方式:按提供的 Tailwind 类与 token 编写组件,开发前核对清单(375px 可用、含 dark: 类、用 Material Symbols、移动端侧边栏为 Sheet、CTA 用 Gold、触控目标至少 44x44px、字体为 Manrope)。参考 mockup 位于 docs/mockup-ui/ 下,Logo 位于 docs/assets/logo-bauman.png。
限制:资料未提供安装命令、依赖版本、许可与收费信息;具体实现细节以项目内文件为准。