---
version: alpha
name: "Wallet"
description: "Saldos claros, verde sereno y números en los que confiar. Wallet hace que el dinero parezca bajo control: un fondo gris verdoso pálido, esmeralda para las acciones positivas, tarjetas blancas con sombras suaves y saldos en cifras tabulares para que las columnas se alineen. Añadir una transacción siempre está a un toque, en el centro de la barra de pestañas."
colors:
  primary: "#0E7C5A"
  on-primary: "#FFFFFF"
  secondary: "#2F6FD6"
  tertiary: "#E09A2D"
  neutral: "#55625C"
  surface: "#F5F7F6"
  on-surface: "#0F1A16"
typography:
  display-lg:
    fontFamily: "Manrope"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: "Manrope"
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.01em
  headline-md:
    fontFamily: "Manrope"
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.2
  headline-sm:
    fontFamily: "Manrope"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.3
  body-md:
    fontFamily: "Manrope"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
  body-sm:
    fontFamily: "Manrope"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
rounded:
  sm: 14px
  md: 16px
  lg: 18px
  xl: 22px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.lg}"
    padding: "{spacing.md}"
---

## Overview

Wallet hace que el dinero parezca bajo control: un fondo gris verdoso pálido, esmeralda para las acciones positivas, tarjetas blancas con sombras suaves y saldos en cifras tabulares para que las columnas se alineen. Añadir una transacción siempre está a un toque, en el centro de la barra de pestañas.

## Colors

- **primary (#0E7C5A):** Verde esmeralda, para el botón de añadir, los ingresos y las acciones confirmadas. Menta en modo oscuro.
- **on-primary (#FFFFFF)**
- **secondary (#2F6FD6):** Azul, para transferencias, cuentas y la segunda categoría de gasto.
- **tertiary (#E09A2D):** Ámbar, para facturas próximas a vencer, avisos de presupuesto y una tercera categoría.
- **neutral (#55625C):** Gris verdoso para fechas, datos del comercio y etiquetas.
- **surface (#F5F7F6):** Gris verdoso pálido; las tarjetas son blancas para que destaquen los saldos.
- **on-surface (#0F1A16)**

## Typography

Manrope en todo: negrita 700 para títulos y saldos (saldos de hasta 40px con cifras tabulares), grosor 500 a 16px para el cuerpo y las filas de transacciones.

## Layout

Pantallas de móvil con 20px de margen lateral y una barra de pestañas inferior de 64px: cuatro pestañas con etiqueta alrededor de un botón central de añadir. El saldo se sitúa arriba en la pantalla de inicio, con las transacciones recientes debajo.

## Shapes

Esquinas de 18px en tarjetas y hojas; botones en forma de píldora; áreas táctiles de al menos 48px. Sombras suaves y bajas en las tarjetas y en el botón de añadir.

## Components

Una tarjeta de saldo con selector de periodo, filas de transacción con icono del comercio, categoría e importe, barras de progreso del presupuesto, un gráfico de anillos de gastos y una hoja con teclado numérico para las nuevas entradas.

## Do's and Don'ts

- Alinea a la derecha todos los importes con cifras tabulares.
- Marca los gastos con un signo menos, no solo con el color.
- No pintes todos los gastos de rojo; reserva el rojo para presupuestos superados y errores.
- No escondas el saldo detrás de un toque extra.