Gonto Design System

Minimal expense tracking design

Core Principles

Responsive Density

Mobile uses compact spacing for maximum data visibility. Desktop embraces generous white space for calm elegance. The design adapts to the user's viewport context.

Typography Over Decoration

Hierarchy through scale and weight, not color or ornamentation. Light and extralight weights create elegance. Each typeface choice is deliberate and minimal.

Single Accent, Maximum Impact

Fresh emerald for AI features. Used sparingly to highlight intelligent capabilities. The restraint makes each usage more powerful.

Calm Interactions

Transitions are slow (500ms+). Hovers change opacity, not color. Everything feels effortless and considered. No sudden movements, no surprises.