haiyushuke-website/DESIGN.md

version, name, description, colors, typography, rounded, spacing, components

version	name	description	colors	typography	rounded	spacing	components
1.0	Haiyu AI — Sci-Fi Intelligence	海宇数科大模型官网视觉规范。深空底色 + 青紫霓虹渐变 + 微弱网格/辉光，传达「智能基础设施」而非传统企业站。	primary on-primary ink body hairline canvas canvas-elevated canvas-dark canvas-dark-mid surface-dark-soft surface-dark-glass on-dark on-dark-muted accent-cyan accent-violet accent-magenta accent-electric accent-mint glow-cyan glow-violet #0b5fff #f8fbff #0a1224 #5c6b8a #d8e2f2 #f4f8ff #ffffff #050816 #0c1228 #151d3a rgb(12 20 48 / 0.55) #eef6ff #9eb4d8 #00e8ff #8b5cf6 #e879f9 #22d3ee #a5f3fc rgb(0 232 255 / 0.45) rgb(139 92 246 / 0.4)	display-xxl display-xl display-lg display-md body-lg body-md caption caption-strong mono-caps-button mono-caps-eyebrow mono-caption fontFamily fontSize fontWeight lineHeight Inter, system-ui, sans-serif 64px 500 1.15 fontSize fontWeight lineHeight 40px 500 1.2 fontSize fontWeight lineHeight 28px 500 1.3 fontSize fontWeight lineHeight 22px 500 1.35 fontSize fontWeight lineHeight 18px 400 1.65 fontSize fontWeight lineHeight 16px 400 1.7 fontSize fontWeight lineHeight 14px 400 1.55 fontSize fontWeight lineHeight 14px 500 1.55 fontFamily fontSize fontWeight JetBrains Mono, ui-monospace, monospace 14px 500 fontSize fontWeight letterSpacing 11px 500 0.12em fontSize fontWeight 11px 400	xs sm md full 3.25px 6px 10px 9999px	section container-gutter-desktop container-gutter-mobile 88px 32px 16px	nav-bar button-primary button-ghost-on-dark hero-band-dark card-on-dark card-on-light stats-card-tinted backgroundColor borderColor {colors.canvas-dark} rgb(0 232 255 / 0.15) background textColor glow linear-gradient(135deg, {colors.accent-cyan}, {colors.accent-violet}) {colors.on-primary} {colors.glow-cyan} backgroundColor borderColor {colors.surface-dark-glass} rgb(0 232 255 / 0.25) background {colors.canvas-dark} + mesh grid + radial violet glow background borderColor {colors.surface-dark-glass} rgb(0 232 255 / 0.2) background borderColor {colors.canvas-elevated} {colors.hairline} 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。