get-shit-pretty 0.6.2 → 0.7.0

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

@@ -53,5 +53,82 @@ tokens:
     shadow-md: "inset 6px 6px 12px rgba(163,177,198,0.7), inset -6px -6px 12px rgba(255,255,255,0.6)"
     shadow-lg: "inset 10px 10px 20px rgba(163,177,198,0.7), inset -10px -10px 20px rgba(255,255,255,0.6)"
 
+intensity:
+  variance: 3     # symmetric, grid-aligned, continuous-surface uniformity
+  motion: 4       # smooth shadow transitions, subtle float, restrained hover lifts
+  density: 4      # airy — shadows need breathing room to render properly
+
+patterns:
+  card:
+    border: "none — no visible borders, edges defined by dual shadows only"
+    shadow: "{elevation.shadow-lg}"
+    radius: "{shape.border-radius-lg}"
+    background: "{color.background}"
+    depth: "nested depth — extruded card > inset icon well > extruded icon"
+  button-primary:
+    background: "{color.primary}"
+    border: "none"
+    shadow: "{elevation.shadow-md}"
+    text: "weight 600, sentence case, white"
+    radius: "{shape.border-radius-sm}"
+  button-secondary:
+    background: "{color.background}"
+    border: "none"
+    shadow: "{elevation.shadow-md}"
+    text: "weight 500, {color.on-background}"
+    radius: "{shape.border-radius-sm}"
+  input:
+    border: "none — depth from inset shadow only"
+    radius: "{shape.border-radius-sm}"
+    background: "{color.background}"
+    focus: "shadow deepens to {inset.shadow-lg}, ring-2 ring-{color.primary} ring-offset-2"
+    shadow: "{inset.shadow-md}"
+  badge:
+    shape: "rounded-full, extruded shadow"
+    text: "text-xs font-medium"
+  nav:
+    style: "sticky extruded bar"
+    background: "{color.background}"
+    shadow: "{elevation.shadow-md}"
+    shape: "{shape.border-radius-lg}"
+  layout:
+    archetype: "continuous-surface"
+    max-width: "max-w-7xl"
+    section-spacing: "py-24 to py-32"
+    grid-gap: "gap-8 to gap-12"
+    surfaces: "monochromatic {color.background} everywhere — no color variety, shadow does all work"
+    decoration: "concentric circles of alternating extruded/inset shadows for abstract art"
+
+constraints:
+  never:
+    - "visible borders — neumorphism never uses borders, shadows define all edges"
+    - "white card backgrounds — cards must match page background {color.background}"
+    - "flat shadowless elements — everything has dual opposing shadows"
+    - "hard hex shadows — always use rgba for transparency and blending"
+    - "sharp corners below rounded-2xl (16px) — too sharp for pillow aesthetic"
+    - "colored or gradient backgrounds — monochromatic {color.background} only"
+    - "light gray text (#A0AEC0) for body — minimum {color.muted} for WCAG AA"
+  always:
+    - "dual opposing shadows (light top-left + dark bottom-right) on every extruded element"
+    - "inset shadows (reversed direction) on every pressed/recessed element"
+    - "same background color on cards and page — continuous surface illusion"
+    - "nested depth demonstrations (extruded > inset > extruded) on feature elements"
+    - "visible focus rings (ring-2 ring-{color.primary}) with offset on background color"
+    - "Plus Jakarta Sans for display, DM Sans for body"
+
+effects:
+  interaction-vocabulary: [soft-lift, shadow-deepen, surface-press, float-drift]
+  hover:
+    card: "soft-lift — -translate-y-1, shadow transitions from {elevation.shadow-lg} to {elevation.shadow-xl}"
+    button: "soft-lift — -translate-y-1, shadow deepens"
+    nested-circle: "shadow-deepen — scale-105 + rotate-180 on inner element"
+  active:
+    button: "surface-press — translate-y-[0.5px], shadow switches to {inset.shadow-sm}"
+  focus:
+    general: "ring-2 ring-{color.primary} ring-offset-2 ring-offset-{color.background}"
+  transition: "duration-300, ease-out"
+  ambient:
+    - "float-drift — decorative elements translateY(-10px) over 3s ease-in-out infinite"
+
 compatibility: [industrial, claymorphism]
 clashes: [neubrutalism, flat-design, monochrome]

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

