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)

AAA

A

15:1

A

21:1


AAA

A

7.03:1

A

7.03:1

AAA

A

7.18:1

A

7.18:1


AAA - AA

A

4.56:1

A

21:1




Usos y aplicaciones


Texto


Black
900#000000
Gray
500#6F777B
Blue
700#0056ac



Enlaces


Blue
700#0056ac
Purple
500#5d2ee5

Enlace visitado




Fondos


Red
700#cf000b
Header
Gray
30#f6f9fc
Alternativo
Gray
40#f2f5f8
Breadcrumbs
Gray
100#edf0f4
Secciones
Black
900#000000
Footer



Bordes


Gray
400#dee3ea
Tarjetas / sombras / botones
Black
900#000000
Entradas de texto / entradas de control / checkbox / etiquetas



Focus


Yellow
500#ffbf47
Focus




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.

Black
Black
950#000000
Gray
Gray
30#f6f9fc
Gray
40#f2f5f8
Gray
100#edf0f4
Gray
400#dee3ea
Gray
500#6f777b
Gray
900#26292e
Gray
800#4d4d4d
Gray
600#919191
Gray
300#e5e5e5
Gray
200#efefef
Gray
100#f4f4f4
Red
Red
500#ff0707
Red
600#eb0303
Red
700#cf000b
Red
800#b21414
Blue
Blue
100#e6f2f8
Blue
500#2b6cb0
Blue
700#0056ac
Green
Green
400#1b9d6b
Green
500#076725
Purple
Purple
150#e6e6ff
Purple
500#5d2ee5
Indigo
Indigo
500#474d98
Fucsia
Indigo
500#d20042
Yellow
Yellow
500#ffbf47