关于这个模板
Halo Use Case 交给了金融科技产品一个已经做完的首屏，以及做出它的那组数字。颜色只用了白色 #E2E2E2 打底、灰调靛蓝色 #695D8B 承担强调色，正文排的是 TT Norms Pro Regular。交付形式是 React 和 Tailwind CSS，所以整个功能区可以直接搬进项目，不需要设计交接。如果你要给别人提一版金融科技功能区的需求，就从这个构图起步，把题材换掉。下面引用的每一项都是那份简报里的数值，从 640x470 的画幅一直到最小的间距档。收录的提示词记录于 640x470，所以这一页引用的每个数值都能追回到它。
适合谁
- 如果动效必须砍掉，这版功能区照样读得通，靠 24px 间距撑起层级。
- 给正在做金融科技产品功能区、背后还没有设计系统的独立创始人用。
- 给需要把功能区的范围收进一个迭代、并且不新增任何素材的产品经理用。
包含哪些内容
- 字和画幅共用一套档位. 尺寸是对着 640x470 的渲染量出来的：24px 间距。数值是从收录的提示词里抄下来的，不是反推的，重渲染也不会丢。
- 用带序号的文字行承担. 功能用 TT Norms Pro Regular 排成清单，而不是卡片栅格，页面因此密度高，在窄屏上也能很快扫完。清单左对齐到和标题同一条版心线。标记保持一致。
- 安静底色上的强调色. 整个页面只有一个强调色（灰调靛蓝色 #695D8B）压在白色 #E2E2E2 上，其余分量交给字体，而不是再加第二个颜色。其余一切都落在白色 #E2E2E2 上，高饱和配色才保得住可读性。
- 卡片不描边. 栅格就是结构：面板同样大小，用 TT Norms Pro Regular 排，排得让视线横向移动，而不是向下。面板顺序就是阅读顺序，不依赖任何位置暗示。用间距分开面板，别给它们描边。
动效与交互
只有指针状态，没有别的
反馈只限在悬停态只给按钮和链接，而不是每张卡片上，版式其余部分是一套固定的构图。状态用的是页面自己的配色，而不是组件库的默认值。这份参考在 640x470 下收录。
有意做成静止
这一份交付的是 640x470 下的静态构图，所以层级必须不靠动效也成立，它确实成立。动效被当作反馈，而不是装饰。不需要滚动时间轴。
Halo Use Case 怎么安排第一次阅读的顺序
在这里，顺序就是设计。卡片栅格、功能列表、背景片段的摆放让主张先于证据落地，24px 间距定下两者之间的距离。金融科技读者先看到主张，再看到选项。
把这个功能区变成你自己的
主题给你的是一堆组件，这份需求简报给你的是一套构图：24px 间距和一个素材画幅，题材留给你自己。别动的是画幅和字阶。
这个功能区怎么重排
把这个功能区先在 640x470 下测，再在手机宽度下测：顺序一样成立，只是字阶是流体的，而不是阶梯式的。重排之后，任何宽度下行动点都够得着。
常见问题
Halo Use Case 的简报和我自己写的提示词是一回事吗？
页面上引用的内容全部出自收录的 7,044 字符简报，而不是事后补写的说明。数字和文字能对得上，原因就在这里。
Halo Use Case 背后的提示词到底有多长？
它是构建简报，不是感觉描述：写明 640x470 的构图、间距和动效数值。全文没有一处把渲染画面当作事实依据。
为什么这条条目还要标注 React 和 Tailwind CSS？
Halo Use Case 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
