TruckAda | Secure Login
A high-end industrial logistics design system featuring a sophisticated dark mode aesthetic with glassmorphism, 3D interactive transforms, and an editorial-style typographic hierarchy. Built with a deep navy palette (#050811), vibrant blue accents (#2563EB), and subtle emerald highlights, this style is ideal for fintech, SaaS dashboards, logistics marketplaces, and enterprise platforms. It employs heavy Cabinet Grotesk headings and clean Satoshi body text, utilizing scroll-triggered entrance animations and mouse-responsive card tilting. Key components include glass-morphic input fields, shimmer-effect cards, and animated gradient backgrounds with carbon-fiber texture overlays.
Summary
An industrial-tech design system using a dark 'Carbon and Glass' theme, heavy editorial typography, and physics-based 3D micro-interactions for a premium enterprise feel.
Style
The style is defined by a deep navy background (#050811) with a 15-second looping animated gradient. It utilizes 'Cabinet Grotesk' for bold, authoritative headings and 'Satoshi' for modern UI elements. Glassmorphism is central, using ultra-low opacity white backgrounds (rgba(255,255,255,0.03)) paired with sharp borders (rgba(255,255,255,0.08)) and 12px backdrop blurs. Accents include a high-glow blue (#2563EB) for primary actions and soft emerald (#10B981) for success states.
Layout & Structure
A structured layout prioritizing clarity and visual hierarchy through depth. It uses a centered-focus layout for utility pages (like login) and a responsive grid system with bento-box-style containers for content-heavy sections.
Header Navigation
Focus Utility Card (Login/Sign-up)
Feature Grid
Admin Dashboard Preview Section
Footer
Components
3D Tilt Glass Card
A mouse-responsive card that uses CSS perspective to rotate based on cursor position.
Glass-Morphic Input Field
Modern, deep-themed input fields with focus-state illumination.