visual-style-presets

视觉样式预设

一种技能，九种预设。每种预设都是一套完整的设计方向：表面层级、强调色规则、字体搭配，以及一个承载其标识的标志性结构元素。选择一种预设，应用其设计令牌，然后坚持使用它的结构元素。

如何使用

1. 选择与需求相符的预设。如果用户描述了某种氛围（如“高端暗色”“纸张质感”“工程感”），请将其映射到下方最接近的预设。
2. 原样复制该预设的设计令牌代码块，作为基础。再根据品牌调整色相。
3. 实现标志性结构元素——它能让预设一目了然。跳过它，无论配色如何，最终效果都会显得普通。
4. 应用底部的通用规则。它们比配色更重要。

不要在同一界面中混用两种预设。 混合玻璃拟态、拟物化和边框，是最常见的失败原因。每个屏幕只使用一种材质体系。

---

预设

1. dark-glass-workspace

高端暗色控制台：磨砂外壳、多栏工作区、悬浮数据卡片。

:root {
  --bg: #08090b;           /* near-black base */
  --surface: rgba(24, 26, 31, 0.72);   /* frosted shell fill */
  --surface-raised: rgba(38, 41, 48, 0.78);
  --edge: rgba(255, 255, 255, 0.10);   /* 1px top-edge highlight */
  --edge-strong: rgba(255, 255, 255, 0.22);
  --ink: #f4f5f7;
  --ink-muted: #a1a7b3;   /* contrast floor — do not go dimmer */
  --accent: #60a5fa;
  --blur: 18px;
}

标志性结构元素： 带 1px 渐变边框的容器，内部填充更深的半透明颜色。边缘之所以清晰，正是因为内部比边框更暗——反过来就会让外壳显得扁平。搭配 backdrop-filter: blur(var(--blur))。

布局：左侧导航／中央主区域／右侧操作侧边栏，置于居中的最大宽度外壳中，并以细竖线作为轨道。保持中央区域简洁；卡片为其提供支撑。

务必提供不使用模糊效果的备用方案——backdrop-filter 失效的情况比人们想象的更多：

@supports not (backdrop-filter: blur(1px)) {
  .glass { background: rgba(20, 22, 27, 0.94); }
}

2. dark-technical-framed

工程感单色风格。标识来自边框逻辑，而非柔和的悬浮卡片。

:root {
  --bg: #0a0a0a;
  --panel: #121214;
  --panel-raised: #1a1a1e;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.28);
  --ink: #fafafa;
  --ink-muted: #8b8b93;
  --accent: #e4e4e7;   /* monochrome by default; brand accent used sparsely */
}

标志性结构元素： 超出外壳边缘的竖向轨道——让引导线稍微延伸到容器顶部和底部之外，并用微小的角方块标记边界。这种超出边缘的处理，才让它显得“有工程感”，而非仅仅“带边框”。

布局：不对称面板网格（大型主视觉区域 + 较小的工具／可视化面板），以细分隔线隔开。活动列表行使用左侧竖条、更亮的文字和微妙的半透明填充；非活动行保持描边和低对比度。区段编号和元数据使用带字距的全大写等宽标签。

3. cobalt-contrast-dark

高对比度暗色风格，以高饱和蓝色为主。比 dark-glass-workspace 更醒目。

:root {
  --bg: #05070d;
  --surface: #0d1220;
  --edge: rgba(96, 165, 250, 0.24);
  --ink: #f8fafc;
  --ink-muted: #94a3b8;
  --accent: #2563eb;
  --accent-hot: #dbeafe;   /* near-white core for beams/highlights */
}

标志性结构元素： 如果使用光束或激光强调效果，请将核心厚度与光晕宽度分开处理——使用纤细、近白色的核心（约 2–5px），搭配宽阔柔和的光晕（约 30–40px）。为增强光晕而加粗核心是典型错误，会让效果看起来像一团涂抹。核心保持近白色，而非高饱和色；由光晕承载色相。

4. matte-accent-dark

暗色中性基底，搭配一种有力的强调色。色相可调整。

:root {
  --bg: #0b0b0c;
  --surface: #16161a;
  --line: rgba(255, 255, 255, 0.10);
  --ink: #fafafa;
  --ink-muted: #8f8f98;
  /* pick one: emerald #10b981 · lime #a3e635 · fuchsia #d946ef · violet #8b5cf6 */
  --accent: #10b981;
}

标志性结构元素： 强调色只用于三个角色，不出现在其他地方——活动状态、一个焦点数字／指标，以及主要 CTA。其他内容都保持中性。克制才是这种风格的关键；强调色无处不在，会让它沦为普通的暗色模式。

5. warm-paper-light

暖调米白表面，外层以较深色外壳框住。质感柔和，而非冷硬。

:root {
  --page: #1c1a17;        /* dark outer field */
  --paper: #f7f3ec;       /* warm interior — never #fff */
  --paper-sunk: #ece6db;
  --line: rgba(28, 26, 23, 0.14);
  --ink: #21201d;
  --ink-muted: #6b665d;
  --accent: #c2410c;
  --radius-shell: 24px;
}

标志性结构元素： 双区域构图——一个大型圆角浅色容器承载完整体验，并置于较深色的页面背景上。外框就是设计理念。在大面积纸张区域添加低对比度的斜向纹理和小型 L 形角标细节。界面使用无衬线字体，时间戳／说明文字／元数据使用等宽字体。

