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ónNombre colorCódigo colorColor
PositivaSuccess#3FC633
PositivaSuccess 24%#D3F2CF
PositivaSuccess 12%#E9F8E7
PositivaSuccess 8%#F1FBEF
NegativaDanger#F46A6A
NegativaDanger 24%#FABDBB
NegativaDanger 12%#FCEDED
NegativaDanger 8%#FDF3F3
AlertaWarning#F1C34C
AlertaWarning 24%#FBF1D5
AlertaWarning 12%#FCF7E9
AlertaWarning 8%#FEBFF1
NeutraPrimary#8D77FF
NeutraPrimary 24%#E4DFFF
NeutraPrimary 12%#F1EEFF
NeutraPrimary 8%#F6F4FF
NeutraSecondary#FFAB7C
NeutraSecondary 24%#FFEBE0
NeutraSecondary 12%#FEF4EF
NeutraSecondary 8%#FEF9F5
NeutraNeutral#777DA0
NeutraNeutral 24%#DFE0E8
NeutraNeutral 12%#EEFFF3
NeutraNeutral 8%#F4F5F8