get-shit-pretty 0.6.2 → 0.6.3

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

@@ -58,5 +58,88 @@ dark_mode:
     surface: "#1A1A1A"
     on-background: "#F5F5F0"
 
+intensity:
+  variance: 4     # asymmetric grids but architecturally balanced, offset columns
+  motion: 3       # cinematic slow reveals, never flashy — restraint is the point
+  density: 2      # extreme negative space — luxury breathes, less is more
+
+patterns:
+  card:
+    border: "border-t {shape.border-width} solid {color.on-background}"
+    shadow: "{elevation.shadow-sm} resting, {elevation.shadow-md} on hover — always subtle"
+    radius: "0px — strictly rectangular, architectural precision"
+    background: "transparent — defined by top-border, not fill"
+    texture: "paper noise overlay at 2% opacity across page"
+  button-primary:
+    background: "{color.accent}"
+    border: "none"
+    shadow: "{elevation.shadow-md} resting, {elevation.shadow-lg} on hover"
+    text: "uppercase, text-xs, tracking-[0.2em], weight 500, white"
+    radius: "0px"
+    decoration: "gold overlay slides from left on hover via translate-x"
+  button-secondary:
+    background: "transparent"
+    border: "{shape.border-width} solid {color.on-background}"
+    text: "uppercase, text-xs, tracking-[0.2em], {color.on-background}"
+    radius: "0px"
+  input:
+    border: "border-b only — {shape.border-width} solid {color.on-background}"
+    radius: "0px"
+    background: "transparent"
+    focus: "border-b-{color.primary} — gold underline, no ring, no glow"
+    placeholder: "italic serif ({typography.font-family-primary}), {color.muted}"
+  badge:
+    shape: "0px radius, thin border"
+    text: "text-xs uppercase tracking-[0.25em], {color.muted}"
+  nav:
+    style: "minimal horizontal with border-bottom separator"
+    links: "uppercase text-xs tracking-[0.2em], hover shifts to {color.primary}"
+  layout:
+    archetype: "asymmetric-editorial"
+    max-width: "max-w-[1600px]"
+    section-spacing: "py-24 to py-32 — massive vertical breathing room"
+    grid-gap: "gap-12 to gap-16"
+    asymmetry: "7/5 or 4-offset-by-2 column splits, bottom-left alignment"
+    surfaces: "paper noise at 2% opacity — fixed overlay, tactile quality"
+    decoration: "vertical text labels (writing-mode: vertical-rl), visible 4-line grid, decorative h-px dividers"
+
+constraints:
+  never:
+    - "border-radius above 0px — everything perfectly rectangular, no exceptions"
+    - "harsh or prominent shadows — only soft rgba with low opacity"
+    - "pure black (#000000) or pure white (#FFFFFF) — charcoal and alabaster only"
+    - "fast animations under 500ms — luxury is deliberate and slow"
+    - "vibrant or saturated colors — monochromatic with gold accent only"
+    - "centered symmetric layouts — use asymmetry, offset columns, intentional imbalance"
+    - "decorative display fonts — only Playfair Display and Inter"
+    - "prominent icons — if needed, lucide thin strokes only, functional not decorative"
+    - "gold as dominant area color — accent for hover/focus only, never primary fill"
+    - "ease-in-out or ease-in easing — mechanical feel breaks luxury"
+  always:
+    - "grayscale filter on all images by default, color reveals on hover (1500-2000ms)"
+    - "gold (#D4AF37) appears on hover states — underlines, borders, text color shifts"
+    - "extreme type scale contrast — massive serif headlines vs tiny uppercase labels"
+    - "generous negative space — more than feels comfortable"
+    - "paper noise texture overlay (2% opacity, fixed position)"
+    - "inner borders (inset shadows) on images for subtle framing"
+    - "visible architectural grid lines at low opacity"
+
+effects:
+  interaction-vocabulary: [gold-slide, cinematic-reveal, shadow-deepen, slow-invert]
+  hover:
+    card: "shadow-deepen — shadow evolves sm→md, barely visible bg shift"
+    button-primary: "gold-slide — gold overlay translates from left, shadow deepens"
+    button-secondary: "slow-invert — background fills dark, text inverts white"
+    image: "cinematic-reveal — grayscale→color over 1500-2000ms, scale-105, shadow deepens"
+    link: "gold accent — text shifts to {color.primary} over 500ms"
+  active:
+    button: "shadow-deepen — shadow increases, no scale"
+  focus:
+    input: "border-b color shifts to {color.primary} — gold underline only"
+    general: "ring-1 ring-{color.on-background} — minimal, elegant"
+  transition: "duration-500 to duration-700, ease-out or cubic-bezier(0.25, 0.46, 0.45, 0.94)"
+  ambient:
+    - "grayscale-hold — all images rest in grayscale, color is earned on interaction"
+
 compatibility: [art-deco, academia]
 clashes: [neubrutalism, retro, maximalism]

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

