# Glass Soft Futurism

블루→바이올렛 메시 그라디언트 위에 서리 낀 반투명 유리 카드를 띄운 소프트 퓨처리즘 — 부드럽고 시원하고 미래적인 AI/SaaS 랜딩 감성.

- taxonomy: glassmorphism · frosted-glass, soft-futurism, mesh-gradient, backdrop-blur, cool-palette, airy, translucent-cards · complexity=high
- page types: landing, app, marketing
- best for: AI/SaaS 제품 랜딩 페이지, 미래지향 브랜드의 마케팅 히어로, 핀테크 대시보드의 온보딩·앱 화면
- avoid for: 텍스트 밀도가 높은 장문 콘텐츠·문서 사이트, 고대비 접근성이 최우선인 공공 서비스, 인쇄물처럼 납작하고 절제된 에디토리얼 페이지
- provenance: authored (Frosted Glassmorphism + Soft Futurism (편집 큐레이션)) — confidence: colors=manual, typography=manual, spacing=manual, shadows=manual, effects=manual, motion=manual, layout=manual

## Design rules

# Glass Soft Futurism

## Overview
Frosted glassmorphism meets soft futurism — the visual language of a modern AI/SaaS product landing. A cool blue→violet mesh gradient fills the canvas; on top of it float translucent, frosted-glass cards that let the color bleed through. Nothing is hard-edged or heavy: corners are generously rounded, shadows are large and diffuse, the palette is calm and luminous. Decoration is made not from color but from light, blur, and depth. If a surface feels flat, the fix is more translucency and a softer glow — not more ink.

## Colors & Roles
Cool, single-axis palette. `background` is light-lavender in light mode and deep-navy in dark; `foreground` is a deep indigo (light) or near-white lavender (dark). `primary` is the indigo/violet workhorse (oklch ~0.585/0.205/285) used for the key CTA, links, and focus rings. `accent` is a cyan pop (oklch ~0.74/0.135/208) reserved for badges, live indicators, and one highlight per section. Surfaces separate by translucency and a soft diffuse shadow, not by heavy borders. **Every token value is a solid, opaque oklch color** — the glass look is produced at runtime by layering alpha (`color-mix` / oklch-with-alpha) and `backdrop-filter` on top, never by making the tokens themselves transparent.

## Typography Rules
Two families: Space Grotesk for display/headings (geometric, faintly futuristic) and Inter for body (clean, legible). Three weights only — 400 body, 500 sub-heads, 600 display/CTA. Display type is oversized and tracking-tight (`clamp(2.75rem, 6vw, 5rem)`, letter-spacing −0.03em, line-height ~1.0). An `eyebrow` label — uppercase, 0.14em tracking, 600 — opens each section like a SaaS kicker. Body runs slightly large (1.0625rem / line-height 1.6) for an airy read. Modular scale ratio ≈ 1.25.

## Layout Principles
Max content width 1200px on a 12-column / 24px-gutter grid. The hero is centered — eyebrow, big display headline, sub-text, CTA row — with glass cards stacked or offset beneath it, some overlapping or floating slightly askew. Spacing is airy (`density: airy`, section gaps `clamp(5rem, 10vw, 9rem)`); the gradient background carries the empty space, so let elements breathe.

## Depth & Elevation
Depth is the whole point. Shadows are large (blur 40–64px), low-opacity, and tinted cool indigo rather than pure black — they read as ambient glow, not a drop. Cards sit on a mesh-gradient backdrop and use `backdrop-filter: blur(20px) saturate(1.4)` so the color behind them blooms through frosted. Elevation rises on hover: the card lifts ~4px and its shadow deepens. A faint noise overlay (~3%) keeps large glass panels from banding.

## Shapes
Generously rounded everywhere. Boxes/cards 20px, fields/buttons 14px, small selectors 12px, badges fully pill (999px). No sharp corners, no hard bevels — the geometry is soft and continuous.

