Duowenwen Glass v2
多问问 玻璃 v2柔和蓝光场上的 Liquid Glass，大圆角、胶囊导航，只有一个蓝。
Apple-style liquid glass over a soft blue light field, with big radii, pill nav and a single blue accent.
Duowenwen Glass v2
多问问，我来讲
好的界面不抢内容。问下去，其余交给留白。
开始使用了解更多
本月进度62%12:04 · 1,280 字
Duowenwen Glass v2
多问问，我来讲
好的界面不抢内容。问下去，其余交给留白。
开始使用了解更多
本月进度62%12:04 · 1,280 字
Palette
Type
标题 Display 永正文 Body — 好的界面不抢内容 1234567890Previews use your installed fonts; webfonts are not bundled.
| Display | -apple-system, BlinkMacSystemFont, "PingFang SC", "SF Pro Display", "Noto Sans SC", sans-serif |
|---|---|
| Body | -apple-system, BlinkMacSystemFont, "PingFang SC", "SF Pro Text", "Helvetica Neue", "Noto Sans SC", "Microsoft YaHei", sans-serif |
| hero | clamp(44px, 7.2vw, 88px) / 1.06, 650, -0.02em |
| hero sub | clamp(17px, 1.6vw, 21px) |
| section | clamp(28px, 3.2vw, 40px) |
| body | 17px / 1.8 |
| button | 15px / 600 |
System fonts only, no webfont.
Shape & surface
| radius · control | 14px |
|---|---|
| radius · card | 28px |
| radius · panel | 36px |
| radius · pill | 999px |
| shadow | inset 0 1px 0 rgb(255 255 255 / .7), 0 0 0 1px rgb(11 16 32 / .07) |
| glass | 24px blur · rgb(255 255 255 / .62) |
backdrop-filter: blur(24px) saturate(180%). Border is a 150deg gradient edge (white .95 → .25 → .95) for a specular rim. Solid fallback for no backdrop-filter and prefers-reduced-transparency.
Motion
- Colour, background and filter transitions 0.2s ease.
- Buttons press with :active scale(.98).
- prefers-reduced-motion disables all transitions.
Do / Don't
Do
- Get depth from translucency and edge light, not shadows.
- Use pill nav and large radii consistently (28 card / 36 panel).
- Keep one blue accent for actions.
Don't
- Don't add hard borders or drop shadows.
- Don't use the faint colour for text under 18px; it fails contrast.
- Don't forget the night variant for the ambient blobs.
Used in
Sources
lingbrook-guild worktree lingbrook-dww-design: src/app/sites/duowenwen/glass.css
Updated 2026-10-13
Export
/* Duowenwen Glass v2 / 多问问 玻璃 v2 — Apple-style liquid glass over a soft blue light field, with big radii, pill nav and a single blue accent. */
:root {
--duowenwen-glass-v2-bg: #f5f7fb;
--duowenwen-glass-v2-surface: rgb(255 255 255 / .62);
--duowenwen-glass-v2-ink: #0b1020;
--duowenwen-glass-v2-muted: #4a5367;
--duowenwen-glass-v2-accent: #3352e8;
--duowenwen-glass-v2-accent-ink: #ffffff;
--duowenwen-glass-v2-line: rgb(11 16 32 / .10);
--duowenwen-glass-v2-highlight: #2f4fe0;
--duowenwen-glass-v2-pal-bg: #f5f7fb;
--duowenwen-glass-v2-pal-ink: #0b1020;
--duowenwen-glass-v2-pal-muted: #4a5367;
--duowenwen-glass-v2-pal-faint: #6b7385;
--duowenwen-glass-v2-pal-glass-solid: #fbfcfe;
--duowenwen-glass-v2-pal-accent-text: #2f4fe0;
--duowenwen-glass-v2-pal-accent-fill: #3352e8;
--duowenwen-glass-v2-pal-accent-press: #2a45cc;
--duowenwen-glass-v2-pal-blob-blue: #4d6bfe;
--duowenwen-glass-v2-pal-blob-sky: #63c7ff;
--duowenwen-glass-v2-pal-blob-violet: #a78bfa;
--duowenwen-glass-v2-pal-night-bg: #07090f;
--duowenwen-glass-v2-pal-night-solid: #151a28;
--duowenwen-glass-v2-pal-night-accent: #9aacff;
--duowenwen-glass-v2-font-display: -apple-system, BlinkMacSystemFont, "PingFang SC", "SF Pro Display", "Noto Sans SC", sans-serif;
--duowenwen-glass-v2-font-body: -apple-system, BlinkMacSystemFont, "PingFang SC", "SF Pro Text", "Helvetica Neue", "Noto Sans SC", "Microsoft YaHei", sans-serif;
--duowenwen-glass-v2-text-hero: clamp(44px, 7.2vw, 88px) / 1.06, 650, -0.02em;
--duowenwen-glass-v2-text-hero-sub: clamp(17px, 1.6vw, 21px);
--duowenwen-glass-v2-text-section: clamp(28px, 3.2vw, 40px);
--duowenwen-glass-v2-text-body: 17px / 1.8;
--duowenwen-glass-v2-text-button: 15px / 600;
--duowenwen-glass-v2-radius-control: 14px;
--duowenwen-glass-v2-radius-card: 28px;
--duowenwen-glass-v2-radius-panel: 36px;
--duowenwen-glass-v2-radius-pill: 999px;
--duowenwen-glass-v2-glass-blur: 24px;
--duowenwen-glass-v2-glass-fill: rgb(255 255 255 / .62);
--duowenwen-glass-v2-shadow: inset 0 1px 0 rgb(255 255 255 / .7), 0 0 0 1px rgb(11 16 32 / .07);
}
/* Night */
@media (prefers-color-scheme: dark) {
:root {
--duowenwen-glass-v2-bg: #07090f;
--duowenwen-glass-v2-surface: rgb(28 33 50 / .58);
--duowenwen-glass-v2-ink: #f1f3f9;
--duowenwen-glass-v2-muted: #aeb5c7;
--duowenwen-glass-v2-accent: #3352e8;
--duowenwen-glass-v2-accent-ink: #ffffff;
--duowenwen-glass-v2-line: rgb(255 255 255 / .10);
--duowenwen-glass-v2-highlight: #9aacff;
}
}/* Tailwind v4 — paste into your main CSS after @import "tailwindcss"; */
@theme {
--color-bg: #f5f7fb;
--color-surface: rgb(255 255 255 / .62);
--color-ink: #0b1020;
--color-muted: #4a5367;
--color-accent: #3352e8;
--color-accent-ink: #ffffff;
--color-line: rgb(11 16 32 / .10);
--color-highlight: #2f4fe0;
--font-display: -apple-system, BlinkMacSystemFont, "PingFang SC", "SF Pro Display", "Noto Sans SC", sans-serif;
--font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "SF Pro Text", "Helvetica Neue", "Noto Sans SC", "Microsoft YaHei", sans-serif;
--radius-control: 14px;
--radius-card: 28px;
--radius-panel: 36px;
--radius-pill: 999px;
--shadow-look: inset 0 1px 0 rgb(255 255 255 / .7), 0 0 0 1px rgb(11 16 32 / .07);
--blur-glass: 24px;
}
// Tailwind v3 — tailwind.config.js
export default {
theme: {
extend: {
colors: {
"bg": "#f5f7fb",
"surface": "rgb(255 255 255 / .62)",
"ink": "#0b1020",
"muted": "#4a5367",
"accent": "#3352e8",
"accent-ink": "#ffffff",
"line": "rgb(11 16 32 / .10)",
"highlight": "#2f4fe0",
},
fontFamily: {
display: ["-apple-system, BlinkMacSystemFont, \"PingFang SC\", \"SF Pro Display\", \"Noto Sans SC\", sans-serif"],
sans: ["-apple-system, BlinkMacSystemFont, \"PingFang SC\", \"SF Pro Text\", \"Helvetica Neue\", \"Noto Sans SC\", \"Microsoft YaHei\", sans-serif"],
},
borderRadius: {
"control": "14px",
"card": "28px",
"panel": "36px",
"pill": "999px",
},
backdropBlur: { glass: "24px" },
},
},
};