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

Guía de estilos

Colores

Utiliza las variables de Gob.pe en lugar de copiar los colores por su código hexadecimal. Por ejemplo, usa For example, use \$gobpe-text-color en lugar de #0B0C0C. Esto hará que tu servicio siempre utilice la paleta de colores más reciente cada vez que actualices. Es importante que solo utilices las variables en el contexto para el que fueron diseñadas. En otros casos, debes utilizar como referencia toda la paleta de colores. Por ejemplo, si necesitas utilizar un color rojo para representar información en una tabla debes usar gobpe-color("red") y no gobpe-header-background-color.




Contraste de colores


AAA (WCAG 2.0)
Debes asegurarte 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_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