get-shit-pretty 0.6.2 → 0.6.3

package/gsp/skills/gsp-style/styles/flat-design.yml

@@ -54,5 +54,72 @@ dark_mode:
     surface: "#303030"
     on-background: "#FAFAFA"
 
+intensity:
+  variance: 3     # rigid grid, predictable layout, geometric purity
+  motion: 3       # snappy scale transforms and color shifts, no spectacle
+  density: 5      # balanced — functional, not airy, not packed
+
+patterns:
+  card:
+    border: "none"
+    shadow: "none — zero shadows, ever"
+    radius: "{shape.border-radius-md}"
+    background: "{color.surface} or soft color tint (blue-50, green-50)"
+    padding: "p-6 to p-8"
+  button-primary:
+    background: "{color.primary}"
+    border: "none"
+    text: "weight 500, sentence case"
+    radius: "{shape.border-radius-sm}"
+  button-secondary:
+    background: "{color.surface}"
+    border: "none"
+    text: "weight 500, {color.on-background}"
+    radius: "{shape.border-radius-sm}"
+  input:
+    border: "none resting, border-2 solid {color.primary} on focus"
+    radius: "{shape.border-radius-sm}"
+    background: "{color.surface}"
+    focus: "border-2 {color.primary} — hard border, no glow ring"
+  badge:
+    shape: "rounded-full, solid accent background"
+    text: "text-xs, font-medium, sentence case"
+  nav:
+    style: "clean horizontal, solid background blocks"
+    links: "font-medium, hover darkens background"
+  layout:
+    archetype: "color-block-grid"
+    max-width: "max-w-7xl"
+    section-spacing: "py-16 to py-24"
+    grid-gap: "gap-6 to gap-8"
+    surfaces: "solid color blocks define sections — no texture, no grain"
+    decoration: "large geometric shapes (circles, squares) at low opacity, absolute positioned"
+
+constraints:
+  never:
+    - "box-shadow of any kind — zero shadows on any element"
+    - "gradients on buttons or cards — solid fills only"
+    - "backdrop-blur or glass effects — conflicts with flat 2D aesthetic"
+    - "textures, grain, or noise overlays — surfaces are clean and solid"
+    - "3D transforms or perspective — everything exists on one plane"
+    - "thin subtle borders for structure — use color blocks instead"
+  always:
+    - "solid flat color fills for backgrounds and interactive elements"
+    - "consistent border-radius across same-level components"
+    - "color contrast as the primary hierarchy tool"
+    - "geometric shapes for decorative elements (circles, squares, rectangles)"
+    - "sharp color transitions between sections — never blurred or gradual"
+
+effects:
+  interaction-vocabulary: [scale-pop, color-shift, color-fill, icon-scale]
+  hover:
+    card: "scale-pop — scale-[1.02], background color intensifies"
+    button: "color-shift — background darkens one shade"
+  active:
+    button: "scale-pop — scale-[0.97], instant press feedback"
+  focus:
+    general: "ring-2 ring-{color.primary} ring-offset-2 — solid outline, no glow"
+  transition: "duration-150 to duration-200, ease"
+
 compatibility: [bauhaus, swiss-minimalist]
 clashes: [glassmorphism, neumorphism, liquid-glass]

package/gsp/skills/gsp-style/styles/fluent.yml

@@ -59,5 +59,87 @@ dark_mode:
     on-background: "#FFFFFF"
     border-color: "#404040"
 
