Inicio / Kit de diseño
La marca,
pieza por pieza.
Todo lo que compone este sitio: el emblema y sus reglas, los colores, la tipografía, la retícula y cada componente. Si vas a crear una pieza nueva —una publicación, un afiche, una página— empezá por acá.
El emblema
No es un logotipo: es un signo protector amparado por los Convenios de Ginebra. Su uso está regulado por ley y su mal uso es una infracción.
Única forma permitida
Sí
Cruz roja sobre fondo blanco, con los brazos iguales. Siempre derecha, nunca inclinada. Con aire libre alrededor equivalente a un brazo de la cruz.
No
No se deforma, no se rota, no cambia de color, no se le agregan sombras ni degradados, y no se usa como elemento decorativo ni como marca de agua.
Color
Cada color es una variable CSS. Usá siempre la variable, nunca el código pegado a mano: si un día cambia, cambia en todo el sitio de una vez.
Rojo
–rojo
#ED1C24
Rojo activo
–rojo-hover
#C4141B
Tinta
–tinta
#14161A
Tinta 70
–tinta-70
#454B54
Tinta 50
–tinta-50
#6E757F
Campo
–campo
#F3F4F6
Línea
–linea
#DCDFE4
Papel
–papel
#FFFFFF
Niveles de alerta
–n-verde · Sin alerta
–n-amarillo · Aviso
–n-naranja · Alerta
–n-rojo · Emergencia
Tipografía
Tres familias, cada una con un trabajo. No se mezclan ni se sustituyen.
Titulares
Archivo
Ancha y pesada. Solo para títulos y cifras grandes. Es variable: se ajusta el ancho y el peso, no se usa negrita falsa.
Texto
IBM Plex Sans
Todo el cuerpo de texto. Legible en párrafos largos y en pantallas chicas.
Datos
IBM Plex Mono
Rótulos, fechas, teléfonos y etiquetas. Siempre en mayúsculas y con espaciado entre letras.
Retícula y espaciado
Ancho máximo
–max: 1368px
Todas las secciones se alinean a este ancho. Ninguna se sale ni se queda corta.
Margen lateral
–pad: 0 · 10px en móvil
Un solo valor para todo el sitio. Nunca poner un margen lateral suelto en una sección.
Aire entre secciones
clamp(52px, 7vw, 88px)
Los fondos alternan entre blanco y gris para separar bloques sin líneas.
Componentes
Botones
Rótulos y etiquetas
Tarjeta
Título de la tarjeta
Una o dos líneas de texto explicando de qué se trata.
IrTabla
| Concepto | Valor |
|---|---|
| Emergencias | 125 |
| PBX | 2381-6565 / 66 |
Cómo se escribe
Voseo guatemalteco
«Buscá», «sumate», «tené listo». Nunca «busca» ni «busque». Es la forma en que habla la gente a la que le hablamos.
Concreto antes que solemne
«Q200 son los insumos de una atención prehospitalaria», no «tu aporte hace la diferencia». Cada cifra ligada a algo que sale a la calle.
La emergencia primero
Si alguien llega en una urgencia, el 125 tiene que estar a la vista antes que cualquier otra cosa.
Sin promesas que no se cumplen
Si un formulario no envía a ningún lado, se dice. Si un dato está sin confirmar, se avisa.