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

Haz clic aquí
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

Indícanos tus datos de contacto:
Demuestra tu conocimiento sobre DFUSION
Cuéntanos sobre el posible proyecto
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
Los íconos únicamente deben ser tomados de fontawesome y deben estar en las medidas y color especificados a continuación
Dar click aquí para acceder a la galería 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
Los íconos únicamente deben ser tomados de fontawesome y deben estar en las medidas y color especificados en el punto anterior
Dar click aquí para acceder a la galería de íconos
Tamaño Ícono
16 px
ul li:before
{content:""; font-size:16px;}
Tipografía de ícono
Font Awesome Free
li::before {content: "\f054"; font-style: normal;}
Sangría de Texto : 7
Espaciado intermedio li : 7
Alineación texto: Izquierda
Color Ícono (tmb hover)
#999999
ul li:before
{content:""; color:#999999;}
Separador:
Desactivado
Alineación ícono:
Centro
Color texto (tmb hover)
hex #525252
color:#525252;
Tipografía
Open Sans
font-family: 'Open Sans', sans-serif;
Tamaño
16 px o 1 em
font-size:16px;
Peso
500
font-weight:500;
Transformación
Normal
text-transform:none;
Estilo
Cursiva
font-style: italic;
Decoración
Ninguno
text-decoration:none;
Altura de la Línea
22 px o 1.4 em
line-height:24px;
Espaciado entre letras
0px o 0 em
letter-spacing: 0 em;
Márgenes
Ninguno
margin:0;

Descagables

Acordeón

Identificador Visual

Identificador Visual de Marca

Identificador Cuadrado a Color

Descargar JPG
Descargar PNG
Descargar Vector

Identificador Cuadrado Positivo

Descargar JPG
Descargar PNG
Descargar Vector

Identificador Cuadrado Negativo

Descargar JPG
Descargar PNG
Descargar Vector

Identificador Apaisado a Color

Descargar JPG
Descargar PNG
Descargar Vector

Identificador Apaisado Positivo

Descargar JPG
Descargar PNG
Descargar Vector

Todos en un Archivo

Descargar Vector

Implementación del Identificador Visual de Marca

Implementación de co-branding

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

Estilos de Infografías

Estilo de Imagen de Infografía

Tooltip

Convenciones

Mailchimp

Cualidades y componentes únicos de Marca

Header and Footer

Templates

Automatizaciones

Creative Assistant

Surveys

One to One CRM

SMS

A/B Testing

Mandrill

Estilos de Post Redes Sociales

Buyer Persona

Estructura de Posteo

Tono

Whastapp Business

Youtube

Linkedin

Facebook

Twitter

Hashtags

Protocolo de Escalamiento

Ventas

Soporte CRM

Asesoría

Stock

Fallas

Métricas y KPI's

KPI's

Indicadores de Éxito - Growth Hacking

Backlinks y PR

Cookies

Retargeting

Remárketing

Ads

Google

Youtube

Facebook

Linkedin

Twitter

Insights

BenchMarking

Otros

Gráficas Complementarias

Gráficas a Color

El tamaño .jpg y .png de las siguientes gráficas está basado en la medida más usada -y de mayor tamaño- para páginas web: 1920 x 1080 px. Así mismo se ha exportado como RGB Optimizado para web en una calidad de 100%. Para ajustar el tamaño según sus necesidades, por favor descargar y ajustar el vector .ai

Gráfica
SAC

click para ampliar
Descargar Slider
Descargar JPG
Descargar PNG
Descargar Vector

Gráfica
Seguridad

click para ampliar
Descargar Slider
Descargar JPG
Descargar PNG
Descargar Vector

Gráfica
Automatización

click para ampliar
Descargar Slider
Descargar JPG
Descargar PNG
Descargar Vector

Gráfica
Control

click para ampliar
Descargar Slider
Descargar JPG
Descargar PNG
Descargar Vector

Gráfica
Respaldo

click para ampliar
Descargar Slider
Descargar JPG
Descargar PNG
Descargar Vector

Gráficas en Escala de Grises

El tamaño .jpg y .png de las siguientes gráficas está basado en la medida más usada -y de mayor tamaño- para páginas web: 1920 x 1080 px. Para ajustar el tamaño según sus necesidades, por favor descargar y ajustar el vector .ai que está comprimido en un .zip

Gráfica
Servicio SAC

click para ampliar
Descargar JPG
Descargar PNG
Descargar Vector

Gráfica
Responsabilidad

click para ampliar
JGP
PNG
Descargar Vector

Gráfica
Trabajo en Equipo

click para ampliar
Descargar JPG
Descargar PNG
Descargar Vector

Gráfica
Integridad

click para ampliar
Descargar JPG
Descargar PNG
Descargar Vector

Gráfica
Integridad Beta

click para ampliar
Descargar JPG
Descargar PNG
Descargar Vector

Gráfica
Exitosos

click para ampliar
Descargar JPG
Descargar PNG
Descargar Vector

Banner Firma Digital

Usos correctos e incorrectos

índice