DESIGN.md - Finance Management System (FMS)Legacy format

This document defines the architecture and AI-guided visual design system for a comprehensive Financial Management System. The system includes features such as budget tracking, automated expense categorization, multi-currency support, and actionable financial analytics.

AI agents should utilize this file to ensure all generated code, database schemas, and user interfaces (UIs) remain secure, performant, and aligned with enterprise financial standards.

### Colors (Semantic Roles)

Finance apps require trust-inspiring, calm, and readable color palettes.

• primary: #1A365D (Deep Navy - Used for main navigation, branding, headers)

• secondary: #319795 (Teal - Used for accents, charts, and key calls-to-action)

• accent: #4FD1C5 (Light Teal - Hover states and focus rings)

• success: #38A169 (Green - Profit indicators, savings goals met)

• danger: #E53E3E (Red - Expense warnings, deficit indicators)

• background: #F7FAFC (Off-White/Light Gray - Main dashboard background)

• surface: #FFFFFF (White - Data cards, modals, and panel backgrounds)

### Typography

• font-family: "Inter", "Segoe UI", Roboto, sans-serif

• font-display: swap

• base-size: 16px

• scale-ratio: 1.250 (Major Third)

• h1: 38.15px, font-weight: 700

• h2: 30.52px, font-weight: 600

• h3: 24.41px, font-weight: 600

• body: 16px, font-weight: 400, line-height: 1.5

• caption: 12.80px, font-weight: 400, color: #A0AEC0

### Spacing & Grid System

• grid-system: 12-column fluid grid

• base-unit: 8px

• spacing-xs: 8px

• spacing-sm: 16px

• spacing-md: 24px

• spacing-lg: 32px

• spacing-xl: 48px

When an AI agent generates layouts for the Finance Management System, it must adhere to the following explicit rules:

### A. Dashboard Overview (Main View)

• Use Card Components (background: surface) for high-level KPIs: Total Net Worth, Monthly Cash Flow, and Budget Progress.

• Charts: All financial data (e.g., income vs. expense graphs) must utilize the secondary or success tokens for visual clarity.

• Data Densities: Allow high data density for tables (Transaction History), utilizing smaller padding and a clear border-bottom: 1px solid #E2E8F0.

### B. Transaction Management

• Display tabular data with strict column alignments: Date (left), Description (left), Category (center), Amount (right, color-coded).

• Negative amounts ($ <0) must be colored with danger. Positive amounts ($ >0) colored with success.

• Pagination: Implement standard table pagination with 10, 25, or 50 rows per page. Infinite scroll is not permitted for transactions.

### C. Security and Authentication

• All login and session-related UIs must feature a strict lockout timeout.

• Implement biometric/2FA indicators prominently.

• Input fields for sensitive data (e.g., routing/account numbers) must enforce numeric masking out-of-the-box.

• Tech Stack: Microservices or Modular Monolith (Spring Boot, Node.js/TypeScript, or Next.js).

• Database Rules:

• All monetary values must be stored using the DECIMAL(15, 2) data type to prevent floating-point errors.

• Multi-currency systems must link transactions to a dedicated currency table with live conversion rates.

• API Standards: RESTful endpoints for transactions, budgets, and users. Responses must enforce camelCase formatting and utilize pagination (?limit=X&offset=Y).

• Contrast: Text to background contrast ratios must strictly follow WCAG AA guidelines (4.5:1 for normal text).

• Responsiveness: Dashboard layouts must gracefully collapse from a 3-column desktop grid to a single-column block layout for mobile viewports.

• Keyboard Navigation: Every actionable element (e.g., adding a transaction, logging out, changing budget categories) must be reachable using the Tab key and interactive with the Enter key.