MoneyTracker

Overview

MoneyTracker is a fintech-forward personal finance management platform designed for Indonesian users seeking intelligent, transparent control over their financial lives. The design system embraces a "Trust-Through-Clarity" aesthetic: a dark-mode-first interface with a vibrant blue primary accent (#0d6efd) that signals confidence and security, paired with a sophisticated slate-and-indigo palette that conveys sophistication without coldness. The UI prioritizes legibility and rapid decision-making, using high-contrast typography (Inter at 16–24px) and generous spacing (24px gutters, 12–40px section rhythm) to reduce cognitive load when managing complex financial data. The brand personality is professional yet approachable: precise, data-driven, and never patronizing. Voice examples: "Your portfolio gained 2.3% this month" (factual, not celebratory); "Set a monthly budget to track spending" (instructional, not prescriptive). The emotional response is calm confidence—users feel in control, informed, and secure.

Colors

The color system is anchored in a fintech-grade blue primary (#0d6efd) used exclusively for CTAs, active states, and high-priority interactions. This blue is supported by a secondary indigo (#6366f1) for supporting accents and highlights, and a tertiary green (#10b981) for positive financial indicators (gains, savings, successful transactions). The surface stack uses a near-black base (#0f1419) with carefully calibrated container layers: surface-container-low (#151a22) for subtle backgrounds, surface-container (#1e2330) for standard cards, and surface-container-high (#28303d) for elevated hover states. On-surface text is a cool off-white (#f8fafc) for reduced eye strain in dark mode. Error states use a clinical red (#dc3545) reserved for destructive actions and warnings. All interactive el

Typography

The type system uses Inter exclusively, a geometric sans-serif optimized for screen legibility and fintech contexts. Display (60px, 700 weight, -0.04em tracking) is reserved for hero headlines and major section breaks; headline-lg (40px, 600 weight) for page titles; headline-md (28px, 600 weight) for subsection headers; title-lg (20px, 600 weight) for card titles and form labels. Body-lg (18px, 400 weight, 28px line-height) is used for descriptive text and explanations; body-md (16px, 400 weight, 24px line-height) for standard UI copy and input placeholders. Label-md (14px, 600 weight) is the workhorse for button text, form labels, and metadata; label-sm (12px, 500 weight) for helper text, timestamps, and secondary information. All body text uses 0.01–0.02em positive letter-spacing to enha

Layout

The layout follows a 12-column fluid grid with a 1280px max-width container, centered with 24px horizontal gutters on mobile and tablet. Vertical rhythm is maintained through a consistent 8px unit system: sections are separated by 40px (lg spacing), cards within sections by 24px (md spacing), and internal card padding by 24px. The login modal in the screenshot demonstrates the pattern: a centered card (max-width: 400px) with 24px internal padding, 16px input field padding, and 40px vertical gap between form sections. White-space is generous—never compress spacing below 12px (sm) between interactive elements. The container max-width of 1280px ensures readability on ultra-wide displays; on mobile (< 768px), the layout shifts to single-column with full-width cards and 12px gutters. Use the sp

Elevation & Depth

Depth is conveyed through a three-tier shadow system and the surface-container stack, avoiding flat design while maintaining the dark-mode aesthetic. Level 1 (Base/Resting): no shadow, surface-container background (#1e2330). Level 2 (Elevated/Hover): box-shadow: 0 4px 12px rgba(0,0,0,0.08), surface-container-high background (#28303d). Level 3 (Modal/Overlay): box-shadow: 0 20px 60px rgba(0,0,0,0.3), surface-container background with a 1px outline-variant border. The modal overlay uses a semi-transparent dark backdrop (rgba(15,20,25,0.8)) with a subtle blur (backdrop-filter: blur(4px)) to separ

Shapes

The shape system follows a "Soft-Technical" philosophy: rounded corners are used consistently to soften the precision of financial data, but never so much as to feel playful or casual. Buttons and form inputs use rounded.lg (1rem / 16px) for a balanced, approachable feel. Cards and modals use rounded.xl (1.5rem / 24px) for a more generous, breathing quality. Small UI elements (badges, chips, helper text backgrounds) use rounded.md (0.75rem / 12px). The login card in the screenshot uses rounded.lg (12px) on inputs and the primary button, and rounded.lg on the card itself, creating visual cohesi

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses {colors.primary} (#0d6efd) with white text, 16px padding horizontal, 48px height, and rounded.lg (16px). On hover, the background transitions to #0a58ca (200ms ease-in-out) with no shadow change—the color shift is sufficient feedback. The button-primary-active state uses #0845a6 for pressed/loading states. Secondary buttons are transparent with a 1px outline-variant border, 40px height, and label-md typography; on hover, they gain a surface-container-high background. All buttons use font-weight: 600 and letter-spacing: 0.01em for emphasis.

Containers & Surfaces Cards are the primary container for grouped content. The card component uses surface-container background (#1e2330), rounded.lg

Do's and Don'ts

**Do**

• Do use the primary blue (#0d6efd) exclusively for CTAs, active states, and focus indicators—never use it for decorative elements or backgrounds.
• Do maintain 24px gutters and 40px section spacing to ensure the interface feels spacious and reduces cognitive load when viewing financial data.
• Do apply the surface-container stack consistently: use surface-container-low for subtle backgrounds, surface-container for standard cards, and surface-container-high for hover states.
• Do use Inter at 16px body-md as the baseline for all UI copy; never go below 12px (label-sm) for helper text.
• Do transition all interactive states (hover, focus, active) over 150–200ms using ease-in-out timing to feel responsive without being jarring.
• Do use the tertiary green (#10b981) exclusively for positive financial indicators (gains, savings, successful transactions); never use it for neutral or negative states.

**Don't**

• Don't use shadows deeper than {elevation.lg} (0 16px 40px rgba(0,0,0,0.12)) outside of modals—excessive shadows create visual clutter in dark mode.
• Don't mix rounded corner sizes within a single component family (e.g., don't use rounded.md on some buttons and rounded.lg on others).
• Don't apply the primary blue to backgrounds or large surface areas—reserve it for interactive elements only; use the surface-container stack for backgrounds.
• Don't use system fonts or fallback sans-serif; Inter must load via @font-face or Google Fonts link to maintain brand consistency.
• Don't compress spacing below 12px (sm) between interactive elements; fintech UIs require generous breathing room to reduce user error.
• Don't use gradients or semi-transparent overlays on top of the surface-container stack—rely on the discrete color layers and shadows for depth instead.