Se encuentra en:
Gama cromática
LIBP-0239 (Libro de pautas)
- Área: Manual de estilo para la SGISI
- Tipo de pauta: Directriz
- Carácter de la pauta: Obligatoria
- Fases del ciclo de vida: Construcción del Sistema de Información (CSI)
- Perfiles: Programador
Este libro de pautas define la gama cromática utilizada para la Secretaría General de Innovación y Sociedad de la Información.
Pautas
| Título | Carácter |
|---|---|
| Cabecera de conjunto de enlaces | Obligatoria |
| Títulos de contenidos | Obligatoria |
| Títulos de artículos y noticias | Obligatoria |
| Pie de página | Obligatoria |
| Mensajes de alerta, error e información | Obligatoria |
Cabecera de conjunto de enlaces
Dividir el texto de las cabeceras de conjuntos de enlaces (similar a un menú) en dos partes de longitud similar, dando a la primera el color #383D44, a la segunda #087021 y al fondo #EAEAEA.
Se muestra a continuación un ejemplo de cómo aplicar los colores indicados:
Código html:
<h3>Enlaces
<span class="destacado">Útiles</span>
</h3>
Código CSS:
h3 {
background: none repeat-x scroll left bottom #EAEAEA;
color: #383D44;
}
h3 .destacado {
color: #087021;
}
Títulos de contenidos
Dividir los títulos de los contenidos en dos partes de longitud similar, dando a la primera el color #383D44 y a la segunda #087021.
Ejemplo de uso:
Código html:
<h3>Últimas
<span class="destacado">Noticias</span>
</h3>
Código CSS:
h3 {
background: none repeat-x scroll left bottom #EAEAEA;
color: #383D44;
}
h3 .destacado {
color: #087021;
}
Títulos de artículos y noticias
Utilizar el color #53863F para los títulos de los artículos y noticias que se utilizan como enlaces al contenido completo.
Ejemplo de uso:
Código html:
<a href="#">
<strong>Título de artículo o noticia</strong>
</a>
Código CSS:
a {
color: #53863F;
}
Pie de página
Utilizar el color blanco para el texto y el color #9A9892 para el fondo del pie de página.
Se describe a continuación un ejemplo de uso:
Código html:
<div id="seccion_inferior">
<p>Texto</p>
</div>
Código CSS:
#seccion_inferior {
background-color: #9A9892;
color: white;
text-align: center;
width: 100%;
}
Mensajes de alerta, error e información
Utilizar el color #EEF4EA para el fondo de los mensajes de alerta, error e información.
Ejemplo de un mensaje de error:
Código html:
<p class="wrong">Aviso de error o alerta.</p>
Código CSS:
p.wrong {
background: url("icono.png") no-repeat scroll 5px 5px #EEF4EA;
border: 1px dotted #D1D1D1;
padding-left: 27px;
}
