# 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.