FOB | Production-Ready Universal Trust Layer
A high-fidelity 'Cyberpunk Fintech' design system tailored for AI infrastructure, Web3 protocols, and high-security developer platforms. The style features a deep obsidian background (#050505) accented by high-contrast neon highlights in cyan (#00f2ff), magenta (#ff00e5), and lime (#adff00). Layouts utilize a bento-grid structure with glassmorphism cards (12px blur), scanline animations, and cryptographic UI elements. Typography pairs bold, uppercase editorial headers (Cabinet Grotesk) with technical monospace fonts (Space Grotesk) for a command-center aesthetic. Suitable for SaaS dashboards, financial transaction layers, AI agent networks, and developer-centric landing pages.
Summary
A production-ready, dark-mode design system with a 'Trust Layer' aesthetic, utilizing neon accents, glassmorphism, and interactive technical components like live ledgers and programmable mandate engines.
Style
The style is defined as 'Industrial Cyberpunk'. Typography: Cabinet Grotesk (Display, weights 800-900, uppercase, -0.02em tracking), Satoshi (Body, 400-700), Space Grotesk (Mono-technical, 300-700). Color Palette: #050505 (Background), #00f2ff (Cyan), #ff00e5 (Magenta), #adff00 (Lime). UI Effects: 1px solid rgba(255, 255, 255, 0.08) borders, backdrop-filter: blur(12px), 40px grid background pattern, and CSS-driven scanline animations.
Layout & Structure
A comprehensive 13-section landing page and application UI, featuring an interactive dashboard, real-time transaction ledgers, and programmable settings panels.
Navigation
Hero Section
Command Center Dashboard
Identity Portal
Mandate Engine
Developer Portal
Components
Neon Status Indicator
A live-health pulse for network connectivity.
Animated Sparkline
SVG-based real-time data visualization.
Featured Pricing Badge
Floating badge for the recommended tier.
Special Notes
MUST: Maintain a strict dark palette; any color brighter than #050505 must be a neon accent or glass border. MUST: Use 12px or higher backdrop blur on all cards to ensure readability over the grid background. MUST NOT: Use standard blue or standard red; only use Cyan, Magenta, Lime, or high-contrast White. MUST NOT: Use rounded corners smaller than 12px for cards or larger than 24px for sections.