Design System Inspired by Sanity

1. 视觉主题与氛围

Sanity 的官网是一个开发者内容平台，被呈现为一个夜间指挥中心——深色、精确、结构严谨。整段体验建立在近黑色画布（#0b0b0b）之上，它读起来不像"深色模式切换"，更像一个为终端重度用户打造的产品的自然状态。当大多数 CMS 营销页面追求友好的粉彩和柔和插画时，Sanity 选择拥抱自身产品的庄重感：结构化的内容理应配上一个结构化的舞台。

标志性的排版声音是 waldenburgNormal——一种独特、略带几何感的无衬线字体，带有紧致的负字距（展示尺寸下 -0.32px 到 -4.48px），让标题呈现出压缩的、工程化的质感。在 112px 巨型首屏、-4.48px 字距下，字体几乎像机器切割——像精密切割的钢铁字形。它与 IBM Plex Mono 搭配用于代码与技术标签，形成双轨声音：编辑权威与开发者可信度的结合。

Sanity 的独特之处在于其单色深色调色板与鲜明饱和的强调点缀之间的互动。中性灰阶从纯黑到严格控制的灰色梯度（#0b0b0b → #212121 → #353535 → #797979 → #b9b9b9 → #ededed → #ffffff），没有暖或冷的偏向——纯粹的无彩色精度。在这个纪律严明的背景上，霓虹绿（display-p3 绿色）和电光蓝（#0052ef）像暗室中的信号灯一样落下冲击。橙红色 CTA（#f36458）在原本偏冷的系统中提供了唯一的暖色。

关键特征：

• 近黑画布（#0b0b0b）作为默认、自然的环境——不是深色"模式"，而是主要的身份
• waldenburgNormal 在展示尺寸下使用极端的负字距，形成精密工程的排版声音
• 纯无彩色灰阶——无暖或冷倾向，纯粹的中性纪律
• 鲜明的强调点缀：霓虹绿、电光蓝（#0052ef）与珊瑚红（#f36458）落在深色背景上
• 胶囊形主按钮（99999px 圆角）与微妙圆角矩形（3–6px）形成对比，用于次级操作
• IBM Plex Mono 作为编辑展示字体的技术对位
• 全幅深色段与受控最大宽度容器内的内容
• 悬停态统一切换到电光蓝（#0052ef）——一致的"激活"信号

2. 配色与角色

主品牌色

• Sanity Black（#0b0b0b）：主画布与主导表面色。不是纯黑，但足够接近以呈现绝对感。整套视觉身份的基础。
• Pure Black（#000000）：用于最大对比时刻、深色叠加与某些边框强调。
• Sanity Red（#f36458）：主 CTA 与品牌强调色——一种暖珊瑚红，用作主要的行动召唤颜色。"Get Started" 按钮与主要转化点都用它。

强调色与交互色

• Electric Blue（#0052ef）：整个系统中统一的悬停/激活状态颜色。按钮、链接与交互元素在悬停时都切到这种蓝。也用作 --color-blue-700 作为焦点环与激活态。
• Light Blue（#55beff / #afe3ff）：次级蓝色变体，用于强调背景、徽标与弱化的蓝色表面。
• Neon Green（color(display-p3 .270588 1 0)）：一种鲜明的广色域绿色，用作 --color-fg-accent-green，表示成功状态与高级功能高亮。在 sRGB 下回退到 #19d600。
• Accent Magenta（color(display-p3 .960784 0 1)）：一种鲜明的广色域洋红，用于特殊强调时刻。

表面与背景

• Near Black（#0b0b0b）：默认页面背景与主表面。
• Dark Gray（#212121）：抬升的表面色，用于卡片、次级容器、输入框背景与基线画布上方的微妙分层。
• Medium Dark（#353535）：三级表面与边框色，用于在深色层之间创建深度。
• Pure White（#ffffff）：用于反色段、深底浅字与特定按钮表面。
• Light Gray（#ededed）：反色/浅色段的浅色表面与微妙的背景色调。

中性色与文本

• White（#ffffff）：深色表面上的主文本色，最高可读性。
• Silver（#b9b9b9）：次级文本、深色表面上的正文、弱化描述与占位符文本。
• Medium Gray（#797979）：三级文本、元数据、时间戳与弱化内容。
• Charcoal（#212121）：浅色/反色表面上的文本。
• Near Black Text（#0b0b0b）：白色/浅色按钮表面上的主文本。