@@ -54,5 +54,88 @@ dark_mode:
     surface: "#2B2930"
     on-background: "#E6E1E5"
 
+intensity:
+  variance: 4     # organic blur shapes and asymmetric elevation create interest, but grids stay structured
+  motion: 6       # state layers animate smoothly, scale feedback on press, glow reveals on hover
+  density: 4      # generous padding, relaxed spacing, content breathes within tonal surfaces
+
+patterns:
+  card:
+    border: "none — tonal surface separation, not borders"
+    shadow: "{elevation.shadow-sm} resting, {elevation.shadow-md} on hover"
+    radius: "{shape.border-radius-xl}"
+    background: "{color.surface}"
+    hover: "hover:scale-[1.02] with shadow transition"
+  button-primary:
+    background: "{color.primary}"
+    border: "none"
+    shadow: "none resting, {elevation.shadow-md} on hover"
+    text: "weight 500, sentence case, {color.on-primary}"
+    radius: "rounded-full"
+    state-layer: "bg-{color.primary}/90 on hover, /80 on active"
+  button-secondary:
+    background: "{color.surface}"
+    border: "none"
+    text: "weight 500, sentence case, on-secondary-container"
+    radius: "rounded-full"
+    state-layer: "bg-{color.primary}/10 on hover"
+  input:
+    border: "2px solid {shape.border-color} on bottom only"
+    radius: "rounded-t-lg, square bottom"
+    background: "surface-container-low ({color.surface} darker)"
+    focus: "bottom border shifts to {color.primary}"
+    height: "h-14"
+  badge:
+    shape: "rounded-full"
+    text: "text-xs font-medium"
+    background: "{color.primary}/15 with {color.primary} text"
+  nav:
+    style: "horizontal tabs or bottom nav"
+    selection: "underline indicator in {color.primary} for tabs"
+    hover: "bg-{color.primary}/10 state layer"
+  layout:
+    archetype: "tonal-surface-hierarchy"
+    max-width: "container mx-auto"
+    section-spacing: "py-12 to py-24"
+    grid-gap: "gap-6 to gap-8"
+    surfaces: "tonal — never pure white, layer: background→surface-container→surface-container-low"
+    decoration: "organic blur shapes (blur-3xl) in primary/secondary/tertiary at 10-30% opacity"
+    hero: "extra-large radius (rounded-[48px]) container with surface-container background"
+
+constraints:
+  never:
+    - "pure white (#FFFFFF) backgrounds — always use tinted surface color"
+    - "rectangular buttons — all buttons must be rounded-full (pill-shaped)"
+    - "heavy drop shadows — subtle elevation with tonal surfaces preferred"
+    - "hover color changes on solid buttons — use state layers (opacity overlays) instead"
+    - "sharp corners on major containers — 24px minimum card radius"
+    - "borders for container separation — use tonal backgrounds instead"
+    - "pure black text — use on-surface (#1C1B1F) with warmth"
+    - "flat inputs — filled text field style with bottom border required"
+  always:
+    - "pill-shaped (rounded-full) buttons on every variant"
+    - "organic blur shapes in hero and key sections"
+    - "state layer interaction model (opacity overlays, not color shifts)"
+    - "active:scale-95 on all clickable elements for tactile feedback"
+    - "tonal surface hierarchy (background→container→container-low)"
+    - "Material easing cubic-bezier(0.2, 0, 0, 1) on all transitions"
+    - "generous border radii: 24px cards, 32-48px hero sections"
+
+effects:
+  interaction-vocabulary: [state-layer, tactile-press, tonal-step, glow-reveal, hover-scale]
+  hover:
+    card: "hover-scale — scale-[1.02], shadow steps sm→md"
+    button-primary: "state-layer — bg-{color.primary}/90 overlay"
+    button-secondary: "state-layer — bg-{color.primary}/10 overlay"
+    image: "hover-scale — scale-105 with overflow-hidden"
+  active:
+    button: "tactile-press — active:scale-95, state-layer at /80"
+  focus:
+    general: "ring-2 ring-{color.primary} ring-offset-2"
+  transition: "duration-200 to duration-300, cubic-bezier(0.2, 0, 0, 1)"
+  ambient:
+    - "glow-reveal — hidden blur behind badges reveals on hover (opacity-0→30)"
+    - "blob-drift — organic background shapes with mix-blend-multiply"
+
 compatibility: [professional, fluent]
 clashes: [neubrutalism, monochrome, retro]

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

