用途：为页面提供干净、技术感强的结构，使各区块拥有可见边界，整体呈现精确、有序、编辑化或系统化的观感。适合需要细引导边框、L 形角标与统一框架盒的设计。
主要能力：基于父级网格强制纵横对齐，所有区块吸附到相同列与行；使用单一边框色、角标色与间距尺度；支持 12 列网格及 span-12/8/6/4 跨列，并在 760px 以下退化为单列。框架采用 1px 细边框、低对比分隔线和低调角标，背景可叠加极低透明度斜线纹理。角标用 background 多层 linear-gradient 实现，无需额外标签。
使用方式：先定义父网格，再为区块套用 border、padding、background 等统一盒模型，并用 span 类控制跨列。基础令牌示例： :root { --fg-bg: #f7f7f4; --fg-surface: rgba(255, 255, 255, 0.62); --fg-line: rgba(24, 24, 27, 0.14); --fg-line-strong: rgba(24, 24, 27, 0.34); --fg-texture: rgba(24, 24, 27, 0.035); --fg-gap: 16px; --fg-pad: clamp(16px, 2vw, 28px); --fg-corner: 18px; } 父网格与框架核心类： .framed-grid { min-height:100vh; padding:var(--fg-gap); display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--fg-gap); } .frame { position:relative; border:1px solid var(--fg-line); background:var(--fg-surface); padding:var(--fg-pad); overflow:hidden; } 跨列类：.span-12、.span-8、.span-6、.span-4 分别设置 grid-column: span 对应数值。
使用要点：区块边距、标题、控件和媒体边缘都要对齐同一网格节奏；区块间距保持一致；相邻框架不要混用不同边框粗细；避免浮动卡片、柔和团块和不齐边距；对角纹理透明度保持在 0.05 以下；角标尺寸在各主要区块保持一致。若产品风格需要，可使用直角或轻微圆角。
限制：资料未提供该方案的官方安装命令、依赖、浏览器兼容范围、收费方式与性能数据，暂未提供。实际使用时需依据项目主题调整对比度，纹理层可移除后布局仍应清晰可读。