Sistema de Diseño de PAySA

Base viva de la identidad visual de PAySA. Documento en construcción: recoge lo que ya está definido (núcleo de marca, paleta, tipografía, grilla y componentes base) y se irá completando a medida que cerremos el logo y las aplicaciones.

Estado
🟡 En desarrollo
Versión
v0.1 — Sep 2026
Alcance
Mayorista + detalle · Talagante
Fundamentos · 01

Núcleo de marca

Todo el sistema se deriva de esto. Levantado con el equipo fundador de PAySA.

Posicionamiento

La distribuidora local de la provincia de Talagante. Concepto: "Talagantino compra en Talagante". Nace para que el comerciante de la zona no deba viajar a Santiago a abastecerse.

Personalidad

Formal y experta. PAySA es un socio profesional del comerciante —le da herramientas para vender y profesionalizar su gestión—, no "el amigo del barrio".

Atributos

Transparencia en los precios · Excelencia en el servicio · Confianza · Arraigo local.

Diferenciación

Surtido amplio, promociones que ayudan a surtir la tienda del comerciante y reposición al día siguiente dentro de la provincia.

Fundamentos · 02

Paleta de color

Jerarquía por función: cada color cumple un trabajo, no se elige por gusto. Base azul + verde (definición del cliente); el ámbar es acento y está por validar.

Azul autoridad
#123A5B
Primario. Texto, fondos oscuros, barra de navegación.
Verde marca
#2C7A51
Secundario. Acentos, iconografía, sobretítulos.
Ámbar acento ·
#E0912F · por validar
Detalles y énfasis puntual. Nunca en superficie amplia.
Gris cálido
#F4F2EE
Fondo secundario, alterna con blanco entre secciones.
Tinta texto
#1B2733
Color de texto principal sobre fondos claros.
Verde conversión
solo botones
Exclusivo de botones de acción. No es color de marca.
Fundamentos · 03

Tipografía

Dirección de trabajo. Archivo aporta el carácter sólido y profesional en títulos; IBM Plex Sans es la voz neutra y legible del cuerpo. Se afinan al cerrar el logo.

Títulos · Display
Archivo

Pesos 700 / 800. Interletrado ceñido en títulos grandes.

Cuerpo · Texto
IBM Plex Sans

Pesos 400 / 500 / 600. Interlínea 1.6 para lectura larga.

H1 · 52
Talagantino compra en Talagante
H2 · 34
Por qué elegir a PAySA
H3 · 19
Reposición al día siguiente
Cuerpo · 17
Surtido amplio y precios convenientes para el comerciante de la provincia, sin viajar a Santiago.
Sobretítulo · 12
Distribuidora mayorista
Fundamentos · 04

Espaciado y grilla

Escala base 8. El contenido se limita a 1040–1120 px y respira 22 px en móvil, 56 px en desktop.

8 px
16 px
24 px
32 px
48 px
64 px
96 px
Fundamentos · 05

Botones y CTA

Un solo CTA primario por pantalla visible. El primario siempre lleva el verde de conversión; el resto son acciones secundarias o de texto.

Primario
Secundario
Texto

Deshabilitado
Fundamentos · 06

Principios de color

SÍ

Azul de autoridad como base. Máximo dos fondos por sección (blanco y gris cálido, o blanco y azul). Verde para acentos y verde de conversión solo en botones.

NO

Morado (obispo) y rojo (vetados por el cliente). Degradados decorativos. Verde de conversión fuera de botones. Sobrecargar con muchos colores a la vez.