UI Design System - Executive Minimal

本设计规范（Executive Minimal）专为追求专业、严谨与高级感的企业级应用设计。整体风格采用“行政极简”理念，通过黑白灰中性色调、克制的圆角（2px）、严谨的字体层级以及扁平化的交互反馈，传达出稳重、信任与极致效率的品牌调性。

1. 颜色规范 (Color Palette)

系统放弃了高饱和度的彩色，转而使用极具层次感的黑白灰中性色系。

亮色模式 (Light Mode)

• 主色 (Primary): #171717 (Almost Black) - 用于主要文本、主要按钮背景、标题。
• 辅助色 (Secondary): #F5F5F5 (Soft Silver) - 用于卡片悬浮背景、装饰性图标背景。
• 表面色 (Surface): #FFFFFF (Pure White) - 用于卡片、弹出层、下拉菜单。
• 背景色 (Background): #FAFAFA (Off White) - 用于页面大面积背景。
• 边框色 (Border): rgba(0,0,0,0.1) - 用于分割线、卡片边框。
• 文本辅助色 (Text Light): #525252 - 用于次要说明、时间戳、副标题。

暗色模式 (Dark Mode)

• 主色 (Primary): #FAFAFA - 用于主要文本、主要按钮背景。
• 辅助色 (Secondary): #171717 - 用于卡片悬浮背景。
• 表面色 (Surface): #171717 - 用于卡片表面。
• 背景色 (Background): #0A0A0A - 用于页面大面积深色背景。
• 边框色 (Border): rgba(255,255,255,0.1) - 用于深色模式下的边界勾勒。

2. 圆角与边框 (Radius & Borders)

摒弃了常见的 6px/8px 大圆角，采用极简的微小圆角，营造严谨的“切割感”。

• 统一圆角规范: --theme-radius: 2px
• 适用组件: 按钮、卡片、输入框、提示框、图片、头像等所有容器元素。
• 边框规范: 默认采用 1px solid var(--vp-c-border) 进行物理分割，极少依赖大面积阴影。

3. 字体层级 (Typography)

字体排版强调清晰的结构和紧凑的字符间距，呈现出印刷级别的专业感。

• 基础字体族: 'Inter', -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif
• 大标题 (H1): font-size: 3.8rem; font-weight: 700; letter-spacing: -0.03em;
• 次级标题 (H2): font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em;
• 正文 (Body): font-size: 1rem; font-weight: 400; letter-spacing: -0.01em; line-height: 1.7;
• 小字说明 (Caption): font-size: 0.85rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.01em;

4. 阴影规范 (Shadows)

阴影被降至最低限度，主要依赖物理边框进行层级划分。

• 默认态: box-shadow: none; (大部分卡片和按钮默认无阴影)
• 悬浮态 (Hover): --vp-shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.05); (极轻微的抬升感)
• 弹出层 (Dropdown/Modal): --vp-shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.05);

5. 组件规范 (Components)

按钮 (Buttons)

• Primary 按钮: 黑底白字（亮色模式），2px圆角，悬浮时背景加深且不带有位移放大动画（去浮躁感）。
• Secondary 按钮: 透明背景，1px 边框，黑字，悬浮时变为深底白字。
• 文字按钮 (Link): 带有微小的大写转化与紧凑字间距，表现得更像标签。

荣誉与风采轮播 (Honor Swiper)

• 容器: 采用无边框设计，横向滚动隐藏滚动条 (scrollbar-width: none)。
• 卡片 (Slide): width: 320px; border: 1px solid var(--vp-c-border); border-radius: 2px;
• 图片处理: 默认附带 filter: grayscale(15%); 降低饱和度，鼠标悬浮时恢复全彩 grayscale(0%) 并伴随 1.02 比例的轻微放大，增强互动感而不失庄重。

图片与头像

• 头像: 采用方形或 2px 圆角，取代常见的纯圆形头像，呼应整体“严谨”的几何风格。
• 展示图: 去除花哨的圆角，默认带有 1px 的边框约束，限制色彩外溢。

6. 多端一致性测试标准 (Responsive Testing)

• Desktop (>1024px): 保证网格 (Grid) 结构完整，大标题的字间距展现印刷排版质感。
• Tablet (768px - 1024px): 两列卡片布局，导航栏保证模糊效果 (backdrop-filter: blur) 的性能。
• Mobile (<768px):
  • 核心间距从 3rem 缩减为 2rem。
  • Hero 标题字号缩小至 2.8rem。
  • 左右内边距保持 24px，避免贴边。
  • HonorSwiper 等横向滚动容器在移动端天然支持原生滚动阻尼 (scroll-snap-type: x mandatory)。

---

设计规范版本：v1.0 (Executive Minimal)生成日期：2026-04-18