---
name: 药堂主题
description: 朱红、暖金与宣纸白构成的登录场景及应用主题
colors:
  primary: "#a51d24"
  primary-dark: "hsl(357 64% 73%)"
  paper: "hsl(40 50% 99%)"
  paper-deep: "hsl(37 33% 95%)"
  ink: "hsl(27 16% 17%)"
  border: "hsl(33 25% 86%)"
  dark-background: "hsl(26 16% 12%)"
  dark-card: "hsl(26 15% 14%)"
  dark-foreground: "hsl(35 30% 90%)"
  frame-gold: "#cda878"
typography:
  display:
    fontFamily: '"STKaiti", "KaiTi", "FangSong", serif'
    fontWeight: 700
  body:
    fontFamily: "var(--font-family, system-ui, sans-serif)"
rounded:
  control: "9px"
components:
  login-button:
    backgroundColor: "{colors.primary}"
    textColor: "#ffffff"
    rounded: "{rounded.control}"
---

# Design System: 药堂主题

## Overview

**Creative North Star: "宣纸上的药堂"**

以已确认的朱红、暖金、宣纸白与药堂庭院参考为依据。登录场景用药材与建筑承载气氛，表单保持清晰；应用内部沿用现有组件与布局，通过全局语义色传递同一视觉身份。登录页的堂训、装饰框与庭院构图不推广到业务页面。

## Colors

朱红承担主要操作与选中态，暖金用于登录场景的细框和装饰；暖白与墨色承担日常阅读。`src/preferences.ts` 定义默认主色，`src/styles/herbal-theme.css` 定义明暗中性色；主色色阶由偏好系统生成。

**The 用户偏好 Rule.** 首次主题升级迁移到默认朱红，此后保留用户选择的主色与明暗模式。亮朱砂暗色主色覆盖只在当前主色等于默认朱红时启用。迁移细节与存储限制见[登录主题记录](../docs/design/login-herbal-theme.md)。

## Typography

正文继承应用字体变量与系统无衬线回退，保持表单和业务数据可读。公司名称、堂训采用本机楷体／仿宋回退，不下载字体；不同操作系统的字形会有差异。登录标题使用正文体系的粗体，避免把装饰字体用于输入内容。

## Layout

业务界面保留既有布局密度与组件结构。登录桌面采用左侧堂训、右侧表单，宽屏限制表单宽度；小于等于 900px 改为单列表单并隐藏堂训，小于等于 540px 收紧边距、允许品牌区域换行。语言和主题工具保留在页首。短桌面视口降低表单最小高度和内边距。

## Elevation & Depth

庭院图片位于登录内容下层；浅色表单用接近不透明的纸白底与柔和暖色阴影提供阅读层。暗色降低图片亮度与饱和度，表单改用深棕底。应用内部依赖现有卡片、浮层语义色，不追加场景装饰。

## Shapes

登录输入框与主按钮使用轻圆角；表单外壳使用更宽的圆角，暖金细线和四角纹样仅属于认证场景。框线与纹样为装饰，不承载交互。

## Components

认证布局继续渲染真实路由，保留现有 `AuthenticationLogin`、表单校验、加载态、验证码与认证 store 调用。输入支持账号／当前密码自动填充；可见焦点环明确定位键盘操作。密码切换为明文后仍保留显隐按钮的右侧空间（44px），避免文字与按钮重叠。暗色工具条采用深色底。标题旁使用无文字几何 SVG 纹样。

**The 公司身份 Rule.** 公司名称、Logo、登录标题和描述仍读取现有配置。药堂背景与装饰属于主题，不能替代公司 Logo；未配置公司标志时隐藏框架示例 Logo。

## Do's and Don'ts

- 使用语义色与现有偏好系统扩展业务页面；业务状态色保留原有含义。
- 保留公司动态配置、真实认证链路与用户后续主题偏好。
- 不把背景中的药堂场景或几何装饰解释为企业认证、商标或产品资质。
- 不在生成的背景中绘制文字、Logo、表单或其他 UI。
- 不把 mock 截图验证描述为真实后端登录成功。