@@ -54,5 +54,97 @@ tokens:
     duration-normal: "400ms"
     easing: "cubic-bezier(0.34, 1.56, 0.64, 1)"
 
+intensity:
+  variance: 10    # broken grids, asymmetric offsets, rotated cards, clashing borders — chaos is the system
+  motion: 8       # floating shapes, gradient shifts, bouncy hovers, wiggle animations on everything
+  density: 9      # pattern-on-pattern, floating decorations, stacked shadows, emoji accents — no empty pixels
+
+patterns:
+  card:
+    border: "border-4 solid, accent color rotated per card (clashes with background)"
+    shadow: "hard stacked — 8px 8px 0 {color-rotate.cyan}, 16px 16px 0 {color-rotate.magenta}"
+    radius: "rounded-3xl"
+    background: "bg-[#2D1B4E]/80 with backdrop-blur-sm"
+    header: "border-b-4 border-dashed in different accent, optional background tint"
+    asymmetry: "clip-path corner cut OR rotate-1 to rotate-2"
+  button-primary:
+    background: "gradient across 3 accents — from-{color-rotate.magenta} via-{color-rotate.purple} to-{color-rotate.cyan}"
+    border: "border-4 border-{color-rotate.yellow} — clashing"
+    shadow: "glow + hard shadow combined"
+    text: "font-black uppercase tracking-widest"
+    radius: "rounded-full"
+    size: "h-14 px-10 default, h-16 px-12 large"
+  button-secondary:
+    background: "transparent"
+    border: "border-4 border-dashed border-{color-rotate} — rotated accent"
+    shadow: "none resting, glow on hover"
+    text: "font-bold uppercase"
+    radius: "rounded-full"
+    fill: "hover fills solid accent, border becomes solid, scale 105%"
+  input:
+    border: "border-4 border-{color-rotate} — thick and colored"
+    radius: "rounded-full for single-line, rounded-2xl for textarea"
+    background: "bg-[#2D1B4E]/50 with backdrop-blur-sm"
+    focus: "double ring — ring-4 ring-{accent-1}/30 ring-offset-2 ring-offset-{accent-2}, glow shadow"
+    text: "text-lg font-bold text-white"
+  badge:
+    shape: "rounded-full, border-4, accent color per badge"
+    text: "font-black text-sm uppercase tracking-widest"
+    decoration: "rotate-2 to rotate-6, floating with bounce animation"
+    shadow: "glow shadow in badge accent color"
+  nav:
+    logo: "display font, gradient text or accent color, animated gradient shift"
+    links: "bold uppercase, hover scales 110% with color shift"
+    mobile: "full-screen overlay with floating shapes and gradient mesh"
+  layout:
+    archetype: "broken-grid-carnival"
+    max-width: "max-w-7xl, hero full-bleed"
+    section-spacing: "py-24 to py-32"
+    grid-gap: "gap-6 to gap-12, deliberately varied"
+    asymmetry: "translate-y offsets on alternating items, rotate-1/-1 on cards, negative margins for overlap"
+    surfaces: "mandatory 2-3 pattern layers — dots + stripes + gradient mesh, per section"
+    decoration: "5-10 floating SVG shapes per section, oversized background text at opacity-20"
+
+constraints:
+  never:
+    - "matching border and background colors — always clash (magenta bg = yellow border)"
+    - "single-layer shadows — minimum 2 layers, preferably 3"
+    - "neutral or muted borders — every border is a saturated accent color"
+    - "symmetrical grid alignment — offset, rotate, or skew at least every other element"
+    - "empty backgrounds — minimum 2 pattern overlays per section"
+    - "single accent color per section — rotate through all 5 systematically"
+    - "subtle or gentle hover states — every hover combines scale + color + shadow change"
+    - "thin borders (1px) — minimum border-2, standard is border-4"
+  always:
+    - "5-color accent rotation across sections and repeated elements (modulo cycling)"
+    - "hard stacked shadows (8px/16px/24px increments) in rotating accent colors"
+    - "pattern-on-pattern layering — dots, stripes, checkerboard, gradient mesh"
+    - "floating decorative shapes (stars, sparkles, emoji) with animation"
+    - "border-4 or border-8 on every card and container"
+    - "text-shadow stacking on headlines (2-3 layers in different accent colors)"
+    - "backdrop-blur on semi-transparent containers"
+    - "display font (Unbounded/Bungee) on hero headlines"
+
+effects:
+  interaction-vocabulary: [bounce-lift, shadow-stack-grow, color-clash-swap, wiggle-shake, glow-burst]
+  hover:
+    card: "bounce-lift — scale-[1.02], rotate increases, shadow adds third layer"
+    button-primary: "glow-burst — scale-110%, glow opacity +0.2, gradient position shifts"
+    button-secondary: "color-clash-swap — fills solid accent, border becomes solid, scale 105%"
+    link: "color-clash-swap — text shifts to next accent in rotation"
+    badge: "wiggle-shake — rotate oscillates +-3deg rapidly"
+  active:
+    button: "bounce-lift reverse — scale-95%, shadow reduces to single layer"
+  focus:
+    input: "glow-burst — double ring system, ring-4 + ring-offset-4 in contrasting accents"
+    general: "ring-4 ring-{color-rotate.magenta} ring-offset-4 ring-offset-{color-rotate.cyan}"
+  transition: "duration-200 to duration-300, cubic-bezier(0.34, 1.56, 0.64, 1) — bouncy overshoot"
+  ambient:
+    - "float-drift — decorative shapes bob up/down 10-20px (3-5s ease-in-out infinite)"
+    - "wiggle-spin — star/sparkle shapes rotate slowly (8-15s linear infinite)"
+    - "gradient-shift — animated gradient text cycles background-position (4s linear infinite)"
+    - "pulse-glow — glow shadows oscillate opacity on featured elements (2s ease-in-out)"
+    - "bounce-subtle — emoji and shape decorations bounce gently (2-3s ease-in-out infinite)"
+
 compatibility: [vaporwave, cyberpunk]
 clashes: [swiss-minimalist, professional, monochrome]

