Vouch Framework - Agents that ACT

# Vouch Framework - Agents that ACT

{
  "summary": "A high-performance technical landing page featuring a deep charcoal background with a grid overlay and neon accents. The style blends heavy editorial typography (Cabinet Grotesk) with technical monospace-style sans (Space Grotesk) and premium glassmorphism effects.",
  "style": {
    "description": "The style is 'Cyber-Minimalist'. It utilizes a pitch-black foundation (#050505) contrasted by high-vibrancy neon accents: Cyan (#00f2ff), Magenta (#ff00e5), and Lime (#adff00). Typography uses heavy-weight display fonts for headings and light monospace-style fonts for metadata. Elements feature subtle transparency, backdrop blurs, and animated glow effects on hover.",
    "prompt": "Create a design system using a base background color of #050505. Include a background grid pattern made of 1px lines (rgba(255,255,255,0.03)) spaced 40px apart. Typography: Headings in 'Cabinet Grotesk' (900 weight, uppercase, tracking-tighter), body text in 'Satoshi' (400-700 weight), and technical labels in 'Space Grotesk' (uppercase, wide tracking). Color Palette: Neon Cyan (#00f2ff), Neon Magenta (#ff00e5), Electric Lime (#adff00). Buttons and Cards should use glassmorphism: background rgba(255, 255, 255, 0.02), backdrop-filter blur(10px), and border 1px solid rgba(255, 255, 255, 0.05). On hover, cards should elevate (translateY -8px) and gain a neon box-shadow matching their theme color (0 0 30px -10px [color])."
  },
  "layout_and_structure": {
    "description": "A vertical scrolling layout with a centered, fixed navigation bar, an expansive hero section with animated gradients, and modular grid-based feature sections.",
    "prompts": [
      {
        "part": "Fixed Navigation",
        "prompt": "A fixed top navigation bar centered with a max-width of 896px. Content is inside a rounded-full glassmorphism container. Left side: logo with a small icon in a white rounded square. Center: technical navigation pills (Space Grotesk, 10px font, tracking-widest). Right side: bold caps text links for secondary and primary actions."
      },
      {
        "part": "Hero Section",
        "prompt": "Center-aligned layout with a large animated radial gradient background (rgba(0, 242, 255, 0.1) to transparent). Headline is massive (text-9xl), uppercase, and uses a 3-color linear gradient (Cyan-Magenta-Lime). Below headline, a description in Space Grotesk (white/60 opacity) with highlighted technical terms in neon colors. Two CTA buttons: one solid white, one ghost-style with border."
      },
      {
        "part": "Metrics/Social Proof",
        "prompt": "A full-width section with 1px border-y (white/5 opacity) on a black/40 background. 4-column grid displaying large display metrics (e.g., $12.4M) above tiny, bold, uppercase technical labels in neon colors."
      },
      {
        "part": "Feature Grid (Three Bricks)",
        "prompt": "Three large glassmorphism cards (rounded-3xl, 32px padding). Each card features a 56px square icon container with a specific neon theme (Cyan, Magenta, or Lime). On hover, the icon container fills with the theme color and the card border glows. Bottom of card includes a bulleted list with technical check-circle icons."
      },
      {
        "part": "Multi-Audience CTA Section",
        "prompt": "A 3-column bento-style grid with 1px white/10 dividers. Each cell has a black background that transitions to a slight hover state. Each cell targets a different user persona with a themed neon label, heading, description, and a button that uses a matching neon glow effect (box-shadow)."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "Animated Scanline",
      "description": "A subtle horizontal line that continuously scans down the screen to provide a 'CRT' or 'System Terminal' feel.",
      "prompt": "Implement a 2px high horizontal div with a linear gradient (transparent, rgba(0, 242, 255, 0.2), transparent). Position it absolute, width 100%. Animate it from top: 0% to top: 100% using a linear 8-second loop."
    },
    {
      "component": "Neon Interactive Glass Card",
      "description": "Premium cards with color-coded interactive states.",
      "prompt": "Background: rgba(255,255,255,0.02); Border: 1px solid rgba(255,255,255,0.05); Transition: all 0.4s ease. Hover state: translateY(-8px), border-color: var(--theme-neon), box-shadow: 0 0 30px -10px var(--theme-neon). The icon inside should transition from outline/low-opacity to solid theme color."
    }
  ],
  "special_notes": "MUST use 'Cabinet Grotesk' for all large headings to maintain the brutalist-modern feel. MUST NOT use pure white for body text; use 60% or 40% opacity white for better visual hierarchy. MUST maintain the 40px grid background as a persistent layer. Animations should use 'cubic-bezier(0.23, 1, 0.32, 1)' for a snappy, high-end feel."
}