@@ -54,5 +54,86 @@ tokens:
     halftone-opacity: 0.03
     dot-grid-opacity: 0.02
 
+intensity:
+  variance: 5     # asymmetric column splits (8/4, 5/7) but grid-disciplined overall
+  motion: 2       # fast snappy state changes only, no cinematic movement
+  density: 9      # newspaper-tight padding, collapsed grid borders, maximum information
+
+patterns:
+  card:
+    border: "{shape.border-width} solid {color.on-background}"
+    shadow: "none resting, 4px 4px 0px 0px {color.on-background} on hover"
+    radius: "0px"
+    background: "{color.background}"
+    header: "border-b-4 separator, optional inverted (black bg, white text)"
+  button-primary:
+    background: "{color.on-background}"
+    border: "1px solid transparent"
+    shadow: "none"
+    text: "uppercase, weight {typography.font-weight-heading}, tracking-widest, font-ui"
+    radius: "0px"
+  button-secondary:
+    background: "transparent"
+    border: "{shape.border-width} solid {color.on-background}"
+    shadow: "none"
+    text: "uppercase, weight {typography.font-weight-heading}, tracking-widest"
+    radius: "0px"
+  input:
+    border: "border-b-2 {color.on-background} only — no full border"
+    radius: "0px"
+    background: "transparent"
+    focus: "background fills {color.surface}, no ring, no outline"
+    height: "h-12"
+    font: "monospace"
+  badge:
+    shape: "0px radius, {shape.border-width} border"
+    text: "uppercase tracking-widest text-xs font-mono"
+    decoration: "accent background for breaking/alert badges only"
+  nav:
+    logo: "serif font-black, edition metadata (Vol. 1 | Date | City)"
+    links: "uppercase tracking-widest font-sans, hover turns {color.accent}"
+    mobile: "hamburger as bordered square"
+    border: "border-b-4 {color.on-background}"
+  layout:
+    archetype: "editorial-grid"
+    max-width: "max-w-screen-xl"
+    section-spacing: "py-16"
+    grid-gap: "gap-6 to gap-8"
+    asymmetry: "8/4, 5/7 column splits — never 50/50"
+    surfaces: "dot grid at {texture.dot-grid-opacity}, line grid overlay, halftone on images"
+    decoration: "drop caps (text-7xl float-left), ornamental dividers, grayscale images"
+    columns: "12-column grid with collapsed borders (border-r, border-b)"
+
+constraints:
+  never:
+    - "border-radius above 0px — everything sharp-edged, no exceptions"
+    - "soft or blurred shadows — only hard-offset (4px 4px 0px 0px) on hover"
+    - "gradient backgrounds — solid color blocks only"
+    - "thin font weights — minimum bold for headings, medium for body"
+    - "backdrop-filter or blur — flat editorial surfaces only"
+    - "rounded pill buttons or badges — square geometry only"
+    - "more than one accent color in a section — 99% black and white, red is emergency only"
+  always:
+    - "zero border-radius on every element"
+    - "visible grid structure — collapsed borders between columns and rows"
+    - "serif headlines (Playfair Display), serif body (Lora), sans UI (Inter)"
+    - "uppercase labels, metadata, and navigation with tracking-widest"
+    - "at least one inverted section (black bg, white text)"
+    - "drop caps on key introductory paragraphs"
+    - "halftone dot pattern on images, grayscale default with sepia hover"
+
+effects:
+  interaction-vocabulary: [color-invert, hard-lift, underline-reveal, scale-dot]
+  hover:
+    card: "hard-lift — 4px 4px hard-offset shadow appears, translate(-2px, -2px)"
+    button: "color-invert — black becomes white bg with black border, or vice versa"
+    link: "underline-reveal — thick red underline (decoration-2 decoration-{color.accent})"
+    icon-box: "color-invert — bg fills black, icon turns white"
+  active:
+    button: "translate covers shadow offset, mechanical click"
+  focus:
+    general: "ring-2 ring-{color.on-background} ring-offset-2"
+  transition: "duration-100 to duration-200, ease-out"
+
 compatibility: [monochrome, swiss-minimalist, academia]
 clashes: [glassmorphism, cyberpunk, vaporwave]

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

