关于这个模板
这是 Northstar 的落地页，连同生成它的那份需求简报一起发布，而不是只给一张截图。整套配色是青绿色 #1D8FB8 打底、白色 #EEF2F3 给文字、灰调橙色 #F0DAC8 承担强调色，页面字体是 Instrument Serif。这一条会把生成页面的技术栈（vanilla JS）写出来，而不是藏起来。这个页面的动效控制在580ms 的过渡、cubic-bezier(.16,1.3,1)。写作时让它开着：能迁移到你页面上的，是那份 11,589 字符的简报。收录的提示词记录于 1280x956，所以这一页引用的每个数值都能追回到它。下面引用的每一项都是那份简报里的数值，从 1280x956 的画幅一直到最小的间距档。
适合谁
- 这个落地页服务的是那些得向没参加启动会的人解释 cubic-bezier(.16,1.3,1) 缓动曲线的团队。
- 在这版落地页上继续加块的内部小组，需要把 100vh 高的板块、14px 间距原样带进新块里。
- 给要改写一版落地页、标题长度又得和Northstar一样的内容负责人用。
包含哪些内容
- 一行到底，不做抽屉. 导航条上只有字标、板块链接和一个 #F0DAC8 按钮，尺寸按 100vh 高的板块、14px 间距定，永远不会长成第二个页头。链接比字标小一档，#F0DAC8 操作是导航条上唯一有分量的元素。
- 字号断得很干脆. 气质来自需求简报里的字号档位和字距：Instrument Serif 用收紧的展示字号，然后干净地掉到支撑句。字距按字号分别设定，展示行和注释不共用同一个字距值。
- 字和画幅共用一套档位. 版式走的是绝对值，不是比例：100vh 高的板块、14px 间距、580ms 的过渡、cubic-bezier(.16,1.3,1) 缓动曲线。每个值都能对着收录的提示词核一遍，重建因此是可验证的，而不是大约像。搬版式的时候把数值一起搬走。
- 证据放在折叠线之上. 统计数字是当字体来处理的：数字用展示字号，标签用需求简报里最小的字阶，颜色只走 #F0DAC8 或正文色，而不是找一张彩色卡片垫着。数字带 #F0DAC8 强调色，周围一切都留在正文色上。标签字号对齐注释那一档。
动效与交互
交互只落在控件上
只有控件响应指针（悬停态只给按钮和链接，而不是每张卡片），页面因此有反馈感，又没把每个元素都变成点击目标。看起来能点的控件就真的能点，不会出现假的暗示。这份参考在 1280x956 下收录。
揭示就是记忆点
遮罩式逐行揭示撑起第一屏。底下的构图是静止的，所以这段动效读起来是页面在自我拼装，而不是装饰。时长从一个值推出来，所以文案一长，动画自然跟着变长，不用手调。这份参考在 1280x956 下收录。
这个落地页背后的顺序
导航先确立产品身份，并给回访者一条熟悉的路。页面的顺序是刻意安排的。标题占主标题字号，支撑句说明产品能做什么，灰调橙色 #F0DAC8强调色标记主操作，下一步从不会有疑问。除此之外没有别的东西抢注意力：第一个决策点之前没有卡片栅格，这正是落地页在创意机构类项目里不显沉重的原因。创意机构读者先看到主张，再看到选项。
这个落地页在论证什么
克制让你在折叠线以上失去了放证据的空间。这份简报接受这个代价，把首屏全部花在主张上，并固定住100vh 高的板块、14px 间距，这样以后在下面加一个证据板块也不用返工。它给创意机构读者的是一条通向主张的最短诚实路径。
在 Northstar 里先改什么
可复用的是构图，题材是你自己的。换掉标题，保留字阶（流体字阶），再在你的素材上重新测一遍 #F0DAC8 强调色。如果新加的元素不能帮助说明产品主张或下一步动作，它就该放到折叠线以下。该换掉的是题材。
常见问题
复制 Northstar 的需求简报，我能拿到什么？
它是构建简报，不是感觉描述：写明 1280x956 的构图、间距和动效数值。全文没有一处把渲染画面当作事实依据。
Northstar 有多少地方依赖 vanilla JS？
不需要。需求简报是规格说明，不是依赖清单。它当初是按 vanilla JS 写的，但同一套构图用你手头现有的工具都能重建。标注技术栈只是让你知道这份参考是怎么做出来的。
Northstar 的设计是从哪来的？
简报是描述，不是转授权别人素材的许可。结构和数值可以留下，素材和品牌标识要换成你自己的；客户问起版式出处时，说明来源即可。这份参考在 1280x956 下收录。