## Component Stylings
- **Button**: primary fills `primary` (violet) with a subtle indigo glow-shadow, radius 14px, weight 600; hover brightens and lifts 2px over 320ms `ease-emphasis`. Ghost variant is a translucent glass fill with a 1px translucent border and `backdrop-blur(16px)`. Focus = 2px `ring` + a 4px translucent halo. Disabled = opacity 0.45, glow removed.
- **Card**: the signature surface — translucent `card` (alpha ~0.55–0.7) + `backdrop-filter: blur(20px) saturate(1.4)` + a 1px light translucent highlight border + a large soft shadow. Radius 20px, padding 28–32px, lifts on hover.
- **Input**: translucent glass field, radius 14px, thin border; focus adds the `ring` and a gentle glow. Placeholder in `muted-foreground`.
- **Nav**: sticky glass bar — translucent background + `backdrop-blur(20px)` + a 1px translucent bottom border; blur and opacity intensify on scroll. Logo left, links center, glass ghost CTA right.
- **Badge**: pill glass chip with `accent` (cyan) text and a thin border — for "New · AI" style labels.

## Motion
Soft and fluid. Entrances float up (`opacity` + `translateY(16px)`) over 320ms. Cards lift on hover with deepening shadow/blur. The background mesh gradient drifts very slowly (20–30s loop) for a living, luminous feel. Easing is jelly-smooth (`cubic-bezier(0.22, 1, 0.36, 1)`); no snappy bounce, no parallax jerk.

## Do's and Don'ts
**Do:** put `backdrop-blur` on cards/nav/modals so the background genuinely shows through; fill the hero with a blue→violet mesh gradient; keep shadows large, soft, and indigo-tinted; round corners 16–24px; restrain color to violet (primary) + cyan (accent).
**Don't:** make token values transparent (translucency belongs to surface layers only); use hard stepped or pure-black shadows; use square corners or thick hard borders; introduce warm or high-chroma primaries; place glass over a plain flat background — with nothing behind it, the frosted effect dies.

## Responsive Behavior
The 12-column grid collapses to a single column on mobile; display type scales via `clamp()`. Backdrop-blur can be reduced or dropped on low-power devices (glass falls back to a semi-opaque solid). The nav CTA collapses into the glass bar; stacked cards un-overlap into a clean vertical flow.

## Agent Prompt Guide
> Build this in the 'Glass Soft Futurism' style: a soft blue→violet radial mesh-gradient backdrop with frosted-glass cards that use backdrop-filter blur(20px) saturate(1.4), translucent surfaces over solid oklch indigo/violet/cyan tokens, generous 16-24px rounded corners, large soft diffuse indigo-toned shadows, a thin translucent highlight border on every glass surface, and airy spacing with tracking-tight Space Grotesk display headings — modern AI/SaaS product landing energy, cool and calm and luminous.

## Known Gaps / Confidence
Authored seed style (not extracted from a live URL), so all tokens are `manual` confidence. Fonts are real Google Fonts (Space Grotesk, Inter, JetBrains Mono, Fraunces) chosen for faithful reproduction. The glass effect depends on runtime CSS (`backdrop-filter`, alpha layering) that the token layer cannot fully encode — treat the effects/component notes as normative for that behavior, and always provide a solid fallback where `backdrop-filter` is unsupported.


## Tokens (theme.css — use these values verbatim, do not re-derive)

