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"

Fondos

Textos

Enlaces y botones

Bordes

Focus

Paleta de colores

Los colores que se utilizan en Gob.pe están pensados para que se puedan complementar correctamente en toda la plataforma.

Primarios

Los colores primarios dentro de la paleta de colores de la marca, son los que más lo representan.

Neutral

Gray

Negro y blanco

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

Green

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

Purple

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

Indigo

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

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.