关于这个模板
Aethera Studio 是一个只靠一份书面简报搭出来的创意机构首屏，这一页记录的就是那份简报。页面自己的标题是“Beyond silence, we build the eternal”，整个构图就是围绕这串字搭的。配色是白色 #FFFFFF 打底、黑色 #000000 给文字，字体用 Instrument Serif。这份参考用 React 和 Tailwind CSS 构建，但版式上的决定都独立于它写清楚了。需求简报把动效预算花在100ms 的过渡上。写作时让它开着：能迁移到你页面上的，是那份 3,169 字符的简报。
适合谁
- 要找代理公司提案的创始人，会用 800x582 的画幅当第一轮的验收标准。
- 给要改写一版首屏、标题长度又得和Aethera Studio一样的内容负责人用。
- 如果你要用自己的字体重画Aethera Studio的首屏，就保住 Instrument Serif 的比例，否则字号档位会对不上。
包含哪些内容
- 导航条上不留多余. 一条细导航压在首屏上，字标在左，链接用 Instrument Serif 排，整套构图因此先读成内容、再读成界面。导航条悬在 800x582 的构图上，自己没有底色，素材因此从它下面通到两边。把这一行控制在单行。
- 能逐项核对的数值. 尺寸是收录时就在需求简报里写下的（75px 间距、100ms 的过渡），重建因此可以逐项核对，而不是大约像。清单短到审核的人能一个元素一个元素地核。
- 顶栏只放一个操作. 一条细导航压在首屏上，字标在左，链接用 Instrument Serif 排，整套构图因此先读成内容、再读成界面。导航条悬在 800x582 的构图上，自己没有底色，素材因此从它下面通到两边。链接控制在四到五个，这一行的尺寸就是照这个定的。
- 字阶就是样式系统. 字体是按职责分配的，不是混着用：Instrument Serif 同时承担展示文字和界面文字。界面文字始终用同一套字，同一字号下不会混进第二种声音。一套职责清楚的字，好过两套互相打架的字。
动效与交互
状态变化也有时长
规格里每一次状态变化都带着时长：100ms没有一处留给浏览器默认值，所以页面读起来是被设计过的，而不是被加了动画。反馈要读成一次回应而不是一段动画，靠的就是这组短时长。
交互限制在局部
交互层是刻意做小的：悬停态只给按钮和链接，而不是每张卡片。页面不会弹出模态框，也不劫持滚动；交互始终限制在元素本身。这份参考在 800x582 下收录。
把这个首屏变成你自己的
换进你自己的素材时，保住裁切和图层顺序。素材是 800x582 下的一张静帧。正是这个摆放位置让文案保持可读。你的强调色要过和参考强调色同样的对比度测试。
这份创意机构需求简报为什么站得住
一屏只留给读者一个决定，这就是这套版式的代价：其余内容全部下移到折叠线以下。需求简报写明了75px 间距、100ms 的过渡，好让下面的板块保持同样的节奏。它给创意机构读者的是一条通向主张的最短诚实路径。
这个首屏怎么重排
大多数响应式工作做到隐藏元素就停了。这里改的是版式形状：字阶是流体的，而不是阶梯式的，而且没有为了塞进首屏丢掉任何重要的东西。窄屏版式是一个决定，而不是把宽屏挤小，层级在窄屏上依然成立。这份参考在 800x582 下收录。
常见问题
Aethera Studio 背后那份需求简报里到底有什么？
简报是从页面上收录下来的，共 3,169 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
重建 Aethera Studio 必须用 React 和 Tailwind CSS 吗？
Aethera Studio 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
Aethera Studio 里 100ms 的过渡是怎么动的？
入场和状态切换都落在 100ms 这个区间内，由状态变化触发而不是滚动库，也从不会拖住文案。
