Manual Web – Estilos Generales

Última Actualización: Viernes 8 de Octubre 2021
Versión 0.1
Última Actualización: Viernes 8 de Octubre 2021
Version 0.1
Todos los estilos de este Manual fueron indicados y avalados por Gerencia General
La gráfica complementaria está pendiente de OK

Estilos Generales

Paletas de Color

Paleta de Escala de Azules SAC
hex #002D52
hex #003B6C
hex #004985
hex #0065B8
hex #0073D2
Paleta de Escala de
Grises SAC
hex #333333
hex #525252
hex #999999
hex #CCCCCC
hex #E5E5E5
Paleta de Escala de Pasteles SAC
hex #FDC7C5
hex #EFCFAF
hex #D6D8A7
hex #B8DFB2
hex #9FE2C9
hex #9AE1E3
hex #B0DAF6
hex #D2D0FC
hex #EFC8F3
hex #FEC4DF

Jerarquía Tipográfica - Encabezados H

H1
Algunas medidas de em están basadas en el tamaño web óptimo de tipografía: 16 px.
Y, viéndole don Quijote de aquella manera, con muestras de tanta felicidad
Color
hex #004985​
color:#004985​;
Tipografía
Open Sans
font-family: 'Open Sans', sans-serif;
Tamaño
36 px o 2.25 em
font-size:36px;
Peso
400
font-weight:400;
Transformación
Normal
text-transform:none;
Estilo
Normal
font-style:none;
Decoración
Ninguno
text-decoration:none;
Altura de la Línea
45 px o 1.25 em
line-height:45px;
Espaciado entre letras
8px o 0,5 em
letter-spacing: 0,5 em;
Márgenes
Ninguno
margin:0;
Color
hex #004985​
color:#004985​;
Tipografía
Open Sans
font-family: 'Open Sans', sans-serif;
Tamaño
36 px o 2.25 em
font-size:36px;
Peso
400
font-weight:400;
Transformación
Normal
text-transform:none;
Estilo
Normal
font-style:none;
Decoración
Ninguno
text-decoration:none;
Altura de la Línea
45 px o 1.25 em
line-height:45px;
Espaciado entre letras
8px o 0,5 em
letter-spacing:0.05 em;
Márgenes
Ninguno
margin:0;
H2
Y, viéndole don Quijote de aquella manera, con muestras de tanta felicidad, le dijo: Sábete, Sancho, que no es un hombre más que otro.
Color
hex #333333
color:#333333;
Tipografía
Montserrat
font-family: 'Montserrat', sans-serif;
Tamaño
24 px o 1.5 em
font-size:24px;
Peso
500
font-weight:500;
Transformación
Normal
text-transform:none;
Estilo
Normal
font-style:none;
Decoración
Ninguno
text-decoration:none;
Altura de la Línea
36 px o 1.5 em
line-height:24px;
Espaciado entre letras
8px o 0,5 em
letter-spacing: 0.05 em;
Márgenes
Ninguno
margin:0;
Color
hex #333333
color:#333333;
Tipografía
Montserrat
font-family: 'Montserrat', sans-serif;
Tamaño
24 px o 1.5 em
font-size:36px;
Peso
500
font-weight:500;
Transformación
Normal
text-transform:none;
Estilo
Normal
font-style:none;
Decoración
Ninguno
text-decoration:none;
Altura de la Línea
36 px o 1.5 em
line-height:20px;
Espaciado entre letras
8px o 0,5 em
letter-spacing:0.05 em;
Márgenes
Ninguno
margin:0;
H3
Y, viéndole don Quijote de aquella manera, con muestras de tanta felicidad, le dijo: Sábete, Sancho, que no es un hombre más que otro.
Color
hex #333333
color:#333333;
Tipografía
Montserrat
font-family: 'Montserrat', sans-serif;
Tamaño
20 px o 1.25 em
font-size:20px;
Peso
500
font-weight:500;
Transformación
Normal
text-transform:none;
Estilo
Normal
font-style:none;
Decoración
Ninguno
text-decoration:none;
Altura de la Línea
30 px o 1.5 em
line-height:30px;
Espaciado entre letras
8px o 0,5 em
letter-spacing: 0.05 em;
Márgenes
Ninguno
margin:0;
Color
hex #333333
color:#333333;
Tipografía
Montserrat
font-family: 'Montserrat', sans-serif;
Tamaño
20 px o 1.25 em
font-size:20px;
Peso
500
font-weight:500;
Transformación
Normal
text-transform:none;
Estilo
Normal
font-style:none;
Decoración
Ninguno
text-decoration:none;
Altura de la Línea
30 px o 1.5 em
line-height:30px;
Espaciado entre letras
8px o 0,5 em
letter-spacing:0.05 em;
Márgenes
Ninguno
margin:0;
H4
Y, viéndole don Quijote de aquella manera, con muestras de tanta felicidad, le dijo: Sábete, Sancho, que no es un hombre más que otro.
Color
hex #004985
color:#004985;
Tipografía
Open Sans
font-family: 'Open Sans', sans-serif;
Tamaño
22 px o 1.375 em
font-size:22px;
Peso
300
font-weight:300;
Transformación
Normal
text-transform:none;
Estilo
Normal
font-style:none;
Decoración
Ninguno
text-decoration:none;
Altura de la Línea
24 px o 1.1 em
line-height:24px;
Espaciado entre letras
8px o 0,5 em
letter-spacing: 0.05 em;
Márgenes
Ninguno
margin:0;
Color
hex #004985​
color:#004985​;
Tipografía
Open Sans
font-family: 'Open Sans', sans-serif;
Tamaño
22 px o 1.375 em
font-size:22px;
Peso
300
font-weight:300;
Transformación
Normal
text-transform:none;
Estilo
Normal
font-style:none;
Decoración
Ninguno
text-decoration:none;
Altura de la Línea
24 px o 1.1 em
line-height:24px;
Espaciado entre letras
8px o 0,5 em
letter-spacing:0.05 em;
Márgenes
Ninguno
margin:0;
H5
Y, viéndole don Quijote de aquella manera, con muestras de tanta felicidad, le dijo: Sábete, Sancho, que no es un hombre más que otro.
Color
hex #004985
color:#004985;
Tipografía
Montserrat
font-family: 'Montserrat', sans-serif;
Tamaño
15 px o 0.938 em
font-size:15px;
Peso
500
font-weight:500;
Transformación
Normal
text-transform:none;
Estilo
Normal
font-style:none;
Decoración
Ninguno
text-decoration:none;
Altura de la Línea
22 px o 1.5 em
line-height: 22 px;
Espaciado entre letras
8px o 0,5 em
letter-spacing: 0.05 em;
Márgenes
Ninguno
margin:0;
Color
hex #004985​
color:#004985​;
Tipografía
Montserrat
font-family: 'Montserrat', sans-serif;
Tamaño
15 px o 0.938 em
font-size:15px;
Peso
500
font-weight:500;
Transformación
Normal
text-transform:none;
Estilo
Normal
font-style:none;
Decoración
Ninguno
text-decoration:none;
Altura de la Línea
22 px o 1.5 em
line-height:22px;
Espaciado entre letras
8px o 0,5 em
letter-spacing:0.05 em;
Márgenes
Ninguno
margin:0;
H6
Y, viéndole don Quijote de aquella manera, con muestras de tanta felicidad, le dijo: Sábete, Sancho, que no es un hombre más que otro.
Color
hex #333333
color:#333333;
Tipografía
Montserrat
font-family: 'Montserrat', sans-serif;
Tamaño
12 px o 0.75 em
font-size:12px;
Peso
400
font-weight:400;
Transformación
Normal
text-transform:none;
Estilo
Normal
font-style:none;
Decoración
Ninguno
text-decoration:none;
Altura de la Línea
18 px o 1.5 em
line-height:18px;
Espaciado entre letras
8px o 0,5 em
letter-spacing: 0.05 em;
Márgenes
Ninguno
margin:0;
Color
hex #004985​
color:#004985​;
Tipografía
Montserrat
font-family: 'Montserrat', sans-serif;
Tamaño
12 px o 0.75 em
font-size:12px;
Peso
400
font-weight:400;
Transformación
Normal
text-transform:none;
Estilo
Normal
font-style:none;
Decoración
Ninguno
text-decoration:none;
Altura de la Línea
18 px o 1.5 em
line-height:18px;
Espaciado entre letras
8px o 0,5 em
letter-spacing:0.05 em;
Márgenes
Ninguno
margin:0;
p
Y, viéndole don Quijote de aquella manera, con muestras de tanta felicidad, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro. Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca. Así que, no debes congojarte por las desgracias que a mí me suceden, pues a ti no te cabe parte de ellas.
Color
hex #000000
color:#000000;
Tipografía
Montserrat
font-family: 'Montserrat', sans-serif;
Tamaño
16 px o 1 em
font-size:16px;
Peso
300
font-weight:300;
Transformación
Normal
text-transform:none;
Estilo
Normal
font-style:none;
Decoración
Ninguno
text-decoration:none;
Altura de la Línea
19 px o 1.2 em
line-height:19px;
Espaciado entre letras
8px o 0,5 em
letter-spacing: 0.05 em;
Márgenes
Ninguno
margin:0;
Color
hex #000000
color:#000000;
Tipografía
Montserrat
font-family: 'Montserrat', sans-serif;
Tamaño
16 px o 1 em
font-size:16px;
Peso
300
font-weight:300;
Transformación
Normal
text-transform:none;
Estilo
Normal
font-style:none;
Decoración
Ninguno
text-decoration:none;
Altura de la Línea
19 px o 1.2 em
line-height:19px;
Espaciado entre letras
8px o 0,5 em
letter-spacing:0.05 em;
Márgenes
Ninguno
margin:0;

