haiyushuke-website/DESIGN.md

---
version: 1.0
name: Haiyu AI — Sci-Fi Intelligence
description: 海宇数科大模型官网视觉规范。深空底色 + 青紫霓虹渐变 + 微弱网格/辉光，传达「智能基础设施」而非传统企业站。

colors:
  primary: "#0b5fff"
  on-primary: "#f8fbff"
  ink: "#0a1224"
  body: "#5c6b8a"
  hairline: "#d8e2f2"
  canvas: "#f4f8ff"
  canvas-elevated: "#ffffff"
  canvas-dark: "#050816"
  canvas-dark-mid: "#0c1228"
  surface-dark-soft: "#151d3a"
  surface-dark-glass: "rgb(12 20 48 / 0.55)"
  on-dark: "#eef6ff"
  on-dark-muted: "#9eb4d8"
  accent-cyan: "#00e8ff"
  accent-violet: "#8b5cf6"
  accent-magenta: "#e879f9"
  accent-electric: "#22d3ee"
  accent-mint: "#a5f3fc"
  glow-cyan: "rgb(0 232 255 / 0.45)"
  glow-violet: "rgb(139 92 246 / 0.4)"

typography:
  display-xxl:
    fontFamily: Inter, system-ui, sans-serif
    fontSize: 64px
    fontWeight: 500
    lineHeight: 1.15
  display-xl:
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.2
  display-lg:
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.3
  display-md:
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.35
  body-lg:
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.65
  body-md:
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.7
  caption:
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.55
  caption-strong:
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.55
  mono-caps-button:
    fontFamily: JetBrains Mono, ui-monospace, monospace
    fontSize: 14px
    fontWeight: 500
  mono-caps-eyebrow:
    fontSize: 11px
    fontWeight: 500
    letterSpacing: 0.12em
  mono-caption:
    fontSize: 11px
    fontWeight: 400

rounded:
  xs: 3.25px
  sm: 6px
  md: 10px
  full: 9999px

spacing:
  section: 88px
  container-gutter-desktop: 32px
  container-gutter-mobile: 16px

components:
  nav-bar:
    backgroundColor: "{colors.canvas-dark}"
    borderColor: "rgb(0 232 255 / 0.15)"
  button-primary:
    background: "linear-gradient(135deg, {colors.accent-cyan}, {colors.accent-violet})"
    textColor: "{colors.on-primary}"
    glow: "{colors.glow-cyan}"
  button-ghost-on-dark:
    backgroundColor: "{colors.surface-dark-glass}"
    borderColor: "rgb(0 232 255 / 0.25)"
  hero-band-dark:
    background: "{colors.canvas-dark} + mesh grid + radial violet glow"
  card-on-dark:
    background: "{colors.surface-dark-glass}"
    borderColor: "rgb(0 232 255 / 0.2)"
  card-on-light:
    background: "{colors.canvas-elevated}"
    borderColor: "{colors.hairline}"
  stats-card-tinted:
    background: "linear-gradient(145deg, rgb(0 232 255 / 0.12), rgb(139 92 246 / 0.1))"
---

## Overview

海宇数科官网面向**大模型服务与智能报告**的官方展示（非控制台）。视觉关键词：**深空、霓虹、网格、辉光、数据流**。

- **深色 band**（`canvas-dark`）：Hero、智能体、企业方案、联系。叠加 `band-mesh` 径向光晕与细网格，像「控制台外的指挥舱」。
- **浅色 band**（`canvas`）：产品能力、模型表、资讯。冷白底 + 淡蓝 hairline，卡片微抬。
- **品牌渐变**（固定三停）：`accent-cyan` → `accent-violet` → `accent-magenta`。用于 Hero 装饰、主按钮、标题 `text-gradient`。**禁止**拆成单色图标或再加第四荧光色。
- **主 CTA**：青紫渐变底 + 外发光（`shadow-glow-cyan`），不是纯黑块。
- **中文排版**：`locale-zh.css` 放宽行高、取消西文负字距；眉标可用 `type-eyebrow` 或 `type-mono-caps-eyebrow`（短标签）。

## Colors

| 令牌                                               | 用途                         |
| -------------------------------------------------- | ---------------------------- |
| `primary`                                          | 深色填充按钮、强调条（备用） |
| `accent-cyan` / `accent-violet` / `accent-magenta` | 渐变与科技眉标               |
| `canvas-dark`                                      | 深空主背景                   |
| `canvas`                                           | 浅色 section                 |
| `hairline`                                         | 浅色分割与卡片边             |
| `border-glow`                                      | 深色玻璃卡边框（CSS 变量）   |
| `on-dark` / `on-dark-muted`                        | 深色上的正文层级             |

## Typography

- 展示：Inter 500，标题可用 `text-gradient`（仅 h1/h2 主标题）。
- Mono：JetBrains Mono，**仅**代码块、可选短眉标；不写长段落。

## Layout

- `container-site` max 1280px。
- `band-section` 仅垂直 `section` 间距；水平只由 container 控制。
- `section-stack` 统一块间距。

## Components（实现见 `src/styles/components.css` + `effects.css`）

- `btn-primary` — 渐变 + 辉光  
- `btn-ghost-on-dark` — 玻璃描边  
- `btn-secondary-glow` — 浅色 band 上的描边 CTA  
- `card-on-dark` / `card-glass` — 深色玻璃  
- `card-on-light` — 白卡 + hairline  
- `badge-glow` — 深色上的小标签  
- `gradient-brand` / `text-gradient` — 品牌渐变  

## Do's

- 深色区域加 `band-mesh` 或 `band-grid`（二选一或叠加，勿整页花屏）。
- 统计/高亮块用 `stats-tile`（淡青紫渐变底）。
- 模型表头用 `type-caption-strong` + `text-body`。

## Don'ts

- 不用 `zinc-*` / 随意 hex。
- 不用 `prefers-color-scheme` 自动主题。
- 浅色卡片不要大面积彩色阴影；辉光留给按钮与 Hero 装饰。
- 主标题不要全大写 mono。

## 样式文件架构

```
src/app/globals.css      # 入口：tailwind + tokens + typography + layout + components + effects + locale-zh
src/styles/tokens.css    # @theme 色板、渐变、阴影
src/styles/typography.css
src/styles/layout.css    # container、band、section-stack
src/styles/components.css
src/styles/effects.css   # mesh、grid、text-gradient、glow、stats-tile
src/styles/locale-zh.css # 中文排版与按钮字体
```

变更令牌时同步 `tokens.css` 与 `effects.css`，运行 `pnpm test`。