语义色

• Error Red（#dd0000）：破坏性操作、校验错误与关键警告——一种纯的高饱和度红。
• GPC Green（#37cd84）：隐私/合规指示绿色。
• Focus Ring Blue（#0052ef）：用于无障碍焦点的焦点环颜色，与交互蓝一致。

边框系统

• Dark Border（#0b0b0b）：深色容器的主边框——几乎不可见，保持最小的容器感。
• Subtle Border（#212121）：输入框、文本区域与深色表面卡片边缘的标准边框。
• Medium Border（#353535）：用于强调容器与分隔线的更显眼的边框。
• Light Border（#ffffff）：反色/浅色元素或需要对比分隔的按钮上的边框。
• Orange Border（color(display-p3 1 0.3333 0)）：用于高亮/特色元素的特殊强调边框。

3. 字体排版规则

字体族

• Display / Headline：waldenburgNormal，备用：waldenburgNormal Fallback, ui-sans-serif, system-ui
• Body / UI：waldenburgNormal，备用：waldenburgNormal Fallback, ui-sans-serif, system-ui
• Code / Technical：IBM Plex Mono，备用：ibmPlexMono Fallback, ui-monospace
• Fallback / CJK：Helvetica，备用：Arial, Hiragino Sans GB, STXihei, Microsoft YaHei, WenQuanYi Micro Hei

注：waldenburgNormal 是一款定制字体。外部实现时，使用 Inter 或 Space Grotesk 作为无衬线替代（几何感、略带紧凑感）。IBM Plex Mono 可在 Google Fonts 上获取。

层级

原则

• 展示尺寸的极端负字距：72px 及以上的展示标题使用激进的负字距（-2.88px 到 -4.48px），形成紧凑、工程化的质感，使 Sanity 区别于更松散的编辑字体排版。
• 单一字体，多种语域：waldenburgNormal 同时承担编辑展示与功能 UI 文本。字重范围窄（大部分为 400-425，仅 11px 大写标签用 500-600），保持声音一致。
• OpenType 特性控制：字体排版使用有意识的特性设置，包括展示尺寸下的 "cv01", "cv11", "cv12", "cv13", "ss07"，以及正文的 "calt" 0，针对不同上下文微调字符替换。
• 紧凑标题，宽松正文：标题使用 1.00–1.24 行高（极紧），而正文以 1.50 行高呼吸。这种对比形成清晰的视觉层级。
• 大写字母用于技术标签：IBM Plex Mono 说明文字与小标签经常使用 text-transform: uppercase 与紧凑行高，营造技术元数据的"系统读出"美学。

4. 组件样式

按钮

Primary CTA（胶囊形）

• 背景：Sanity Red（#f36458）
• 文本：White（#ffffff）
• 内边距：8px 16px
• 圆角：99999px（完整胶囊）
• 边框：无
• 悬停：Electric Blue（#0052ef）背景，白色文本
• 字体：16px waldenburgNormal，字重 400

Secondary（深色胶囊）

• 背景：Near Black（#0b0b0b）
• 文本：Silver（#b9b9b9）
• 内边距：8px 12px
• 圆角：99999px（完整胶囊）
• 边框：无
• 悬停：Electric Blue（#0052ef）背景，白色文本

Outlined（浅色胶囊）

• 背景：White（#ffffff）
• 文本：Near Black（#0b0b0b）
• 内边距：8px
• 圆角：99999px（完整胶囊）
• 边框：1px solid #0b0b0b
• 悬停：Electric Blue（#0052ef）背景，白色文本

Ghost / Subtle

• 背景：Dark Gray（#212121）
• 文本：Silver（#b9b9b9）
• 内边距：0px 12px
• 圆角：5px
• 边框：1px solid #212121
• 悬停：Electric Blue（#0052ef）背景，白色文本

大写标签按钮

• 字体：11px waldenburgNormal，字重 600，大写
• 背景：透明或 #212121
• 文本：Silver（#b9b9b9）
• 字距：normal
• 用于类似标签的导航与筛选控件

卡片

Dark Content Card

• 背景：#212121
• 边框：1px solid #353535 或 #212121
• 圆角：6px
• 内边距：24px
• 文本：标题 White（#ffffff），正文 Silver（#b9b9b9）
• 悬停：微妙的边框颜色变化或高度变化

