Gonto Design System

Minimal expense tracking design

AI Insights

AI-powered spending insights and recommendations with dismissible cards

Quick Insights Component

Spending decreased by 15% this month

You spent €1,234 less compared to last month. Great job staying within budget!

Dining expenses up 40%

Restaurant spending increased from €180 to €252 this month.

Approaching monthly budget

You have used 87% of your €2,500 monthly budget with 8 days remaining.

New savings opportunity

Consider switching to an annual subscription for your streaming services to save €48/year.

Insight Card Specifications

Insight Typespositive, negative, warning, info
Positive Coloremerald-50 / emerald-950/20
Negative Colorred-50 / red-950/20
Warning Coloramber-50 / amber-950/20
Info Colorblue-50 / blue-950/20
Icon Sizew-5 h-5
Icons UsedTrendingUp, TrendingDown, AlertTriangle, Lightbulb
DismissibleX button in top-right corner
Optional ActionUnderlined link-style button
Transitionsduration-300 opacity

Key Features

  • Auto-generated from expense patterns and AI analysis
  • Four distinct insight types with semantic colors
  • Dismissible cards maintain user preference state
  • Optional action buttons for deeper exploration
  • Emerald accent for positive insights aligns with AI branding
  • Smooth 300ms transitions maintain calm aesthetic