+intensity:
+  variance: 2     # strict grid alignment, consistent density, OS-level predictability
+  motion: 3       # fast hover states (100ms), medium flyouts (250-350ms), no ambient animation
+  density: 7      # compact by design — 14px base, tight spacing, dashboard-oriented
+
+patterns:
+  card:
+    border: "{shape.border-width} solid {shape.border-color}"
+    shadow: "{elevation.shadow-sm} resting, {elevation.shadow-md} on hover"
+    radius: "{shape.border-radius-md}"
+    background: "{color.surface}"
+    padding: "p-4 to p-6"
+  button-primary:
+    background: "{color.primary}"
+    border: "none"
+    shadow: "none"
+    text: "weight 500, sentence case, white"
+    radius: "{shape.border-radius-sm}"
+    hover: "bg darkens to {color.secondary}"
+    pressed: "bg darkens further to {color.accent}, scale-[0.98]"
+  button-secondary:
+    background: "{color.surface}"
+    border: "{shape.border-width} solid {shape.border-color}"
+    text: "weight 500, sentence case, {color.on-background}"
+    radius: "{shape.border-radius-sm}"
+    hover: "background shifts to neutral-light grey tint"
+    focus: "double ring — 2px whitespace + 2px brand ring"
+  input:
+    border: "{shape.border-width} solid {shape.border-color}"
+    radius: "{shape.border-radius-sm}"
+    background: "{color.background} or light grey fill"
+    focus: "bottom border becomes 2px thick {color.primary} bar"
+    label: "text-sm font-medium above input"
+  badge:
+    shape: "{shape.border-radius-sm}"
+    text: "text-xs font-medium"
+    background: "neutral subtle tint"
+  nav:
+    style: "left-rail vertical or horizontal tabs"
+    selection: "3px vertical brand-colored pill on active item"
+    hover: "bg-neutral-subtle behind item content"
+    item-radius: "rounded-md (6px)"
+  layout:
+    archetype: "density-driven-grid"
+    max-width: "container responsive"
+    section-spacing: "py-12 to py-16"
+    grid-gap: "gap-4 to gap-6"
+    surfaces: "solid opaque — acrylic reserved for temporary surfaces only"
+    depth: "elevation via shadow levels (2/4/8/16), not transparency"
+
+constraints:
+  never:
+    - "rounded-full on cards or containers — reserved for avatars only"
+    - "colored shadows — all shadows neutral black at low opacity"
+    - "gradient backgrounds on buttons — solid brand color only"
+    - "decorative blur shapes or ambient orbs — Fluent uses materials, not decoration"
+    - "heavy drop shadows on cards — subtle diffused elevation only"
+    - "bouncy or spring animations — deceleration curves only"
+    - "large border-radius (>12px) on standard cards — 8px is surface radius"
+    - "uppercase text on buttons or body — sentence case throughout"
+  always:
+    - "double focus ring (whitespace + brand) on interactive elements"
+    - "Rest/Hover/Pressed/Disabled state model on every control"
+    - "acrylic (backdrop-blur-[20px]) only on temporary surfaces (menus, flyouts)"
+    - "semantic token naming (Brand, Neutral, Surface) not visual descriptions"
+    - "thin 1px borders on all card surfaces"
+    - "4px control radius on buttons/inputs, 8px on cards/panels"
+
+effects:
+  interaction-vocabulary: [state-darken, underline-focus, subtle-lift, slide-in]
+  hover:
+    card: "subtle-lift — shadow steps from shadow-2 to shadow-4"
+    button: "state-darken — background darkens one step"
+    nav-item: "bg-neutral-subtle appears behind content"
+    link: "underline-focus — underline appears"
+  active:
+    button: "state-darken — background darkens further, optional scale-[0.98]"
+  focus:
+    general: "double ring — 2px white gap + 2px ring-{color.primary}"
+    input: "underline-focus — bottom border thickens to 2px {color.primary}"
+  transition: "duration-100 hover, duration-250 to duration-350 flyouts, decelerate curve"
+
 compatibility: [professional, enterprise]
 clashes: [neubrutalism, vaporwave, retro]

package/gsp/skills/gsp-style/styles/glassmorphism.yml

@@ -60,5 +60,88 @@ dark_mode:
     surface: "rgba(255, 255, 255, 0.08)"
     on-background: "#E2E8F0"
 
