Guía de estilos
INTRODUCCIÓN
La Guía de estilo web del portal “Junta de Castilla y León” tiene como propósito establecer un marco
de intervención controlado en su interfaz.
Para ello se han conformado una serie de patrones que faciliten el desarrollo coherente y comprensible de los contenidos, que generen una línea homogénea y representativa del diseño desde el concepto de conjunto, pero definiendo la pluralidad en los contenidos y que consoliden el óptimo mantenimiento del portal. La intención ha sido crear un documento de consulta rápida
que permita asistir a los usuarios y preservar la estructura visual del portal.
EL ESCUDO
El escudo representa el elemento visual más importante y emblemático del portal, por este motivo es fundamental respetar una serie de normas en cuanto a su utilización y al espacio en el que se ubica.
- El escudo no puede ser modificado. No se deben alterar propiedades como el cromatismo, brillo, contraste, opacidad, nitidez cualquier otro aspecto que comprometa su imagen. Es decir, debe permanecer en su formato original, tal como se muestra en la cabecera.
- El escudo no puede ser objeto de recursos decorativos. Su presencia se ciñe a una cuestión identificativa de carácter institucional no a un complemento estético.
- El escudo tiene un área de seguridad que no puede ser invadido. Si bien no hay una distancia mínima precisa, debe poseer el suficiente "aire" o margen como para que no establezca contacto con otro elemento. Es necesario que se presente íntegro, no puede ser recortado.
ESCUDO Y MARCA TERRITORIO
Como norma especial cabe destacar que la marca Territorio jamás podrá exceder el 70% de la altura del escudo en el caso de que ambos se encuentren en la misma página
COLOR
El conjunto de la web destaca por el empleo de un color predominante, el cual responde a un sentido claramente institucional e identificativo seleccionado a partir del escudo de la Junta. Un rojo de gama media, respaldado por diferentes tonalidades de sutiles muestras neutras, grises y un verde de presencia ocasional. En la Prehome se da una mayor variedad cromática, la diferencia respecto a los portales queda patente, se pretende facilitar la navegación con accesos de tonos pastel a contenidos claramente diferenciados y reforzar el significado de una web plural.
PORTALES
- PRINCIPAL
#ba283b
rgb(186, 40, 59)
- #f6f6f6
rgb(246, 246, 246)
- #333333
rgb(51, 51, 51)
- #666666
rgb(102, 102, 102)
- #cccccc
rgb(204, 204, 204)
- #e3eeee
rgb(227, 238, 238)
PREHOME
- #ECF0F4
(236,240,244)
- #EBECF5
(235,236,245)
- #EBF4F5
(235,244,245)
- #F8F1F7
(248,241,247)
- #F2F4EC
(242,244,236)
- #FAF2EB(250,242,235)
TIPOGRAFÍA
Se han seleccionado dos familias tipográficas para jcyl.es:
Lato y Lora. Extraídas de Google fonts, Lora es un serif contemporánea bien equilibrada con raíces en la caligrafía. Es un tipo de letra de texto con contraste moderado muy adecuado para el cuerpo del texto. Lato es un tipo de letra de la familia san serif, los detalles semi-redondeados de las cartas dan Lato una sensación de calor, mientras que la estructura fuerte proporciona estabilidad y seriedad. Se ha empleado en títulos y componentes de navegación de la web. Ambas confieren al conjunto equilibrio, sobriedad y legibilidad, pero también elegancia, cercanía y modernidad.
H1- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend leo ut ullamcorper faucibus.
- Lato
- 30px
- Negrita
- Alineado a la izquierda
H2- Lacinia magna vulputate sed felis elementum nec
- Lato
- 25px
- Negrita
- Alineado a la izquierda
H2- Lacinia magna vulputate sed felis elementum nec
En la prehome y portales
- Lato
- 25px
- Negrita
- Alineado al centro
H3- Aliquam porttitor lacinia magna, vulputate varius justo vulputate sed
- Lora
- 20px
- Negrita
- Alineado a la izquierda
- Cursiva
H4- Mauris dignissim tortor ut semper tristique
- Lora
- 18px
- Regular
- Alineado a la izquierda
PÁRRAFO
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque sit dolorum repellat laborum, illum nesciunt eius accusantium aliquam iste, ipsum labore excepturi numquam obcaecati iure tempora, dolore vero perspiciatis eligendi!
- Lora
- 16px
- Regular
- Alineado a la izquierda
-
- LISTADO
- Illum nesciunt eius
- Lorem ipsum dolor sit amet
- dolore vero perspiciatis eligendi!
- Aliquam porttitor lacinia magna, vulputate varius justo vulputate sed
- Lora
- 16px
- Regular o Negrita
- Alineado a la izquierda
- Cursiva
BOTONES Y ELEMENTOS DE NAVEGACIÓN
Existe una gama extensa de botones, enlaces y otros elementos de navegación distribuidos a lo largo de toda la web y cuyas características están ajustadas a los contenidos que los albergan como se puede comprobar en el catálogo de componentes. Como ejemplos de los modelos más recurridos y significativos cabría destacar los siguientes:
BOTONES
PAGINACIÓN