Formula Genius — Enhanced Conversion Hero

# Formula Genius — Enhanced Conversion Hero

{
  "summary": "Formula Genius is a high-precision design system for technical products. It uses a warm 'paper' background (#F7F7F5) paired with a deep 'forest' green (#1A3C2B) for high contrast and readability. The system leverages three distinct typefaces—Space Grotesk for bold headlines, General Sans for body text, and JetBrains Mono for technical metadata—to create a structured, 'blueprint' aesthetic.",
  "style": {
    "description": "The style is defined by its 'Technical Minimalist' approach: off-white backgrounds, thin 1px grid lines, and functional color accents (Coral, Mint, Gold) used sparingly for status indicators. Typography follows a strict hierarchy where labels are always uppercase, monospaced, and tracked out by 0.12em. Animations are subtle, using scale and fade transitions with cubic-bezier(0.4, 0, 0.2, 1).",
    "prompt": "Create a UI with a 'Paper' background (#F7F7F5) and 'Forest' green text (#1A3C2B). Use Space Grotesk for display headings (bold, tight tracking), General Sans for body (400-500 weight), and JetBrains Mono for all UI metadata (uppercase, tracking: 0.12em, font-size: 10px). \n\nColor Palette:\n- Background: #F7F7F5\n- Primary Text: #1A3C2B\n- Borders: #3A3A38 at 20% opacity\n- Accents: Coral (#FF8C69), Mint (#9EFFBF), Gold (#F4D35E)\n\nVisual Elements:\n- Hairline borders: 1px width, color #3A3A38/20%.\n- Buttons: Sharp corners, background #1A3C2B with white text or 1px border with forest text. Height: 44px.\n- Status Signals: 8px square solid color dots next to monospaced text.\n- Background: Implement a subtle SVG mosaic grid pattern (320x320 repeating unit) with thin 0.5px lines.\n- Transitions: View transitions for navigation using cubic-bezier(0.4, 0, 0.2, 1) over 0.4s."
  },
  "layout_and_structure": {
    "description": "The layout uses a fixed header and a content-heavy bento grid structure. It emphasizes whitespace and clear vertical/horizontal divisions using 1px grid lines.",
    "prompts": [
      {
        "part": "Header",
        "prompt": "Fixed 64px height header. Background #F7F7F5. 1px bottom border. Left side: Square icon box (32px) with branding. Center: Hidden on mobile, navigation links in 10px monospaced uppercase text. Right side: Two buttons (Sign In border-only, CTA solid forest)."
      },
      {
        "part": "Hero Section",
        "prompt": "Split 2-column layout. Left: Large editorial heading (size 88px on desktop, leading 0.9) using Space Grotesk. Status badge above title (1px border, 8px dot, mono text). Description text preceded by a vertical 1px line. Right: A complex wireframe card containing a sample prompt/output UI. This card should feature a dashed-line circular graphic with accent color dots."
      },
      {
        "part": "Features Bento",
        "prompt": "A 2x2 grid with 1px gaps. Each cell has a 4px left border of a different accent color (Coral, Mint, Gold, Forest). Content includes a 10px mono index (e.g., 01 / Category), a bold display title, and a sample box at the bottom containing mock code or data."
      },
      {
        "part": "Testimonials",
        "prompt": "Three-column grid of cards. Each card has a 1px border. Top right of card features a status badge (e.g., 'Verified'). Bottom of card is a separated caption area with 1px top border, containing a square user avatar placeholder and 10px monospaced role labels."
      },
      {
        "part": "CTA Section",
        "prompt": "Centered 640px wide container. Background #F7F7F5. Key unique feature: 'L-shaped' corner markers (12px length, 2px thick) at all four corners of the box. Contains a mono-styled input field and a solid forest green 'Generate' button."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "Status Confidence Badge",
      "description": "A technical indicator used for validation signals.",
      "prompt": "An inline-flex container with a 1px forest/20 border, padding 4px 8px. Inside, a 8px by 8px square div of a solid accent color (Mint, Gold, or Coral) followed by 10px JetBrains Mono text, uppercase, tracking 0.12em."
    },
    {
      "component": "Technical Mockup Card",
      "description": "Display card for showing code inputs and outputs.",
      "prompt": "A container with 1px border #3A3A38/20. Header row has 1px bottom border and mono text labels on left/right. Content area is divided into sub-boxes with white backgrounds (#FFFFFF) and 1px borders, using 12px JetBrains Mono text for code/formula content."
    }
  ]
}