El logotipo manda.

El logotipo nuevo no es una forma rellena: es un dibujo de líneas. Tres trazos de grosor constante, con los extremos redondeados y separados por holguras limpias, forman la "N". La palabra lo repite: mayúsculas de trazo fino, monolínea, con el interletrado tan abierto que cada letra se lee como una pieza suelta.

De ahí sale todo: lo que en otro sitio sería una caja rellena, aquí es un trazo. Reglas, marcadores, diagramas, viñetas y separadores se dibujan con una sola anchura, extremos redondos y aire entre las piezas. Sigue siendo un documento de ingeniería —tablas, datos, notas al margen, numeración— pero trazado a línea.

Anatomía

Todas las medidas salen de Solid-Black.png leído píxel a píxel, no de una estimación a ojo. El dibujo de abajo lleva el propio archivo dentro del SVG, así que las cotas caen exactamente sobre los trazos que miden.

Las versiones Semi son bicolores de blanco y negro: el signo y DEV en un tono, NAIN en el contrario. Eso las hace legibles sobre un gris medio, donde ni el monocromo negro ni el blanco rinden bien solos — una foto, un hormigón, una diapositiva gris.

La banda es estrecha y conviene saberla: para que las dos mitades pasen el mínimo de 3:1 de elementos gráficos, el fondo tiene que estar entre #5E5E5E y #949494. El punto óptimo es #767676, donde blanco y negro quedan igualados a 4,5:1. Fuera de esa banda, una de las dos mitades se cae.

Reglas

• De fondo, solo papel o azul. El verde y el rojo no son superficies: un fondo verde a página entera hace daño a los ojos y compite con todo lo que lleva encima. Cuando el color va de fondo lo hace como sección entera de borde a borde, con su terna de tinta, acento y logotipo. Ver «Las superficies».
• Un color brillante vive donde rinde. El verde solo sobre azul o sobre negro de marca, y siempre como resalte: rótulo, trazo, viñeta, relleno de un botón o de una ficha — nunca el fondo de una sección. El rojo, ni como línea ni como fondo: sombra del botón a contacto, halo del clic, cifra de display y texto de estado.
• El azul cielo #00BFFF desaparece: ya no está en el logotipo nuevo, así que sale del sistema.
• El negro #1D1D1B no es color de interfaz. Existe para cuando la marca sale del sitio: un PDF a un tinta, una firma en documento ajeno, serigrafía.
• Ningún dato codificado solo por color: en torno al 8 % de los hombres tiene alguna deficiencia rojo-verde y el comprador de este sitio es mayoritariamente masculino.
• Foco: azul sobre papel, verde sobre panel. Nunca rojo — el rojo significa error.

El sistema visual alterna planos de superficie definidos para dar ritmo a la lectura. NainDev estructura cada vista mediante planos continuos. El color no es un toque sobre papel: es una superficie entera, con su tinta, su acento y su versión de logotipo, y una sección se planta en una de ellas de borde a borde.

De fondo, solo papel o azul. El papel en sus tres tonos y el azul en sus dos — nada más. El verde se probó como superficie entera y, aunque el contraste da de sobra, a página completa es agresivo: cansa la vista y se come todo lo que lleva encima. Donde sí rinde es como resalte sobre el azul, y ahí es donde se queda.

Urbanist es la tipografía del logotipo, así que es la del sistema: display, títulos, cuerpo e interfaz. Geométrica de bajo contraste y monolínea, exactamente la misma construcción que el signo. Licencia OFL. IBM Plex Mono para datos y código.

Todo este documento está compuesto en Urbanist. Los títulos van en peso 300, el cuerpo en 400, y las mayúsculas se reservan al registro de marca y a las etiquetas de dato.

Base de 4 px. No se inventan valores intermedios. Rejilla de 12 columnas, ancho máximo 1200 px, canalón 24 px: el contenido ocupa 8 columnas y las 4 de la derecha quedan para metadatos y notas al margen, como esta de aquí al lado.

