UI & Visuals
Design Philosophy
FinQuest AI utilizes a "Gamified Data" aesthetic, blending high-fidelity financial dashboards with 16-bit RPG elements. The interface is built using Tailwind CSS for layout and utility-first styling, combined with custom CSS for "Juicy" interactions—animations and feedback loops that make mundane financial tasks feel rewarding.
Theming & Styles
Color Palette
The application uses a specific CSS variable-driven theme defined in the core index.html.
| Variable | Usage | Hex (Approx) |
| :--- | :--- | :--- |
| --bg-core | Application background | #0f172a |
| --bg-card | Container backgrounds | #1e293b |
| --accent-hp | Expenses / Negative impact | #ef4444 |
| --accent-xp | Savings / Positive progress | #3b82f6 |
| --accent-gold | Currency and rewards | #fbbf24 |
Typography
The UI utilizes a dual-font system to distinguish between "Game" elements and "Data" elements:
- Data Font (
Chakra Petch): Used for labels, values, and UI controls. It provides a high-tech, futuristic feel. - Pixel Font (
VT323): Used for headers, monster dialogues, and flavor text to reinforce the retro RPG theme.
Core UI Components
JuicyButton
The JuicyButton is a wrapper around the custom .btn-juicy class. It provides a physical "squish" effect upon clicking and utilizes a 4px offset shadow to give buttons a tactile, 3D feel.
Usage:
import { JuicyButton } from './components/ui/JuicyButton';
<JuicyButton
onClick={() => console.log("Transaction Added!")}
variant="primary" // Optional: controls color scheme
>
Record Expense
</JuicyButton>
Card
The standard layout container. Cards feature a subtle border and deep shadows to stand out against the space-blue background.
Props:
title: (String) Displayed in the pixel font header.children: (ReactNode) The content of the card.className: (String) Optional Tailwind overrides.
Visual Feedback Systems
Damage Feedback (The Damage Bus)
FinQuest visualizes spending as "damage" dealt to the user's budget. This is handled via a lightweight event emitter called the damageBus.
To trigger a floating damage number anywhere in the app:
import { damageBus } from './components/Visuals/DamageFeedback';
// When an expense is recorded
const handleAddExpense = (amount: number) => {
damageBus.emit(amount);
};
- Visual: A red, floating number (e.g.,
- $50.00) appears and floats upward using the.floating-damageanimation.
HP (Budget) Progress Bar
Located in the Dashboard, this bar reflects the user's remaining monthly balance as a percentage of their total income.
- Green (>50%): High Financial Health.
- Yellow (20-50%): Warning Stage.
- Red (<20%): Critical Stage (Triggers "Sad" FinMon mood).
Utility Classes & Patterns
Stripe Patterns
Use the .stripe-pattern class to add a retro, diagonal-line texture to backgrounds. It is typically used with an opacity overlay to add depth to headers.
<div class="bg-indigo-600 stripe-pattern opacity-20"></div>
Layout Grid
The application follows a 12-column grid system for the main Dashboard:
- Col 1-12 (Header): Financial stats and HP.
- Col 1-8 (Stage): The FinMon environment and visual focus.
- Col 9-12 (Control Deck): Quick actions and navigation.
Animations
The following CSS animations are available for custom components:
.animate-fade-in: Smooth opacity transition..animate-fade-in-up: Opacity transition combined with a subtle upward slide..floating-damage: RPG-style damage number pop-up logic.