Design

We were reaching for:

• Clean hierarchy and clear focus on totals.

• Strong visual storytelling through minimal but meaningful use of color and data viz. 

Color Selection & Meaning

• Primary palette: Deep royal blue and light blue tones dominate the interface.

• Significance:

  • Royal Blue (#003B8F–ish): Communicates trust, security, and credibility—ideal for fintech and crypto apps.

  • Light Blue: Used for highlights and interactive elements (filters, chart segments), this tone signals clarity and guides user focus without overwhelming.

  • White background: Supports readability and provides strong contrast for key elements.

The use of color-coded sections in the donut chart helps break down the user’s savings sources, making financial data visually digestible.

Typography

• The app uses a modern, sans-serif typeface that enhances legibility.

  • Hierarchy: Strong use of typographic contrast:

    • Large bold font for primary numbers and totals (e.g., $5,200 USD).

    • Smaller, medium-weight text for labels (e.g., “Bonus de Referidos,” “Ganancia”).

  • The choice supports both readability and a modern tech aesthetic.

Interaction & Accessibility

• Touch-friendly controls: The pill-shaped buttons (Semanal, Mensual, Anual) are appropriately sized for fingers, with a strong contrast when selected.

• High contrast between text and background ensures good accessibility.

• The chart’s tooltip with a floating shadow enhances feedback during interaction.