👛

Style Guide

Style Guide (Pinke)

Color Palette

Core Palette

  • Primary: #6366f1 (Inflow / income, Indigo)
  • Secondary: #ec4899 (Outflow / expenses, Pink)

  • Accent: #14b8a6 (Net / balance, Teal)

  • Inflow / income: #6366f1 (Purple/Indigo, base), use lighter/darker shades for series

  • Outflow / expenses: #ec4899 (Pink/Magenta, base), use lighter/darker shades for series
  • Net / balance: #14b8a6 (Teal)
  • Visualization gradient (light): linear-gradient(135deg, #a855f7, #6366f1 45%, #14b8a6)
  • Visualization gradient (dark): linear-gradient(135deg, #22d3ee, #8b5cf6 45%, #22c55e)
  • Feedback confetti accents: #f59e0b, #10b981, #3b82f6, #ec4899, #f97316
Primary (Inflow / income) `#6366f1`
Secondary (Outflow / expenses) `#ec4899`
Accent (Net / balance) `#14b8a6`
Support (Confetti) `#f59e0b`
Support (Confetti) `#10b981`
Support (Confetti) `#3b82f6`
Support (Confetti) `#ec4899`
Support (Confetti) `#f97316`

Typography

  • Base font size: 17px (desktop: 19px)
  • Base line height: 1.7
  • Use Tailwind/DaisyUI type utilities for weights and sizing (font-semibold, text-sm, etc.)

Gradients

  • Primary viz card glow uses the light/dark gradients above.
  • Use gradients sparingly for data visualization emphasis, not body backgrounds.

Components

  • Buttons: DaisyUI btn variants + local overrides in app/templates/static/css/btn.css
  • Cards: card + bg-base-200 for surfaces; viz cards use .viz-card in visualize CSS
  • Badges/alerts: DaisyUI badge and alert classes for statuses (info/success/error)

Visualization Styles

Chart Containers

  • Standard chart height: 420px for main panels (/visualize/*)
  • Containers typically use bg-base-200 + border border-base-300
  • Viz cards add glow on hover via .viz-card pseudo elements

Income vs Expenses (ECharts)

  • Series colors from CSS variables:
  • --color-income (income)
  • --color-expense (expenses)
  • --color-net (net)
  • Fallbacks in JS (if CSS variables missing):
  • Income #1fa368, Expenses #3a6afd, Net #d5a800
  • Transfers/refunds use fixed accents:
  • Transfer In #06b6d4, Transfer Out #f97316, Refund #10b981

Balance (ECharts)

  • --color-balance: main line color (required for theme consistency)
  • --color-balance-area: area gradient start
  • --color-balance-marker: current-time marker
  • Projection colors (optional):
  • --color-projection fallback #34d399
  • --color-projection-band fallback rgba(168,85,247,0.16)

Pie Chart (ECharts)

  • Segment borders: 2px with theme-aware --b2 (DaisyUI), fallback light/dark values
  • Label text color switches by theme (#374151 light, #e5e7eb dark)
  • Default segment palette is ECharts standard list (see pie.js)

Dark Mode

  • .viz-card gradient switches in dark mode to cooler cyan/purple/green
  • Chart text colors adjust via theme checks in JS (light: #374151, dark: #e5e7eb)
  • DaisyUI theme tokens (--color-base-*) are the baseline for surfaces and borders

References

  • app/templates/static/css/visualize.css
  • app/templates/static/css/base.css
  • app/templates/static/css/btn.css
  • app/templates/static/js/incomes-expenses.js
  • app/templates/static/js/balance.js
  • app/templates/static/js/pie.js