10.6 Uso de íconos y colores en los formularios

Uso de Íconos y colores en los formularios

 

Íconos

Los íconos que utilizamos en Sepiia son de la librería Material Design Icons - Icon Library - Pictogrammers.
 

Colores

Recomendamos que el color semánticamente, es decir: utilizarlo en función del objetivo a cumplir, ya que, cuando es correctamente aplicado, ayuda a reforzar el significado de las acciones.
Ejemplo:
  • “Carga” y “Nuevo” en verde, porque implican una acción positiva.
  • “Reclamo” en rojo porque connotan una acción negativa.
El resto de los flujos tienen connotación neutra, por ende pueden utilizar cualquier otro color.
 

Colores Sepiia según su connotación

Hay 4 variantes de todos los colores:
  1. El color al 100% de opacidad.
  1. El color a 24% de opacidad y su equivalente de color al 100%.
  1. El color a 12% de opacidad y su equivalente al 100%.
  1. El color a 8% de opacidad y su equivalente al 100%.
 

Tabla de colores

Connotación Nombre color Código color Color
Positiva Success #3FC633
Positiva Success 24% #D3F2CF
Positiva Success 12% #E9F8E7
Positiva Success 8% #F1FBEF
Negativa Danger #F46A6A
Negativa Danger 24% #FABDBB
Negativa Danger 12% #FCEDED
Negativa Danger 8% #FDF3F3
Alerta Warning #F1C34C
Alerta Warning 24% #FBF1D5
Alerta Warning 12% #FCF7E9
Alerta Warning 8% #FEBFF1
Neutra Primary #8D77FF
Neutra Primary 24% #E4DFFF
Neutra Primary 12% #F1EEFF
Neutra Primary 8% #F6F4FF
Neutra Secondary #FFAB7C
Neutra Secondary 24% #FFEBE0
Neutra Secondary 12% #FEF4EF
Neutra Secondary 8% #FEF9F5
Neutra Neutral #777DA0
Neutra Neutral 24% #DFE0E8
Neutra Neutral 12% #EEFFF3
Neutra Neutral 8% #F4F5F8