BLUE ARCHIVE

01色彩体系 · 蓝白基调与暖色点缀

主色调以浅蓝、白、淡蓝绿营造夏季校园的清凉感；暖黄、粉、薄荷作点缀防止画面过冷。点缀色用量克制，永远只出现在标题下划线与少量强调上。

页面底：linear-gradient(160deg,#F0F7FF 0%,#E8F4FD 40%,#FDFEFF 100%)

02背景纹理 · 隐藏的「三角形折射」网格

面板与背景并非纯色，而是铺满一层极淡的 45° 与 -45° 交错网格。它不干扰文字，却赋予界面「玻璃折射感」——这是 BA 高级感的来源。

铁律：周期 12px、不透明度 ≤0.04、只铺浅底；一浓即廉价。

03斜切美学 · 贯穿一切的几何

Logo 的两道交叉斜线延伸到按钮、卡组、虚线框与列表锚点。斜切带来战术感与动势，但文字必须反向回正。

按钮容器 skewX(-15deg)，内部 span skewX(15deg)；卡组 rotate(-3deg)；卡牌行 rotate(-5deg) skewX(-5deg)。

04容器与边框 · 极度克制的去边框化

弹窗不用粗边框、不用左侧色条：仅极细浅蓝半透明描边 + 大面积低透明柔光。列表行以浅灰蓝打底，左侧 3px 蓝竖线作视觉锚点。

05主界面 · 斜向悬浮卡片

右侧入口卡组整体倾斜，配合背景白色斜线引导，打破网格呆板，营造空间与动感；hover 卡片上浮 10px。

06卡牌选择 · 倾斜陈列

白卡以倾斜角排列，卡内只用圆环、准星、细线等几何装饰；黄/粉变体作强调，一屏至多一张。

背景虚线框 skewX(-10deg)，卡组 rotate(-5deg) skewX(-5deg)，hover 描边转主蓝并上移 5px。

07符号化身份 · 光环与 MomoTalk

光环是去透视、去渐变的极简身份签名；MomoTalk 把「校园日常」直接转译为可交互界面。

08动效 · 轻盈交互

短、轻、柔：光环 3s 浮动、卡片 hover 抬升 10px、按钮阴影加深、面板斜切滑入。统一缓动 cubic-bezier(.25,.1,.25,1)，单屏同时动效 ≤2 处。