FOB | Production-Ready Universal Trust Layer

# FOB | Production-Ready Universal Trust Layer

{
  "summary": "A production-grade cyberpunk fintech dashboard and landing page with high-end micro-interactions, glassmorphism UI, and real-time status indicators. The design communicates security and autonomy through a dark, high-contrast interface with neon accents and terminal-style typography.",
  "style": {
    "description": "Cyberpunk high-tech aesthetic combining deep black backgrounds with neon accent colors. Typography uses heavy display fonts for headings and monospace for technical metadata. Visual elements include glassmorphism with 12px background blurs, subtle 1px white/10 borders, and grid-line backgrounds. Animations are heavy on scroll-triggered reveals, parallax movements, and pulsing glow effects.",
    "prompt": "Create a high-fidelity cyberpunk UI using a deep background (#050505). Primary accents are Neon Cyan (#00f2ff), Neon Magenta (#ff00e5), and Neon Lime (#adff00). Typography: Headings in 'Cabinet Grotesk' (900 weight, uppercase, -0.05em letter spacing), Body in 'Satoshi' (1.7 line-height), and Technical data in 'Space Grotesk' (bold, tracking 0.2em). UI elements: Glass cards with 'background: rgba(255, 255, 255, 0.025)', 'backdrop-filter: blur(12px)', and 'border: 1px solid rgba(255, 255, 255, 0.08)'. Animations: Use 'cubic-bezier(0.16, 1, 0.3, 1)' for all transitions. Include a global scanline effect (2px height, cyan gradient moving vertically) and a background grid (40px x 40px lines at 3% white opacity). Hover states should include a 6px upward translation and increased border opacity to 15%."
  },
  "layout_and_structure": {
    "description": "A modular vertical layout with a persistent glass-card navigation and scroll progress tracking. Sections transition through hero messaging, statistical proof, interactive feature discovery, live dashboard simulations, and cryptographic configuration forms.",
    "prompts": [
      {
        "part": "Sticky Header",
        "prompt": "Design a fixed navigation bar with a 95% max-width glass-card container. Include a logo on the left with a white square icon background. Center a pill-shaped secondary nav with 10px uppercase mono text. Right side includes a pulsing 'System Active' indicator and a neon-cyan 'Console' CTA button. Add a 3px gradient scroll progress bar (#00f2ff to #ff00e5) at the very top of the viewport."
      },
      {
        "part": "Hero Section",
        "prompt": "A centered hero section with an animated radial gradient background (12% cyan, 8% magenta opacity). Use 10rem display text for the primary headline with gradient fills. Surround the text with floating glass-card shapes that move slightly on mouse movement (parallax). Include two primary CTAs: one solid white with an arrow icon, and one outlined glass-style button."
      },
      {
        "part": "Stats Grid",
        "prompt": "A 4-column wide grid section on a black background. Elements should feature count-up animations for numbers (e.g., $12.4M). Labels should be in 11px uppercase bold neon-colored text with 0.2em tracking. Use branded icons (e.g., Base, Stripe) in a grayscale 20% opacity state."
      },
      {
        "part": "Dashboard Simulator",
        "prompt": "A 4-card status grid followed by a split-layout (2:1 ratio). The status cards show data points like 'Identity Score' in large display font. The main section is a transaction table with 10px mono-tech text and status badges (green for 'Settled', cyan for 'Authorized'). The side section is a Spend Velocity card with an animated SVG sparkline chart using a cyan-to-magenta gradient stroke."
      },
      {
        "part": "Identity Verification Portal",
        "prompt": "A centered container with a 4-step progress stepper (01 to 04). Left side: Form with dark input fields (rgba(255,255,255,0.05)) and cyan focus rings. Right side: A 'Biometric Scanner' box with a black/60 background, a moving horizontal neon scanline (6s loop), and a pulsing camera icon. The submit button should show a loading spinner on click."
      },
      {
        "part": "Mandate Engine Configurator",
        "prompt": "A complex interaction section. Left side: Vertical stack of selectable active mandates with progress bars. Right side: A configuration card with a large custom range slider (cyan accent) for 'Maximum Transaction CAP'. Below, a 2-column grid for merchant whitelists and frequency buttons (Hourly, Daily, etc.) with glassmorphism active states."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "Interactive Code Block",
      "description": "A terminal-style snippet container with syntax highlighting and copy functionality.",
      "prompt": "Design a code block with 'background: #0a0a0a' and 'border: 1px solid rgba(255,255,255,0.08)'. Include window controls (red/yellow/green dots) in the top bar. Use magenta for keywords and lime for strings. Add an absolute-positioned 'Copy' button that appears on hover and shows a 'Copied!' toast notification via the global toast system."
    },
    {
      "component": "Featured Pricing Card",
      "description": "A central price tier designed to stand out through scale and glow effects.",
      "prompt": "Create a glass card with 'transform: scale(1.05)' and 'border-color: rgba(0, 242, 255, 0.4)'. Add an absolute-positioned badge at the top center with 'featured-badge' animation (2s pulsing shadow-glow using #00f2ff). All icons inside should use the primary cyan accent color."
    },
    {
      "component": "Global Toast System",
      "description": "Subtle notifications for user feedback.",
      "prompt": "A fixed top-right container for toasts. Each toast has a blur(10px) background, 1px white/10 border, and 12px rounded corners. It must include a neon-colored icon (check for success, info for alerts) and use 10px uppercase mono font for the message body."
    }
  ],
  "special_notes": "Maintain a strict 3% white opacity on the grid background. Never use solid background colors for cards; always use rgba with backdrop blurs. All primary headlines must be uppercase. Status indicators must always have a pulsing animation (1.5s - 2s duration). Use 'Space Grotesk' exclusively for any numbers or metadata to maintain the technical/industrial feel."
}