---
name: acmetone-design-specs
description: Acmetone项目专属设计规范（颜色、字体、特色UI组件）。在创建新页面、组件或修改样式时务必调用此技能，以保证UI风格一致和最小化改动。
---

# Acmetone 设计规范 (Design Specifications)

在为 Acmetone 项目开发新功能、新增页面或修改 UI 组件时，请务必遵循以下设计规范，确保“基于最小改动”并“尽量在原基础上复用”。

## 1. 颜色规范 (Color Palette)
- **基础背景**：主要为纯白 (`#ffffff`)，特殊页面（如 AirplanMode）使用深灰 (`#333333`)。
- **文本颜色**：
  - 主文本：黑色 (`#000000`) 或 `#111111`
  - 次要/辅助文本：各级灰色（`#555555`, `#666666`, `#888888`）
- **边框与装饰线**：浅灰色（`#cccccc`, `#dddddd`）

## 2. 字体与排版 (Typography)
- **基础字体**：系统默认无衬线字体栈 `var(--font-family)` (`-apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC" ...`)。
- **特效/高亮字体**：`DotGothic16`（点阵字体），常用于超大标题或特殊高亮，自带复古科技感。
- **典型字号层级**：
  - 超大标题 (Hero Title)：`72px`
  - 模块标题 (Section Title)：`48px` / `36px`
  - 正文描述 (Body Text)：`16px` / `14px`
  - 小标签/附加信息 (Labels)：`13px` / `12px`（配合 `letter-spacing: 1px` 或 `1.5px`）

## 3. 特色 UI 元素 (Signature UI Elements)
- **科技感边角 (Tech Brackets / Corner Crosses)**：
  - 项目显著特征。在按钮 (`.btn-container`)、图标包裹盒 (`.ms-icon-box`) 边缘使用四个直角边框进行装饰。
  - DOM 结构参考：包含四个 `<span class="corner top-left"></span>`、`<span class="corner top-right"></span>` 等元素。
  - 交互：Hover 时伴随边角向外扩散的动效 (`transform: translate(...)`)。
- **按钮体系**：
  - `light` 模式：透明背景 + 黑字 (`.tech-btn.light`)
  - `dark` 模式：黑底白字 + 柔和底阴影 (`box-shadow: 0 15px 35px rgba(0,0,0,0.15)`) (`.tech-btn.dark`)
- **高亮十字星 (Highlight Crosses)**：使用 `.highlight` 配合伪元素或 `.cross-tl`, `.cross-br` 实现角落的十字线装饰。

## 4. 布局与视觉动效 (Layout & Effects)
- **环境光效 (Ambient Glow)**：页面顶部常驻半透明的径向渐变光效 (`.ambient-glow`)。
- **层级管理 (Z-Index)**：
  - 底层粒子画布 `#particleCanvas`：`z-index: 1`，`pointer-events: none`。
  - 顶层导航：`z-index: 100`。
- **微交互动效**：
  - 图标上下缓动悬浮 (`@keyframes floatIcon`)。
  - 按钮内箭头的水平位移动效 (`.btn-container:hover .btn-arrow { transform: translateX(4px); }`)。

## 5. 开发原则
- **复用优先**：优先使用 `style.css` 中已有的类名（如 `.btn-container`, `.ms-icon-box`, `.flex-center`），避免重复写样式。
- **Tailwind 结合**：项目已配置 Tailwind CSS 4.x，基础布局可使用 Tailwind 类名，但特色组件（如带边角的按钮）请复用自定义 CSS 类以保持一致性。

## 6. 核心资源参考 (Core Resources)
为了确保设计规范的严格执行，本 Skill 附带了项目核心的样式与配置资源。在需要深入了解具体样式实现或 CSS 变量时，请参考以下文件：
- **全局样式与特色组件**：`resources/style.css` (包含了所有自定义的 UI 组件如 `.corner`, `.btn-container` 等的具体实现)
- **Tailwind 配置**：`resources/tailwind.config.js`
- **视觉展示网站**：`website/index.html` (包含完整设计系统视觉指南与交互演示)