FOB Protocol | Global Navigation & Integration
Industrial cyberpunk design system tailored for high-tech AI protocols, fintech platforms, or developer-centric SaaS. Features a high-contrast dark mode aesthetic with a 'trust layer' theme. Utilizes a deep black background (#050505) punctuated by vibrant neon accents in cyan (#00f2ff), magenta (#ff00e5), and lime (#adff00). The layout leverages a sophisticated bento grid, glassmorphism cards with 12px blur, and technical overlays like animated scanlines and grid patterns. Typography is a pairing of brutalist Cabinet Grotesk for headlines and technical Space Grotesk for mono-data, creating a futuristic, secure, and data-rich atmosphere suitable for blockchain, cyber-security, or automated economy interfaces.
Summary
A modular industrial-cyberpunk UI framework designed for high-trust AI ecosystems. It combines heavy-weight typography, neon-accented glassmorphism, and technical data visualizations to convey security and real-time protocol execution.
Style
The style is 'Industrial Cyberpunk'. Typography uses Cabinet Grotesk (800-900 weight) for headers and Space Grotesk for technical/monospaced labels. Colors are strictly defined: Background #050505, Cyan #00f2ff, Magenta #ff00e5, Lime #adff00. Animations include vertical scanlines, scanner-sweep effects on cards, floating 3D perspective transforms, and SVG path drawing animations for real-time data charts. Glass cards use 0.025 white opacity with 12px backdrop-blur and 1px borders.
Layout & Structure
A vertical-scrolling layout divided into high-impact sections: an immersive hero, a bento-style dashboard, a data-ledger table, a biometric verification portal, and a developer-centric SDK block. All components are contained within a max-width of 1400px.
Hero Section
System Dashboard Bento Grid
Live Ledger Table
Biometric Verification Portal
Developer Engine & Code Block
Components
Scanner Line Card
A technical card with an active scanning animation overlay.
Animated Sparkline SVG
A dynamic network throughput chart using SVG paths.
Neon Range Slider
A custom technical slider for controlling parameters.