+intensity:
+  variance: 5
+  motion: 6
+  density: 4
+
+patterns:
+  card:
+    background: "rgba(255,255,255,0.12)"
+    blur: "backdrop-blur-[12px] backdrop-saturate-[180%]"
+    border: "1px solid rgba(255,255,255,0.20)"
+    shadow: "{elevation.shadow-md} with inset highlight"
+    radius: "{shape.border-radius-md}"
+    highlight: "inset 0 1px 0 rgba(255,255,255,0.40) — top-edge refraction"
+  button-primary:
+    background: "{color.primary}"
+    border: "none"
+    shadow: "glow — 0 0 20px {color.primary}/40, 0 0 60px {color.primary}/15"
+    text: "weight 600, sentence case"
+    radius: "{shape.border-radius-sm}"
+  button-secondary:
+    background: "rgba(255,255,255,0.08)"
+    blur: "backdrop-blur-[8px]"
+    border: "1px solid rgba(255,255,255,0.20)"
+    text: "weight 500"
+    radius: "{shape.border-radius-sm}"
+  input:
+    background: "rgba(255,255,255,0.08)"
+    blur: "backdrop-blur-[8px]"
+    border: "1px solid rgba(255,255,255,0.15)"
+    radius: "{shape.border-radius-sm}"
+    focus: "border-white/40, glow ring"
+  badge:
+    background: "glass or primary-tinted glass"
+    shape: "rounded-full"
+    text: "text-xs font-medium"
+  nav:
+    background: "glass panel at 0.15 alpha"
+    blur: "backdrop-blur-[16px]"
+    border: "1px solid rgba(255,255,255,0.15)"
+    position: "sticky frosted"
+  layout:
+    archetype: "layered-glass"
+    max-width: "max-w-7xl"
+    section-spacing: "py-20 to py-32"
+    grid-gap: "gap-6 to gap-8"
+    surfaces: "dark canvas required — glass does not read on light"
+    decoration: "gradient orbs, ambient blobs behind glass panels"
+    depth: "surface alpha scale: 0.04→0.08→0.12→0.15→0.18→0.22 by z-level"
+
+constraints:
+  never:
+    - "hard-offset shadows — all shadows diffused and ambient"
+    - "opaque card backgrounds — surfaces must be translucent"
+    - "light page background — glass requires dark canvas to read"
+    - "thick borders (>1px) — hairline only for glass edge definition"
+    - "flat shadowless elements — everything needs depth cues"
+    - "surface alpha above 0.22 — becomes opaque, kills glass"
+    - "surface alpha below 0.04 — disappears into background"
+    - "backdrop-blur on scrolling containers — fixed/sticky elements only"
+  always:
+    - "backdrop-filter: blur + saturate on every glass surface"
+    - "hairline border (1px rgba(255,255,255,0.15-0.30)) on glass panels"
+    - "inset highlight on primary glass surfaces (top-edge refraction)"
+    - "-webkit-backdrop-filter prefix for Safari"
+    - "dark background canvas — deep slate or darker"
+    - "surface alpha hierarchy matching z-depth"
+
+effects:
+  interaction-vocabulary: [glow-intensify, alpha-step, soft-scale, spotlight-border]
+  hover:
+    card: "alpha-step — border opacity 0.20→0.30, surface brightens"
+    button-primary: "glow-intensify — glow radius and opacity increase"
+    glass-surface: "alpha-step — surface opacity increases one level"
+  active:
+    button: "soft-scale — scale-[0.97], glow dims"
+  focus:
+    general: "glow ring — ring-2 ring-{color.primary}/50 with ambient glow"
+  transition: "duration-200 to duration-300, cubic-bezier(0.4, 0, 0.2, 1)"
+  ambient:
+    - "orb-drift — gradient blobs drift slowly behind glass panels"
+    - "color-shift — background blob hues rotate subtly"
+    - "glow-pulse — primary elements pulse glow at rest"
+
 compatibility: [aurora-gradients, liquid-glass]
 clashes: [neubrutalism, claymorphism]

package/gsp/skills/gsp-style/styles/humanist-literary.yml

@@ -54,5 +54,79 @@ dark_mode:
     surface: "#2A2926"
     on-background: "#E8E6E0"
 
