Linklyst Analytics Dashboard
A modern, high-performance analytics dashboard featuring a sophisticated three-column layout. The aesthetic is clean and professional, utilizing a white and light-gray palette punctuated by vibrant forest green (#36B76B) and sunset orange (#F4A13A). It incorporates editorial typography (Inter), subtle shadows, and staggered entrance animations. Suitable for SaaS, fintech, marketing analytics, and AI-driven platforms. Key features include glassmorphism-lite chat interfaces, bento-style metric cards, and animated bar charts with custom growth indicators.
Summary
Build a comprehensive analytics dashboard with a 220px left navigation sidebar, an 860px max-width central content area, and a 340px right-side AI assistant panel. The design focuses on data density without clutter, using staggered 'fade-up' and 'slide-in' animations to create a polished, interactive experience.
Style
The visual style is defined by the 'Inter' font family, emphasizing hierarchy through weights (400 to 700) and small font sizes (9px to 28px). The color system uses #36B76B as the primary action color and #F4A13A for secondary alerts/stability. Borders are consistently #E5E7EB with 12px border-radius on cards. Animations use smooth 0.4s to 0.6s durations with ease-out timing functions.
Layout & Structure
A fixed-height (100vh) three-column layout with independent scrolling for the main content and right sidebar. The left sidebar is a static navigation anchor.
Left Sidebar
Header Section
Metric Grid
Activity Chart Section
Progress Performance Row
Data Table Section
Right AI Sidebar
Components
AI Response Card
An interactive AI message bubble containing nested action buttons.
Animated Bar Group
Clustered bars for comparing two datasets over a 7-day period.
Layered Trend Badge
Compact indicators for positive/negative growth.
Special Notes
MUST: Ensure all animations are staggered using 0.05s increments for a 'wave' effect. MUST: Use 'Inter' font specifically for the technical dashboard feel. MUST: Maintain a strict 20px padding (p-5) for all internal card content. MUST NOT: Use heavy drop shadows; stick to 1px borders for depth. MUST NOT: Allow the sidebars to collapse on desktop; maintain fixed 220px/340px widths.