@@ -61,5 +61,82 @@ dark_mode:
     surface: "#2C2C24"
     on-background: "#E6DCCD"
 
+intensity:
+  variance: 7
+  motion: 5
+  density: 3
+
+patterns:
+  card:
+    border: "{shape.border-width} solid {shape.border-color}"
+    shadow: "{elevation.shadow-sm} — color-tinted, never pure black"
+    radius: "rounded-[2rem] base, asymmetric on features (rounded-tl-[4rem])"
+    background: "#FEFEFA over page background"
+    texture: "noise overlay at 3% opacity, multiply blend"
+  button-primary:
+    background: "{color.primary}"
+    border: "none"
+    shadow: "color-tinted soft shadow (moss)"
+    text: "bold weight, sentence case"
+    shape: "rounded-full — pill always"
+  button-secondary:
+    background: "transparent"
+    border: "2px solid {color.secondary}"
+    text: "{color.secondary}, sentence case"
+    shape: "rounded-full"
+  input:
+    border: "{shape.border-width} solid {shape.border-color}"
+    shape: "rounded-full"
+    background: "bg-white/50 — semi-transparent, shows grain beneath"
+    focus: "ring-2 ring-{color.primary}/30 ring-offset-2"
+  badge:
+    shape: "rounded-full"
+    text: "text-xs, muted earth tones"
+  nav:
+    style: "sticky floating pill"
+    background: "bg-white/70 with backdrop-blur-md"
+    shape: "rounded-full"
+  layout:
+    archetype: "staggered-organic"
+    max-width: "varies — max-w-7xl hero, max-w-5xl intimate, max-w-4xl text"
+    section-spacing: "py-32"
+    grid-gap: "gap-8 to gap-12"
+    surfaces: "grain overlay (3-4% opacity, multiply blend) — always present"
+    backgrounds: "alternating earth tones — off-white, stone, sand, moss, terracotta"
+    decoration: "large blurred blobs (blur-3xl), curved SVG connectors, rotated images"
+
+constraints:
+  never:
+    - "sharp 90-degree corners — everything must feel eroded or hand-shaped"
+    - "hard-offset shadows — all shadows soft, diffused, color-tinted"
+    - "pure black (#000000) in shadows or borders — use tinted alternatives"
+    - "straight geometric decorations — curves and blobs only"
+    - "mechanical or abrupt motion — everything gentle and eased"
+    - "uppercase text — soft, natural case throughout"
+    - "high-contrast neon or saturated colors — earth-drawn palette only"
+    - "flat backgrounds without grain — texture is essential"
+  always:
+    - "organic border radii (large, varied, sometimes asymmetric)"
+    - "grain/noise texture overlay (3-4% opacity, multiply blend)"
+    - "color-tinted shadows using palette colors (moss green, clay orange)"
+    - "generous whitespace — space is a design element"
+    - "blob shapes for decorative backgrounds (complex % border-radius)"
+
+effects:
+  interaction-vocabulary: [gentle-lift, soft-scale, tilt-pick, slow-reveal]
+  hover:
+    card: "gentle-lift — -translate-y-1, shadow deepens"
+    button: "soft-scale — scale-105, shadow increases"
+    testimonial: "tilt-pick — rotate-1, like picking up a card"
+    image: "slow-reveal — scale-105 over 700ms"
+  active:
+    button: "soft-scale — scale-95, tactile press"
+  focus:
+    general: "ring-2 ring-{color.primary}/30 ring-offset-2 — soft glow"
+  transition: "duration-300 to duration-500, ease-out"
+  ambient:
+    - "blob-drift — background color washes with blur-3xl, slow movement"
+    - "parallax-float — subtle depth shift on decorative elements"
+
 compatibility: [botanical, sketch]
 clashes: [cyberpunk, terminal, industrial]

package/gsp/skills/gsp-style/styles/playful-geometric.yml

@@ -60,5 +60,95 @@ dark_mode:
     surface: "#334155"
     on-background: "#F8FAFC"
 
