Gonto Design System

Minimal expense tracking design

Design System

A minimal, responsive design system for Gonto expense tracking. Built with simplicity, elegance, and clarity at its core.

Responsive Density

Compact on mobile for maximum data visibility. Spacious on desktop for calm elegance.

Typography Over Decoration

Hierarchy through scale and weight, not color. Light weights create elegance.

Single Accent

Fresh emerald for AI features only. Used sparingly for maximum impact.

Calm Interactions

Slow transitions (500ms+). Opacity changes, not color shifts. No sudden movements.

Documentation

Foundation

Design philosophy, principles, colors, typography, and spacing scales.

PhilosophyPrinciplesColorsTypographySpacingImplementation

Components

Reusable UI elements including buttons, badges, tables, and more.

Buttons & ActionsBadgesTablesDropdownsLoading States

Patterns

Complex UI patterns like modals, overlays, navigation, and forms.

ModalsOverlaysNavigationForms

Visualization

Data visualization components including graphs, insights, and export tools.

Graphs & ChartsAI InsightsExport

Features

Application-specific features like premium lists, filters, and actions.

Premium ListsFiltersActions
Color Palette →Typography →Buttons →Graphs →