Guía Gráfica
Este es un espacio reservado para la bajada o descripción ejecutiva del documento. Resume aquí el alcance de la guía, a quién está dirigida y cómo debe usarse cada bloque.
- Proyecto
- Proyecto Ejemplo ®
- Liderazgo
- Nombre del Cliente
- Categoría
- Industria / Sector
- Territorio
- Ubicación / Mercado
- Elaborado por
- Nombre del Estudio
- Documento
- Guía de Estilos · Informes
Cabeceras según Tipo de Documento
El sistema tiene dos armazones de navegación. No se mezclan: cada tipo de documento usa el suyo.
Una sola fila, sin salto de línea, fija al hacer scroll. Contenido centrado a 950px.
Índice fijo a la izquierda con el logo de marca. Contenido a 1240px.
Parámetros de cada Armazón
| Parámetro | Informes | Manuales de Normas |
|---|---|---|
| Cuándo se usa | Informes, diagnósticos y propuestas | Manuales de normas gráficas |
| Contenedor máximo | 950px, centrado | 1240px, centrado |
| Padding del contenedor | clamp(20px, 5vw, 45px) | clamp(20px, 4vw, 45px) |
| Navegación | Menú superior fijo (sticky top 0), una sola fila, sin salto | Índice lateral fijo (sticky top 24px), columna de 210px |
| Tipografía del menú | Jost 500 · 10.5px · tracking .1em · gap 12px | Jost 500 · 11px · tracking .12em · ítems separados por línea fina |
Jerarquía de Textos
Titular Principal
Título de Sección
Subtítulo de Bloque
Encabezado de Tarjeta
Este es el texto de párrafo estándar del documento. Mantiene una interlínea de 1.5 y un peso liviano para lecturas extensas. Dentro del párrafo puede aparecer texto destacado en peso medio y un término con tooltipDefinición breve del término. Aparece al pasar el cursor sobre la palabra subrayada. para aclarar conceptos.
Resaltado sólido: texto sobre fondo taupe · Resaltado suave: texto sobre fondo crema
Proporciones de Columnas
4 Columnas · 25 / 25 / 25 / 25
Texto de ejemplo para visualizar la distribución del contenido en cuatro columnas.
Texto de ejemplo para visualizar la distribución del contenido en cuatro columnas.
Texto de ejemplo para visualizar la distribución del contenido en cuatro columnas.
Texto de ejemplo para visualizar la distribución del contenido en cuatro columnas.
3 Columnas · 33 / 33 / 33
Bloque para revisar la lectura en tres columnas paralelas sin contenedor.
Bloque para revisar la lectura en tres columnas paralelas sin contenedor.
Bloque para revisar la lectura en tres columnas paralelas sin contenedor.
2 Columnas · 50 / 50
Permite comparar dos conceptos clave en paralelo manteniendo la alineación superior.
Permite comparar dos conceptos clave en paralelo manteniendo la alineación superior.
1 Tercio / 2 Tercios · 33 / 66
Resumen lateral corto para contextualizar los datos principales.
Explicación detallada del bloque principal. Mantiene una lectura cómoda y una jerarquía clara entre la columna secundaria y el texto de mayor desarrollo.
Columnas con Separador Vertical
Columna con línea divisoria sutil para segmentar temas dentro de un mismo bloque.
Columna con línea divisoria sutil para segmentar temas dentro de un mismo bloque.
Columna con línea divisoria sutil para segmentar temas dentro de un mismo bloque.
Citas, Listas y Proceso
Párrafo de apertura del bloque editorial. Sirve para introducir el tema antes de una cita destacada y establecer el contexto general de la sección.
Espacio reservado para una cita destacada. Debe ser breve, afirmativa y resumir la idea central del bloque.
Párrafo de continuidad después de la cita. Retoma la lectura y desarrolla la consecuencia práctica de la idea planteada arriba.
Lista con Viñetas
- Primer punto de la enumeración de referencia.
- Segundo punto con una extensión algo mayor para probar el salto de línea.
- Tercer punto de la enumeración.
Lista Numerada
- Primer paso del procedimiento descrito.
- Segundo paso, con detalle adicional del alcance.
- Tercer paso y cierre del procedimiento.
Proceso por Fases
Nombre de la Fase
Descripción breve del alcance y los entregables de esta etapa del proceso.
Nombre de la Fase
Descripción breve del alcance y los entregables de esta etapa del proceso.
Nombre de la Fase
Descripción breve del alcance y los entregables de esta etapa del proceso.
Datos y Progreso
Contadores Numéricos
Barras de Progreso · Taupe y Grafito
Tabla Comparativa
| Concepto | Descripción | Valor | Estado |
|---|---|---|---|
| Fila destacada | Descripción del concepto evaluado en esta fila de la tabla. | 00 | Cumple |
| Fila destacada | Descripción del concepto evaluado en esta fila de la tabla. | 00 | En revisión |
| Fila destacada | Descripción del concepto evaluado en esta fila de la tabla. | 00 | Pendiente |
Separadores
1 · Línea fina continua (estándar)
2 · Separador con texto al centro
3 · Línea discontinua (trazos largos)
4 · Línea de puntos marcados
5 · Línea gruesa de énfasis
Alineaciones con Sub-Línea de Acento
Alineado a la Izquierda
Texto de ejemplo con línea de acento inferior.
Alineado al Centro
Texto de ejemplo con línea de acento inferior.
Alineado a la Derecha
Texto de ejemplo con línea de acento inferior.
Tarjetas y Precios
Tarjetas de Artículos
Ago
Ago
Ago
Planes y Precios
Descripción del alcance incluido en este plan y sus principales entregables.
Descripción del alcance incluido en este plan y sus principales entregables.
Descripción del alcance incluido en este plan y sus principales entregables.
Contenedores Encajonados
Caja Individual · Ancho Completo
Contenedor independiente con marco de borde, fondo limpio y espacio de seguridad propio, sin depender de una grilla de columnas.
Caja en Grilla · A
A diferencia de las columnas limpias, la caja agrega borde y fondo propios.
Caja en Grilla · B
Úsala para destacar hallazgos concretos o conclusiones parciales del documento.
Caja de Veredicto / Resumen Ejecutivo
Bloque de cierre destacado, con borde perimetral sutil y fondo suave, integrado con el resto del sistema.
Preguntas Frecuentes
Pregunta frecuente número uno
Respuesta de ejemplo para la pregunta anterior. Este espacio admite dos o tres líneas de texto explicativo sin romper el ritmo del acordeón.
Pregunta frecuente número dos
Respuesta de ejemplo para la pregunta anterior. Este espacio admite dos o tres líneas de texto explicativo sin romper el ritmo del acordeón.
Pregunta frecuente número tres
Respuesta de ejemplo para la pregunta anterior. Este espacio admite dos o tres líneas de texto explicativo sin romper el ritmo del acordeón.
Pregunta frecuente número cuatro
Respuesta de ejemplo para la pregunta anterior. Este espacio admite dos o tres líneas de texto explicativo sin romper el ritmo del acordeón.
Título del Llamado a la Acción
Texto breve de cierre que indica el siguiente paso esperado del lector, con el contacto o el enlace correspondiente.