package/gsp/skills/gsp-style/styles/minimal-dark.yml

@@ -57,5 +57,80 @@ tokens:
     base: "#12121A"
     elevated: "#1A1A24"
 
+intensity:
+  variance: 2     # calm, predictable layouts — floating in dark space
+  motion: 4       # smooth subtle interactions with ambient glow shifts
+  density: 2      # extremely spacious — darkspace as breathing room
+
+patterns:
+  card:
+    background: "rgba(26,26,36,0.6)"
+    blur: "backdrop-blur-[8px]"
+    border: "{shape.border-width} solid {shape.border-color}"
+    shadow: "{elevation.shadow-md}"
+    radius: "{shape.border-radius-md}"
+  button-primary:
+    background: "{color.primary}"
+    border: "none"
+    shadow: "0 0 20px rgba(245,158,11,0.15) resting"
+    text: "weight 500, sentence case, {color.on-primary}"
+    radius: "{shape.border-radius-sm}"
+  button-secondary:
+    background: "transparent"
+    border: "{shape.border-width} solid rgba(255,255,255,0.15)"
+    text: "weight 400, {color.on-background}"
+    radius: "{shape.border-radius-sm}"
+  input:
+    background: "rgba(26,26,36,0.6)"
+    blur: "backdrop-blur-[8px]"
+    border: "{shape.border-width} solid {shape.border-color}"
+    radius: "{shape.border-radius-sm}"
+    focus: "border-{color.primary}/50, ring-2 ring-{color.primary}/20, ambient glow"
+  badge:
+    background: "rgba(245,158,11,0.15) or glass"
+    shape: "rounded-full"
+    text: "text-xs, font-medium"
+  nav:
+    background: "glass panel — rgba(18,18,26,0.8) with backdrop-blur"
+    border: "{shape.border-width} solid {shape.border-color}"
+    position: "sticky"
+  layout:
+    archetype: "floating-dark-space"
+    max-width: "max-w-6xl"
+    section-spacing: "py-24 to py-40 — let dark space breathe"
+    grid-gap: "gap-6 to gap-8"
+    surfaces: "layered slate tones ({layers.deep} → {layers.base} → {layers.elevated})"
+    decoration: "ambient orbs with amber glow, radial gradients, subtle noise"
+
+constraints:
+  never:
+    - "pure black (#000000) as background — use rich slate tones instead"
+    - "harsh high-contrast borders — keep border opacity below 15%"
+    - "saturated colors beyond amber accent — cool dark palette only"
+    - "thick borders (>1px) — subtle and low-opacity always"
+    - "bouncy or elastic animations — smooth ease-out only"
+    - "flat shadowless elements — everything needs ambient depth cues"
+  always:
+    - "at least 3 distinct dark layers visible ({layers.deep}, {layers.base}, {layers.elevated})"
+    - "warm amber ({color.primary}) as the sole accent — no cold blues"
+    - "ambient glow on interactive elements (buttons, highlighted cards)"
+    - "glass-effect cards with backdrop-blur and semi-transparent backgrounds"
+    - "generous darkspace padding between sections"
+    - "subtle noise texture (0.02 opacity) for atmospheric grain"
+
+effects:
+  interaction-vocabulary: [glow-intensify, alpha-step, soft-press, border-brighten]
+  hover:
+    card: "alpha-step — border opacity brightens 0.08→0.15, bg opacity increases"
+    button: "glow-intensify — glow radius and opacity increase (0.15→0.4)"
+  active:
+    button: "soft-press — scale-[0.98], glow dims slightly"
+  focus:
+    general: "ring-2 ring-{color.primary}/50 ring-offset-2 ring-offset-{color.background}"
+  transition: "duration-200 to duration-300, ease-out"
+  ambient:
+    - "orb-drift — large blurred amber circles at 0.02-0.04 opacity, fixed positioning"
+    - "glow-pulse — hero badge pulsing dot with amber glow"
+
 compatibility: [modern-dark, terminal]
 clashes: [botanical, flat-design]