```css
/* Glass Soft Futurism — theme.css (generated, do not edit) */
:root {
  --radius: 20px;
  --radius-selector: 12px;
  --radius-field: 14px;
  --font-sans: 'Inter', 'SF Pro Display', system-ui, -apple-system, sans-serif;
  --font-serif: 'Fraunces', 'Georgia', serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --spacing: 8px;
  --shadow: 0px 24px 48px -12px color-mix(in oklab, oklch(0.45 0.14 280) 18%, transparent);
  --ks-display-weight: 600;
  --ks-display-tracking: -0.03em;
  --background: oklch(0.968 0.022 285);
  --foreground: oklch(0.28 0.058 278);
  --card: oklch(0.992 0.008 285);
  --card-foreground: oklch(0.28 0.058 278);
  --popover: oklch(0.992 0.008 285);
  --popover-foreground: oklch(0.28 0.058 278);
  --primary: oklch(0.585 0.205 285);
  --primary-foreground: oklch(0.99 0.006 285);
  --secondary: oklch(0.93 0.032 285);
  --secondary-foreground: oklch(0.36 0.08 282);
  --muted: oklch(0.948 0.02 285);
  --muted-foreground: oklch(0.53 0.05 281);
  --accent: oklch(0.74 0.135 208);
  --accent-foreground: oklch(0.26 0.06 250);
  --destructive: oklch(0.60 0.225 20);
  --destructive-foreground: oklch(0.99 0.006 285);
  --border: oklch(0.895 0.024 285);
  --input: oklch(0.895 0.024 285);
  --ring: oklch(0.585 0.205 285);
  --chart-1: oklch(0.585 0.205 285);
  --chart-2: oklch(0.74 0.135 208);
  --chart-3: oklch(0.64 0.18 265);
  --chart-4: oklch(0.70 0.17 320);
  --chart-5: oklch(0.72 0.12 190);
}

.dark {
  --background: oklch(0.205 0.042 275);
  --foreground: oklch(0.95 0.02 285);
  --card: oklch(0.262 0.05 276);
  --card-foreground: oklch(0.95 0.02 285);
  --popover: oklch(0.262 0.05 276);
  --popover-foreground: oklch(0.95 0.02 285);
  --primary: oklch(0.685 0.185 285);
  --primary-foreground: oklch(0.18 0.04 275);
  --secondary: oklch(0.305 0.05 278);
  --secondary-foreground: oklch(0.90 0.03 285);
  --muted: oklch(0.305 0.045 278);
  --muted-foreground: oklch(0.73 0.045 283);
  --accent: oklch(0.78 0.13 205);
  --accent-foreground: oklch(0.20 0.045 250);
  --destructive: oklch(0.66 0.205 20);
  --destructive-foreground: oklch(0.20 0.04 275);
  --border: oklch(0.365 0.045 278);
  --input: oklch(0.365 0.045 278);
  --ring: oklch(0.685 0.185 285);
  --chart-1: oklch(0.685 0.185 285);
  --chart-2: oklch(0.78 0.13 205);
  --chart-3: oklch(0.70 0.17 265);
  --chart-4: oklch(0.74 0.16 320);
  --chart-5: oklch(0.76 0.12 190);
}
```

## Golden example (exemplar.html — match this structure and token usage)