La separación de sección es de 128 px en escritorio y 80 px en móvil. El sistema respira más que un documento denso al uso, porque el logotipo es aireado y las piezas no deben tocarse.

El sistema gráfico se compone de tres recursos esenciales: el gesto gráfico (la interrupción), la trama, que llena superficies sin imagen, y la cota, que es el separador funcional de ingeniería. Hacen trabajos distintos pero complementarios.

Los tres están dibujados con el átomo del logotipo, trazo de grosor constante y extremos redondos, y en su ángulo real: 52° sobre la horizontal, medido sobre el archivo. No hay ninguna forma nueva en el sistema; es el signo, roto o repetido.

Un trazo continuo que se rompe. Sale de la construcción del isotipo —tres trazos que nunca se tocan— y dice lo que la marca vende: encontrar dónde se rompe un sistema. Una malla non-manifold es, literalmente, una superficie con un hueco.

• El hueco mide seis veces el grosor del trazo. A 4 px de trazo, 26 px de hueco; a 2 px, 12 px. Esa proporción no cambia con el tamaño.
• El hueco es toda la marca. No lleva señal encima: ni roja ni de ningún otro color. Si hay que decir qué falla, lo dice una etiqueta de texto al lado.
• Una por bloque. Dos interrupciones en la misma pieza dejan de significar nada.
• Hereda el color de la superficie: azul de marca sobre papel, verde sobre azul o negro.

La textura geométrica del sistema. En lugar de una cuadrícula estática o patrones genéricos, aquí se repite el trazo del logotipo, todos al mismo ángulo, con la densidad cayendo hacia un lado. Resuelve el mismo problema: qué poner en una superficie que no tiene imagen.

• Átomo: trazo de 4 × 30 px, extremos redondos, girado −38° (52° sobre la horizontal). Paso de rejilla 22 px.
• Densidad: lineal de 0 a 1 a lo ancho del bloque; el trazo se dibuja si un aleatorio estable cae por debajo de la densidad, y su opacidad es 0,35 + d × 0,65. Determinista: la misma semilla da siempre el mismo dibujo. La trama estática no se anima nunca; la única excepción del sistema es el campo del 7.5.
• Nunca detrás de texto. El texto requiere máxima legibilidad, por lo que siempre va sobre una caja opaca que tapa la trama por completo.
• Bloque mínimo 240 × 160 px. Por debajo se lee como ruido, no como trama.
• Un bloque por vista, y nunca en rojo.

La trama del 7.2 puesta en movimiento y hecha reactiva. Mismo átomo, mismo ángulo, mismo color: sigue siendo el trazo del logotipo. Lo que añade es que los trazos se contraen donde el visitante pasa el cursor y vuelven a su sitio cuando se aleja: la superficie cede y se recompone. Una sola por página, y siempre en el héroe.

• Solo sobre azul profundo y solo en verde. Un color sobre un fondo. Sin rojo, sin degradados, sin segundo color.
• Átomo: 4 × 30 px, extremos redondos, 52° como el logotipo. Paso 26 px en escritorio y 30 px por debajo de 760 px, filas impares desplazadas medio paso.
• Densidad lineal de izquierda a derecha con una onda lenta (±0,17, ≈0,55 rad/s) que solo decide qué trazos existen, nunca dónde están. Opacidad 0,26 + d × 0,74.
• El halo del clic: la onda expansiva tiñe de rojo de marca los trazos que atraviesa y vuelven al verde según se apaga, en poco más de un segundo. Es la única vez que el rojo aparece sobre azul, y dura lo que dura el gesto: marca la acción del visitante, no decora la superficie.
• La contracción: dentro de un radio de 210 px el trazo se acorta hacia su centro —hasta el 18 % de su longitud en el foco— con caída suave, y sube a verde pleno al hacerlo. Al salir el puntero vuelve con un muelle amortiguado (rigidez 0,13, amortiguación 0,74, rebote máximo 6 %): tarda alrededor de un segundo en recolocarse. Al pulsar sale una onda expansiva que contrae lo que atraviesa. Sin puntero, el campo solo respira.
• Nunca detrás de texto: la copia va sobre caja opaca, igual que la trama.
• prefers-reduced-motion dibuja un solo fotograma, sin onda y sin reacción al puntero.