package/gsp/skills/gsp-style/styles/modern-dark.yml

@@ -55,5 +55,93 @@ tokens:
 
   gradient-text: "bg-gradient-to-b from-white via-white/95 to-white/70"
 
+intensity:
+  variance: 6     # asymmetric bento grids, varied card spans, off-canvas blob positions
+  motion: 8       # animated blobs (8-10s), mouse-tracking spotlights, scroll parallax, stagger entrances
+  density: 5      # balanced — generous section spacing, moderate card padding
+
+patterns:
+  card:
+    background: "bg-gradient-to-b from-white/[0.08] to-white/[0.02]"
+    border: "1px solid rgba(255,255,255,0.06)"
+    shadow: "multi-layer — border-highlight + soft-diffuse + ambient-darkness"
+    radius: "{shape.border-radius-md}"
+    hover: "border brightens to white/10, accent glow appears, spotlight tracks mouse"
+    highlight: "1px gradient at top edge (inner glow line)"
+  button-primary:
+    background: "{color.primary}"
+    border: "inset shadow instead of border"
+    shadow: "multi-layer — 0 0 0 1px {color.primary}/50, 0 4px 12px {color.primary}/30, inset 0 1px 0 white/20"
+    text: "weight 500, sentence case, white"
+    radius: "{shape.border-radius-sm}"
+    shine: "pseudo-element gradient sweep on hover"
+  button-secondary:
+    background: "rgba(255,255,255,0.05)"
+    border: "inset shadow only"
+    text: "weight 500, {color.on-background}"
+    radius: "{shape.border-radius-sm}"
+    hover: "bg-white/[0.08], subtle outer glow"
+  input:
+    background: "#0F0F12"
+    border: "1px solid rgba(255,255,255,0.10)"
+    radius: "{shape.border-radius-sm}"
+    focus: "border-{color.primary}, accent glow ring"
+    text: "text-gray-100, placeholder text-gray-500"
+  badge:
+    shape: "rounded-full"
+    border: "1px solid {color.primary}/30"
+    text: "font-mono text-xs tracking-widest"
+  nav:
+    background: "bg-{color.background}/95 backdrop-blur-xl"
+    border: "border-b border-white/[0.06]"
+    style: "inline links desktop, animated hamburger mobile"
+  layout:
+    archetype: "asymmetric-bento"
+    max-width: "container responsive"
+    section-spacing: "py-24 to py-32"
+    grid-gap: "gap-4 to gap-8"
+    grid: "6-column base, mix col-span-2/3/4, variable row heights"
+    surfaces: "never flat — layered gradients + noise texture + grid overlay + ambient blobs"
+    decoration: "animated gradient blobs (900-1400px, blur-[150px]), noise at 1.5% opacity, 64px grid at 2%"
+    dividers: "border-t border-white/[0.06] or gradient line via-white/10"
+
+constraints:
+  never:
+    - "flat single-color backgrounds — always layer gradients, noise, and ambient light"
+    - "pure black (#000000) — use near-blacks like #050506 or #020203"
+    - "pure white text — use #EDEDEF or similar off-white"
+    - "large hover movements (>8px) — precision, not playfulness"
+    - "uniform grids — bento layouts must have variety in card sizes"
+    - "harsh visible borders — borders at 6-10% white opacity maximum"
+    - "accent color overuse — monochromatic with selective accent highlights"
+    - "bouncy or spring animations — expo-out easing only"
+    - "missing glow on accent buttons — soft light emission is part of the language"
+  always:
+    - "multi-layer shadows (border-highlight + diffuse + ambient + optional glow)"
+    - "animated ambient blobs in background for cinematic lighting"
+    - "gradient text on headlines (white via-white/95 to-white/70 vertical fade)"
+    - "noise texture overlay at 1-2% opacity"
+    - "mouse-tracking spotlight effect on interactive surfaces"
+    - "inner highlight (inset 0 1px 0 white/10) on elevated surfaces"
+    - "near-black backgrounds, never pure black"
+
+effects:
+  interaction-vocabulary: [spotlight-track, glow-intensify, precision-lift, border-brighten, shine-sweep]
+  hover:
+    card: "spotlight-track — radial gradient follows cursor (300px, 15% opacity), border-brighten"
+    button-primary: "glow-intensify — glow radius/opacity increase, shine-sweep across surface"
+    button-secondary: "border-brighten — bg-white/[0.08], subtle outer glow appears"
+    link: "color brightens, subtle underline"
+  active:
+    button: "scale-[0.98], shadow reduces depth"
+  focus:
+    general: "ring-2 ring-{color.primary}/50 ring-offset-2 ring-offset-{color.background}"
+  transition: "duration-200 to duration-300, cubic-bezier(0.16, 1, 0.3, 1)"
+  ambient:
+    - "blob-float — large gradient blobs drift slowly (8-10s ease-in-out infinite, ±20px)"
+    - "blob-pulse — accent blob in lower area pulses opacity"
+    - "fade-up-stagger — entrance: opacity 0→1, y 24→0, 600ms with 0.08s child stagger"
+    - "parallax-fade — hero fades/scales/translates on scroll"
+
 compatibility: [minimal-dark, glassmorphism]
 clashes: [flat-design, retro, neubrutalism]

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

