主题

当前设计系统

新版本使用中性暖色底、橙色强调与 shadcn 语义 token。正文字体是 Geist Sans，代码/数字使用 Geist Mono，展示标题使用 Fraunces。它们取代旧版本的 DM Sans / DM Mono，

修改品牌

先在 packages/config 中设置产品名及支持邮箱，再替换 logo.png，检查 Brand 在公开导航、登录卡片和折叠侧栏中的呈现。图标独立显示时保留可访问名称；图形内部不重复放一段会被屏幕阅读器朗读的产品名。

同步检查 SEO、Open Graph、邮件主题和中英文产品介绍。不要为了改品牌而修改 API 路径、订单 planId 或既有部署资源名。

使用应用内组件

import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';

export function ActionCard() {
  return (
    <Card>
      <CardContent>
        <Button type="button">Continue</Button>
      </CardContent>
    </Card>
  );
}

组件中的业务文案应替换为本地化消息。当前项目使用 Base UI composition，添加自定义 trigger 时参考现有 render 写法，不盲目复制另一个版本的 asChild API。

components.json 已登记 shadcn Studio registry。选用 Studio 组件时把生成文件放入当前别名与目录，核对依赖、token、交互和许可，再连接真实数据。示例仪表盘中的 mock 不能直接当成管理员的订单或积分结果。

外观持久化

ThemeMenu 提供跟随系统、浅色和深色。选择保存在 localStorage 的 flare-theme；首屏脚本在 hydration 前为 html 切换 dark class 并设置 color-scheme。跟随系统时监听系统配色变化。

不要再基于旧的 data-theme 属性写另一套选择器，也不要只修改 React state 而不更新首屏脚本。新增 token 在浅深模式都要定义，避免黑底黑字或无边界表单。

响应式与状态

工作台沿用 Sidebar 与移动 Sheet。操作表单保留 loading、失败、成功和禁用反馈；对退款、角色、删除等操作使用能说明对象的确认弹窗。表格筛选分页只表示已加载数据范围，不伪装成服务端全库搜索。

验证

检查 390px 与桌面宽度、键盘焦点、菜单关闭后焦点恢复、侧栏折叠、对话框、空数据和错误。切换浅深/系统后刷新，确认首屏不闪错主题。运行 type-check 和 check:error，视觉改变还需真实浏览器检查，不能只以构建通过为结论。

继续阅读 产品配置 与 测试。