Sistema de diseño

Guía de estilo

Todo lo visual del producto sale de aquí: la landing, el manual y la app. Si algo no está en esta página, no debería existir en el código.

1 · Logo y marca

Qué representa

Un arco es el umbral: el punto por donde se pasa. La línea horizontal es el escalón de entrada y el punto cobre es quien entra. Sirve igual para el edificio y para el control de acceso.

Uso

• Siempre el símbolo completo: arco + línea + punto.
• Sobre fondo oscuro o sobre el azul de marca. Nunca sobre una foto sin velo.
• Tamaño mínimo del símbolo: 32 px en pantalla.
• Aire libre alrededor: mínimo el ancho del arco.
• El nombre va en la tipografía del sistema, con peso 800 y sin mayúsculas forzadas.

Lo que no se hace

• No se estira, no se rota, no se le cambia el color del punto.
• No se usa el símbolo como fondo repetido.
• No se acompaña de sombras ni bordes.

2 · Color

Un solo acento. El resto es neutro: el producto maneja dinero y planillas, no necesita gritar.

Navy#0a1d2e

Navy 2#12304a

Acero#1b4965

Acero claro#2c6e9b

Cobre#a8622c

Cobre suave#f6ece2

Fondo#f5f6f8

Línea#e1e5ea

Texto#16222e

Texto suave#5a6875

Éxito#2f6b4f

Aviso#8a5a1e

Peligro#8c2f2f

3 · Tipografía

Tipografía del sistema (sin fuentes externas): carga instantánea y funciona sin internet.

• Los montos se muestran con dos decimales y separador de miles: USD 2.310,00.
• Nunca se usa mayúscula sostenida en párrafos; solo en etiquetas cortas.
• El interlineado del cuerpo es 1.6: se lee de pie y con el teléfono en la mano.

4 · Componentes

Botones

• Una sola acción principal por pantalla. Si hay dos, una va como enlace o botón fantasma.
• Verbos en infinitivo o imperativo: Pagar, Conciliar, Cerrar mes. Nunca "Aceptar".
• Las acciones destructivas piden confirmación con el monto escrito, no un simple "¿seguro?".

Tarjetas y estados

Tabla de datos

Avisos

Formularios

5 · Iconografía

Un solo set de líneas, 24×24, trazo 1.6, sin relleno. Viven en assets/img/iconos.svg y se usan con <use>, así que cambian de color con el contexto.

• El icono acompaña, no reemplaza: siempre hay texto al lado salvo en botones de barra.
• No se usan emojis como iconos en producto ni en material de venta.
• Tamaño en línea de texto: 20 px. En tarjeta: 21 px. Decorativo: 26 px.

6 · Espaciado y forma

7 · Tono de voz

• Se dice qué pasó y qué hacer, en ese orden.
• Sin signos de exclamación y sin emojis en mensajes de dinero.
• Sin anglicismos: conciliar, no matching; saldo a favor, no credit.
• Las cifras siempre llevan moneda y periodo.

8 · Accesibilidad

• Contraste mínimo AA: el texto suave solo sobre fondo claro.
• Foco visible en todos los controles (anillo acero de 2 px).
• Nada se entiende solo por color: el estado siempre lleva texto.
• Se respeta prefers-reduced-motion: las animaciones se apagan.
• Formularios con label real, no solo placeholder.
• La app funciona con teclado y con lector de pantalla.