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-damage animation.

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.