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


G800
800#26292E

N600
600#555869

Casos de uso: texto
Casos de uso: texto



Enlaces y botones


B800
800#184397

B700
700#0056AC

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


N300
300#DEE3EA

Casos de uso: botón inhabilitado



Fondos


R800
800#BF0909

Casos de uso: cabecera


N100
100#F6F9FC

N200
200#EDF0F4

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


G800
800#26292E

Casos de uso: pie de página



Bordes


N300
300#DEE3EA

Casos de uso: tarjetas, sombras y botones



Focus


Y500
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.

Neutral


N800
800#0D1028
N400
400#C5CDDA


N700
700#3D4053
N300
300#DEE3EA


N650
650#464C57
N200
200#EDF0F4


N600
600#555869
N100
100#F6F9FC


N500
500#8A94A2



Gray


G800
800#26292E
G400
400#A8A9AB


G700
700#3C3E43
G300
300#BEBFC0


G600
600#515458
G200
100#E9EAEA


G500
500#7D7F82
G100
100#F7F7F7



Negro y blanco


G800
#26292E
G0
#FFFFFF



Secundarios

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.


Blue

Color que se utiliza principalmente para componentes ‘call to action’.

B800
800#184397
B500
500#4597E8


B700
700#0056AC
B400
400#E1F0FF


B600
600#0071E3
B300
300#F2F9FF


Green

Color que se utilizará para alertas, calificación positiva, banners, tags y labels.

GN800
800#126B49
GN500
500#C9F0D8

GN700
700#1B9D6B
GN400
400#E3F3EC

GN600
600#54B690


Purple

Color que se utilizará para banners, tags y labels.

P800
800#331980
P500
500#C2B1F5

P700
700#5D2EE5
P400
400#F6F6FE

P600
600#9A7CEF


Indigo

Color que se utilizará para banners, tags y labels.

I800
800#2A2D59
I500
500#C1C5FF

I700
700#474D98
I400
400#DFE1FF

I600
600#6C74E6
I300
300#F1F2FF



Primarios

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.

Red

Color corporativo y principal de Gob.pe con sus respectivas variantes y usos.

R800
800#BF0909
R400
400#F2B8B5

R700
700#DC362E
R300
300#F9DEDC

R600
600#E46962
R200
200#FCEEEE

R500
500#EC928E