样式库 Style Library

ThriceGate Glass

三思 玻璃
Weblight + darkglassgradienttechnicalairyconfident

Gemini 的蓝紫玫瑰光 + 苹果玻璃：一屏一个主张，玻璃卡浮在柔光上，主推模型用渐变描边，夜里是深海军蓝的光场。

Gemini's blue-violet-rose light plus Apple glass. Each screen makes one claim, glass cards float over soft light, the lead model gets a gradient edge, and at night the light field turns deep navy.

Web sample · default
Night (system dark)

Palette

Type

标题 Display 永正文 Body — 好的界面不抢内容 123456789000:12:04:18 monoPreviews use your installed fonts; webfonts are not bundled.
Display-apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Helvetica Neue", sans-serif
Body-apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", "Microsoft YaHei", sans-serif
Monoui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace
heroclamp(36px, 6vw, 76px) / 1.06, 700, -0.035em (first screen caps at 4.8vw / 64px)
screen titleclamp(30px, 4.4vw, 54px) / 1.12, 650, -0.025em, balanced
big numberclamp(56px, 9vw, 112px) / 1, 700, -0.04em, tabular
model outcomeclamp(26px, 3.4vw, 40px) / 1.15, 650
model name22px, 650, -0.01em (lead: gradient text)
sub17px / 1.7, muted (15px phone)
card body15px / 1.65, muted
provenance / price12.5px mono
block label13px, 600, uppercase, 0.04em, 75% ink

System fonts only. Display is SF Pro Display at -0.02em, with headings tighter still. Mono is kept for provenance (from DeepSeek), ids and prices.

Shape & surface

radius · input12px
radius · comparison cell18px
radius · block24px
radius · card28px
radius · vision stage32px
radius · model section36px
radius · pill999px
shadow0 1px 0 rgba(255, 255, 255, .9) inset, 0 12px 40px -18px rgba(30, 40, 90, .28)
glass22px blur · rgba(255, 255, 255, .62)

backdrop-filter: blur(22px) saturate(170%) on cards, with blur(24px) saturate(180%) on the nav. Hairline edge rgba(255,255,255,.85), or .14 at night. Lead cards swap the edge for a 1.5px gradient border (paper fill padding-box, gradient border-box) and a blue glow of 0 18px 50px -20px rgba(77,107,254,.7). Model sections are paper at 92% inside the same gradient edge. Night fill drops to white 5% over a navy-tinted field.

Motion

  • Cards lift on hover (entry -2px, model -3px) over 0.2s ease.
  • Primary actions use the gradient with brightness(1.08) on hover in 0.15s and scale(.98) on press.
  • The scroll cue nudges 5px over 2.4s.
  • Full screens snap with y proximity at 768px and up.
  • prefers-reduced-motion stops the cue, the lifts and the button transitions.

Do / Don't

Do

  • Give each screen one centred claim, one sub line and one action row. On the home page every model gets its own full screen.
  • Put the three models side by side on the first screen. Edge the lead one with the gradient and set its name in gradient text.
  • Show provenance on the cards (from DeepSeek, from Gemini · Claude) in mono, and leave prices off them. The price is one quiet muted line in the model section's foot, linking to Pricing.
  • Prove claims with a big number (73% → 89%) or a side-by-side comparison. The 'off' side is dashed, washed and muted. The 'on' side is gradient-edged.
  • Draw vision as abstract frames on a dark filmstrip in a gradient-edged stage. Don't use real stills.
  • Use the floating pill nav: sticky 12px from the top, glass, with a gradient primary on the right.
  • Let the light field carry the colour. Cards stay neutral glass.

Don't

  • Don't put the gradient on more than one card or button per screen.
  • Don't use solid coloured cards. The only filled card is the gradient entry card.
  • Don't put prices or plan names in the card copy.
  • Don't add a theme toggle: night follows the system preference.
  • Don't use the old journal look (warm paper, serif, ochre). It was retired on 2026-10-14.

Used in

Sources

  • lingbrook-guild: src/app/sites/thricegate/glass.css (tokens, glass, nav, screens, model cards, model visuals)
  • lingbrook-guild: src/components/tg-pages.tsx, src/components/tg-ui.tsx (home screens, model grid)
  • lingbrook-guild: src/components/tg-model-visuals.tsx (per-model sections, comparison, filmstrip, price foot)