6. beige-minimal-light

静谧的暖调极简风格。元素更少，留白更多，不使用框架装饰。

:root {
  --bg: #faf8f4;
  --surface: #ffffff;
  --line: rgba(30, 27, 22, 0.10);
  --ink: #1c1917;
  --ink-muted: #78716c;
  --accent: #1c1917;   /* accent is usually just ink — near-monochrome */
}

标志性结构元素： 以充足留白作为主要结构工具；标题的字号比直觉上舒适的程度再大一级；使用极细分隔线，而非卡片。如果需要卡片，内容很可能应该更少。

7. editorial-grid

杂志式构图 + 精准细节。必须采用非对称布局。

:root {
  --bg: #0e0e10;          /* works dark or light — swap ink/bg */
  --ink: #f5f5f4;
  --ink-muted: #a3a3a3;
  --line: rgba(255, 255, 255, 0.14);
  --accent: #eab308;
  --col: 12;
  --margin: clamp(24px, 5vw, 64px);
}

**标志性元素：**电影感的横向媒体条带，横跨网格，并以可控的方式与相邻列重叠。禁止居中的主视觉区块——一侧放置超大标题，精简的辅助文案则与其错开。

承载风格的细节：悬停缩放 ≤ 1.02、cubic-bezier(.22,.61,.36,1) 缓动、45–70ms 错开、等宽计数器和章节标记、精细的网格线迹。绝不要让悬停成为唯一的可用性提示。

8. archival-book-serif

以衬线字体为主的阅读界面，置于较暗的目录框架中。

:root {
  --shell: #17161c;
  --paper: #efe7d7;
  --paper-shade: #e2d8c4;
  --ink: #24211c;
  --ink-muted: #6d655a;
  --accent: #7c2d12;   /* oxblood; bronze/antique gold also valid */
  --leading-body: 1.75;
}

标志性元素：双区域书籍界面——居中的书页／跨页，带有中缝处理、纸张渐变、页边阴影，以及页面之间轻微的色调差异，并置于深色界面框架之中。侧边栏采用等宽字体索引，并将章节条目分组。学术风格的细节在这里恰到好处：首字下沉、页边注、书页标记、引文。

9. wireframe-diagnostic

刻意保留未完成感，宛如蓝图。有意显露结构。

:root {
  --bg: #fbfbfa;
  --line: #d4d4d8;
  --line-active: #18181b;
  --ink: #18181b;
  --ink-muted: #71717a;
  --accent: #dc2626;
  --font-ui: ui-monospace, "SF Mono", Menlo, monospace;
}

**标志性元素：**可见的尺寸标注——尺寸标签、带叉号的占位框、虚线边界、注释标注。全程使用等宽字体。适用于传达结构（规格、文档、架构），绝不用于精致的营销界面。

---

通用规则

这些规则优先于配色方案。仅应用预设而不遵守这些规则，效果依然会显得平庸。

**表面层级。**背景、卡片、弹出层、凸起表面的颜色绝不能合并为一种。深色模式下，每升一级都要更亮；浅色模式下，每升一级都要更加区分明显。扁平会显得廉价。深色模式下，为每种中性色加入朝强调色倾斜的微弱色调（例如，蓝色强调色搭配偏 217° 的蓝炭灰），而不是纯灰色。

**对比度下限。**柔和文本的亮度不得低于各预设给出的数值。在设计工具中，看起来“更显高级”的暗淡文字，在日光下和 WCAG 标准下却无法通过。正文文本 ≥ 4.5:1，大号文本 ≥ 3:1。

**强调色纪律。**只用一种强调色，最多承担三种角色（活动状态、焦点图形、主要 CTA）。第二种强调色必须有明确的语义理由（成功／危险）。

**深度要有方向。**光线从上方照来：上边缘更亮，下边缘更暗，阴影位于下方。所有组件都要保持一致，否则整个界面就会显得不协调。避免纯黑阴影——将其色调调整为偏向表面色。

**动效保持沉稳。**控件用时 160–240ms，遮罩式显现和章节进入用时 400–760ms。视差幅度限制在 5% 以下。高级系统中绝不要使用弹跳效果。 始终尊重减少动态效果的设置：

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

**纹理只需感受到，不要看出来。**颗粒、斜线图案和噪点应保持极低不透明度。如果你能明显注意到纹理，就将其减半。在小型控件上应减弱或去除纹理。

**统一材质系统。**不要在同一个组件或屏幕中混用玻璃质感、拟物、拟态和框架式处理。

相关技能

• beautiful-shadows — 精确的分层高度阴影（替代临时添加的 box-shadow）
• container-lines — 以 CSS 实现的轨道／方角方块元素
• framed-grid-layout — 通过分层渐变实现的 L 形括号框架
• glass-dark-ui — 对 dark-glass-workspace 预设的更深入实现
• mesh-gradient-dark-blue-clean — 适用于深色预设的动态网格背景
• skeuomorphic-ui — 有触感／按压式表面（属于另一种材质系统）
• css-border-gradient — 1px 渐变边框包装器技术

快速检查

• 你能从截图中说出这是哪个预设吗？如果不能，说明标志性元素缺失。
• 表面层级是否清晰可见——至少有三个可区分的层级？
• 强调色是出现在三个地方，还是二十个地方？
• 柔和文本的对比度是否达到 4.5:1？
• 屏幕上是否恰好只有一种材质系统？