+intensity:
+  variance: 7     # Memphis shapes, confetti decoration, blob radii, rotated elements
+  motion: 6       # bouncy overshoot easing, wiggle hovers, pop-in entrances, marquees
+  density: 5      # colorful but readable — shapes fill space around clean content areas
+
+patterns:
+  card:
+    border: "{shape.border-width} solid {shape.border-color}"
+    shadow: "{elevation.shadow-lg} — hard offset, no blur"
+    radius: "{shape.border-radius-md} (rounded-xl)"
+    background: "{color.surface}"
+    decoration: "floating circle icon half-in/half-out of top border, colored shadow for featured (pink or amber)"
+    hover: "rotate -1deg, scale 1.02 — wiggle sticker effect"
+  button-primary:
+    background: "{color.accent}"
+    border: "{shape.border-width} solid {shape.border-color}"
+    shadow: "{elevation.shadow-sm}"
+    text: "font-bold text-white"
+    radius: "rounded-full — pill shape always"
+    icon: "ArrowRight in circular white background inside button"
+  button-secondary:
+    background: "transparent"
+    border: "{shape.border-width} solid {shape.border-color}"
+    shadow: "none"
+    text: "{color.on-background}"
+    radius: "rounded-full"
+    fill: "hover fills {color.warning} (amber/yellow) — surprise color pop"
+  input:
+    border: "2px solid {shape.border-color}"
+    radius: "{shape.border-radius-md}"
+    background: "{color.surface}"
+    shadow: "4px 4px 0px transparent resting, 4px 4px 0px {color.accent} on focus"
+    focus: "border {color.accent}, hard color shadow appears"
+    label: "bold uppercase text-sm tracking-wide above input"
+  badge:
+    shape: "rounded-full, {shape.border-width} border, accent background rotated per badge"
+    text: "font-bold text-sm, white on colored background"
+    decoration: "rotate-2 to rotate-6, sticker-style offset"
+  nav:
+    logo: "display font (Fredoka One), colored accent, bouncy hover"
+    links: "font-medium, hover adds squiggly underline SVG"
+    mobile: "candy-colored hamburger with hard shadow"
+  layout:
+    archetype: "candy-playground"
+    max-width: "max-w-6xl"
+    section-spacing: "py-24 — spacious, filled with pattern decoration"
+    grid-gap: "gap-8 to gap-12"
+    asymmetry: "blob-masked images, alternating card header colors (violet/pink/amber)"
+    surfaces: "dot grid background, squiggly SVG dividers, confetti shapes behind content"
+    decoration: "primitive shapes (circles, triangles, squares) as background elements, dashed SVG connectors between cards"
+
+constraints:
+  never:
+    - "dark mode as default — this is a warm, light, paper-cream aesthetic"
+    - "thin borders (1px) — minimum border-2 for chunky candy feel"
+    - "soft blur shadows — all shadows hard-offset, zero blur"
+    - "muted or desaturated colors — palette is punchy, high-saturation candy colors"
+    - "serious or corporate typography — display font must feel friendly and rounded"
+    - "empty background sections — fill with dot grids, confetti, or squiggles"
+    - "matching shadow color to element — shadows are always dark ({color.on-background}) or accent-colored"
+    - "static decorative shapes — shapes should bounce, wiggle, or float"
+  always:
+    - "hard-offset shadows (no blur) on every elevated element"
+    - "chunky border-2 in dark color on all interactive surfaces"
+    - "rounded-full (pill) on all buttons"
+    - "confetti color rotation — cycle {color-rotate} across repeated elements"
+    - "at least one squiggly SVG divider or underline per page"
+    - "primitive shape decorations (circles, triangles) behind content blocks"
+    - "icon containers — icons enclosed in colored circles, never floating alone"
+
+effects:
+  interaction-vocabulary: [pop-lift, sticker-press, wiggle-jiggle, candy-fill, bounce-in]
+  hover:
+    card: "wiggle-jiggle — rotate(-1deg) + scale(1.02), sticker pickup feel"
+    button-primary: "pop-lift — translate(-2px, -2px), shadow extends to 6px 6px"
+    button-secondary: "candy-fill — background floods with surprise color (amber/yellow)"
+    link: "squiggly underline SVG appears, color shifts to {color.accent}"
+    badge: "wiggle-jiggle — rotate oscillates +-3deg"
+  active:
+    button: "sticker-press — translate(2px, 2px), shadow shrinks to 2px 2px"
+  focus:
+    input: "candy-fill — hard color shadow appears (4px 4px 0px {color.accent}), border accent"
+    general: "ring-2 ring-{color.accent} ring-offset-2 — chunky visible focus"
+  transition: "duration-200 to duration-300, cubic-bezier(0.34, 1.56, 0.64, 1) — bouncy overshoot"
+  ambient:
+    - "confetti-float — background shapes drift slowly with gentle rotation (5-8s ease-in-out)"
+    - "wiggle-idle — decorative icons oscillate rotate(0->3->-3->0) (2s ease-in-out infinite)"
+    - "bounce-in — elements enter viewport with scale(0->1) + bounce overshoot"
+    - "marquee-scroll — client logos or keywords in infinite horizontal scroll"
+
 compatibility: [neubrutalism, flat-design]
 clashes: [monochrome, luxury, swiss-minimalist]

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

