样式库 Style Library

Ambient Glass

环境玻璃
Webdarkproposalreadingglassambientcalm

视频自己的颜色化成模糊的环境光，内容浮在磨砂玻璃岛上。

The video's own colours melt into a blurred ambient field; content floats on frosted glass islands.

Web sample · dark

Palette

Type

标题 Display 永正文 Body — 好的界面不抢内容 1234567890Previews use your installed fonts; webfonts are not bundled.
Display-apple-system, "SF Pro Display", "PingFang SC", "Noto Sans SC", system-ui, sans-serif
Body-apple-system, "SF Pro Text", "PingFang SC", "Noto Sans SC", system-ui, sans-serif
title28px / 1.25, weight 600
article17px / 1.75
ui15px / 1.5
label13px / 1.4

DeepSeek-like reading typography: one clean sans for CJK and Latin, generous line-height, no serif.

Shape & surface

radius · control14px
radius · island22px
radius · island large24px
shadow0 1px 0 rgb(255 255 255 / .06) inset, 0 20px 40px -24px rgb(0 0 0 / .6)
glass28px blur · rgb(28 31 40 / .55)

backdrop-filter: blur(28px) saturate(160%); 1px inner edge rgb(255 255 255/.10). Ambient layer: 3 radial gradients from sampled video colours, blur(80px), opacity .45.

Motion

  • Ambient colours cross-fade over ~1.5s when the video scene changes; never faster.
  • Islands do not move; only the field behind them breathes.
  • prefers-reduced-motion and prefers-reduced-transparency fall back to the solid Brass Reading surfaces.

Do / Don't

Do

  • Sample 3 colours from the current video frame and keep them desaturated enough that text stays ≥ 7:1.
  • Keep the reading column on a glass island, never directly on the gradient.
  • Keep brass 金句 marks from Brass Reading so meaning carries over.

Don't

  • Don't animate the field on every frame; it should feel like room light, not a visualiser.
  • Don't stack glass on glass.
  • Don't drop the solid fallback for browsers without backdrop-filter.

Used in

  • readvideo (proposal, sibling restyle in progress)

Sources

  • Proposal from the lead's brief, 2026-10-13; tokens are a starting point until the restyle lands.

Updated 2026-10-13

Export

/* Ambient Glass / 环境玻璃 — The video's own colours melt into a blurred ambient field; content floats on frosted glass islands. */
:root {
  --readvideo-ambient-glass-bg: #0d0f14;
  --readvideo-ambient-glass-surface: rgb(28 31 40 / .55);
  --readvideo-ambient-glass-ink: #f4f5f7;
  --readvideo-ambient-glass-muted: #a7adbb;
  --readvideo-ambient-glass-accent: #f4f5f7;
  --readvideo-ambient-glass-accent-ink: #0d0f14;
  --readvideo-ambient-glass-line: rgb(255 255 255 / .10);
  --readvideo-ambient-glass-highlight: #dcc28a;
  --readvideo-ambient-glass-highlight-wash: color-mix(in oklab, #dcc28a 14%, transparent);

  --readvideo-ambient-glass-pal-base: #0d0f14;
  --readvideo-ambient-glass-pal-ambient-a-sampled: #3b5bdb;
  --readvideo-ambient-glass-pal-ambient-b-sampled: #c2410c;
  --readvideo-ambient-glass-pal-ambient-c-sampled: #0f766e;
  --readvideo-ambient-glass-pal-glass-fill: #1c1f28;
  --readvideo-ambient-glass-pal-ink: #f4f5f7;
  --readvideo-ambient-glass-pal-muted: #a7adbb;
  --readvideo-ambient-glass-pal-edge: #ffffff;
  --readvideo-ambient-glass-pal-brass: #dcc28a;

  --readvideo-ambient-glass-font-display: -apple-system, "SF Pro Display", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
  --readvideo-ambient-glass-font-body: -apple-system, "SF Pro Text", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
  --readvideo-ambient-glass-text-title: 28px / 1.25, weight 600;
  --readvideo-ambient-glass-text-article: 17px / 1.75;
  --readvideo-ambient-glass-text-ui: 15px / 1.5;
  --readvideo-ambient-glass-text-label: 13px / 1.4;

  --readvideo-ambient-glass-radius-control: 14px;
  --readvideo-ambient-glass-radius-island: 22px;
  --readvideo-ambient-glass-radius-island-large: 24px;
  --readvideo-ambient-glass-glass-blur: 28px;
  --readvideo-ambient-glass-glass-fill: rgb(28 31 40 / .55);
  --readvideo-ambient-glass-shadow: 0 1px 0 rgb(255 255 255 / .06) inset, 0 20px 40px -24px rgb(0 0 0 / .6);
}

Compare