用途：设计让内容可读、可扫读并富有节奏的隐形结构，包括网格、间距、栏宽、边距和垂直节奏，确保视线自然流过每个页面。启用时机为视觉设计确立系统、文案放置之后，适用于落地页、编辑排版、仪表盘、演示文稿、印刷文档，以及任何需要超出单一组件结构的项目。
网格系统：12 栏网格为 Web 标准，可等分为 2、3、4 或 6 栏；容器示例为 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8。响应式栏数：移动端 1 栏，平板（md:）2 栏，桌面（lg:）3 至 4 栏，禁止在小屏强制多栏。8px 基线网格要求所有间距为 8 的倍数，应用于 margin、padding、gap、height。非对称网格如 1/3 + 2/3、2/5 + 3/5，适合编辑与作品集布局，当各栏内容类型不同（文字+图片、导航+内容）时更动态。
间距尺度使用 4、8、12、16、24、32、48、64、96px，不使用任意值。紧凑（gap-1 至 gap-2）用于组件内相关项（图标+标签、头像+姓名）；默认（gap-4 至 gap-6）用于区块内项目（网格卡片、表单字段）；宽松（gap-8 至 gap-12）用于区块或主要内容块之间；戏剧性（gap-16 至 gap-24）用于首屏和页面级留白。
垂直节奏需在密集区块与呼吸区块间交替，不连续堆叠两个密集区块或两个呼吸区块。区块间距：py-16（紧凑）、py-24（标准）、py-32（首屏/宽松），按密度选取。
阅读模式：F 型用于网页，重要内容放左上，前两行最受关注；Z 型用于较简单页面（落地页、海报），CTA 置于 Z 末端；单栏用于长文（文章、文档），正文行宽 65 至 75 字符（max-w-prose 或 max-w-2xl）。每个区块需包含标题、支撑内容、视觉元素、CTA 或向下一区块的过渡；无明确目的的区块应删除。
响应式布局模式：移动端堆叠，所有多栏布局在 768px 以下变为单栏；按优先级重排，移动端最重要元素优先；768px 以下导航折叠为汉堡菜单或底部面板；移动端标题字号降 1 至 2 级，正文不变。
交付物包括网格规范（栏、沟槽、边距、断点）、间距系统（尺度及每级用例）、区块布局（各内容区块结构及间距标注）、响应式行为（各区块跨断点适配方式）、垂直节奏图（密集/呼吸交替计划）。质量检查涵盖间距均取自定义尺度、遵守 8px 基线网格、正文行宽 65 至 75 字符、密集与呼吸区块交替、移动端在 375px 宽度测试、无缺少标题+内容+视觉+CTA/过渡的区块、网格在所有页面与屏幕一致。