@@ -55,5 +55,72 @@ dark_mode:
     border-color: "#334155"
     muted: "#64748B"
 
+intensity:
+  variance: 2
+  motion: 3
+  density: 5
+
+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}"
+  button-primary:
+    background: "{color.primary}"
+    border: "none"
+    shadow: "{elevation.shadow-sm}"
+    text: "weight 500, sentence case"
+    radius: "{shape.border-radius-sm}"
+  button-secondary:
+    background: "transparent"
+    border: "{shape.border-width} solid {shape.border-color}"
+    text: "weight 500, sentence case"
+    radius: "{shape.border-radius-sm}"
+  input:
+    border: "{shape.border-width} solid {shape.border-color}"
+    radius: "{shape.border-radius-sm}"
+    background: "{color.background}"
+    focus: "ring-2 ring-{color.primary}/50 with ring-offset-1"
+  badge:
+    shape: "rounded-full, text-xs"
+    text: "font-medium, sentence case"
+  nav:
+    style: "clean horizontal with subtle border-bottom"
+    links: "font-medium, hover shifts to {color.primary}"
+  layout:
+    archetype: "symmetric-grid"
+    max-width: "max-w-7xl"
+    section-spacing: "py-16 to py-24"
+    grid-gap: "gap-6 to gap-8"
+    surfaces: "clean — no texture, no grain, no patterns"
+
+constraints:
+  never:
+    - "decorative rotations or skew — precision over personality"
+    - "saturated background sections — white/surface/subtle tints only"
+    - "text stroke effects — clean, readable type only"
+    - "noise or halftone textures — clean surfaces"
+    - "uppercase body text — sentence case throughout"
+    - "shadows with colored tints — neutral black/gray shadows only"
+    - "hard-offset shadows — all shadows soft and diffused"
+  always:
+    - "consistent border-radius across all components at the same elevation"
+    - "subtle hover transitions (150-250ms)"
+    - "muted color palette — no neon, no high-saturation accents"
+    - "clean visual hierarchy through spacing and weight, not decoration"
+
+effects:
+  interaction-vocabulary: [gentle-lift, subtle-darken, scale-press]
+  hover:
+    card: "gentle-lift — shadow deepens sm→md, subtle border darken"
+    button: "subtle-darken — background darkens 10%"
+    link: "color shift to {color.primary}"
+  active:
+    button: "scale-press — scale-[0.98]"
+  focus:
+    general: "ring-2 ring-{color.primary}/50 ring-offset-1"
+  transition: "duration-150 to duration-250, cubic-bezier(0.4, 0, 0.2, 1)"
+
 compatibility: [bento-grid, micro-interactions]
 clashes: [cyberpunk, vaporwave, neubrutalism]

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

@@ -61,5 +61,90 @@ dark_mode:
     surface: "#000000"
     on-background: "#C0C0C0"
 
