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. La figura de la marca es el embajador.

Embajador de marca En uso

Es un títere de stop motion ficticio: narra los videos del canal y aparece en las imágenes que se ven al compartir el sitio. Sus rasgos no cambian: lentes negros rectangulares, barba corta, cuello de tortuga negro y saco gris oscuro.

• Siempre ficticio: nunca se presenta como reclutador, experto ni persona real, ni promete empleo, entrevista o sueldo.
• Imagen al compartir: la página usa su propia imagen si la tiene (por ejemplo, el hero de cada área o país); si no, la del embajador.
• Nuevas piezas: se generan con estas caras como referencia, sobre fondo blanco con retícula de puntos y el verde solo de acento. El texto se agrega después, con Geist; nunca lo escribe la IA.

Gráficos abstractos En uso

Las páginas de área abren con esculturas 3D abstractas. Son parte del carácter visual de la marca: sobrias, con oficio y sin personas ni pantallas.

Empleos de inteligencia artificial

La forma nace del tema.

Inteligencia artificialDatosDevOpsArte y 3DCiberseguridadContenido

• Formas: orgánicas y diversas, una idea distinta por tema: esferas, cintas, tubos, ondas, láminas, arcos o mallas.
• Color: plata cepillada, oro apagado y morado sobrio sobre un fondo claro casi blanco. Nada saturado ni neón; el verde se queda en el logo y los botones.
• Luz y acabado: luz suave de estudio, metal mate y poca profundidad de campo.
• Encuadre: la forma va arriba y a la derecha; la izquierda queda libre para el título.
• Nunca: texto, logos, íconos, pantallas, personas o manos dentro de la imagen.

Las páginas de país usan fotos de lugares reales. Modalidad y nivel conservan sus cubos verdes.

Iconografía pixelada En uso

Ilustraciones grandes hechas con los mismos cuadros verdes de la V. Algunos cuadros sueltos flotan como si la figura se estuviera armando. Cada cuadro respira con el mismo pulso del logo: un destello cada 4.5 segundos, en orden salteado. Marcan los momentos clave de un flujo: un resultado, una espera, un problema o una lista vacía. El gris queda para lo que salió mal o no tiene contenido.

• 
  ÉxitoAlgo salió bien: pago confirmado, perfil completo, postulación enviada.
• 
  En esperaAlgo está en proceso: pago por confirmar, vacante en revisión.
• 
  Algo salió malPago fallido, error de carga o acción que no se pudo completar.
• 
  VacanteUna oferta de empleo: publicar, guardar o destacar una vacante.
• 
  BúsquedaBuscar vacantes, filtros y resultados.
• 
  MensajeCorreos, avisos por email y contacto con la empresa.
• 
  AvisoAlertas de nuevas vacantes y notificaciones.
• 
  PerfilCuenta del candidato o de la empresa.
• 
  UbicaciónPaís, ciudad o trabajo remoto.
• 
  FavoritoVacantes guardadas y lo que le gusta al candidato.
• 
  CurrículumSubir, revisar o mejorar el CV.
• 
  PublicadaUna vacante que sale al aire o un lanzamiento.
• 
  CréditosSaldo de créditos, compras y pagos de la empresa.
• 
  FechaFecha de publicación, vencimiento o una entrevista.
• 
  SeguroCuenta protegida, datos privados y pagos seguros.
• 
  Sin resultadosBúsqueda sin coincidencias o lista vacía.

Se generan con node scripts/pixel-icons.mjs: cada figura es una cuadrícula de texto, así que agregar una nueva es dibujarla con # y o. Con «reducir movimiento» activado quedan quietas.

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, sin texto pequeño: en el celular se ve diminuta. Si la página tiene imagen propia (el hero de un área o país), comparte esa; si no, la del embajador con el logo.

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);
}