设计

这个网站属于 YuTheme 生态系统：与 Yuri 的产品一致，采用温暖的深色调、 Geist 字体、发丝般的边框、克制的动效和编辑式的清晰，同时保持自己的 身份。

身份

Ella 的标志是一个方形金色「E」（用于页头和 favicon），外加一个金色菱形， 作为 eyebrows 前的反复出现的点缀。没有头像、没有脸、没有吉祥物。 身份存在于排版、构图、颜色和小图形细节中。

令牌

规范 YuTheme 值，定义于 apps/web/src/app/[locale]/globals.css：

• canvas #1a1813、surface #191811、raised #1f1d17
• 文本主色 #f4f1e8、次级 #b8b2a4、第三级 #827c70
• 强调金色 #d6a84f、悬停 #e0b760
• 暖色 alpha 边框：微弱 0.06、次要 0.08、默认 0.14、强烈 0.22
• 圆角 4/6/8px，过渡 160ms cubic-bezier(0.2, 0, 0, 1)

当存在规范令牌时，不要添加近似颜色。

排版

• 一切用 Geist Variable；标签和元数据用 Geist Mono Variable。
• Hero 的 h1：clamp(2.25rem, 5vw, 3.25rem)，字重 400，字距 -0.03em，带有金色斜体「Ella」。
• 章节标题：clamp(1.5rem, 3vw, 2.25rem)，字重 500。
• eyebrows：等宽、11px、大写、字距拉开，带金色菱形和章节编号 （01、02……）。

构图

• 页头固定 64px，滚动监听以金色标记当前章节。
• 桌面端 Hero 是两栏网格：左侧文案，右侧终端卡片。移动端堆叠。
• 编辑类章节使用 1fr / 1.4fr 网格，带细顶上边框和宽裕内边距；低于 900px 折叠为单栏。
• 终端卡片以闪烁的金色光标展示 Ella 的状态行。它是设计元素，不是 真正的终端。

动效

安静而实用：

• Hero 名字、主按钮、页头标志和页脚签名上的微光；
• 缓慢漂移的环境背景光晕；
• 由 IntersectionObserver 驱动的、带轻微错落的滚动显现；
• 一切由 prefers-reduced-motion: no-preference 控制。在减少动态效果 下，所有效果都被禁用，内容必须保持可见。

没有减少动态效果的路径，就不要添加装饰性动效。

反模式

避免 SaaS 感、霓虹紫、俗套动漫风格、过度渐变、随意的玻璃拟态、 仪表盘、卡片墙和没有功能的装饰。