关于这个模板
Email Landing Page 交给了AI 或 SaaS 产品一个已经做完的首屏，以及做出它的那组数字。配色控制在深蓝色 #091020 打底、灰调青绿色 #A4F4FD 给文字、亮青绿色 #00D2FF 承担强调色之内，字体用 Inter。实现用的是 React 和 Tailwind CSS；里面的每个尺寸都写了下来，这正是它可复用的原因。动效只限于0.3s 的过渡、cubic-bezier(.22,1.36,1)。写作时让它开着：能迁移到你页面上的，是那份 19,431 字符的简报。
适合谁
- 要找代理公司提案的创始人，会用 640x478 的画幅当第一轮的验收标准。
- 把落地页的结构整段借过来，再逐行对着 1024px 断点换文案。
- 给要改写一版落地页、标题长度又得和Email Landing Page一样的内容负责人用。
包含哪些内容
- 顶栏只放一个操作. 顶栏装下字标、四到五个链接和一个染成 #00D2FF 的操作，字号压得很低，不跟页面其他地方抢。在 1024px 以下，链接收进一个全屏浮层。1024px 以下链接直接收起，而不是折到第二行。
- 越大收得越紧. 这里字体就是那套样式系统：Inter 撑展示字号，整个界面共用同一套字，不需要第二个强调色来帮忙。展示字体只用一个字号，不会自己跟自己抢。
- 基线上的 logo 带. 客户标识沿着下边缘低对比排开，用的是需求简报里最小的字阶，这层背书因此变成落地页上的肌理，永远不跟标题抢。 logo 用同一个尺寸展示，标识带才不会跟标题抢。这份参考在 640x478 下收录。
- 能逐项核对的数值. 需求简报钉死 3 栏栅格、44px 圆角、20px 间距、0.3s 的过渡，其余交给摆放，这正好和一套会自己长大的比例相反。需求简报给的是数值，不是比例，所以文案长度变了，构图里的关系也不会散。
动效与交互
以毫秒计的时长
这里的动效用毫秒计量：0.3s使用 cubic-bezier(.22,1.36,1)这就是全部的动画预算，而且花在状态变化上，不在滚动时间轴上。缓动和时长写在一起（0.3s），复刻时没法悄悄换成另一种手感。
悬停只给该有反馈的地方
反馈只限在悬停态只给按钮和链接，而不是每张卡片、在原位切换内容的标签页或手风琴上，版式其余部分是一套固定的构图。页面不会弹出模态框，也不劫持滚动；交互始终限制在元素本身。这份参考在 640x478 下收录。
这个落地页怎么重排
如果你的断点是为了让东西塞得下而选的，不是为了改变版式，那这一条值得读。版式在 1024px 处切换，而不是一串被隐藏的元素。最后才会改的是顺序。
在 Email Landing Page 里先改什么
把新文案按需求简报写明的展示字号排（20px 间距、0.3s 的过渡），剩下的字阶会自己跟上，不用重做设计。新加的元素如果不能帮助说清产品主张或下一步动作，就该挪到折叠线以下。
Email Landing Page 怎么安排第一次阅读的顺序
严格的顺序会让你以后失去灵活性。在折叠线以上加一个板块，3 栏栅格、44px 圆角就得重新切一遍，因为这条序列是承重的，不是装饰。 SaaS读者先看到主张，再看到选项。
常见问题
复制 Email Landing Page 的需求简报，我能拿到什么？
简报是从页面上收录下来的，共 19,431 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
为什么这条条目还要标注 React 和 Tailwind CSS？
Email Landing Page 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
Email Landing Page 里有多少东西是动的？
入场和状态切换都落在 0.3s 这个区间内使用 cubic-bezier(.22,1.36,1)，由状态变化触发而不是滚动库，也从不会拖住文案。