Botones

Background Color
hex #004985
color:#004985;
hover Background Color
hex #0065B8
color:#0065B8;
Hover Animation
Growth
Radio del borde
20 px (en % no funciona)
border-radius:20px;
Relleno
px: 10A 15> 10v 12<
padding: 10px 15px 12px;
Color
hex #ffffff
color:#ffffff;
Tipografía
Montserrat
font-family: 'Montserrat', sans-serif;
Tamaño
15 px o 0.938 em
font-size:15px;
Peso
500
font-weight:500;
Transformación
Normal
text-transform:none;
Estilo
Normal
font-style:none;
Decoración
Ninguno
text-decoration:none;
Altura de la Línea
24 px o 1.5 em
line-height:24px;
Espaciado entre letras
32px o 2 em
letter-spacing: 0.2 em;
Márgenes
Ninguno
margin:0;
Background Color
hex #004985
color:#004985;
hover Background Color
hex #0065B8
color:#0065B8;
Hover Animation
Growth
Radio del borde
20 px (en % no funciona)
border-radius:20px;
Relleno
px: 10A 15> 10v 12<
padding: 10px 15px 12px;
Color
hex #ffffff
color:#ffffff;
Tipografía
Montserrat
font-family: 'Montserrat', sans-serif;
Tamaño
15 px o 0.938 em
font-size:15px;
Peso
500
font-weight:500;
Transformación
Normal
text-transform:none;
Estilo
Normal
font-style:none;
Decoración
Ninguno
text-decoration:none;
Altura de la Línea
24 px o 1.5 em
line-height:24px;
Espaciado entre letras
32px o 2 em
letter-spacing: 0.2 em;
Márgenes
Ninguno
margin:0;

Formulario