+intensity:
+  variance: 2     # predictable, centered, calm — the interface recedes for content
+  motion: 2       # minimal and snappy — fast fades, no spectacle, text is the show
+  density: 2      # airy — generous padding, relaxed spacing, paper-like breathing room
+
+patterns:
+  card:
+    border: "{shape.border-width} solid {shape.border-color}"
+    shadow: "{elevation.shadow-sm} — barely there, flat tile feel"
+    radius: "{shape.border-radius-md}"
+    background: "{color.surface}"
+  button-primary:
+    background: "{color.primary}"
+    border: "none"
+    shadow: "none"
+    text: "weight 500, sentence case, {typography.font-family-secondary}"
+    radius: "{shape.border-radius-lg} — pill shape"
+  button-secondary:
+    background: "transparent"
+    border: "{shape.border-width} solid {shape.border-color}"
+    text: "weight 500, sentence case, {color.on-background}"
+    radius: "{shape.border-radius-lg} — pill shape"
+  input:
+    border: "{shape.border-width} solid {shape.border-color}"
+    radius: "{shape.border-radius-md}"
+    background: "{color.background}"
+    focus: "border deepens slightly — no glowing rings, no blue outlines"
+    height: "generous — text-lg input, p-4 to p-6 padding"
+  badge:
+    shape: "rounded-full pill"
+    text: "text-sm, sans-serif, weight 500, muted tones"
+  nav:
+    style: "clean horizontal, minimal — recedes behind content"
+    links: "sans-serif, weight 500, hover deepens color subtly"
+  layout:
+    archetype: "centered-editorial"
+    max-width: "max-w-3xl for text, max-w-5xl for wider layouts"
+    section-spacing: "py-16 to py-24 — calm, not cavernous"
+    grid-gap: "gap-4 to gap-8"
+    surfaces: "clean warm off-white — no texture, no grain, no patterns"
+    typography-focus: "serif display at text-4xl to text-5xl, generous line-height"
+
+constraints:
+  never:
+    - "pure black (#000000) or pure white (#FFFFFF) — warm charcoal and eggshell only"
+    - "glowing focus rings or neon outlines — focus is subtle border deepening"
+    - "jarring gradients or drop shadows — everything flat and calm"
+    - "uppercase text on body or buttons — sentence case throughout"
+    - "saturated SaaS blues or teals — warm muted palette only"
+    - "heavy decorative elements — the interface must recede for content"
+    - "bouncy spring animations — snappy or instant, never playful"
+    - "dense layouts or tight spacing — generous padding is essential"
+  always:
+    - "serif font for display headings (Merriweather/Tiempos), sans for UI"
+    - "warm off-white background (#FAF9F6) — never cold or stark"
+    - "terracotta (#DA7756) reserved exclusively for primary submit actions"
+    - "generous input padding — text areas feel spacious and inviting"
+    - "thin delicate borders (1px) — never heavy or prominent"
+    - "content-first hierarchy — UI chrome recedes, text breathes"
+
+effects:
+  interaction-vocabulary: [subtle-darken, gentle-fade, quiet-deepen]
+  hover:
+    card: "subtle-darken — background shifts to muted, barely perceptible"
+    button: "subtle-darken — opacity-90 or slight background darken"
+    link: "quiet-deepen — color deepens, optional underline appears"
+    chip: "subtle-darken — bg-muted/50, fast and quiet"
+  active:
+    button: "subtle-darken — slight darken, no scale or transform"
+  focus:
+    input: "border deepens — warm border color intensifies, no ring"
+    general: "ring-1 ring-{color.border} — barely visible, warm"
+  transition: "duration-100 to duration-150, ease"
+
 compatibility: [professional, botanical, academia]
 clashes: [cyberpunk, maximalism, retro]

package/gsp/skills/gsp-style/styles/industrial.yml

@@ -59,5 +59,87 @@ dark_mode:
     surface: "#3D4446"
     on-background: "#DFE6E9"
 
