Kinetic Pricing: High-Performance Edition

# Kinetic Pricing: High-Performance Edition

{
  "summary": "A high-impact, industrial-tech pricing and landing system designed for high-performance software. It utilizes extreme typography scales, high-contrast black backgrounds, and neon-functional accents to convey speed, precision, and technical superiority.",
  "style": {
    "description": "The style is 'Technical Brutalism'. It pairs the bold, high-fashion aesthetic of 'Clash Display' with the utilitarian precision of 'JetBrains Mono'. Colors are rooted in deep black (#020202) and dark surface shades (#0A0A0A), punctuated by high-vibrancy neon indicators. Micro-interactions include smooth cubic-bezier transitions (0.16, 1, 0.3, 1), subtle grain noise textures, and outline text effects for secondary visual weight.",
    "prompt": "Create a design with a background color of #020202 and a subtle fixed grain/noise overlay at 4% opacity. Typography: Use 'Clash Display' for headlines (font-weight: 700, tracking-tighter, uppercase) and 'JetBrains Mono' for technical data (font-size: 10px-12px, tracking-widest, uppercase). Primary accent colors: Neon Green (#39FF14), Neon Blue (#00D9FF), Neon Orange (#FF3D00). Borders should be thin (1px) at 5% to 20% white opacity. Animation: Use 'cubic-bezier(0.16, 1, 0.3, 1)' for all reveal animations. Implement a glitch effect on hover for major price numbers using a 0.3s transform jitter. Cursor: Custom white circular crosshair with 'mix-blend-mode: difference'."
  },
  "layout_and_structure": {
    "description": "Modular, full-width vertical layout with dedicated 'Price Shock' hero and non-linear data grids. Sections are separated by minimal 1px borders or high-contrast shifts in accent color focus.",
    "prompts": [
      {
        "part": "Navigation",
        "prompt": "Fixed top-bar with 100% width. Left-aligned logo in Clash Display bold. Right-aligned links in 10px monospace with heavy letter spacing. Include a square-bracketed CTA like '[ ACCESS ]' with a white border that inverts colors on hover. Use mix-blend-mode: difference."
      },
      {
        "part": "Price Shock Hero",
        "prompt": "Full-height (100vh) section. Center a massive price figure ($49) in font-size: 30rem (clamp 8rem to 30rem). Use outline-text styling or high-contrast white. Behind the text, place two concentric, 1px white borders in circular shapes rotating slowly in opposite directions. Add a tiny monospace label above the price: 'SYSTEM ENTRY FEE'."
      },
      {
        "part": "Non-Linear Pricing Breakdown",
        "prompt": "Asymmetric layout. One side features a large 'Trial' label in 10% opacity white font. The other side features the main price in font-size: 16rem white text with a neon-green 'USD' label. Below the price, include a horizontal row of 'pills' with 10px mono text like 'UNLIMITED RENDERS' in black-on-white and others in white-on-transparent-border."
      },
      {
        "part": "Technical Manifest Matrix",
        "prompt": "A 4-column grid comparison table. Header row has a grey background (5% white). Features on the left in Clash Display 18px. Column data in JetBrains Mono 12px. Highlight the 'active' plan columns with neon green or blue text. Add a 1px border-bottom to every row and a hover state that slightly brightens the row background."
      },
      {
        "part": "Expansion Pack Grid",
        "prompt": "Three-column grid of cards. Each card has a 1px border, deep black background, and a specific neon accent color icon (CPU, Code, Shield). On hover, the border color changes to the card's specific neon accent and the card lifts -5px. Price expansion at the bottom of the card in large Mono font (e.g., +$49/MO)."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "Kinetic Marquee",
      "description": "Infinite horizontal scrolling text separator.",
      "prompt": "A full-width black bar with 1px top/bottom borders. Inside, text moves infinitely left using 'animation: scroll-left 40s linear infinite'. Text is Clash Display, 8rem, outline-only (-webkit-text-stroke: 1px), uppercase. Phrases are separated by long dashes (—)."
    },
    {
      "component": "Status Personas",
      "description": "User suitability cards with thick side borders.",
      "prompt": "Stack of horizontal cards with a 4px solid neon left-border. Heading in Clash Display uppercase. Subtext in 10px monospace grey text wrapped in quotes. Each card reveals with a slight rotation and upward slide on scroll."
    }
  ]
}