```html
<!-- Golden snippet for "Glass Soft Futurism". Fragment — assumes the style's CSS variables
     (--background, --foreground, --primary, --accent, --card, --border, --radius,
      --font-sans, --font-display, --shadow, ...) are in scope.
     Tokens only; translucency is layered at runtime via color-mix() over solid tokens. -->
<section style="position:relative; overflow:hidden; background:var(--background); color:var(--foreground); font-family:var(--font-sans); padding:clamp(3rem,8vw,7rem) clamp(1.5rem,5vw,3rem); border-radius:var(--radius);">

  <!-- blue → violet soft mesh-gradient backdrop -->
  <div aria-hidden="true" style="position:absolute; inset:-20%; z-index:0; filter:blur(40px); opacity:.9;
       background:
         radial-gradient(40% 45% at 22% 28%, color-mix(in oklch, var(--accent) 70%, transparent), transparent 70%),
         radial-gradient(45% 50% at 78% 22%, color-mix(in oklch, var(--primary) 65%, transparent), transparent 72%),
         radial-gradient(50% 55% at 62% 82%, color-mix(in oklch, var(--chart-4, var(--primary)) 55%, transparent), transparent 74%);">
  </div>

  <div style="position:relative; z-index:1; max-width:1200px; margin:0 auto;">
    <span style="display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .85rem; border-radius:999px;
         background:color-mix(in oklch, var(--card) 55%, transparent); border:1px solid color-mix(in oklch, var(--border) 70%, transparent);
         backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4);
         font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent);">
      ● New · AI Platform
    </span>

    <h1 style="font-family:var(--font-display); margin:1.25rem 0 0; max-width:16ch; font-weight:600;
         font-size:clamp(2.75rem,6vw,5rem); line-height:1.02; letter-spacing:-.03em;">
      Ship intelligent products, softly.
    </h1>

    <p style="margin:1.25rem 0 0; max-width:52ch; font-size:1.0625rem; line-height:1.6; color:var(--muted-foreground);">
      A calm, luminous surface for your AI workflows — frosted glass over a cool gradient,
      built to feel effortless from first render.
    </p>

    <div style="display:flex; flex-wrap:wrap; gap:1rem; margin-top:2rem;">
      <a href="#" style="border-radius:var(--radius-field, 14px); background:var(--primary); color:var(--primary-foreground);
           padding:.85rem 1.6rem; font-weight:600; text-decoration:none;
           box-shadow:0 16px 40px -12px color-mix(in oklch, var(--primary) 55%, transparent);">
        Start building
      </a>
      <a href="#" style="border-radius:var(--radius-field, 14px); padding:.85rem 1.6rem; font-weight:600; text-decoration:none; color:var(--foreground);
           background:color-mix(in oklch, var(--card) 50%, transparent); border:1px solid color-mix(in oklch, var(--border) 80%, transparent);
           backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4);">
        Watch demo
      </a>
    </div>

    <!-- frosted-glass card grid -->
    <div style="display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.25rem; margin-top:clamp(3rem,7vw,5rem);">
      <article style="border-radius:var(--radius); padding:1.75rem;
           background:color-mix(in oklch, var(--card) 62%, transparent); border:1px solid color-mix(in oklch, var(--card-foreground) 12%, transparent);
           backdrop-filter:blur(20px) saturate(1.4); -webkit-backdrop-filter:blur(20px) saturate(1.4);
           box-shadow:0 24px 48px -12px color-mix(in oklch, var(--primary) 22%, transparent);">
        <div style="width:2.5rem; height:2.5rem; border-radius:12px; margin-bottom:1rem;
             background:color-mix(in oklch, var(--accent) 35%, transparent); border:1px solid color-mix(in oklch, var(--accent) 45%, transparent);"></div>
        <h3 style="margin:0 0 .35rem; font-weight:600; font-size:1.125rem;">Real-time inference</h3>
        <p style="margin:0; font-size:.95rem; line-height:1.55; color:var(--muted-foreground);">Sub-second responses that stay glassy under load.</p>
      </article>
      <article style="border-radius:var(--radius); padding:1.75rem;
           background:color-mix(in oklch, var(--card) 62%, transparent); border:1px solid color-mix(in oklch, var(--card-foreground) 12%, transparent);
           backdrop-filter:blur(20px) saturate(1.4); -webkit-backdrop-filter:blur(20px) saturate(1.4);
           box-shadow:0 24px 48px -12px color-mix(in oklch, var(--primary) 22%, transparent);">
        <div style="width:2.5rem; height:2.5rem; border-radius:12px; margin-bottom:1rem;
             background:color-mix(in oklch, var(--primary) 35%, transparent); border:1px solid color-mix(in oklch, var(--primary) 45%, transparent);"></div>
        <h3 style="margin:0 0 .35rem; font-weight:600; font-size:1.125rem;">Composable agents</h3>
        <p style="margin:0; font-size:.95rem; line-height:1.55; color:var(--muted-foreground);">Snap workflows together like frosted panes.</p>
      </article>
      <article style="border-radius:var(--radius); padding:1.75rem;
           background:color-mix(in oklch, var(--card) 62%, transparent); border:1px solid color-mix(in oklch, var(--card-foreground) 12%, transparent);
           backdrop-filter:blur(20px) saturate(1.4); -webkit-backdrop-filter:blur(20px) saturate(1.4);
           box-shadow:0 24px 48px -12px color-mix(in oklch, var(--primary) 22%, transparent);">
        <div style="width:2.5rem; height:2.5rem; border-radius:12px; margin-bottom:1rem;
             background:color-mix(in oklch, var(--chart-4, var(--primary)) 35%, transparent); border:1px solid color-mix(in oklch, var(--chart-4, var(--primary)) 45%, transparent);"></div>
        <h3 style="margin:0 0 .35rem; font-weight:600; font-size:1.125rem;">Private by design</h3>
        <p style="margin:0; font-size:.95rem; line-height:1.55; color:var(--muted-foreground);">Your data stays behind the glass.</p>
      </article>
    </div>
  </div>
</section>
```

## Apply

- shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/glass-soft-futurism.json` — installs the tokens above into globals.css, then use semantic classes (bg-background, text-primary, …) only.
- other stack: paste the theme.css block above into your global stylesheet and style everything via `var(--…)` references.
- single HTML/artifact: embed the theme.css block in a `<style>` tag and follow the exemplar's markup pattern.
- dark mode: toggle the `.dark` class (both variants are in the tokens above).
- before finishing: re-check every Don't in the Design rules section above against your output.