El único efecto de profundidad del sistema. Se usa cuando un bloque se apoya sobre una superficie distinta de la suya y tiene que leerse como pieza, en los dos sentidos: caja de papel sobre color (la caja del héroe) y bloque de color sobre papel (el diagrama, el campo de aquí arriba). Un bloque de tinta desplazado, no una sombra fotográfica.

• 22 px a la derecha y 22 px abajo, en negro de marca #1D1D1B; 12 px por debajo de 760 px.
• Sin desenfoque, sin transparencia, sin propagación. Bordes duros: se lee como una segunda caja, no como una luz.
• Nunca en tarjetas de listado, tablas, paneles de código ni campos. Una por vista, como mucho dos por página.
• La excepción es el botón, y solo al pasar el ratón o al recibir el foco: 6 px en lugar de 22, y el color según el destino — ver 7.7.

Los botones no cambian de tamaño ni de color al pasar el ratón: les sale la sombra sólida, 6 px, en 140 ms. El mismo gesto del 7.6 a escala de componente, y la única animación permitida fuera del héroe.

El color de la sombra lo manda el relleno del botón, no la superficie. Cada relleno tiene su contrario, y ese contrario es su sombra. Así el gesto es el mismo en todo el sistema y no hay que preguntarse sobre qué fondo está el botón.

• Se aplica igual en :hover y en :focus-visible, para que quien navega con teclado vea lo mismo que quien usa ratón.
• Un botón de trazo, sin relleno, cuenta como el color de su superficie: sobre papel toma sombra azul; sobre azul, sombra roja.
• La sombra siempre llega a 3:1 contra su fondo, que es el mínimo para un objeto gráfico.

Un intérprete de comandos sobre el contenido de la propia página: quien prefiere preguntar a desplazarse escribe servicios y lo tiene. Es el componente más reconocible del sistema y el que mejor dice a qué se dedica la marca, pero no inventa nada.

• Solo responde con lo que ya está en la página. Nada de asistente simulado, nada de métricas sin origen, nada de demos falsas: lo que sale de la consola sale también de una sección, palabra por palabra.
• Superficie azul profundo con sombra sólida, texto papel, comandos y etiquetas en verde, secundario en #9FB2CC. Todo en Plex Mono de 14 px con interlínea 1,8.
• La barra no imita a nadie. En vez de los tres círculos del sistema operativo lleva la interrupción del 7.1 en verde y la ruta en monoespaciada.
• Teclado de verdad: ↑ recupera el comando anterior, Tab completa, intro ejecuta, ir <sección> desplaza la página. El foco se ve con el trazo verde.
• Con botones debajo, porque en un móvil nadie quiere teclear: los mismos comandos como fichas pulsables, con el hover del 7.7.
• Sin efecto de tecleo. La respuesta aparece entera: es una consola, no una película de hackers.

Al pasar el ratón por el isotipo de la cabecera, los tres trazos se pliegan en uno solo y vuelven a abrirse a la N. Dice en un gesto lo que el sistema repite en todas partes: la marca son tres trazos que no se tocan, y se puede ver cómo se montan.

• Plegado (0 → 46 %): la diagonal se endereza y las dos barras entran al centro hasta solaparse en un único trazo vertical. Manda la diagonal; las barras entran escalonadas 70 y 130 ms detrás.
• Un respiro (46 → 54 %) en el trazo único. Sin él, el gesto no se lee.
• Desplegado (54 → 100 %): vuelven a su sitio con un rebote corto (easeOutBack), y ahora mandan las barras: la diagonal llega la última.
• 1,15 s en total, una vez por gesto: si el ratón vuelve a entrar mientras corre, no se reinicia.
• Se anima el SVG, no una imagen. Los tres trazos son <line> con extremos redondos y el grosor del sistema, y lo que se interpola son sus extremos — de ahí el estirado. prefers-reduced-motion lo desactiva entero.