关于这个模板
Portal 是面向生活方式品牌的首屏参考，它背后的需求简报是一份完整的构建规格书，而不是情绪板。标题是“A voyage through forgotten realms, where past and future intertwine”，首屏其余部分都围着它排。颜色只用了黑色 #292926 打底、灰调橙色 #F3BC9E 给文字、红色 #E1836B 承担强调色，正文排的是 Inter。交付形式是 React 和 Tailwind CSS，收录于 800x609，所以画幅在任何一行代码写下去之前就已经定好。动效是300ms 的过渡，克制到文案依然是主角。这份参考是给这样的生活方式品牌用的：希望首屏在动手构建之前就已经定下来。收录的提示词记录于 800x609，所以这一页引用的每个数值都能追回到它。
适合谁
- 给正在做生活方式品牌首屏、背后还没有设计系统的独立创始人用。
- 用提示词给首屏提需求的人，会把这份 6,663 字符的提示词当作起点。
- 给要改写一版首屏、标题长度又得和Portal一样的内容负责人用。
包含哪些内容
- 导航条落在页面栅格上. 导航条上只有字标、板块链接和一个 #E1836B 按钮，尺寸按 20px 间距、300ms 的过渡定，永远不会长成第二个页头。链接比字标小一档，#E1836B 操作是导航条上唯一有分量的元素。你自己的页面板块更多时，把它们归组，而不是把导航条拉宽。
- 字号断得很干脆. 这里字体就是那套样式系统：Inter 撑展示字号，整个界面共用同一套字，不需要第二个强调色来帮忙。行高跟着字号档位走，而不是一个全局值。
- 尺寸钉在需求简报里. 这里没有一样东西是靠眼睛估的。规格钉死了 20px 间距、300ms 的过渡，剩下的版式都从这些值推导出来。清单里最小和最大的两个值，划定了这套构图的取值范围。
- 标签压在数字下. 一行数据落在折叠线之上，用 Inter 的最高一档字号排，#E1836B 只留给那些承担主张的数字。数字带 #E1836B 强调色，周围一切都留在正文色上。数字控制在一行。
动效与交互
状态变化也有时长
这里的动效用毫秒计量：300ms这就是全部的动画预算，而且花在状态变化上，不在滚动时间轴上。每一次状态变化都写明了数值，所以永远不会用到浏览器默认值。
交互区域刻意做小
反馈只限在悬停态只给按钮和链接，而不是每张卡片上，版式其余部分是一套固定的构图。状态用的是页面自己的配色，而不是组件库的默认值。这份参考在 800x609 下收录。
这个首屏背后的顺序
这里没有任何东西跟第一个决定抢位置。页面直接把这句话说出来了：“A voyage through forgotten realms, where past and future intertwine”。支撑素材等在折叠线以下，页面顶部只由导航、标题、公告徽标、数据行、背景片段承担。生活方式读者先看到主张，再看到选项。
把这个首屏变成你自己的
先改承诺，别先改装饰。把“A voyage through forgotten realms, where past and future intertwine”重写成一句能说清你做什么的话，再用 Inter 按需求简报里的主标题字号排。把红色 #E1836B换成你自己的强调色，并在动别的东西之前先对着黑色 #292926检查一遍。新加的元素如果不能帮助说清产品主张或下一步动作，就该挪到折叠线以下。
把 Portal 当规格书读
大多数参考只给你结果、把数字留下。这一份反过来：20px 间距、300ms 的过渡和页面一起公开，所以结果能被复现，而不是被大致模仿。这个首屏里没有任何一处依赖默认值。
常见问题
Portal 背后那份需求简报里到底有什么？
它是构建简报，不是感觉描述：写明 800x609 的构图、间距和动效数值。全文没有一处把渲染画面当作事实依据。
Portal 有多少地方依赖 React 和 Tailwind CSS？
Portal 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
Portal 的设计是从哪来的？
简报是描述，不是转授权别人素材的许可。结构和数值可以留下，素材和品牌标识要换成你自己的；客户问起版式出处时，说明来源即可。这份参考在 800x609 下收录。
