Sodium 是一套面向基础设施和数据工具的紧凑、有规整线条的设计系统规则。它的视觉签名是：白色与暖近黑的底色、用 1px 线条承担结构、所有界面词用等宽大写、标题与正文用 Inter Display、全程零圆角，以及只用一种钠黄色标记“要操作的那一个东西”。资料要求先用它的配方和组件再写标记。
适用用途 用于本项目界面的构建或改动，包括屏幕、组件、表单和样式；也用于把现有屏幕逐步移植到 Sodium，或在已安装时用 migrate-design-system 迁移整个应用。
使用方式 在根布局一次性设置：把 sodium 类放在 <body> 或 UI 根元素上，并在其中放入 SodiumPortalProvider。Sodium 的样式和令牌只在该类内部生效。菜单、对话框、弹出层和提示渲染在 body 末尾，SodiumPortalProvider 会把它们保持在作用域内，否则会丢失全部令牌。示例代码为：<body className="sodium"><SodiumPortalProvider>{children}</SodiumPortalProvider></body>。
整个屏幕可从 Blocks 中合适的区块起步：安装后替换其示例数据和文案。按索引挑选屏幕所需组件，使用前先取该组件页面查看 props、变体和规则。只在 sodium 类元素内用这些组件和 Tokens 下的令牌构建。暗色模式在 sodium 元素或任一祖先上设置 data-theme="dark"；主题不会自行跟随系统设置。用 Page shell 框定屏幕。缺失令牌或组件时应停下并说明，不得自造。只有屏幕需要未给出的具体事实（如区域、上限）时才问人，其余按规则决定并说明选择。移植现有屏幕时一次替换一个部分，保留行为与文案，旧样式无人使用后删除。
Lint 与审查 先安装一次：npx shadcn@latest add https://design.how/r/sodium/lint.json，然后运行 npx eslint -c sodium.eslint.config.mjs .，每条信息都指出修复方式。完成前运行 lint 并修掉所有错误，再把屏幕在 390 和 1280 宽度下渲染，对照全局规则和 anti-slop 清单检查，修复最严重缺陷后复查。当没有 MUST 或 NEVER 被破坏、没有残留原始颜色、尺寸或字体时才算完成；已安装时可运行 ui-review。
规则优先级 规则冲突时，靠前项优先：无障碍与键盘行为；按角色使用令牌而非原始值；复用已有组件与配方而非重建；四个签名（等宽大写的标签角色、线条作结构、唯一的黄色操作、方角）；紧凑的间距与字号。
全局规则要点 先用 Sodium 组件或配方再写标记；sodium 作用域必须包住浮层；只用角色令牌（如 text-text-2、bg-panel、border-line），不用十六进制、任意 px 或 dark: 变体；一组操作至多一个主按钮（黄色实块或破坏性），其余为 secondary 或 ghost；浅色主题下不要用纯黄文字、图标或单独线条，黄色系文字用 text-accent-text；界面词用 label 角色，句子用无衬线；一个区域只框一次、内部用线条分隔，不用框中框或页面背景网格；任何地方不圆角；保留 2px 焦点环，禁止 outline: none；源码写句首大写并在操作上写动词加对象，标签角色负责大写，不用 emoji 和破折号。
页面外壳 根为 <div className="sodium min-h-dvh bg-page text-text-1"> 内含 SodiumPortalProvider；区域用 <section className="frame"> 配 panel-head 行、以 rule-row 或 rule-col 分隔；多个数字用状态条：一行带线单元格，type-micro 标签在 type-code 值上；每页一个 <h1 className="type-title">；一次运行的步骤用 ToolCallStack 放在框旁或下方，不放进框内；手机场景用 w-full max-w-sm 的组件按内容定尺寸，不带设备外框，其唯一实块放在一行按钮里。
Anti-slop 禁止项 不在页面或内容后画单元格网格或点阵；不把界面装扮成终端（黑底绿/琥珀、扫描线、> 提示符、ASCII 框）；不加渐变、色块、辉光或背景模糊（唯一例外是按钮实块与描边配方所用的自下打光）；不为软化而圆角；不把黄色扩散到唯一主操作、选中态和图表系列之外（不做黄色页头、方块、边框、图标、徽章）；不用一排等大卡片各放一个数字；不在框内再框；不在行边缘加彩色竖条；不用圆点表示状态（状态是方形标记加一个词）；不在标题上方放小标签或编号；不用等宽大写写句子、描述或标题；不用 emoji；不用 seamless、effortless、supercharge 等夸张词；括号只用于机器动作、工具调用或智能体步骤，不用于人的按钮；示例用可信数据，不用 Lorem ipsum、John Doe 或 1,234；不让光标静止闪烁或逐字打字；不做滚动渐显；对话框必须用 open 和 onOpenChange 控制，不能只在打开时挂载。拒绝清单：无圆角、无阴影、无渐变、无模糊、页面后无网格；浅色下无黄色文字或图标、无黄色警告、无第二个实块；标签角色之外无加粗和大写，不把句子写成大写。
导入与图标 资料列出多个导入路径，涵盖浮层共用部分、滚动支持、时间线、打字、乱码、绘制连接线、工具函数、图标、传送门与方向等，并给出可用的图标名称清单，如 Activity、Add、ArrowDown、Checkmark、ChevronDown、Close、Code、Copy、Database、Document、Download、Edit、ErrorOutline、Filter、Folder、Information、Search、Settings、Terminal、TrashCan、Upload、View、WarningAlt 等，其他图标需先加入该文件。
令牌 令牌为封闭清单，按角色用类名调用而不用原始值：颜色工具以角色命名（bg-code-surface、text-text-1、border-line-faint），尺寸读刻度（type-body、rounded-4xl、h-(--control-lg) 等）。颜色名可加 bg-、text- 或 border- 前缀；无类名的令牌按值读取，如 h-(--name)。资料给出表面、文字、线条、强调色与主色四组令牌，包括 --page、--panel、--well、--code-surface、--hover、--pressed、--selected、--scrim、--text-1 至 --text-inverse、--line-faint、--line、--line-control、--mark、--focus-width、--accent、--accent-text、--accent-edge、--primary-bg、--primary-text、--primary-edge 等。
限制 资料未提供该系统的收费、价格、平台支持范围、浏览器兼容性或性能效果等信息，均暂未提供。