Lee lo que ya reservaste y arma el día alrededor.

Instrument Serif

Public Sans

DM Mono

Sin logo, y ninguno inventado

No se entregó un isotipo, así que el sistema no dibuja uno. Donde iría un logo, el nombre se compone en Instrument Serif con el ".ar" en itálica azul; sobre azul, la itálica pasa a clay. La carpeta de assets se deja deliberadamente vacía con una lista escrita de lo que todavía se debe: logo.svg y una versión para fondo oscuro, dos o tres fotografías de destinos y un set de iconos propio si alguna vez existe. Dibujar un símbolo que nadie pidió habría sido la respuesta rápida y la equivocada.

#8C8474 no es un color de texto

Mide 3.65:1 sobre papel, así que falla a cualquier tamaño y en cualquier nivel de importancia. El texto atenuado usa ink-450 #6F6657, que supera 4.5:1 en los cuatro tonos de papel; #8C8474 se reserva para rellenos, bordes e iconos decorativos. La regla existe porque el dato que más a menudo se compone demasiado claro es exactamente el que el producto está obligado a mostrar: la línea de frescura de un vuelo, una hora de salida tachada, la dirección postal en el pie de un email de marketing.

Un color de estado nunca es decorativo

Moss, amber y rust significan confirmado, falta un dato y choque, y nada más puede tomarlos prestados. El vocabulario detrás es cerrado (confirmado, falta un dato, se superpone, sugerido), así que ningún estado se transmite solo por el color. En la versión bilingüe la clave semántica queda en español y una prop de etiquetas escribe el texto visible: pasar la cadena en inglés directamente produciría las palabras correctas y un tono neutro, que es el semáforo apagándose en silencio.

Nada se sale de su caja, y la caja se mide a sí misma

Las tarjetas de dominio viven en un panel de 320px, una hoja móvil y una grilla de cuatro columnas, así que el ancho de la ventana no dice nada del espacio que tienen. Se degradan según su propio ancho con container queries: por debajo de 380px un evento del itinerario mueve su riel horario de 64px encima de la tarjeta, por debajo de 300px una tarjeta de vuelo suelta la ruta dibujada y apila los códigos de aeropuerto. Las grillas se escriben minmax(min(Npx,100%),1fr) porque un mínimo duro desborda en cuanto el contenedor es más angosto, y las palabras nunca se cortan: un título se achica un paso antes de partirse letra por letra.

Cada proveedor vive en una variable de entorno

Ningún proveedor, clave o modelo está escrito en el código, incluido el modelo que genera los itinerarios, que se elige por variable para poder cambiarlo sin tocar la app. Es una decisión de diseño tanto como de backend: la interfaz nunca nombra un proveedor ni un modelo a un viajero, y el gasto en APIs de las pantallas de administración se agrupa por servicio (generación, lugares, rutas, clima, estado de vuelos) y no por marca, para que la pantalla siga siendo correcta el día en que cambia un proveedor.

Lo bilingüe cambió la forma de los componentes

Donde una cadena es a la vez una etiqueta visible y la clave que elige un color, la clave queda en español y una prop de etiquetas escribe el texto. Y ninguna prop es nunca una función: son componentes de cliente, y una función no cruza la frontera servidor/cliente; falla en tiempo de ejecución, no al compilar. Así que una tarjeta de viaje recibe "8 días" ya escrito en lugar de un número, el compositor toma las duraciones como un mapa en lugar de un formateador, y las duraciones viajan en minutos con el locale decidiendo cómo imprimirlas.

Las alturas de los emails se midieron, no se estimaron

Veinte archivos enviables, construidos como los clientes de correo exigen y no como la web se acostumbró: tablas de presentación anidadas, cada estilo inline, sin JavaScript, sin hojas externas, sin webfonts y sin imágenes en absoluto. Georgia, Arial y Courier New suplen a las tres familias, y los tokens se escriben como hex literal porque ningún cliente de correo resuelve propiedades personalizadas. Cada altura de vista previa se midió desde la tabla exterior a 640px en lugar de adivinarse, porque un número optimista recorta el pie legal, que es la única parte que no puede faltar.

Una API, dos cargadores

El sistema de diseño se previsualiza sin bundler; la app corre en Next.js con renderizado en servidor. Dos componentes cargan lo mismo de forma distinta a propósito: el envoltorio de iconos lee la geometría de Lucide desde un global aquí e importa desde npm allá, porque durante el renderizado en servidor no hay window, y un fallback dibujado en el servidor contra un glifo dibujado en el cliente es un error de hidratación en cada icono. La API pública y el marcado son idénticos, así que portar un cambio toca el cargador y nada más.