Brand Story

01

Verbal

02

Logo

03

Color

04

Typography

05

Art Direction

06

Icon

05

Iconografía

Los íconos diseñados en el sistema de diseño del Banco Popular, están diseñados para ser simples, intuitivos, accesibles

Variantes

Existen dos tipos de iconos:

Iconos sin contenedor

Se deben usar cuando es un elemento clickable dentro de otro componente (ejemplo: Input). El icono seleccionado, debe ir semánticamente conforme a la acción a la cual se esta invitando al usuario a realizar.

Iconos con contenedor

Se deben usar como elementos decorativos e informativos dentro de cards, o elementos de navegación como headers y footers. Siempre deben complementar la información de los textos.

Uso del color

Con el fin de garantizar la legibilidad y accesibilidad de los iconos, el uso del color debe ser el siguiente:

Icono sin contenedor

  1. Icono izquierda: Debe complementar la información del texto
  2. Texto: Debe ser un texto corto que vaya acorde a la acción que realiza
  3. Icono derecho: Debe complementar la información del texto
  4. Borde radio: Todas las esquinas de los botones deben tener un radio de 8px, a excepción del tamaño xs, el cual deberá ir con un borde radio de 4px
  5. Background: Debe tener el color Primary 600

Icono verde con contenedor

El contenedor debe ser del color Brand 100, mientras que el color del icono debe ser Brand 900. De esta manera el icono será accesible.

This is fine 🔥 | All Rights Reserved

05

Iconografía

Los íconos diseñados en el sistema de diseño del Banco Popular, están diseñados para ser simples, intuitivos, accesibles

Variantes

Existen dos tipos de iconos:

Iconos sin contenedor

Se deben usar cuando es un elemento clickable dentro de otro componente (ejemplo: Input). El icono seleccionado, debe ir semánticamente conforme a la acción a la cual se esta invitando al usuario a realizar.

Iconos con contenedor

Se deben usar como elementos decorativos e informativos dentro de cards, o elementos de navegación como headers y footers. Siempre deben complementar la información de los textos.

Uso del color

Con el fin de garantizar la legibilidad y accesibilidad de los iconos, el uso del color debe ser el siguiente:

Icono sin contenedor

El color del icono debe ser Secondary-900. De esta manera el icono será accesible.

El tamaño mínimo de este ícono es de 24px

Icono verde con contenedor

El contenedor debe ser del color Brand 100, mientras que el color del icono debe ser Brand 900. De esta manera el icono será accesible.

This is fine 🔥 | All Rights Reserved

05

Iconografía

Los iconos diseñados en el sistema de diseño del Banco Popular, están diseñados para ser simples, intuitivos, accesibles y comunicativos.

Variantes

Existen dos tipos de iconos:

Iconos sin contenedor

Se deben usar cuando es un elemento clickable dentro de otro componente (ejemplo: Input). El icono seleccionado, debe ir semánticamente conforme a la acción a la cual se esta invitando al usuario a realizar.

Iconos con contenedor

Se deben usar como elementos decorativos e informativos dentro de cards, o elementos de navegación como headers y footers. Siempre deben complementar la información de los textos.

Uso del color

Con el fin de garantizar la legibilidad y accesibilidad de los iconos, el uso del color debe ser el siguiente:

Icono sin contenedor

El color del icono debe ser Secondary-900. De esta manera el icono será accesible.

El tamaño mínimo de este ícono es de 24px

Icono verde con contenedor

El contenedor debe ser del color Brand 100, mientras que el color del icono debe ser Brand 900. De esta manera el icono será accesible.

This is fine 🔥 | All Rights Reserved