Estándares y guías para la digitalización

Guía de estilos

Colores

En esta sección aprenderás los usos y aplicaciones de la paleta de colores con la que trabajará tu entidad. Emplea las variables de Gob.pe en lugar de copiar los colores por su código hexadecimal. Por ejemplo, usa \$gobpe-text-color en lugar de #0B0C0C. De esta manera, tu servicio utilizará la paleta de colores más reciente cada vez que la actualices. Es importante que solo uses las variables en el contexto para el que fueron diseñadas. Para otros casos, emplea como referencia toda la paleta de colores. Por ejemplo, si necesitas utilizar un color rojo para representar información en una tabla, usa gobpe-color("red") y no gobpe-header-background-color.




Contraste de colores


AAA (WCAG 2.0)
Asegúrate de que el contraste entre un texto y el fondo cumpla con el nivel AAA de las guías de accesibilidad web (WCAG 2.0)




Usos y aplicaciones


Texto


GRAY_900_GOB
900#26292E

GRAY_600_GOB
600#6F777B

Casos de uso: texto
Casos de uso: texto



Enlaces y botones


BLUE_800_GOB
800#024A93

BLUE_700_GOB
700#0056AC

Casos de uso: hover principal
Casos de uso: botones, enlaces


GRAY_400_GOB
400#DEE3EA

Casos de uso: botón inhabilitado



Fondos


RED_700_GOB
700#CF000B

Casos de uso: cabecera


GRAY_30_GOB
30#F6F9FC

GRAY_40_GOB
40#F2F5F8

Casos de uso: alternativo
Casos de uso: migas de pan, secciones


GRAY_900_GOB
900#26292E

Casos de uso: pie de página



Bordes


GRAY_400_GOB
400#DEE3EA

Casos de uso: tarjetas, sombras y botones



Focus


YELLOW_500_GOB
500#FFD147

Casos de uso: estado seleccionado



Paleta de colores

Los esquemas de color secundarios no tienen que ser coloridos. Solo necesitan contrastar con los elementos circundantes y usarse con moderación en toda la interfaz de usuario.

Neutrales


GRAY_900_GOB
900#26292E
GRAY_800_GOB
800#4D4D4D


GRAY_650_GOB
650#464c57
GRAY_600_GOB
600#515458


GRAY_400_GOB
400#DEE3EA
GRAY_100_GOB
100#EDF0F4


GRAY_40_GOB
40#F2F5F8
GRAY_30_GOB
30#F6F9FC



Negro y blanco


BLACK_GOB
#000000
WHITE_GOB
#FFFFFF



Secundarios


BLUE_800_GOB
800#024A93
BLUE_700_GOB
700#0056AC


GREEN_500_GOB
500#076725
GREEN_300_GOB
300#00823B


PURPLE_500_GOB
500#5D2EE5
PURPLE_150_GOB
150#E6E6FF


INDIGO_500_GOB
500#474D98
FUCSIA_500_GOB
500#D20042



Primario


RED_800_GOB
800#B21414
RED_700_GOB
700#CF000B