Sign Up | TruckAda Pakistan
A high-end dark-themed design system featuring glassmorphism, 3D perspective transforms, and an industrial-tech aesthetic. It utilizes a deep navy-to-black palette with vibrant blue and emerald accents. Optimized for high-conversion SaaS, logistics, fintech, and security-focused platforms. The style includes sophisticated typography pairing (Cabinet Grotesk and Satoshi), carbon fiber textures, and scroll-triggered reveal animations. Key features include 3D-tilting cards, shimmer effects, and ultra-modern form layouts with blurred glass backgrounds.
Summary
A professional dark-mode UI with a secure, high-tech aesthetic. It relies on glassmorphic layers (12px blur), 3D interaction effects, and industrial typography to build trust and modern appeal. The layout is spacious with large headings and interactive components that respond to mouse movement.
Style
The design uses a deep background (#050811) with a subtle carbon fiber texture overlay at 20% opacity. Typography pairs 'Cabinet Grotesk' for heavy, impactful headings and 'Satoshi' for clean body text. The primary accent is a vibrant blue (#2563EB) used for CTAs and status indicators, while emerald (#22C55E) provides positive feedback. Animation is central, featuring a 15-second animated gradient background, 3D card tilts, and smooth reveal-on-scroll effects (cubic-bezier 0.2, 0.8, 0.2, 1).
Layout & Structure
The layout follows a modular grid system with floating glass components. Sections are separated by large white space (pt-32, mb-24). Form pages use a split-grid layout (text on left, interaction on right) on large screens, or centered focus on smaller screens.
Floating Navigation Header
Split Sign-Up/Hero Section
3D Interactive Form Card
Glassmorphic Footer
Components
3D Perspective Card
Cards that tilt dynamically based on mouse position.
Shimmer Loading Layer
Subtle animated light sweep across cards.
Glass Input Fields
Modern inputs with internal icons and specific focus states.