Premium Glassmorphism Dashboard with Smooth Edge-to-Edge Line Charts
A high-end glassmorphism dashboard design system featuring soft mesh backgrounds, vibrant gradients, and edge-to-edge smooth SVG line charts. The aesthetic uses 'Cabinet Grotesk' for bold, editorial headings and 'Satoshi' for clean body text. Suitable for premium SaaS, fintech, analytics platforms, and modern creative agency portals. Key elements include bento-grid layouts, ultra-blurred glass surfaces (28px blur), and floating 3D-inspired micro-interactions.
Summary
A premium dashboard UI with a glassmorphic aesthetic characterized by multi-colored mesh backgrounds, high-transparency cards with heavy backdrop filters, and vibrant, smooth-curve SVG line charts. The layout uses a 12-column bento system with specialized project tracking and financial reporting widgets.
Style
Typography: Headings use 'Cabinet Grotesk' (700-800 weight) with tight tracking; body uses 'Satoshi' or 'Plus Jakarta Sans'. Colors: Background is #f1f5f9 with radial gradients of Indigo (#4f46e2), Violet (#7c3aed), Pink (#ec4899), Emerald (#10b981), and Amber (#f59e0b). Glass: background rgba(255, 255, 255, 0.72) with 28px backdrop-filter and 1px border of white at 50% opacity. Animation: 3s float keyframes and cubic-bezier(0.4, 0, 0.2, 1) transitions for hover scales.
Layout & Structure
The layout consists of a narrow persistent vertical sidebar on the left and a main fluid content area. The dashboard uses a 12-column grid system where components are organized in a bento-style arrangement with varying column spans.
Sidebar Navigation
Dashboard Header
Project Tracker Widget
KPI Chart Grid
Earning Reports Section
Components
Smooth Edge-to-Edge Line Chart
SVG line chart with continuous curves and area fill.
Glass Hero Promo Card
High-impact gradient card for events or featured content.
Special Notes
Must maintain a high border-radius (min 2rem/32px) for all main containers to ensure a soft aesthetic. Must use edge-to-edge SVG paths for charts—lines must touch the horizontal container boundaries. Do not use solid, flat background colors; always use translucent white with backdrop-blur. Do not use standard system fonts for headings; Cabinet Grotesk is critical for the 'premium' feel.