ESTILO
GRAFICO
Fonts
Coolvetica
abcdefghijklmño
pqrstuvwxyz
1234567890
ABCDEFGHIJKLMNÑ
OPQRSTUVWXYZ
1234567890
Enfoque
En la planteación de marca generada la estrategia y el diseño de branding la fuente Coolvetica, esta enfocada en TITULOS
Tambien esta hecha para generar SUBTITULOS creativos y combinaciones de texto perfectas para el uso de cuadros didacticos y componentes
Desktop 1200px
Heading Xlarge
55px
Normal
Heading large
45px
Normal
Heading Medium
35px
Normal
#0F0F0F
Los titulos deben de tener la siguiente configuración
Letter_0 Em Line_1 Em
Example 55px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed porttitor lacus. Ut sagittis ut ex sit amet ullamcorper. Vivamus a enim quis leo malesuada
Height_73 - Width_Relative
Example 45px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed porttitor lacus. Ut sagittis ut ex sit amet ullamcorper. Vivamus a enim quis leo malesuada
Height_65 - Width_Relative
Example 35px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed porttitor lacus. Ut sagittis ut ex sit amet ullamcorper. Vivamus a enim quis leo malesuada
Height_51 - Width_Relative
NOTA: Los datos Height y Width son estrictamente usables para textos de una sola linea, el GAP minimo entre algun container/frame o stack es de 16
Componentes de Titulos Modificables
Example 55px
Example 45px
Example 35px
Que onda luis
Gotham Font Family
abcdefghijklmño
pqrstuvwxyz
1234567890
ABCDEFGHIJKLMNÑ
OPQRSTUVWXYZ
1234567890
Enfoque
En la planteación de marca generada la estrategia y el diseño de branding la fuente Gotham Book, esta enfocada en Cuerpos de texto
También esta hecha para generar efectos de texto largos, sin que se cargue la vista al lector, ideal para el apartado de blog, información de los servicios etc
En el uso de la fuente, al buscar resaltar palabras clave podemos usar Gotham Bold
Desktop 1200px
Heading Xlarge
25px
Normal
Heading large
20px
Normal
Heading Medium
15px
Normal
#4A4A4A
El cuerpo de texto debe de tener la siguiente configuración
Letter_0 Em Line_1.2 Em
Example 25px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed porttitor lacus. Ut sagittis ut ex sit amet ullamcorper. Vivamus a enim quis leo malesuada
Height_39 - Width_Relative
Example 20px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed porttitor lacus. Ut sagittis ut ex sit amet ullamcorper. Vivamus a enim quis leo malesuada
Height_33 - Width_Relative
Example 15px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed porttitor lacus. Ut sagittis ut ex sit amet ullamcorper. Vivamus a enim quis leo malesuada
Height_24 - Width_Relative
NOTA: Los datos Height y Width son estrictamente usables para textos de una sola linea, el GAP minimo entre algun container/frame o stack es de 16
Cuerpo de Textos Componentes Modificables
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed porttitor lacus. Ut sagittis ut ex sit amet ullamcorper. Vivamus a enim quis leo malesuada
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed porttitor lacus. Ut sagittis ut ex sit amet ullamcorper. Vivamus a enim quis leo malesuada
Color
Para buscar trasmitir un mensaje serio y tambien conectar con el estilo de marca IQS buscamos enfocarnos en que el dominante sera el Negro/Gris con toques Azul IQS y Para botones el color Naranja IQS
Botones
Para buscar mantener coherencia los generamos los mismos componentes para botones, degradados, y un sin fin de assets que podemos usar
Bundle
Example 35px
mcorper. Vivamus a enim quis leo malesuadaLorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed porttitor lacus. Ut sagittis ut ex sit amet ullamcorper. Vivamus a enim quis leo malesuada
Example 35px
mcorper. Vivamus a enim quis leo malesuadaLorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed porttitor lacus. Ut sagittis ut ex sit amet ullamcorper. Vivamus a enim quis leo malesuada