nested-container-clean-agency

name	nested-container-clean-agency
description	创建一套由嵌套容器构建的干净代理公司（agency）设计系统：外层编辑风外壳、内嵌深色特性块、圆角高级卡片，以及克制的强调色。

干净代理公司嵌套容器技能

何时使用

• 创建一套由嵌套容器构建的干净代理公司设计系统：外层编辑风外壳、内嵌深色特性块、圆角高级卡片，以及克制的强调色。

工作流程

适用范围

• 把它作为一个完整的设计系统方向，贯穿页面外壳、板块框架、卡片、定价块、行动召唤区和布局节奏。
• 当界面应显得干净、高级、由代理公司主导，且拥有强烈的容器层级而非扁平页面板块时使用。
• 这不是通用的卡片网格 SaaS，也不仅仅是一个框架工具。整个构图应通过嵌套外壳与内嵌特性块来组织。

视觉目标

• 从一个居中的外层页面容器开始，用可见的垂直导轨、角部方块或浅色框线界定设计的主边界。
• 在那个外壳内部放置一个或多个内嵌容器，配以对比面板，尤其是嵌套在浅色编辑风页面中的深色圆角特性区。
• 通过在容器内嵌套容器来构建层级：外壳、内部深色板块，然后是该板块内部更小的圆角卡片或内容面板。
• 保持排版干净、现代、代理公司范：自信的标题、克制的正文、极少的 UI 噪声。
• 少量使用柔和的强调色于胶囊、按钮、激活点、微妙渐变和行动召唤重点，而非让整个布局饱和。

实现指引

• 优先使用一个最大宽度的外层包裹器，配以一致的两侧内边距、垂直边界线和微小角部标记，以确立全局框架。
• 用嵌套的圆角容器创造纵深：页面内部一个较深的主块，然后根据对比需求在其内部内嵌较浅或较深的卡片。
• 在嵌套层之间保持充裕的留白，让每层外壳都显得有意图、能呼吸。
• 用边框渐变、低对比描边和柔和阴影来区分层级，而非处处使用厚重轮廓。
• 定价板块、服务分组或特性对比应像模块化的编辑块，安放在一个更大的高级容器内。
• 动效应保持极简而精致：遮罩式文本显现、沉静的淡入，以及轻量的 hover 过渡就足够了。

推荐模式

• 白色或米白外壳，配以 border-x 导轨和微小角部方块界定页面边界。
• 大型深色圆角板块，作为嵌套在较浅页面外壳内的特色定价或能力块。
• 高级内部卡片，配以渐变边框包裹器、柔和面板对比和清晰的内容分组。
• 小号大写标签、紧凑胶囊和克制的强调按钮，以保持干净代理公司调性。
• 编辑风间距让每个嵌套容器都能呼吸，配以强对齐和不杂乱的文案块。

调节旋钮

• 嵌套深度：选择用几层外壳，直到系统显得太繁忙之前为止。
• 对比平衡：调节外壳与内嵌容器之间的跳变，让层级显得强烈又优雅。
• 圆角半径：让圆角容器精致高级，但避免显得过于俏皮。
• 强调强度：只把强调色用作关键控件、标签和高光的点缀。
• 容器密度：给卡片足够的内部内边距，让系统读起来高级而非局促。

避免

• 没有清晰的外到内容器层级的扁平板块。
• 只用一层卡片就号称结构化的通用代理公司布局。
• 过度装饰的渐变、辉光或过量强调色，破坏干净调性。
• 每个嵌套块视觉权重相等，削弱层级。
• 外壳层级之间间距不足的局促容器。