+intensity:
+  variance: 8     # chaotic layouts, clashing colors, deliberate visual excess
+  motion: 6       # marquee scrolling, rainbow cycling, pulse-glow badges, but instant button states
+  density: 8      # dense table-like grids, tight spacing, maximum visual information
+
+patterns:
+  card:
+    border: "{shape.border-width} solid with 4-value outset bevel ({bevel.outset})"
+    shadow: "{elevation.shadow-sm} — inset bevel highlights, never soft drop shadows"
+    radius: "0px"
+    background: "{color.background}"
+    header: "navy-to-blue gradient title bar (#000080 to #1084D0), white bold text"
+    content: "inset bevel, white or {system.titlebar}-tinted background"
+  button-primary:
+    background: "{color.primary}"
+    border: "{shape.border-width} with blue-tinted bevel (#5555ff top-left, #000080 bottom-right)"
+    shadow: "{elevation.shadow-sm}"
+    text: "uppercase, bold, tracking-wide, centered"
+    radius: "0px"
+  button-secondary:
+    background: "{color.background}"
+    border: "{shape.border-width} with outset bevel ({bevel.outset})"
+    shadow: "{elevation.shadow-sm}"
+    text: "uppercase, bold, black text"
+    radius: "0px"
+  input:
+    border: "{shape.border-width} with inset bevel ({bevel.inset})"
+    radius: "0px"
+    background: "{color.surface}"
+    focus: "dotted 2px black outline, 2px offset"
+    height: "h-10"
+  badge:
+    shape: "0px radius, outset bevel border"
+    text: "uppercase bold text-xs, bright solid color backgrounds"
+    decoration: "animate-pulse for NEW!/HOT! badges, pulse-glow animation"
+  nav:
+    logo: "beveled button-face with bold text"
+    links: "blue underlined always, red on hover, purple when visited"
+    mobile: "beveled hamburger button"
+  layout:
+    archetype: "table-grid"
+    max-width: "max-w-5xl"
+    section-spacing: "py-16"
+    grid-gap: "gap-4 to gap-6"
+    surfaces: "tiled diagonal crosshatch pattern on body background — never flat"
+    decoration: "construction warning stripes (yellow/black 45deg), groove HRs, hit counter displays"
+    windows: "cards styled as Windows 95 application windows with title bar gradient"
+
+constraints:
+  never:
+    - "border-radius of any kind — not even 1px, the 90s had none"
+    - "soft drop shadows — only inset bevel shadows for 3D depth"
+    - "gradients on surfaces — except title bar navy-to-blue and construction stripes"
+    - "semi-transparent overlays — colors are always opaque"
+    - "thin fonts — everything bold or black weight, no light weights exist"
+    - "smooth easing curves — linear or instant transitions only"
+    - "removing link underlines — always visible, always blue"
+    - "modern minimalist spacing — dense, not airy"
+    - "scaling on hover — no scale transforms except 1.05 for pulse badges"
+  always:
+    - "3D outset bevel (4-value border-color) on every interactive element and container"
+    - "active/pressed state reverses to inset bevel + translate(1px, 1px)"
+    - "tiled background pattern on page body"
+    - "at least one marquee scrolling text element"
+    - "at least one rainbow-animated text heading"
+    - "hit counter aesthetic on at least one stats section"
+    - "construction stripe (yellow/black 45deg) on at least one section"
+    - "alternating row backgrounds (white/#E8E8E8) in table-like layouts"
+
+effects:
+  interaction-vocabulary: [bevel-press, color-cycle, blink-badge, marquee-scroll]
+  hover:
+    card: "background lightens one shade, maintain outset bevel"
+    button: "background lightens 1-2 shades, outset bevel maintained"
+    link: "color shifts blue to red — instant, no transition"
+  active:
+    button: "bevel-press — border-color reverses to inset, translate(1px, 1px), instant"
+  focus:
+    general: "dotted 2px black outline, 2px offset — Windows 95 authentic"
+  transition: "duration-0 to duration-50, step-end — no smooth easing"
+  ambient:
+    - "color-cycle — rainbow text 4s linear infinite on hero headline"
+    - "blink-badge — pulse-glow 1.5s ease-in-out infinite on NEW!/HOT! badges"
+    - "marquee-scroll — continuous horizontal scroll at 40-60px/s, pauseOnHover"
+
 compatibility: [maximalism]
 clashes: [professional, luxury, modern-dark, swiss-minimalist]

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

@@ -57,5 +57,88 @@ dark_mode:
     surface: "#1E293B"
     on-background: "#F1F5F9"
 
