app-template/DESIGN.md

1.8 KiB
Raw Blame History

帆幕(Fanmu)— 设计方向

产品视觉基线:shadcn/ui Dashboard(媒体五页侧栏/顶栏导航、卡片网格、中性灰阶);模板深空工业 token 仍可用于非媒体页,但 @app/design-tokens 色板 token 路径约定不变(改值可以,改结构需同步全局)。

Style anchor

深色工业 HUD / 控制台:近黑底、信号黄强调、发丝线框、等宽铭牌。

Palette

角色 值
背景(近黑) #0E0F0E
表面 #191919
下沉 #121212
线框 #2E2E2E
线框(强) #35373C
墨色 #F2F2F2
弱化文字 #999999
更弱文字 #666666
强调(品牌金黄) #FFB300
信号绿 #00FFA2
信号品红 #FF1AAC
亮色背景(对照) #FAFAFA

Typography

  • Display:Space Grotesk + Noto Sans SC 900
  • 正文 CJK:Noto Sans SC / PingFang SC
  • 等宽:JetBrains Mono(编号、快捷键、路径、状态读出)
  • 字阶:10–11px 铭牌 / 13–14px 正文 / 28–48px 标题;标签全大写 + 0.16–0.22em 字距

Layout

  • 左侧固定竖栏(品牌 + 导航 + 主题)
  • 内容壳 + 顶栏;分隔用点线 u-dotline / 虚线
  • 按钮 u-btn;卡片 u-card;间距 4px 节奏;小圆角 3–12px
  • 克制装饰:禁贴纸堆叠;色彩以 tokens 为准

Interaction

  • 主题:系统 / 亮 / 暗(app-theme)
  • 语言:cookie app-lang + Accept-Language
  • 薄 SSR:服务端输出布局 / head / 导航;页面主体(components/pages/*Body)client:load 在浏览器渲染
  • 动效只在浏览器 effect 内绑定;尊重 prefers-reduced-motion

范围

tokens.css · globals.css · AppLayout.astro · ThemeSwitch · UserMenu · home / dashboard 视图 · ui/*