@@ -62,5 +62,73 @@ dark_mode:
     on-background: "#FFFFFF"
     border-color: "#FFFFFF"
 
+intensity:
+  variance: 3     # editorial asymmetry through type scale, but structurally disciplined
+  motion: 1       # near-zero motion — instant binary state changes
+  density: 2      # dramatic negative space, editorial breathing room
+
+patterns:
+  card:
+    border: "{shape.border-width} solid {shape.border-color}"
+    shadow: "none — zero shadows, depth from inversion and borders"
+    radius: "0px"
+    background: "{color.background}"
+  button-primary:
+    background: "{color.primary}"
+    border: "none"
+    text: "uppercase, tracking-widest, font-medium, text-sm"
+    radius: "0px"
+  button-secondary:
+    background: "transparent"
+    border: "{shape.border-width} solid {shape.border-color}"
+    text: "uppercase, tracking-widest, {color.on-background}"
+    radius: "0px"
+  input:
+    border: "border-b {shape.border-width} solid {shape.border-color}"
+    radius: "0px"
+    background: "{color.background}"
+    focus: "border thickens to 4px — border-only focus, no ring, no glow"
+  badge:
+    shape: "0px radius, thin border"
+    text: "uppercase, tracking-widest, text-xs"
+  nav:
+    style: "minimal — logo + sparse links, heavy rule below"
+    links: "uppercase tracking-wider, underline appears on hover"
+  layout:
+    archetype: "editorial-whitespace"
+    max-width: "max-w-6xl"
+    section-spacing: "py-24 to py-40 — extreme negative space"
+    grid-gap: "gap-8 to gap-16"
+    surfaces: "horizontal lines, grid, and noise texture at very low opacity — paper-like quality"
+    dividers: "4px to 8px black horizontal rules between all major sections"
+
+constraints:
+  never:
+    - "any color besides black, white, and gray — palette is absolute"
+    - "box-shadow of any kind — depth from inversion and border weight only"
+    - "border-radius above 0px — sharp 90-degree corners everywhere"
+    - "gradients — solid fills only"
+    - "rounded or pill shapes — angular geometry is non-negotiable"
+    - "slow easing or bouncy animation — instant or 100ms maximum"
+    - "backdrop-blur or glass effects — strictly flat and opaque"
+  always:
+    - "serif typography for display and body (Playfair Display, Source Serif 4)"
+    - "oversized headlines (8xl to 9xl) as primary visual element"
+    - "heavy horizontal rules (4px-8px) between sections"
+    - "color inversion (black bg / white text) for emphasis instead of accent colors"
+    - "texture overlays (lines, grid, noise) for paper-like depth"
+    - "dramatic negative space framing all content"
+
+effects:
+  interaction-vocabulary: [color-invert, border-thicken, instant-snap]
+  hover:
+    card: "color-invert — full bg/text/border inversion, 100ms"
+    button: "color-invert — black/white swap, instant"
+  active:
+    button: "instant-snap — no transform, color change only"
+  focus:
+    general: "outline 3px solid {color.primary} offset 3px — high contrast, no ring"
+  transition: "duration-0 to duration-100, linear"
+
 compatibility: [swiss-minimalist, newsprint, bold-typography]
 clashes: [vaporwave, maximalism, cyberpunk]

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