+intensity:
+  variance: 4     # structured layouts with strategic asymmetry (hero 1.1fr/0.9fr), not chaotic
+  motion: 6       # floating hero elements, pulsing indicators, entrance stagger, scroll parallax
+  density: 5      # balanced — generous section whitespace, denser within components
+
+patterns:
+  card:
+    border: "{shape.border-width} solid {shape.border-color}"
+    shadow: "{elevation.shadow-md} resting, {elevation.shadow-xl} on hover"
+    radius: "{shape.border-radius-md}"
+    background: "{color.background}"
+    hover-overlay: "bg-gradient-to-br from-{color.primary}/[0.03] to-transparent"
+  button-primary:
+    background: "{gradient.signature}"
+    border: "none"
+    shadow: "{elevation.shadow-sm} resting, shadow-accent on hover"
+    text: "weight 500, sentence case, white"
+    radius: "{shape.border-radius-md}"
+    icon: "arrow-right translates +1 on hover"
+  button-secondary:
+    background: "transparent"
+    border: "{shape.border-width} solid {shape.border-color}"
+    text: "weight 500, sentence case, {color.on-background}"
+    radius: "{shape.border-radius-md}"
+    hover: "border shifts to {color.primary}/30, shadow appears"
+  input:
+    border: "{shape.border-width} solid {shape.border-color}"
+    radius: "{shape.border-radius-md}"
+    background: "transparent or {color.accent}/10"
+    focus: "ring-2 ring-{color.primary} ring-offset-2"
+    height: "h-12 to h-14"
+  badge:
+    shape: "rounded-full with accent border and tinted background"
+    text: "font-mono text-xs uppercase tracking-[0.15em] text-{color.primary}"
+    decoration: "animated pulsing dot indicator"
+  nav:
+    style: "clean horizontal, border-bottom subtle"
+    links: "font-medium, hover shifts to {color.primary}"
+    cta: "gradient primary button in nav"
+  layout:
+    archetype: "asymmetric-hero-grid"
+    max-width: "max-w-6xl"
+    section-spacing: "py-28 to py-44"
+    grid-gap: "gap-5 to gap-8"
+    surfaces: "clean white with radial accent glows at 3-6% opacity on corners"
+    decoration: "dot-pattern on inverted sections, radial gradient overlays in hero"
+    contrast-sections: "inverted bg-foreground text-background for stats/CTA"
+
+constraints:
+  never:
+    - "flat dark sections without dot-pattern texture — inverted sections need texture"
+    - "more than one gradient direction per element — 135deg diagonal or horizontal only"
+    - "pure black text — use deep slate {color.on-background}"
+    - "decorative rotations or skew — this is polished, not playful"
+    - "hard-offset shadows — all shadows soft and diffused"
+    - "more than two accent colors — single gradient pair only"
+    - "small hero headlines — minimum text-5xl mobile, text-8xl desktop"
+  always:
+    - "signature gradient on primary buttons, featured badges, and icon backgrounds"
+    - "dual-font system — display serif for h1/h2, sans-serif for everything else"
+    - "monospace section labels in pill badges with accent dot"
+    - "at least one inverted contrast section per page"
+    - "gradient text treatment on key headline words"
+    - "accent-tinted shadows on featured elements"
+
+effects:
+  interaction-vocabulary: [gradient-lift, gentle-lift, icon-nudge, pulse-dot, fade-up-stagger]
+  hover:
+    card: "gentle-lift — -translate-y-0.5, shadow deepens md→xl, gradient overlay fades in"
+    button: "gradient-lift — -translate-y-0.5, shadow shifts to accent-tinted, brightness-110"
+    link: "color shift to {color.primary}"
+    icon: "icon-nudge — scale-110 on icon container"
+  active:
+    button: "scale-press — scale-[0.98]"
+  focus:
+    general: "ring-2 ring-{color.primary} ring-offset-2 ring-offset-{color.background}"
+  transition: "duration-200 to duration-300, ease-out"
+  ambient:
+    - "pulse-dot — scale/opacity pulse on badge indicators (2s infinite)"
+    - "float-bob — hero cards bob on sine wave (4-5s, ±10px)"
+    - "slow-spin — decorative ring rotates (60s linear infinite)"
+    - "fade-up-stagger — entrance animations with 0.1s child delay"
+
 compatibility: [professional, enterprise]
 clashes: [retro, vaporwave, sketch]