月之暗面ui

# Moonshot AI 官网（moonshot.cn）— UI 语义归纳 参考页：[Moonshot AI](https://www.moonshot.cn/)（中文营销站）。以下为从公开页面结构与常见实现中归纳的**设计语义**，便于在本地产品/落地页中复刻「月之暗面」气质；**具体色值以线上 DevTools 为准**，此处为合理近似与角色定义。 --- ## 1. 视觉主题与氛围 - **主题**：深空 / 科技 / AGI 品牌叙事 —— 「寻求将能源转化为智能的最优解」类**大字号宣言**作首屏核心，强调理性、尺度与长期主义。 - **密度**：首屏**高留白 + 少量强元素**；向下滚动以**章节（H2）+ 卡片栅格**递进信息，避免堆满控件。 - **理念**：内容优先（研究、产品能力、Doodle 文化栏目）；**双主 CTA**（如「体验 Kimi」「体验 API」）同级并列，体现产品矩阵而非单一转化。 --- ## 2. 色彩调色板与角色（语义名 + 十六进制近似 + 用途） | 语义名 | 十六进制（近似） | 角色 | |--------|------------------|------| | `bg-deep` | `#0a0a0b` ~ `#0c0c0e` | 页面主背景 | | `surface` | `#111113` ~ `#141416` | 导航条、卡片、分区底 | | `surface-raised` | `#18181b` ~ `#1c1c1f` | 悬停、选中、输入区内底 | | `border-subtle` | `rgba(255,255,255,0.08)` | 分割线、卡片描边 | | `border-strong` | `rgba(255,255,255,0.12)` | 悬停描边 | | `text-primary` | `#fafafa` | 主标题、正文高对比 | | `text-secondary` | `#a1a1aa` | 副文案、说明 | | `text-tertiary` | `#71717a` | 元信息、占位 | | `cta-solid` | `#ffffff` | 主按钮填充 | | `cta-solid-ink` | `#09090b` | 主按钮文字 | | `link` | `#e4e4e7` ~ `#d4d4d8` | 文内链接、次级 CTA | | `rule` | `rgba(255,255,255,0.06)` | 章节间弱分割（若用线） | **注意**：营销站可能存在**极弱渐变或噪点**营造深度；本地复刻时建议**仅用 1px 规则线 + 表面层级**，避免强渐变抢戏（与站内其它 *ui.md 护栏一致时可写明例外）。 --- ## 3. 排版规则（字体家族 + 层级表） - **家族**：中文 + 拉丁均使用**现代无衬线**（线上接近 **Inter / SF Pro / PingFang** 体系）；数字与代码区可用等宽体。 - **层级（建议表）**： | 层级 | 尺寸（近似） | 字重 | 字距 | 颜色角色 | |------|----------------|------|------|----------| | Hero 标题 | 40–56px / clamp | 700 | -0.02~-0.03em | text-primary | | 章节标题 H2 | 28–36px | 700 | -0.02em | text-primary | | 卡片标题 H3 | 18–20px | 600 | -0.01em | text-primary | | 正文 | 16–17px | 400 | 默认 | text-secondary | | 小节标签 / Overline | 11–12px | 600 | 0.08–0.12em uppercase | text-tertiary 或略亮 | | 脚注 / 版权 | 12–13px | 400 | 默认 | text-tertiary | - **行高**：正文 **1.6–1.75**；标题 **1.1–1.2**。 --- ## 4. 组件样式（按钮、卡片、输入、导航状态） - **主按钮**：填充 `cta-solid`，文字 `cta-solid-ink`，**圆角 999px 或 8–12px**（官网常见**胶囊 / 大圆角**）；**无渐变**；阴影**极弱或仅 hover 时** `0 1px 3px rgba(0,0,0,0.2)`。 - **次按钮 / 幽灵**：透明底 + **白或浅灰描边** + 浅字；hover **背景略提亮**（如 `surface-raised`）。 - **卡片**：`surface` 背景 + `border-subtle`，圆角 **12–16px**，内边距 **20–28px**；hover **边框略强 + 微阴影**。 - **输入框**：`surface-raised` 底、`border-subtle`、字色 `text-primary`；focus **外环 1–2px 浅色**或**边框提亮**。 - **导航**：**sticky**、`surface` 与页底同系；底边 `border-subtle`；链接默认 `text-secondary`，hover **text-primary**；当前页可**字重 + 下划线**。 --- ## 5. 布局原则（间距、网格、空白） - **最大内容宽**：约 **1120–1200px** 居中；首屏 Slogan 可**略窄于全宽**以控制行长。 - **垂直节奏**：大区块 **80–120px** padding；组件内 **16–24px** 间距基线。 - **网格**：研究 / 能力区多为 **2–3 列卡片**；移动端 **单列堆叠**。 - **空白**：**宁可多留** —— 与「能源→智能」叙事一致，避免信息墙。 --- ## 6. 深度与海拔（阴影与表面层级） - **层级 0**：`bg-deep`（页底） - **层级 1**：`surface`（导航、页脚、卡片默认） - **层级 2**：`surface-raised`（hover、输入、选中分段） - **阴影**：默认**极弱**；交互组件 hover **略升**（y 偏移 1–2px、blur 8–16、低透明度）；**忌重投影 + 强发光**（除非品牌专题页单独约定）。 --- ## 7. 该做与不该做（护栏与反模式） **该做** - 深底 + 高对比字；**少色多点**（白/灰阶 + 单一强调策略）。 - 章节结构清晰：**H2 → 卡片组 → 次级 CTA**。 - 双主 CTA 时**视觉权重对等**（尺寸、描边一致）。 **不该做** - 彩虹渐变背景、多主色块并置。 - 正文区用大圆角「气泡」破坏严肃感。 - 玻璃拟态 + 重噪点 + 重阴影「三件套」同时上。 - 小字号堆满说明 —— 与官网**大叙事 + 少而精**相悖。 --- ## 8. 响应性行为（断点、触控、折叠） - **断点**：典型 **640 / 960 / 1200**；卡片 **3 → 2 → 1 列**。 - **触控**：主 CTA 高度 **≥ 44px**；卡片整块可点区域明确。 - **折叠**：导航收为**抽屉或汉堡**（小屏）；搜索若存在则**全宽下置**。 --- ## 9. Agent 提示指南（快速色彩 + 即用提示） **色彩一行** > Background `#0a0a0b`, surface `#141416`, text `#fafafa` / `#a1a1aa`, border `rgba(255,255,255,0.08)`, CTA white on `#09090b`. **即用英文提示（可复制）** ```text Design a Moonshot-style marketing page: deep near-black background (#0a0a0b), subtle borders rgba(255,255,255,0.08), large hero headline (48–56px, weight 700, tight letter-spacing), supporting line in muted gray (#a1a1aa). Primary CTA: white pill button with black text; secondary CTA: outline white. Card grid: 3 columns on desktop, rounded corners 12–16px, minimal shadow on hover only. No gradients, no rainbow accents, no glassmorphism. Typography: single modern sans family throughout. ``` --- ## 章节对照表（你提供的 8+1 捕获项） | 章节 | 本文件对应节 | |------|----------------| | 视觉主题与氛围 | §1 | | 色彩调色板与角色 | §2 | | 排版规则 | §3 | | 组件样式 | §4 | | 布局原则 | §5 | | 深度与海拔 | §6 | | 该做与不该做 | §7 | | 响应性行为 | §8 | | 代理提示指南 | §9 |