Manual Web de SAC Seguridad
Última Actualización: Martes 20 Octubre 2020
Versión 0.2
Última Actualización: Jueves 22 Octubre 2020
Version 0.3
Visual para Desktop
Visual para Mobile
Todos los estilos de este Manual fueron indicados y avalados por Gerencia General
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;
Card de Colaborador
Formulario
Color de Formulario
hex #E5E5E5
background-color:#E5E5E5;
Espaciado entre Columnas
15
Espaciado entre Filas
15
Espaciado de Etiqueta
5
Color de la Marca de Campo obligatorio
hex #004985
color:#004985;
Radio de Borde Campo
5 px
border-radius: 5px;
Radio de Borde Formulario
10 px
border-radius: 10px;
Relleno
20px 20px 20px 20px
padding: 20px;
Márgenes
11px 0px 0px 0px
margin: 11px 0 0;
Color de la Marca de Campo obligatorio
hex #004985
color:#004985;
Color Etiqueta
hex #525252
color:#525252;
Tipografía Etiqueta
Open Sans
font-family: 'Open Sans', sans-serif;
Tamaño Etiqueta
16 px o 1 em
font-size:16px;
Peso Etiqueta
500
font-weight:500;
Transformación Etiqueta
Normal
text-transform:none;
Estilo Etiqueta
Cursiva
font-style:italic;
Decoración Etiqueta
Ninguno
text-decoration:none;
Altura de la Línea Etiqueta
18 px o 1.125 em
line-height:18px;
Espaciado entre letras Etiqueta
0.3
letter-spacing: 0.03em;
Márgenes Etiqueta
Ninguno
margin:0;
Color Campo
hex #333333
color:#333333;
Tipografía Campo
Open Sans
font-family: 'Open Sans', sans-serif;
Tamaño Campo
16 px o 1 em
font-size:16px;
Peso Campo
500
font-weight:500;
Transformación Campo
Normal
text-transform:none;
Estilo Campo
Normal
font-style:none;
Decoración Campo
Ninguno
text-decoration:none;
Altura de la Línea Campo
24 px o 1.5 em
line-height:24px;
Espaciado entre letras Campo
0.5
letter-spacing: 0.05em;
Color de Fondo Campo
hex #ffffff
background-color:#ffffff;
Color Botón
hex#004985
color:#004985;
Tipografía Botón
Montserrat
font-family: 'Montserrat', sans-serif;
Tamaño Botón
18 px o 1 em
font-size:16px;
Peso Botón
600
font-weight:600;
Transformación Botón
Normal
text-transform:none;
Estilo Botón
Normal
font-style:none;
Decoración Botón
Ninguno
text-decoration:none;
Altura de la Línea Botón
19 px o 1.188em
line-height:19px;
Espaciado entre letras Botón
0.5
letter-spacing: 0.05em;
Color de Fondo Botón
hex #E5E5E5
background-color:#E5E5E5;
Color Mensaje Autom.
hex #004985
color:#004985;
Tipografía Mensaje Autom.
Open Sans
font-family: 'Open Sans', sans-serif;
Tamaño Mensaje Autom.
14 px o 0.875em
font-size:14px;
Peso Mensaje Autom.
500
font-weight:500;
Transformación Mensaje Autom.
Normal
text-transform:none;
Estilo Mensaje Autom.
Cursiva
font-style:italic;
Decoración Mensaje Autom.
Ninguno
text-decoration:none;
Altura de la Línea Mensaje Autom.
18 px o 1.125em
line-height:18px;
Espaciado entre letras Mensaje Autom.
0.5
letter-spacing: 0.05em;
Color Steps
hex #333333
color:#333333;
Tipografía Steps
Open Sans
font-family: 'Open Sans', sans-serif;
Tamaño Steps
16 px o 1 em
font-size:16px;
Peso Steps
500
font-weight:500;
Transformación Steps
Normal
text-transform:none;
Estilo Steps
Normal
font-style:none;
Decoración Steps
Ninguno
text-decoration:none;
Altura de la Línea Steps
24 px o 1.5 em
line-height:24px;
Espaciado entre letras Steps
0.5px o 0.031em
letter-spacing: 0.031em;
Color de Fondo Steps
hex #ffffff
background-color:#ffffff;
Imágenes

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;
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;
Pie de Texto y Multimedia
Símbolos e Íconos
Estándar de Tamaños de Íconos
16 px : 1 em
24 px : 1.5 em
32 px : 2 em
48 px :3 em
64 px : 4 em
80 px : 5 em
96 px : 6 em
112 px : 7 em
128 px : 8 em
160 px : 10 em
Color
hex #999999
color:#999999;
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 #999999
color:#999999;
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;
Listas
- Elemento de lista 1 montserrat 18 peso 500
- Elemento de lista nº2
- Elemento de lista nº3
- Elemento de lista nº3
- Elemento de lista nº3
- Elemento de lista nº3
- Elemento de lista nº3
- Elemento de lista nº3
- Elemento de lista nº3