All Templates
📊
Content & Data
15. Data-Driven & Analytical
Sharp angles, chart-inspired layouts, and cool grays for precise, data-first interfaces. Perfect for analytics platforms, BI tools, dashboards, and data visualization.
Visual Preview
Total Revenue
$362K
+12.5%vs last period
Active Users
18.2K
+8.3%vs last period
Page Views
245K
-2.1%vs last period
Conversion
3.24%
+0.8%vs last period
Revenue vs Expenses
RevenueExpenses
Traffic Sources
Direct35%
Organic28%
Referral22%
Paid15%
Top Pages
| Page | Views | Uniques | Bounce | Avg. Duration | |
|---|---|---|---|---|---|
| /dashboard | 12,450 | 8,320 | 32% | 4m 12s | |
| /pricing | 8,920 | 6,150 | 45% | 2m 35s | |
| /features | 6,780 | 4,890 | 38% | 3m 48s | |
| /blog | 5,340 | 3,720 | 52% | 5m 22s | |
| /signup | 4,120 | 3,980 | 18% | 1m 45s |
When to Use
Analytics platforms, BI tools, dashboards, data visualization
Key Vocabulary
Sharp angleschart-inspiredcool graysprecise alignmentDashboard aestheticsdata-first designsystematic color codingGrid-based precisionmetric-focusedanalytical clarity
Example Prompt
Design an analytics dashboard with data-first precision: - Cool gray palette (slate-50, slate-700, slate-900) - Systematic color coding (green for positive, red for negative) - Sharp-edged cards (rounded-lg, not rounded-3xl) - Dense information display - Multiple chart types (Recharts: line, bar, area, pie) - Precise alignment and spacing - Clear metric hierarchy (large numbers, small labels) - Filter panel with date range pickers - Export functionality (CSV, PDF) - Responsive with maintained data density
Pro Tip
"Request "dense information display" to pack in analytics effectively."