Feature Card（全幅）

• 背景：#0b0b0b 或全幅图像/渐变
• 边框：无或 1px solid #212121
• 圆角：12px
• 内边距：32–48px
• 包含大图像与叠加文字

输入框

文本输入框 / 文本区域

• 背景：Near Black（#0b0b0b）
• 文本：Silver（#b9b9b9）
• 边框：1px solid #212121
• 内边距：8px 12px
• 圆角：3px
• 焦点：var(--focus-ring-color)（蓝色）轮廓，2px solid
• 焦点背景：切换到深青色（#072227）

搜索输入框

• 背景：#0b0b0b
• 文本：Silver（#b9b9b9）
• 内边距：0px 12px
• 圆角：3px
• 占位符：Medium Gray（#797979）

导航

顶部导航

• 背景：Near Black（#0b0b0b）配 backdrop blur
• 高度：自适应，紧凑内边距
• Logo：左对齐，Sanity 字标
• 链接：waldenburgNormal 16px，Silver（#b9b9b9）
• 链接悬停：通过 --color-fg-accent-blue 切换为 Electric Blue
• CTA 按钮：Sanity Red 胶囊按钮右对齐
• 分隔线：1px border-bottom #212121

Footer

• 背景：Near Black（#0b0b0b）
• 多列链接布局
• 链接：Silver（#b9b9b9），悬停变蓝
• 段标题：White（#ffffff），13px 大写 IBM Plex Mono

徽标 / 胶囊

Neutral Subtle

• 背景：White（#ffffff）
• 文本：Near Black（#0b0b0b）
• 内边距：8px
• 字体：13px
• 圆角：99999px

Neutral Filled

• 背景：Near Black（#0b0b0b）
• 文本：White（#ffffff）
• 内边距：8px
• 字体：13px
• 圆角：99999px

5. 布局原则

间距系统

基础单位：8px

网格与容器

• 最大内容宽度：约 1440px（根据断点推断）
• 页面槽：桌面 32px，移动 16px
• 内容段使用全幅背景与居中的最大宽度内容
• 多列布局：桌面 2–3 列，移动单列
• 卡片网格：CSS Grid，一致的间距（16–24px）

留白哲学

Sanity 在段间使用激进的垂直间距（64–120px），在深色画布上创造呼吸空间。段内的间距更紧（16–32px），形成被慷慨留白分隔的密集信息簇。这种节奏让页面具有"幻灯片"质感——每个段都像其专属的聚焦画面。

圆角比例

6. 层次与深度

阴影系统

深度哲学

Sanity 的深度系统几乎完全是比色法而非基于阴影。高度通过表面颜色变化来传达：#0b0b0b（地面）→ #212121（抬升）→ #353535（突出）→ #ffffff（反色/最高）。这种方式是深色界面的原生选择，因为传统的投影阴影在深色界面上将不可见。少数存在的阴影是环形阴影（0px 0px 0px Npx）或模糊阴影（backdrop-filter），而非偏移阴影，保持扁平、精密工程的质感。

基于边框的容器（1px solid #212121 或 #353535）作为主要的空间分隔手段，边框的深浅校准为可见但不主导。系统避免"浮动卡片"的视觉感——一切都感觉安装在表面上而非悬浮其上。

7. 推荐与避免

推荐

• 使用无彩色灰阶作为基础——保持纯粹的中性纪律，无暖/冷偏色
• 一致地将 Electric Blue（#0052ef）作为所有交互元素的统一悬停/激活态
• 在 48px 及以上的展示标题上使用极端负字距（-2px 到 -4.48px）
• 主 CTA 保持完整胶囊形（99999px 圆角），使用珊瑚红（#f36458）
• 技术标签、标签与系统元数据使用 IBM Plex Mono 大写字母
• 通过表面颜色（深到浅）传达深度，而非阴影
• 在深色画布上保持慷慨的垂直段间距（64–120px）
• 展示字体排版使用 "cv01", "cv11", "cv12", "cv13", "ss07" OpenType 特性

避免