+intensity:
+  variance: 5     # asymmetric hero splits, slight testimonial rotation, but grid-mounted precision
+  motion: 5       # mechanical spring bounce, button press physics, LED pulse, grayscale-to-color
+  density: 6      # utilitarian density — functional, organized, not wasteful with space
+
+patterns:
+  card:
+    border: "none — depth from neumorphic dual shadows"
+    shadow: "{elevation.shadow-md}"
+    radius: "{shape.border-radius-lg}"
+    background: "{color.background}"
+    detail: "corner screw radial gradients (12px from edges), vent slots (3x pill divs) top-right"
+  button-primary:
+    background: "{color.primary}"
+    border: "1px solid rgba(255,255,255,0.2) rim highlight"
+    shadow: "4px 4px 8px rgba(166,50,60,0.4), -4px -4px 8px rgba(255,100,110,0.4)"
+    text: "uppercase, tracking-wide, weight 700, white"
+    radius: "{shape.border-radius-md}"
+  button-secondary:
+    background: "{color.background}"
+    border: "none"
+    shadow: "{elevation.shadow-sm}"
+    text: "{color.on-background}, uppercase, tracking-wide"
+    radius: "{shape.border-radius-md}"
+  input:
+    border: "none — depth from recessed inset shadow only"
+    radius: "{shape.border-radius-md}"
+    background: "{color.background}"
+    focus: "accent glow ring appears — 0 0 0 2px {color.primary}"
+    shadow: "inset 4px 4px 8px #babecc, inset -4px -4px 8px #ffffff"
+    font: "monospace for technical data entry feel"
+  badge:
+    shape: "rounded-full, small (8-12px)"
+    text: "monospace uppercase tracking-wide text-xs"
+    decoration: "LED glow shadow — 0 0 10px rgba(color, 0.6), animate-pulse"
+  nav:
+    style: "sticky neumorphic bar with ghost button links"
+    background: "{color.background}"
+    shadow: "{elevation.shadow-sm}"
+    detail: "LED status indicator (green pulse) with monospace label"
+  layout:
+    archetype: "bolted-chassis"
+    max-width: "max-w-[72rem]"
+    section-spacing: "py-24"
+    grid-gap: "gap-6 to gap-8"
+    surfaces: "noise texture overlay (SVG fractal, 20-30% opacity, mix-blend-overlay) — never flat"
+    decoration: "carbon fiber texture on dark panels, CRT scanlines on screens, connector pipes between steps"
+    detail: "corner screws, vent slots, LED indicators, push-pins on testimonials"
+
+constraints:
+  never:
+    - "flat surfaces without noise texture — matte plastic micro-texture is mandatory"
+    - "pure black (#000) in shadows — use cool blue-grey (#babecc) for neumorphic pairs"
+    - "sharp 90-degree corners on large elements — soft injection-molded radii (4px-24px)"
+    - "colored gradients on backgrounds — monochromatic chassis only (except dark panels)"
+    - "missing manufacturing details — screws, vents, and LEDs are DNA, not decoration"
+    - "smooth organic easing — mechanical spring bounce (cubic-bezier 0.175, 0.885, 0.32, 1.275)"
+  always:
+    - "neumorphic dual shadows (dark bottom-right + light top-left) on every panel"
+    - "active states reverse shadow to inset + translate-y-[2px] — button press physics"
+    - "noise texture overlay on page background"
+    - "carbon fiber texture on dark technical panels"
+    - "LED status indicators with pulse animation and glow shadow"
+    - "corner screw details on cards (radial gradient at 12px from edges)"
+    - "monospace font on all numeric displays, labels, badges, and metadata"
+
+effects:
+  interaction-vocabulary: [mechanical-press, spring-lift, led-glow, grayscale-reveal]
+  hover:
+    card: "spring-lift — -translate-y-1, shadow upgrades to floating, spring easing"
+    button: "brightness-110, shadow maintained"
+    icon: "spring-lift — scale-110 + rotate-12 via group-hover"
+    image: "grayscale-reveal — grayscale-0 transition over 500ms"
+  active:
+    button: "mechanical-press — translate-y-[2px], shadow inverts to inset, 150ms fast"
+  focus:
+    general: "ring-2 ring-{color.primary} ring-offset-2"
+  transition: "duration-150 to duration-300, cubic-bezier(0.175, 0.885, 0.32, 1.275)"
+  ambient:
+    - "led-glow — animate-pulse on status indicators with colored glow shadow"
+    - "radar-sweep — animate-spin with conic-gradient on benefits section (4s)"
+
 compatibility: [terminal, monochrome]
 clashes: [botanical, glassmorphism, liquid-glass]

