# MyPengeluaran Design System

## Overview

MyPengeluaran is a modern mobile-first financial tracking web application.

The application allows users to:

* track expenses and income
* monitor analytics
* connect Telegram and WhatsApp bots
* manage transactions in realtime

The UI style is inspired by:

* Monzo
* Revolut
* modern fintech startup dashboards

The interface should feel:

* premium
* clean
* modern
* smooth
* lightweight
* highly responsive

---

# Tech Stack

Frontend:

* Laravel Blade
* Tailwind CSS
* Alpine.js

Backend:

* Laravel 12
* MySQL

Bot Integration:

* Telegram Bot
* WhatsApp Integration

Charts:

* ApexCharts

---

# Design Style

Style:

* Mobile-first
* Modern fintech
* Ocean blue aesthetic
* Soft glassmorphism
* Clean spacing
* Rounded cards
* Soft shadows
* Premium dashboard feel

UI Characteristics:

* smooth hierarchy
* elegant typography
* floating navigation
* modern financial widgets
* clean interaction feedback

---

# Color Palette

Primary:

* #093C5D

Secondary:

* #3B7597

Accent:

* #6FD1D7

Background:

* #F7FAFC

Cards:

* White / Glass panels

Text Primary:

* #181C1E

Text Secondary:

* #72777E

Success:

* Emerald / teal accents

Error:

* #BA1A1A

---

# Typography

Primary Font:

* Hanken Grotesk

Secondary Font:

* Inter

Styles:

* Bold currency numbers
* Clean analytics typography
* Minimal label caps
* Spacious readable text

---

# Border Radius

Cards:

* rounded-2xl
* rounded-full for floating elements

---

# Shadows

Cards:

* soft shadow
* subtle floating effect

FAB:

* stronger floating shadow

---

# Mobile Layout

The application is mobile-first.

Target width:

* max 430px mobile layout

Navigation:

* floating bottom navigation
* fixed mobile navbar
* floating action button

Spacing:

* breathable spacing
* consistent padding
* minimal clutter

---

# Main Pages

## Dashboard

Features:

* greeting header
* profile avatar
* notification button
* total balance card
* income card
* expense card
* AI insight card
* cashflow chart
* recent transactions
* floating add button
* bottom navigation

---

## Transactions

Features:

* search bar
* filter chips
* grouped transactions by date
* swipe-to-delete interaction
* income and expense indicators
* category icons
* floating action button
* mobile optimized list

---

## Analytics

Features:

* total spending summary
* spending breakdown donut chart
* category statistics
* weekly trends chart
* analytics insight cards
* clean chart visualization

---

## Bot Integration

Features:

* Telegram connection
* WhatsApp connection
* realtime sync indicator
* expense logging preview
* QR connection card
* automation toggles

---

## Profile

Features:

* user profile
* account settings
* dark mode toggle
* export report
* bot connection status
* logout button

---

# Components

## Bottom Navigation

Menu:

* Home
* Transactions
* Add
* Analytics
* Profile

Style:

* floating glass navigation
* rounded full
* active menu highlighted

---

## Balance Card

Style:

* gradient background
* large currency display
* floating decoration blur
* premium fintech look

---

## Transaction Card

Style:

* clean white card
* category icon
* amount indicator
* soft shadow
* swipe interaction

---

## Analytics Cards

Style:

* minimal statistic cards
* donut chart
* soft hover effects
* modern data presentation

---

# UI Rules

* Keep layout minimal
* Avoid clutter
* Use modern spacing
* Use reusable components
* Use smooth hover/active animations
* Prioritize mobile usability
* Use glassmorphism lightly
* Keep dashboard visually premium
* Maintain consistent spacing system