Updated 2026-10-15

Export

/* ThriceGate Glass / 三思 玻璃 — Gemini's blue-violet-rose light plus Apple glass. Each screen makes one claim, glass cards float over soft light, the lead model gets a gradient edge, and at night the light field turns deep navy. */
:root {
  --thricegate-glass-bg: #f5f6fb;
  --thricegate-glass-surface: rgba(255, 255, 255, .62);
  --thricegate-glass-ink: #0e1120;
  --thricegate-glass-muted: #5a6078;
  --thricegate-glass-accent: #4d6bfe;
  --thricegate-glass-accent-ink: #ffffff;
  --thricegate-glass-line: rgba(14, 17, 32, .09);
  --thricegate-glass-highlight: #8a6cf0;
  --thricegate-glass-highlight-wash: rgba(77, 107, 254, .10);

  --thricegate-glass-pal-paper: #f5f6fb;
  --thricegate-glass-pal-ink: #0e1120;
  --thricegate-glass-pal-muted: #5a6078;
  --thricegate-glass-pal-brand: #4d6bfe;
  --thricegate-glass-pal-brand-press: #3954e6;
  --thricegate-glass-pal-violet: #8a6cf0;
  --thricegate-glass-pal-rose: #d0699a;
  --thricegate-glass-pal-blob-violet: #9b72cb;
  --thricegate-glass-pal-blob-rose: #d96570;
  --thricegate-glass-pal-off: #c0705a;
  --thricegate-glass-pal-filmstrip: #0b0d16;
  --thricegate-glass-pal-night-paper: #08090e;
  --thricegate-glass-pal-night-ink: #eef0f8;
  --thricegate-glass-pal-night-muted: #9aa1b9;
  --thricegate-glass-pal-night-brand: #7189ff;

  --thricegate-glass-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Helvetica Neue", sans-serif;
  --thricegate-glass-font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  --thricegate-glass-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --thricegate-glass-text-hero: clamp(36px, 6vw, 76px) / 1.06, 700, -0.035em (first screen caps at 4.8vw / 64px);
  --thricegate-glass-text-screen-title: clamp(30px, 4.4vw, 54px) / 1.12, 650, -0.025em, balanced;
  --thricegate-glass-text-big-number: clamp(56px, 9vw, 112px) / 1, 700, -0.04em, tabular;
  --thricegate-glass-text-model-outcome: clamp(26px, 3.4vw, 40px) / 1.15, 650;
  --thricegate-glass-text-model-name: 22px, 650, -0.01em (lead: gradient text);
  --thricegate-glass-text-sub: 17px / 1.7, muted (15px phone);
  --thricegate-glass-text-card-body: 15px / 1.65, muted;
  --thricegate-glass-text-provenance-price: 12.5px mono;
  --thricegate-glass-text-block-label: 13px, 600, uppercase, 0.04em, 75% ink;

  --thricegate-glass-radius-input: 12px;
  --thricegate-glass-radius-comparison-cell: 18px;
  --thricegate-glass-radius-block: 24px;
  --thricegate-glass-radius-card: 28px;
  --thricegate-glass-radius-vision-stage: 32px;
  --thricegate-glass-radius-model-section: 36px;
  --thricegate-glass-radius-pill: 999px;
  --thricegate-glass-glass-blur: 22px;
  --thricegate-glass-glass-fill: rgba(255, 255, 255, .62);
  --thricegate-glass-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 12px 40px -18px rgba(30, 40, 90, .28);
}

/* Night (system dark) */
@media (prefers-color-scheme: dark) {
  :root {
    --thricegate-glass-bg: #08090e;
    --thricegate-glass-surface: rgba(255, 255, 255, .05);
    --thricegate-glass-ink: #eef0f8;
    --thricegate-glass-muted: #9aa1b9;
    --thricegate-glass-accent: #7189ff;
    --thricegate-glass-accent-ink: #ffffff;
    --thricegate-glass-line: rgba(255, 255, 255, .09);
    --thricegate-glass-highlight: #8a6cf0;
    --thricegate-glass-highlight-wash: rgba(113, 137, 255, .14);
  }
}

Compare