Identidad y producto

Logo En uso

Una V de mosaico verde —dos diagonales que se encuentran— junto al nombre. Los cuadros evocan píxeles y piezas que encajan: la persona y el empleo.

Área de respeto y tamaños mínimos

Alrededor del logo queda libre al menos el ancho de dos cuadros de la V. Ningún texto ni imagen entra a esa zona.

Usos incorrectos

Tampoco se reacomodan sus partes ni se le cambia la tipografía. Si ninguna versión funciona, usa la de una tinta.

Color En uso

El verde lleva toda la marca. El sitio distingue los espacios con un acento propio: empresa #6b3fa0 y administración #9a4400; no se usan en piezas de marca.

Tipografía En uso

Geist para todo. Dos o tres pesos bastan y las cifras se alinean en columnas.

Fondos y superficies

• Página en gris muy claro; tarjetas blancas con borde fino.
• Translucidez solo en lo que flota, como la cabecera.
• Las fotos muestran personas y lugares reales de trabajo, nunca personas sonriendo a una laptop de banco de imágenes.

Ritmo y movimiento Propuesta

• Transiciones cortas, de 150 a 250 ms. El movimiento explica un cambio; no adorna.
• Quien pide reducir movimiento lo obtiene: se respeta prefers-reduced-motion.
• Logo animado: los cuadros de la V entran por diagonales y se asientan en menos de un segundo. Aún no está producido.

Elementos de soporte

El recurso propio es el mosaico de la V: cuadros verdes con separaciones finas, para fondos parciales y separadores. Sin mascota por ahora: no aporta a un portal de empleo en esta etapa.

Componentes

Toda vista declara sus estados

• Sin permiso: nombra lo que falta
• Cargando: señal visible, nunca «sin resultados»
• Error: qué pasó y reintentar
• Vacío: qué falta y qué hacer
• En curso: control deshabilitado, sin doble envío

Ejemplos En uso

Apertura de país

Empleos digitales en México

Un título, el conteo y un enlace.

La foto lleva su sujeto a la derecha y se funde con la página para que el título quede sobre el velo. Sin texto ni logos dentro de la imagen; en celular la foto va arriba y el texto debajo.

Tarjeta de vacante

El título va primero. Solo se muestra lo que existe: si falta un dato, la tarjeta no deja huecos.

Tarjeta de país

ColombiaPerúChile

Rejilla de 3, 6 o 9 tarjetas, sin huecos.

Accesibilidad

Cumplimos WCAG 2.2 AA como mínimo.

• Contraste de 4.5:1 en texto y 3:1 en controles. Nada se comunica solo con color.
• Todo se opera con teclado, con foco visible. Controles táctiles de 44 px.
• Un h1 por página, etiquetas visibles y el error junto a su campo.
• Texto alternativo en cada imagen con contenido. Sin scroll horizontal a 320 px.

SEO y títulos

Usamos una frase clave solo donde la página de verdad la ofrece. Si una URL pública cambia, la anterior responde 301 a su página más relevante.

Imagen al compartir

Toda página pública comparte una imagen de 1200×630 con el logo, sin texto pequeño: en el celular se ve diminuta.

Correos

• Remitente: Vacantes Digitales <[email protected]>.
• Asunto: dice qué pasó o qué hacer. Sin mayúsculas sostenidas ni emojis.
• Cuerpo: logo, una idea y un solo botón, con el enlace también en texto.

Código para la web

• Ningún color literal en un componente: siempre un token de tokens.cssbrain.
• ui/ guarda las piezas básicas; comp/, las del negocio; el layout monta cabecera y pie.
• El logo se dibuja solo con comp/brand-logo.

.tarjeta {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4);
}