package/gsp/skills/gsp-style/styles/kinetic.yml

@@ -47,6 +47,100 @@ tokens:
     duration-normal: "300ms"
     easing: "cubic-bezier(0.4, 0, 0.2, 1)"
 
+intensity:
+  variance: 7     # asymmetric type layouts, sticky scroll stacking, uneven column widths
+  motion: 10      # marquees never stop, scroll-triggered parallax, scale transforms — motion IS the style
+  density: 4      # brutalist sparse — extreme type scale creates visual weight without density
+
+patterns:
+  card:
+    border: "{shape.border-width} solid {shape.border-color}"
+    shadow: "none — completely flat, depth from color layering only"
+    radius: "0px — sharp corners, no exceptions"
+    background: "{color.background}"
+    hover: "color-flood — background fills {color.secondary}, all text inverts to black"
+    internal: "large title top (text-3xl), muted description, decorative number in bg"
+  button-primary:
+    background: "{color.secondary}"
+    border: "none"
+    shadow: "none"
+    text: "uppercase tracking-tighter font-bold {color.on-primary}"
+    radius: "0px"
+    size: "h-14 px-8 default, h-20 px-12 large"
+  button-secondary:
+    background: "transparent"
+    border: "{shape.border-width} solid {shape.border-color}"
+    shadow: "none"
+    text: "uppercase tracking-tighter font-bold {color.on-background}"
+    radius: "0px"
+    fill: "hover fills {color.on-background}, text inverts to {color.background} — hard color flip"
+  input:
+    border: "border-b-2 only — bottom border, no box"
+    radius: "0px"
+    background: "transparent"
+    text: "text-4xl bold uppercase tracking-tighter — oversized dramatic inputs"
+    focus: "border-bottom becomes {color.secondary}, no ring"
+    height: "h-24 — extra tall for drama"
+  badge:
+    shape: "sharp rectangle, border-2, no radius"
+    text: "text-xs uppercase tracking-widest font-bold"
+    decoration: "none — minimal, structural"
+  nav:
+    logo: "uppercase tracking-tighter font-bold, accent color highlight"
+    links: "uppercase text-sm, hover shifts to {color.secondary}"
+    mobile: "minimal, sharp-cornered menu"
+  layout:
+    archetype: "kinetic-poster"
+    max-width: "max-w-[95vw] — push to edges, never conservative"
+    section-spacing: "py-32 — dramatic breathing room"
+    grid-gap: "gap-8 standard, gap-px with colored bg for hairline dividers"
+    asymmetry: "sticky scroll card stacking, overlapping elements, uneven columns"
+    surfaces: "flat solid colors only — no gradients, no patterns, SVG noise at 0.03 opacity"
+    decoration: "massive background numbers (8-12rem) in muted tone as graphic shapes"
+    dividers: "full-width border-top/bottom in {shape.border-color}, accent bg flips for contrast"
+
+constraints:
+  never:
+    - "border-radius above 2px — sharp corners are non-negotiable"
+    - "drop shadows of any kind — completely flat, no depth effects"
+    - "gradients on backgrounds — solid colors only"
+    - "serif or script fonts — geometric sans (Space Grotesk/Inter) only"
+    - "small headlines below text-3xl — if it's a heading, it screams"
+    - "conservative max-widths (max-w-4xl, max-w-5xl) — content pushes wide"
+    - "standard section padding (py-16) — go bigger (py-32)"
+    - "pause-on-hover for marquees — motion is constant, never interrupted"
+    - "mixed case on display text — uppercase is mandatory for all headings/buttons/labels"
+    - "pure black (#000) or pure white (#FFF) — use rich black (#09090B) and off-white (#FAFAFA)"
+  always:
+    - "at least 2 infinite marquees per page — one fast (speed 60-80), one slower (speed 30-50)"
+    - "viewport-width typography on at least one headline — clamp(3rem, 12vw, 14rem)"
+    - "massive background numbers (8-12rem) in muted tone as decorative elements"
+    - "hard color inversions on card/section hover — full scheme flip, not gradual"
+    - "uppercase + tracking-tighter on all display text"
+    - "aggressive scale hierarchy — 8-10x difference between largest and smallest text"
+    - "sharp 0px border-radius on every element"
+    - "2px borders in subtle zinc/muted tones for structural definition"
+
+effects:
+  interaction-vocabulary: [color-flood, scale-snap, slide-reveal, parallax-zoom, marquee-scroll]
+  hover:
+    card: "color-flood — background fills {color.secondary}, all text inverts to black, duration-300"
+    button-primary: "scale-snap — scale-105%, instant feel"
+    button-secondary: "color-flood — bg fills {color.on-background}, text inverts"
+    link: "text color shifts to {color.secondary}, underline appears"
+    benefit: "slide-reveal — title translates-x-8, description fades in from opacity-0"
+  active:
+    button: "scale-snap — scale-95%, tactile press"
+  focus:
+    input: "border-bottom color shifts to {color.secondary} — border-only focus indicator"
+    general: "ring-2 ring-{color.secondary} ring-offset-2 ring-offset-{color.background}"
+  transition: "duration-200 to duration-300, ease-in-out for interactions; linear for marquees"
+  ambient:
+    - "marquee-perpetual — infinite horizontal scroll at constant speed, no gradient edges, never pauses"
+    - "parallax-hero — useScroll scale 1.0->1.2, opacity 1.0->0 on hero (0-20% scroll)"
+    - "sticky-stack — cards position:sticky, physically stack as user scrolls"
+    - "noise-grain — SVG feTurbulence overlay at 0.03 opacity, fixed position, full viewport"
+
 compatibility: [cyberpunk, bold-typography]
 clashes: [swiss-minimalist, professional, botanical]
 trend_ref: trends/kinetic-typography.md

