# DESIGN.md — 由壹点·品牌中心（看板首页）

<!-- impeccable:design-schema 1 -->

> 记录自建成代码，非先行规范。方向：用户裁定的 Zen Minimal × Future Organic 融合（2026-08-15）。
> **全站浅色单主题**：深色主题已废弃（2026-08-15 用户裁定），`darkMode: 'class'` 且不挂 `.dark`，所有 `dark:` 变体失效；新代码禁止再写 `dark:` 类。遗留 `dark:` 类 inert 保留，随逐页统一清理。

## World

「白皮书」：整页是一张编辑排印的品牌白皮书——白纸黑字、发丝线、超大留白；五个板块排成作品集式编号索引；唯一的色彩氛围是右上角一枚缓慢呼吸的柔紫光晕。安静、克制、有底气。

## Color

| 令牌 | 值 | 用途 |
|---|---|---|
| paper | `#fafafa` | 页面底 |
| surface | `#ffffff` | 白卡、悬停行底 |
| ink | `#1a1c1d` | 标题、正文主色、主按钮 |
| body | `#6b7075` | 次级正文（≥4.5:1） |
| faint | `#86898e` | 注脚/微标注/规划态文字（≥4.5:1） |
| ghost-title | `#8f9398` | 规划中板块标题（大字 ≥3:1） |
| hairline | `#e7e8ea` | 全部分割线与卡片边 |
| accent | `#6e79c8` / 深链 `#5a66b8` | 柔光光晕 / 页脚链接 |
| accent-wash | `#eef0fa` | 光晕最浅层、::selection |
| signal-live | `#157a4b` | 已上线状态点 |
| signal-building | `#6e79c8` | 建设中状态点 |
| signal-planned | `#9aa0a8` | 规划中状态点 |

无阴影（平面化）；层级靠留白、字重与发丝线。**logo 双版本**：浅底表面用 `loginLogoUrl`（深蓝+橙图案），黑底表面用 `headerLogoUrl`（亮色图案）。

## Type

- 中文标题：Noto Sans SC（`font-display`），600 字重、`-0.03em` 紧字距；首页巨标 `clamp(60px, 9vw, 132px)`
- 工程标注/编号/英文：Space Grotesk（`font-en`），11–13px、大写、`0.14em` 字距
- 正文：系统无衬线 13–16px、行高 1.7
- 自托管：`@fontsource/noto-sans-sc`（700/900 备用）、`@fontsource/space-grotesk`（500/600/700）

## Layout

- 顶栏：56px 高，logo + 「由壹点·品牌中心」+ 板块导航 + 用户区；发丝线下边
- 容器：`max-w-[1280px] px-6`；板块间距 64–96px
- 编号索引：五行，网格 `[64px_1fr_160px_120px_32px]`（移动端 `[44px_1fr_auto]`，状态点保留）
- 已上线板块：两张 12px 圆角白卡（`p-8/10`）承载入口按钮

## Components

- 索引行：已上线 = 整行可点 Link，悬停白底+箭头浮现+编号变紫；规划中 = 灰行不可点
- 按钮：主 = 墨色实心 8px 圆角；次 = 1px 墨边白底，hover 反色
- 状态：7px 圆点 + 12px 文字（移动端不隐藏）
- 焦点：`ring-2 ring-[#1a1c1d]/70 ring-offset-2`，全站交互元素必带

## Motion

GSAP（`useGSAP` + `matchMedia('(prefers-reduced-motion: no-preference)')`）：巨字升起 → 光晕淡入 → 索引行 stagger 0.08 → 注脚淡入；光晕 5s 纯 opacity 呼吸循环。全部 0.4–1.2s，信息效率优先（用户既定标准：略丰富但克制）。

## Surfaces

::selection = `#eef0fa`；链接 `underline-offset-4`；光晕容器 `overflow-hidden` 防移动端横向溢出。

## Scope Notes

- 组织架构页（`/organization`）仍为旧「云采石场」语言（BoardShell），待后续按本世界对齐
- 素材库（`/materials`）与旧顶栏保持既有视觉不动