用途
Space 是一份面向界面布局、间距与视觉节奏的设计规范。它的出发点是一个判断：空白是成本最低的材料，却也是生成式界面浪费最多的部分；间距不均是有经验的眼睛最先发现的缺陷，也是模型最后才修好的问题。文档旨在提供一套可执行的取值规则与决策框架，让布局结构在不依赖分割线的情况下依然清晰可见。
间距刻度
所有间距建立在 4px 网格上，可用刻度为：2、4、6、8、10、12、16、20、24、32、40、48、64、96。规则是从这个列表取值，绝不取中间值。如果 14px“看起来正好”，说明相邻元素有问题，应先修正相邻元素，12 或 16 自然会显得正确。相关性决定距离：标签与对应输入框为 6，表单内两个输入框为 16，表单的两个区块为 32，层级之间的比例差异让结构无需线条即可显现。
密度模式
密度按界面而非组件决定，文档给出四类参考：
- 密集列表/表格（工具、后台）：行高 28–32px，内部横向内边距 8–10px，组间距 24px；
- 常规列表（设置、信息流）：行高 40–48px，内边距 12–16px，组间距 32px；
- 阅读界面：不设行高，靠行宽控制，区块间距 40–64px；
- 营销页面：内边距 24–40px，区块间距 96px 以上。 文档提醒：密集工具用 48px 行高会显得像玩具，设置页用 28px 行高会像电子表格；密度应与用户注视每一项的时长匹配。
宽度
应用框架最大宽度 1120–1280px 并居中，需有可见边界（边框或背景变化），使其在页面上像一个独立对象。阅读行宽 55–70ch，设置在文本块上。侧边栏 240–280px，更窄会导致标签截断，更宽会挤压内容列。表单一律 400–520px，在 1400px 屏幕上拉满宽度的输入框是错误做法。对话框分 400px（确认）、520px（表单）、720px（内容）三档，桌面端不应满宽。
使用 gap 而非 margin
兄弟元素之间的空间由父元素负责：在 flex 和 grid 布局中使用 gap，子元素不携带外边距。这样可以消除“最后一个子元素多出边距”和“第一个子元素位置偏高”两类问题，也使组件能被放到任何位置而不随身携带间距。margin 只用于一种情况：在流式文本中分隔某块与其后续内容，例如文章段落的 margin-bottom。
对齐
文本对齐文本：标题、描述与下方各行的左边缘共享同一条 x 轴，图标位于该线之外而不是之内。图标与同行文本按图标的光学中心对齐，通常比几何中心高 1px，可用 translateY(-0.5px) 或 margin-top: -1px 微调，而不是给文本加 padding。数字在列中右对齐，文本左对齐，任何需要比较的列都不要居中。同一行的按钮共享基线与高度，主按钮与次按钮的高度不得有差异。光学对齐优先于几何对齐：播放图标略微偏右才显得居中，圆角胶囊内的文本略微偏左才显得居中。
节奏
纵向间距随分隔层级递增：区块内各行之间为 0（行本身即间距）或 2–4px；区块标题到其下各行 8–12px；区块之间 24–32px；页面标题到首个区块 28–40px。一致的节奏让长页面显得平静，应变化内容而非间距。
响应式
优先流式布局，其次才是断点：先让内容换行、网格折叠（repeat(auto-fill, minmax(280px, 1fr))），再考虑媒体查询。断点不超过两到三个，且绑定在真正破局的位置：侧边栏折叠约 1024px，列堆叠约 640px，而不是因为框架提供了 sm/md/lg/xl/2xl 就全部使用。处于不同宽度槽位的组件应使用容器查询，卡片不应感知视口。侧边留白在手机上 16px、桌面 20–28px，绝不为 0。除本应横向滚动的元素（轮播、带 overflow-x: auto 的代码块）外，任何区域都不应横向滚动。测试点为 375px、768px、1024px、1440px，并在其间缓慢缩放以观察跳变。
粘性与固定定位
粘性头部高 44–52px，半透明（background: color-mix(...) 取 80% 加 backdrop-filter: blur），带底边框；其下内容使用与之等高的 scroll-margin-top，使锚点落在头部下方。粘性侧边栏为 position: sticky; top: 0; height: 100dvh，自带溢出滚动区域并使用 overscroll-behavior: contain。手机上的固定底栏须避开 Home 指示条：padding-bottom: env(safe-area-inset-bottom)。手机上除高度低于 56px 的栏之外，不得有固定元素覆盖阅读内容。
滚动容器
内部滚动区域需显式声明（flex 子元素上的 min-height: 0、overflow-y: auto），具有可见边界，并设置 overscroll-behavior: contain。任何区域内同一时间只允许一个轴滚动。不明显的滚动区域需要提示：底部渐隐，或在边界处露出被截断的内容。
以空白为工具
一个表单周围留出大量空白的页面显得专注；同一表单挤在侧边栏和头部之间则显得杂乱。在添加卡片边框来分组之前，先尝试增大组外空间、减小组内空间。当某区域显得空而不对时，问题通常是宽度而非空间：内容比所在区域窄。应收窄区域，而不是填满它。
卡片网格
使用 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) 配合 gap: 8–16px。同一行卡片等高（align-items: stretch），内部内容顶部对齐，操作按钮由 margin-top: auto 推到底部。凡带操作按钮的内容都不要用瀑布流。
常见问题对照
文档列举了“未经考虑的间距”的典型征兆及修法：出现 13px、18px、22px、30px 等非刻度值应对齐到刻度；所有地方都用同样的 16px 间距应按层级改为内部 8、之间 16、组间 32；组件上带 margin 应改为父元素 gap；用卡片边框分组的三个事项应改用周围空白；桌面端满宽输入框应改为 400–520px；五个断点应减为实际破局处的两个；用 padding 垂直居中图标应改为光学对齐并微调 1px；在断点处内容跳变应改为流式网格并减少断点。
延伸参考
文档列出了若干参考资源：Ahmad Shadeed 的 CSS 布局深度文章与交互图示、Every Layout 的布局原语组合、Utopia 的流式空间与字体刻度、Refactoring UI 的间距层级图解、Refero 与 Mobbin 用于观察已上线应用的密度设置，更多内容见 stealth.pm/learn。
限制
该文档是一份设计规范与经验规则，而非可直接执行的库或工具；文中未提供安装命令、代码包、收费信息或平台支持说明。各项数值（如 1120–1280px、44–52px）属于建议范围，需结合具体项目判断。