Menú jcyl.es

Junta de Castilla y León

Catálogo de componentes - Junta de Castilla y León

  • Zona privada
  • Contacto

Idiomas

Menu jcyl.es

Mi cuenta

usuario2017xxx

usuario@gmail.com

Mi cuenta

Cerrar sesión

Guía de estilos y componentesde la Junta de Castilla y León

Redes sociales

  • Facebook
  • Twitter
  • Youtube

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 alespacio 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 indentificativa de carácter intistucional 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 família 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 equilibrío, 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

Letra seleccionada:A

  • Ilunion WCAG 2.0 WAI - AA