Manual Web de SAC Seguridad

Última Actualización: Lun 5 Oct 2020
Versión 0.0
Última Actualización: Martes 6 Oct​ 2020
Version 0.1
Visual para Desktop
Visual para Mobile
Todos los estilos de este Manual fueron indicados y avalados por Gerencia General

Índice - Da click para ir a la sección​

Medidas basadas en el tamaño óptimo de fuente 16 px = 1 em

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
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
20 px o 1.25 em
line-height:20px;
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
20 px o 1.25 em
line-height:20px;
Espaciado entre letras
8px o 0,5 em
letter-spacing:0,5 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
24 px o 1.5 em
line-height:24px;
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
20 px o 1.25 em
line-height:20px;
Espaciado entre letras
8px o 0,5 em
letter-spacing:0,5 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
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
24 px o 1.5 em
line-height:24px;
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
20 px o 1.25 em
line-height:20px;
Espaciado entre letras
8px o 0,5 em
letter-spacing:0,5 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 #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
24 px o 1.5 em
line-height:24px;
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
20 px o 1.25 em
line-height:20px;
Espaciado entre letras
8px o 0,5 em
letter-spacing:0,5 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 #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
24 px o 1.5 em
line-height:24px;
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
20 px o 1.25 em
line-height:20px;
Espaciado entre letras
8px o 0,5 em
letter-spacing:0,5 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
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
24 px o 1.5 em
line-height:24px;
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
20 px o 1.25 em
line-height:20px;
Espaciado entre letras
8px o 0,5 em
letter-spacing:0,5 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.
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
24 px o 1.5 em
line-height:24px;
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
20 px o 1.25 em
line-height:20px;
Espaciado entre letras
8px o 0,5 em
letter-spacing:0,5 em;
Márgenes
Ninguno
margin:0;

Botón

Card de Colaborador

Formulario

Imágenes

Pie de Texto y Multimedia

Símbolos e Íconos

Listas

Descagables

Acordión

Identificador Visual

Identificador Visual de Marca

Implementación del Identificador Visual de Marca

Implementación de co-branding

Estilos de Catálogo

Card de Producto

Página de Línea

Títulos de Página

Página de Producto Individual

Filtros Catálogo

Estilos Recursos

Card de Contenidos

Multimedia

Optimización de Carga

Estructura y Ordenamiento

Listas

SEO Optimización

Excerpt

Título

Contenido

Inclusiones