package/gsp/skills/gsp-style/styles/liquid-glass.yml

@@ -62,5 +62,96 @@ dark_mode:
     on-background: "#F5F5F7"
     border-color: "rgba(255, 255, 255, 0.18)"
 
+intensity:
+  variance: 3     # clean Apple grid layouts, consistent spacing, restrained composition
+  motion: 7       # fluid shape morphing between states, smooth 350ms transitions, specular animation
+  density: 4      # generous Apple-style whitespace, content breathes within glass surfaces
+
+patterns:
+  card:
+    background: "{color.surface}"
+    blur: "backdrop-blur-[2px] backdrop-saturate-[180%]"
+    border: "1px solid {shape.border-color}"
+    shadow: "{elevation.shadow-md} with {glass.highlight}"
+    radius: "{shape.border-radius-md}"
+    inner-layer: "::after — backdrop-blur-[1px], bg-white/10, refraction edge shadow"
+    hover: "surface opacity steps 0.60→0.70, border 0.80→0.90, shadow deepens"
+  button-primary:
+    background: "{color.primary}"
+    border: "1px solid white/20"
+    shadow: "0 2px 8px {color.primary}/30, inset 0 1px 0 white/30 (specular highlight)"
+    text: "weight 600, sentence case, white"
+    radius: "{shape.border-radius-sm}"
+    hover: "bg darkens, shadow expands, specular brightens"
+  button-secondary:
+    background: "{color.surface}"
+    blur: "backdrop-blur-[2px] backdrop-saturate-[180%]"
+    border: "1px solid {shape.border-color}"
+    text: "weight 600, {color.primary}"
+    radius: "{shape.border-radius-sm}"
+    shadow: "{elevation.shadow-sm}, inset 0 2px 8px white/20"
+  input:
+    background: "rgba(255,255,255,0.40)"
+    blur: "backdrop-blur-[2px]"
+    border: "1px solid white/60"
+    radius: "{shape.border-radius-sm}"
+    focus: "bg steps to 0.60, border shifts to {color.primary}/50, ring glow 3px {color.primary}/20"
+    shadow: "inset 0 1px 3px rgba(0,0,0,0.06)"
+  badge:
+    shape: "rounded-full"
+    background: "{color.primary}/15"
+    text: "text-xs font-medium {color.primary}"
+    border: "1px solid {color.primary}/20"
+    blur: "backdrop-blur-[1px]"
+  nav:
+    background: "rgba(255,255,255,0.50)"
+    blur: "backdrop-blur-[4px] backdrop-saturate-[180%]"
+    border: "border-b border-white/60"
+    position: "fixed top-0, z-50"
+    shadow: "0 1px 0 rgba(0,0,0,0.04)"
+  layout:
+    archetype: "apple-clean-grid"
+    max-width: "max-w-7xl"
+    section-spacing: "py-16 to py-24"
+    grid-gap: "gap-3 to gap-4"
+    surfaces: "light background (#F2F2F7), pastel gradient washes (blue-200/30, purple-200/20)"
+    depth: "surface opacity scale: 0.40→0.50→0.60→0.70→0.80 by z-level"
+    background: "warm-neutral, never stark white — subtle color washes behind glass"
+
+constraints:
+  never:
+    - "high blur (12px+) — that is glassmorphism, not Liquid Glass; 2px is the refractive sweet spot"
+    - "low-opacity borders (0.20) — borders must be 0.80+ for polished glass edge"
+    - "dark backgrounds as default — light mode (#F2F2F7) is canonical"
+    - "surfaces without specular highlights — inner shadows or ::after refraction required"
+    - "hard state swaps — all state changes must use fluid shape transitions"
+    - "bold neon background orbs — use pastel washes only (blue-200, purple-200)"
+    - "mixing glassmorphism high-blur with Liquid Glass high-opacity — they cancel out"
+    - "pure white (#FFFFFF) page backgrounds — use #F2F2F7 system grey"
+  always:
+    - "specular highlights (inset box-shadow or ::after) on every glass surface"
+    - "backdrop-blur at 2px (1-4px range) — refractive, not frosted"
+    - "strong borders (white/80+) for polished glass edge quality"
+    - "dual-layer construction (outer glass + inner ::after light layer)"
+    - "-webkit-backdrop-filter prefix for Safari"
+    - "fluid shape morphing between states (border-radius, scale, shadow transitions)"
+    - "surface opacity hierarchy matching z-depth"
+
+effects:
+  interaction-vocabulary: [glass-brighten, specular-shift, fluid-morph, tactile-press, refraction-step]
+  hover:
+    card: "glass-brighten — surface 0.60→0.70, border 0.80→0.90, shadow deepens"
+    button-primary: "specular-shift — bg darkens, glow expands, inset highlight strengthens"
+    button-secondary: "glass-brighten — surface brightens, shadow deepens"
+    tab: "refraction-step — inactive→active with glass surface + specular emerging"
+  active:
+    button: "tactile-press — scale-[0.98], shadow contracts, specular dims"
+  focus:
+    general: "ring glow — 0 0 0 3px {color.primary}/20, border shifts to {color.primary}/50"
+  transition: "duration-200 to duration-350, cubic-bezier(0.2, 0.8, 0.2, 1)"
+  ambient:
+    - "specular-drift — inner light layer shifts subtly with scroll position"
+    - "pastel-wash — background gradient washes drift slowly for glass tinting"
+
 compatibility: [glassmorphism, aurora-gradients]
 clashes: [neubrutalism, terminal, cyberpunk]