@@ -54,5 +54,88 @@ dark_mode:
     on-background: "#F0F0F0"
     border-color: "#F0F0F0"
 
+intensity:
+  variance: 8
+  motion: 5
+  density: 6
+
+patterns:
+  card:
+    border: "{shape.border-width} solid {shape.border-color}"
+    shadow: "{elevation.shadow-md} to {elevation.shadow-lg}"
+    radius: "rounded-none"
+    background: "{color.background}"
+    header: "colored background with border-b-4 separator"
+  button-primary:
+    background: "{color.accent}"
+    border: "{shape.border-width} solid {shape.border-color}"
+    shadow: "{elevation.shadow-sm}"
+    text: "uppercase, weight {typography.font-weight-heading}, tracking-wide"
+    radius: "rounded-none"
+  button-secondary:
+    background: "{color.secondary}"
+    border: "{shape.border-width} solid {shape.border-color}"
+    shadow: "{elevation.shadow-sm}"
+    text: "uppercase, weight {typography.font-weight-heading}, tracking-wide"
+    radius: "rounded-none"
+  input:
+    border: "{shape.border-width} solid {shape.border-color}"
+    radius: "rounded-none"
+    background: "{color.background}"
+    focus: "background fills {color.secondary}, shadow appears, no ring"
+    height: "h-14 to h-20"
+  badge:
+    shape: "rounded-full OR rounded-none with {shape.border-width} border"
+    text: "font-black text-sm uppercase tracking-widest"
+    decoration: "rotate-1 to rotate-3, absolute positioned"
+  nav:
+    logo: "bordered box with accent background, uppercase"
+    links: "bold uppercase, hover adds border + background + shadow"
+    mobile: "hamburger as bordered square with shadow"
+  layout:
+    archetype: "sticker-collage"
+    max-width: "max-w-7xl"
+    section-spacing: "py-16 to py-32"
+    grid-gap: "gap-8 to gap-12"
+    asymmetry: "60/40 splits, offset columns, staggered grids"
+    surfaces: "halftone dots, grid lines, or noise overlay — never flat"
+    decoration: "rotated sticker elements, overlapping shapes, large background text"
+
+constraints:
+  never:
+    - "backdrop-filter or blur — conflicts with flat, structural aesthetic"
+    - "gradient backgrounds — solid color blocks only"
+    - "box-shadow with blur > 0 — all shadows must be hard-offset"
+    - "border-radius between 1px and 9998px — binary: rounded-none or rounded-full"
+    - "subtle grays (#333, #666, #999) — pure black or a saturated color"
+    - "ease-in-out easing — mechanical feel requires linear or ease-out"
+    - "large empty whitespace — fill with texture, patterns, or decorative elements"
+    - "opacity/transparency on surfaces — except texture overlays at low opacity"
+  always:
+    - "hard-offset shadows (x y 0px 0px) on every elevated element"
+    - "visible border-4 border-black on every interactive surface"
+    - "uppercase on headings, labels, and buttons"
+    - "high contrast — WCAG AA minimum, no subtle gray text"
+    - "slight rotation (rotate-1 to rotate-3) on at least some containers"
+    - "texture overlay (halftone, grid, or noise) on section backgrounds"
+
+effects:
+  interaction-vocabulary: [press-down, lift-shadow, snap-rotate, snap-fill]
+  hover:
+    card: "lift-shadow"
+    button: "snap-fill — background darken, fast snap"
+    link: "snap-fill — border + background + shadow appear instantly"
+    badge: "snap-rotate — rotates further on hover"
+  active:
+    button: "press-down — translate covers shadow, mechanical click"
+  focus:
+    input: "snap-fill — background becomes {color.secondary}"
+    general: "ring-2 ring-black ring-offset-2"
+  transition: "duration-100 to duration-200, ease-linear or ease-out"
+  ambient:
+    - "slow-spin on decorative stars (10s linear infinite)"
+    - "pulse on CTA elements"
+    - "bounce on attention badges"
+
 compatibility: [bento-grid, kinetic-typography]
 clashes: [glassmorphism, claymorphism, liquid-glass]