• 不要在中性灰阶中引入暖或冷的偏色——Sanity 的灰色是纯粹无彩色
• 不要使用投影阴影表达高度——深色界面要求比色法的深度
• 不要使用 13px 到 99998px 之间的圆角——系统直接从 12px（大卡片）跳到胶囊（99999px）
• 不要在同一元素中混用珊瑚红 CTA 与电光蓝交互色
• 不要使用重字重（700+）——系统最高到 600，且仅用于 11px 大写标签
• 不要在浅色表面放浅色文本，或在深色表面放深色文本，而不检查灰底灰的对比度
• 不要使用传统的偏移 box-shadow——只用环形阴影（0 0 0 Npx）或基于边框的容器
• 不要打破标题的紧凑行高——1.00–1.24 是范围，展示文本永远不要到 1.5+

8. 响应式行为

断点

折叠策略

• 导航：水平链接在 768px 以下折叠为汉堡菜单
• 首屏字体：在断点间从 112px → 72px → 48px → 38px 缩放，保持紧凑的字距比例
• 网格布局：约 960px 时 3 列 → 2 列，768px 以下单列
• 卡片网格：在移动端使用横向滚动而非折行（保留卡片宽高比）
• 段间距：移动端垂直内边距减少约 40%（120px → 64px → 48px）
• 按钮尺寸：CTA 胶囊保持内边距但缩小字号；幽灵按钮保持固定
• 代码块：保留等宽格式的横向滚动

移动端特定调整

• 全幅段延展到边到边，内槽 16px
• 触控目标：所有交互元素最小 44px
• 标题字距在移动尺寸下略微放宽（减少激进的负字距）
• 图像容器从固定宽高比切换为全宽自适应高度

9. 智能体 Prompt 指南

颜色速查

背景：          #0b0b0b（近黑画布）
表面：          #212121（抬升的卡片/容器）
边框：          #353535（可见）/ #212121（微妙）
主文本：        #ffffff（深底白字）
次文本：        #b9b9b9（深底银字）
三级文本：      #797979（中灰）
CTA：           #f36458（珊瑚红）
交互：          #0052ef（电光蓝，所有悬停）
成功：          #19d600（绿色，sRGB 回退）
错误：          #dd0000（纯红）
浅色表面：      #ededed / #ffffff（反色段）

示例 Prompt

Landing page 段： "创建一个功能段，背景为近黑色（#0b0b0b）。标题使用 48px Inter，字距 -1.68px，白色文本。下方 16px 正文使用 #b9b9b9，行高 1.50。包含珊瑚红（#f36458）胶囊按钮配白色文本，以及次级深色（#0b0b0b）胶囊按钮配 #b9b9b9 文本。两个按钮悬停时都切换到 #0052ef 蓝。"

卡片网格： "在 #0b0b0b 背景上构建 3 列卡片网格。每张卡片有 #212121 表面，1px solid #353535 边框，6px 圆角，24px 内边距。卡片标题 24px 白色字距 -0.24px。正文 13px #b9b9b9。在每张卡片顶部添加 13px IBM Plex Mono 大写标签 #797979。"

表单段： "在 #0b0b0b 背景上设计联系表单。输入框有 #0b0b0b 背景，1px solid #212121 边框，3px 圆角，8px 12px 内边距，#b9b9b9 占位符文本。焦点态显示 2px 蓝色（#0052ef）环。提交按钮是全宽珊瑚红（#f36458）胶囊。每个字段下方添加 13px #797979 帮助文本。"

导航栏： "在 #0b0b0b 上创建粘性顶部导航，带 backdrop blur。左侧：15px 白色的品牌文字。中/右：16px #b9b9b9 导航链接，悬停变蓝。最右：珊瑚红（#f36458）胶囊 CTA 按钮。底边框：1px solid #212121。"

迭代指南

1. 从深色开始：以 #0b0b0b 背景开始，#ffffff 主文本，#b9b9b9 次文本
2. 增加结构：使用 #212121 表面与 #353535 边框作容器——无阴影
3. 应用字体排版：Inter（或 Space Grotesk），标题紧凑字距，正文 1.50 行高
4. 色彩点缀：为 CTA 添加 #f36458，为所有悬停/交互态添加 #0052ef
5. 精修间距：8px 基础单位，段内 24–32px，段间 64–120px
6. 技术细节：为标签与元数据添加 IBM Plex Mono 大写标签
7. 打磨：确保所有交互元素悬停到 #0052ef，所有按钮为胶囊或微妙 5px 圆角，边框为细线（1px）