Stained Glass 彩色玻璃花窗（Stained Glass）
Stained Glass renders an interface as a leaded cathedral window: translucent panes of ruby, cobalt, amber and emerald segmented by thick black lead cames, every pane lit from behind so color seems to shine through the surface rather than sit on it. Motifs borrow the craft's vocabulary — rose windows, diamond quarrels, arched lights — and panes carry the streaks and seeded bubbles of hand-blown antique glass.
彩色玻璃花窗把界面渲染成一扇铅条镶嵌的教堂花窗：红宝石、钴蓝、琥珀和祖母绿的半透明玻璃片，被粗黑铅条分割开来，每一块都从背后透光，颜色像是从表面里照出来的，而不是涂上去的。纹样借用这门手艺的语汇 —— 玫瑰窗、菱形格纹、尖拱窗 —— 玻璃片上还带着手吹古董玻璃的条纹和细小气泡。
Scope: This entry covers the leaded-glass look — Gothic church windows through Tiffany lamps — applied to UI as translucent jewel panes joined by black cames. The opaque, gilded black-and-gold geometry that shares the word 'cathedral ballroom' is Art Deco; flat color blocks with thick black outlines and no translucency are Neobrutalism.
范围：本条覆盖铅条镶嵌玻璃（leaded glass）的观感 —— 从哥特教堂花窗到 Tiffany 台灯 —— 在 UI 里表现为黑铅条拼接的半透明宝石色玻璃片。同样带「教堂宴会厅」气质、但不透明描金的黑金几何是装饰艺术（Art Deco）；有粗黑描边但不透光的扁平色块则是新粗野主义。
标本可交互 —— 点点看。Specimen is live — try it.
If you called it…如果你管它叫……
Full style DNA完整风格 DNA
-
Thick black lead cames粗黑铅条 geometry defining定义特征
Every pane is framed by 3–4px matte near-black lines (#0d0b08, warm-cast, never pure #000) that join at slightly bulbous soldered points; the leading is structural and draws the composition. Without it the style is just colorful blocks.
每块玻璃片都包着 3–4px 的哑光近黑线条（#0d0b08，带暖调，绝不用纯 #000），交接处微微鼓起，像手工焊点；铅条是结构性的，画面构图由它画出来。没有它，就只是一堆彩色方块。
-
Translucent jewel-tone panes半透明的宝石色玻璃片 color defining定义特征
Panes are deep gem colors — ruby #9b1b30, cobalt #1e4fa3, amber #e6a817, emerald #0f7b5f, violet #5b2d90 — one hue per pane, saturated yet light-transmitting; pastels, gradients across panes, or photographic fills break it.
玻璃片是深邃的宝石色 —— 红宝石 #9b1b30、钴蓝 #1e4fa3、琥珀 #e6a817、祖母绿 #0f7b5f、紫罗兰 #5b2d90 —— 一片一色，饱和但透光；粉彩、跨片的渐变或照片式填充都会破坏效果。
-
Backlit luminosity背光的发光感 depth defining定义特征
Each pane glows from within — a radial light well brightest at the pane's heart and dimming toward the cames, plus a soft bloom bleeding across the lead — as if sunlight stands behind the window.
每块玻璃片从内部发光 —— 中心最亮、朝铅条方向渐暗的径向光井，再加上漫过铅条的柔和光晕 —— 仿佛窗户背后正照着太阳。
-
Hand-blown glass texture手吹玻璃质感 surface defining定义特征
Sibling panes of one hue differ subtly: streaky striations, seeded bubbles, and ±10–15% value shifts inside a pane. Machine-flat uniform fills read as printed plastic, not glass.
同色的相邻玻璃片有微妙差别：条纹状的流纹、细籽气泡，以及单片内部 ±10–15% 的明度变化。机器般均匀平整的填充读起来是印刷塑料，不是玻璃。
-
Rose windows and quarrels玫瑰窗与菱形格纹 imagery supporting辅助特征
Circular rose medallions with radiating petal panes, diamond-lattice quarrel fields, lancet and trefoil arches compose the imagery; a contrasting border light often frames the panel.
圆形玫瑰窗勋章（花瓣状玻璃片向外辐射）、菱形格纹玻璃、尖拱和三叶拱构成主要纹样；面板四周常有一圈对比色的边框玻璃。
-
Dark surround, window as hero暗色环绕，花窗当主角 layout supporting辅助特征
The window floats in near-blackness — stone, night, an unlit nave — so the glowing panes carry the composition; a light page background kills the backlight illusion.
花窗悬浮在近黑的环境里 —— 石墙、夜色、未点亮的正厅 —— 构图全靠发光的玻璃片撑起来；浅色页面背景会立刻杀死背光幻觉。
-
How many jewel hues用几种宝石色 color variable可变特征
Strict Gothic windows run mostly ruby and cobalt with sparse amber; Arts-and-Crafts and Tiffany work admits emerald, violet and opalescent white. The count and mix vary — the depth and saturation do not.
严格的哥特式花窗以红宝石和钴蓝为主、琥珀零星点缀；工艺美术运动和 Tiffany 的作品会加入祖母绿、紫罗兰和乳白。颜色数量与配比可变 —— 深度和饱和度不可变。
-
Opaque gold ornament不透明的描金装饰 surface avoid避免
Metallic gold linework, lacquer-black opaque panels and mirrored sunbursts are Art Deco's surface ornament; the moment color stops transmitting light and becomes gilding, the glass is gone.
金属金线条、黑漆不透明面板和镜像放射纹是装饰艺术的表面装饰；一旦颜色不再透光、变成了镀金，玻璃感就消失了。
Often confused with: Art Deco最容易混淆：装饰艺术（Art Deco）
Stained Glass彩色玻璃花窗（Stained Glass）
Art Deco装饰艺术（Art Deco）
This is Stained Glass because the color fields are translucent jewel panes physically joined by thick matte-black lead cames (3–4px) and backlit so they glow — the black lines are structural lead and the light comes from behind the surface, not painted on top.
这是彩色玻璃花窗，因为色块是被粗哑光黑铅条（3–4px）物理拼接起来的半透明宝石色玻璃片，并从背后照亮、辉光外溢 —— 黑线是结构性的铅条，光是从表面背后来的，而不是涂在表面上的。
It would become Art Deco if the panes turned opaque, the cames thinned to 1–2px gilded strokes, and the palette collapsed to metallic gold on black lacquer — ornament drawn onto the surface instead of light passing through it.
如果玻璃片变成不透明、铅条细成 1–2px 的镀金描线、配色塌缩成黑漆底上的金属金 —— 装饰画在表面上而不是让光穿过表面 —— 就变成装饰艺术了。
In code — optional starting points代码写法 —— 可选起点
Leaded pane grid — the cames are the gaps over a lead base
.window {
display: grid;
gap: 4px; /* the lead cames */
background: #0d0b08; /* lead shows through the gaps */
padding: 4px;
}
.pane {
background:
radial-gradient(circle at 50% 38%, rgba(255,244,214,.5), transparent 60%),
linear-gradient(165deg, #d92f4c, #9b1b30 58%, #5e0f1e); /* backlit ruby */
box-shadow: inset 0 0 18px rgba(255, 240, 200, .3);
}Hand-blown streaks and seeded bubbles on a pane
.pane::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(1.6px 1.6px at 28% 40%, rgba(255,255,255,.35), transparent 60%),
radial-gradient(1.2px 1.2px at 63% 62%, rgba(255,255,255,.28), transparent 60%),
repeating-linear-gradient(115deg, rgba(255,255,255,.045) 0 5px, transparent 5px 13px);
pointer-events: none;
}Rose-window medallion (conic petals) as utilities
rounded-full border-4 border-[#0d0b08] shadow-[inset_0_0_24px_rgba(255,240,200,.5)] bg-[repeating-conic-gradient(from_0deg,#9b1b30_0deg_30deg,#1e4fa3_30deg_60deg,#e6a817_60deg_90deg,#0f7b5f_90deg_120deg)]Style brief — paste into your agent风格 Brief —— 粘贴给你的代理
Create the UI as a stained-glass cathedral window. Structure: segment the surface into panes joined by thick matte-black lead cames — 3–4px lines in #0d0b08 (warm near-black) with slightly rounded, soldered joints; plan the came diagram first: a rose-window medallion, diamond quarrels, or arched lights. Panes: translucent jewel tones — ruby #9b1b30, cobalt #1e4fa3, amber #e6a817, emerald #0f7b5f, violet #5b2d90 — one hue per pane. Light: every pane is backlit — a radial-gradient brightest at each pane's center, fading toward the cames, plus box-shadow inset 0 0 18px rgba(255,240,200,.3), so color glows through rather than sitting on top. Texture: vary sibling panes of one hue by ±10–15% lightness and add faint streaks (repeating-linear-gradient at 4–5% opacity). Type: cream #f5e9c8 on the deepest panes, an engraved serif for short headings. Surround: near-black #14100c. Motion: at most a slow 8–12s luminance breathing; honor prefers-reduced-motion. Avoid: opaque gold-on-black geometry (Art Deco), flat black-outlined blocks with hard shadows (Neobrutalism), pastels, frosted blur.
把这个界面做成教堂彩色玻璃花窗。结构：用粗哑光黑铅条把整个表面分割成玻璃片 —— 3–4px 的 #0d0b08 线条（暖调近黑，绝不用纯 #000），交接处略带圆角、像手工焊点；铅条本身就是构图，所以先规划铅条图样：一扇玫瑰窗勋章、一片菱形格纹，或一排尖拱窗。玻璃片：半透明宝石色 —— 红宝石 #9b1b30、钴蓝 #1e4fa3、琥珀 #e6a817、祖母绿 #0f7b5f、紫罗兰 #5b2d90 —— 一片一色。光：每块玻璃片都背光 —— 中心最亮、朝铅条渐暗的 radial-gradient，再加 box-shadow inset 0 0 18px rgba(255,240,200,.3)，让颜色从里面透出来而不是浮在上面。质感：同色相邻玻璃片的明度变化 ±10–15%，加淡淡的流纹（4–5% 不透明度的 repeating-linear-gradient）或几颗细籽气泡。字体：最深的玻璃片上用奶油色 #f5e9c8，短标题可用雕版感衬线体。环境：近黑 #14100c，让花窗读起来像从背后被点亮。动效：至多让玻璃片亮度做 8–12 秒的缓慢呼吸；响应 prefers-reduced-motion。避免：不透明的黑金几何和镜像扇形（装饰艺术）、粗黑描边配硬阴影的扁平色块（新粗野主义）、粉彩，以及磨砂模糊。
Accessibility & misuse可访问性与误用
Jewel panes vary wildly in luminance: cream text on cobalt #1e4fa3 passes 4.5:1, but the same text on amber #e6a817 or a brightly glowing pane center collapses below 2:1. Set all readable text on the deepest panes or on lead-dark panels, and measure every pane-and-ink pair rather than assuming the palette is safe.
宝石色玻璃片的明度差异极大：奶油色文字放在钴蓝 #1e4fa3 上能过 4.5:1，但同样的文字放在琥珀 #e6a817 或发光中心的亮区会跌破 2:1。所有可读文字都要放在最深的玻璃片或铅深色底板上，并且逐对实测每个「玻璃片 + 墨色」组合，而不是默认整套配色安全。
Dense leading, streaks and bubbles create real visual vibration — fine for a hero window, hostile behind paragraphs. Keep the came diagram coarse in text zones, reserve the fine diamond lattice and rose tracery for decorative areas, and mark those layers aria-hidden.
密集的铅条、流纹和气泡会造成真实的视觉振动 —— 放在主视觉花窗里没问题，垫在段落文字下面就是灾难。文字区域的铅条图样要粗放，把细密的菱形格纹和玫瑰窗雕花留给装饰区，并把这些装饰层标成 aria-hidden。
Slow luminance breathing is gentle, but any shimmer or light sweep must freeze under prefers-reduced-motion and stay under 3 flashes per second. The dark-surround-plus-glow combination can halate for low-vision users, so keep focus indicators in a reserved high-contrast color (e.g. a 2px #f5e9c8 outline) that reads against both lead and panes.
缓慢的亮度呼吸很温和，但任何闪烁或扫光都必须在 prefers-reduced-motion 下冻结，并控制在每秒 3 次以内。暗色环绕加辉光的组合对低视力用户可能产生光晕，所以焦点指示器要用预留的高对比色（比如 2px 的 #f5e9c8 outline），在铅条和玻璃片上都要清晰可辨。
Origin起源
The craft peaked in the Gothic building boom: Abbot Suger's renovation of the abbey church of Saint-Denis in the 1140s made colored light itself a theological argument, and the windows of Chartres Cathedral (rebuilt after the 1194 fire) and the Sainte-Chapelle in Paris (consecrated 1248) set the template — deep ruby and cobalt panes held in lead cames. The nineteenth-century Gothic Revival industrialized the technique: William Morris's decorating firm, founded in 1861, produced windows designed by Edward Burne-Jones, while in America Louis Comfort Tiffany developed opalescent favrile glass and turned leading to lamps and domestic windows in the 1890s–1900s; Frank Lloyd Wright's geometric 'light screens' of the 1900s–1910s pulled it toward abstraction. As a UI style it survives as a niche illustrative skin, most often in fantasy, museum, and heritage projects.
这门手艺在哥特建筑热潮中达到顶峰：1140 年代，Suger 院长主持翻修圣但尼圣殿（Saint-Denis），让彩色光本身成为一种神学主张；沙特尔大教堂（1194 年大火后重建）和巴黎圣礼拜堂（1248 年祝圣）的花窗确立了模板 —— 深红宝石与钴蓝的玻璃片由铅条拼接。19 世纪的哥特复兴把它工业化：William Morris 1861 年创立的装饰公司出品了 Edward Burne-Jones 设计的花窗；而在美国，Louis Comfort Tiffany 研制出乳光 favrile 玻璃，并在 1890–1900 年代把铅条工艺用在台灯和住宅窗上；Frank Lloyd Wright 在 1900–1910 年代的几何「光屏」（light screens）则把它推向抽象。作为 UI 风格，它如今作为小众的插画式皮肤存续，最常出现在奇幻、博物馆和文化遗产类项目里。