177 lines
5.9 KiB
Markdown
177 lines
5.9 KiB
Markdown
---
|
||
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`。
|