Brand & Surface
Marca y superficie
Lo que se ve y cómo suena. Minimalismo radical, tipografía, voz de estudio y traducción que preserva el sentido. El criterio estético de XNLAB aplicado a todo.
BS-01 Minimalismo radical
lección Auditar una pantalla real y entregar un before/after donde cada elemento eliminado esté justificado por una decisión, no por gusto.
Minimalismo radical
lecciónAuditar una pantalla real y entregar un before/after donde cada elemento eliminado esté justificado por una decisión, no por gusto.
El minimalismo radical de XNLAB no es estética: es un método de decisión. La mayoría de operadores cree que "limpiar" una interfaz es bajar opacidades y añadir aire. En realidad es lo contrario: cada elemento que sobrevive debe ganarse el sitio respondiendo a una pregunta concreta (¿qué hace el usuario aquí? ¿qué decisión toma?). Cirugía, no decoración. Sin un método explícito, "minimalista" degenera en "vacío y arbitrario", que es peor que recargado: parece descuidado. El antídoto es un audit con criterio escrito, donde quitar es una acción defendible y reversible, no un impulso.
LA LECCIÓN
El minimalismo radical es un método de eliminación, no un estilo visual. Por defecto se quita; añadir es la excepción que carga con la prueba.
Cada elemento de una pantalla debe responder a una pregunta del usuario en ese momento. Si no responde a ninguna, es ruido aunque sea bonito.
Un before/after sin justificación escrita es opinión. Con justificación es un audit: defendible ante un cliente, repetible por otra persona, reversible si los datos lo contradicen.
El vacío arbitrario (bajar opacidad, meter aire sin razón) se lee como descuido, no como sofisticación. Minimalismo mal hecho parece página rota.
La regla XNLAB es conservadora pero no dogmática: el default es la edición quirúrgica, revisable con datos de conversión, no una ley moral.
EJERCICIO
Toma una pantalla densa que ya exista (una landing, un dashboard, un formulario; la del propio MOONKEY sirve). Captura el estado actual como 'before'. Lista cada elemento visible en una tabla. Para cada uno responde en una línea: ¿qué decisión del usuario sirve aquí y ahora? Marca como candidato a eliminar todo lo que no responda. Aplica los cortes y captura el 'after'. Escribe junto a cada eliminación la razón (redundante / no responde a ninguna decisión / movible a otra vista / decorativo sin función). Verifica que ningún corte rompió una tarea que el usuario sí necesita completar.
ENTREGABLE
Un audit before/after de una pantalla real: las dos capturas, la tabla de elementos con su pregunta-de-usuario, y la lista de eliminaciones con su justificación escrita en una línea cada una. Reversible: cualquiera puede leer por qué se quitó cada cosa y deshacerlo si un dato lo contradice.
INSIGHT CLAVE
Quitar es la decisión más difícil de defender porque no deja rastro; por eso hay que escribir la razón antes de borrar, no después. El audit convierte el minimalismo de opinión en método.
ERRORES A EVITAR
- ×Confundir minimalismo con bajar opacidades y meter aire: eso es vacío arbitrario, no cirugía. El resultado parece descuidado, no premium.
- ×Quitar elementos que sí sostienen una tarea del usuario y romper el flujo por perseguir limpieza visual.
- ×No documentar la razón de cada corte: sin justificación escrita el audit es irreversible y no se puede defender ante el cliente.
- ×Tratar la regla como ley moral inquebrantable en vez de default revisable con datos de conversión.
BS-02 Tipografía con intención
lección Construir un par de titulares que mezclen Inter sans con spans de itálica serif (Cormorant) sin que el ojo detecte el salto, y documentar la corrección de tamaño que lo hace funcionar.
Tipografía con intención
lecciónConstruir un par de titulares que mezclen Inter sans con spans de itálica serif (Cormorant) sin que el ojo detecte el salto, y documentar la corrección de tamaño que lo hace funcionar.
Mezclar una sans (Inter) con una itálica serif (Cormorant) dentro del mismo titular es uno de los gestos tipográficos con más retorno y más trampas. La trampa concreta y verificada en XNLAB: la serif itálica tiene una x-height menor, así que al mismo font-size se ve ópticamente más pequeña y el titular parece roto, como si la cursiva se hundiera. El operador que no conoce el ajuste lo deja así y el resultado chirría sin que sepa por qué. La corrección no es teórica: es un bump explícito de font-size en el span itálico (~1.18–1.2em) para igualar la altura percibida. Saber esto es la diferencia entre tipografía con intención y dos fuentes peleándose.
LA LECCIÓN
El font-size nominal no es el tamaño percibido. Lo que el ojo mide es la x-height, y la itálica serif la tiene más baja que la sans, así que al mismo px se ve más pequeña.
El ajuste verificado para Inter + Cormorant itálico es un bump de fontSize a 1.18-1.2em en el span serif. No es opcional: sin él el titular se lee roto.
La itálica serif se usa para una palabra o frase con peso semántico dentro de un titular sans, no para decorar al azar. El contraste debe marcar algo, no solo verse bonito.
La intención tipográfica se demuestra: el span corregido y el span sin corregir, lado a lado, hacen el problema visible y la solución innegable.
EJERCICIO
Escribe dos titulares de XNLAB donde una palabra clave vaya en itálica serif dentro de texto sans (ej: un sustantivo que cargue el sentido). Renderiza cada uno dos veces: una con el span itálico al mismo font-size que la sans, otra con fontSize:'1.18em' en el span. Compara las dos versiones lado a lado y confirma con el ojo (no con el número) cuál iguala la altura percibida. Anota el valor exacto que cuadra para tu par tipográfico. Si el salto sigue visible, sube hacia 1.2em y vuelve a comprobar.
ENTREGABLE
Un par de titulares italic-mix funcionando, cada uno acompañado de su comparación 'sin corregir / corregido' que hace visible el problema de x-height, más la línea de CSS exacta (fontSize:'1.18em' o el valor que cuadre) documentada como decisión reutilizable.
INSIGHT CLAVE
La tipografía con intención se nota justo cuando no se nota: si el lector percibe el salto entre sans y serif, fallaste. El ajuste de x-height es invisible bien hecho y obvio mal hecho.
ERRORES A EVITAR
- ×Asumir que mismo font-size significa mismo tamaño visual: ignora la x-height y deja el titular hundido en la cursiva.
- ×Usar la itálica serif como decoración sin peso semántico: el contraste tipográfico debe señalar algo, no rellenar.
- ×Verificar el ajuste por el número (1.18em) y no por el ojo: el valor exacto depende del par de fuentes y del tamaño; hay que mirarlo.
- ×Aplicar el bump globalmente en vez de al span concreto, rompiendo el resto de la jerarquía.
BS-03 Voz de estudio
lección Escribir un copy deck de página real (hero + tres secciones) en voz de estudio anónima que pase el test "¿verdad o marketing?": cada frase o es verificable o se borra.
Voz de estudio
lecciónEscribir un copy deck de página real (hero + tres secciones) en voz de estudio anónima que pase el test "¿verdad o marketing?": cada frase o es verificable o se borra.
La voz de XNLAB es anónima por diseño: estudio, nunca persona. No hay fundador con nombre, ni bio, ni foto, ni "yo creo que". Esto suena fácil y es lo más difícil: sin un yo al que apelar, la única autoridad que queda es la precisión. El fallo típico del operador es rellenar el vacío con humo —"transformamos tu negocio", "resultados excepcionales", "pasión por el detalle"— frases que no dicen nada verificable. La voz de estudio se sostiene en lo contrario: afirmaciones que o son verdad comprobable o no se escriben. El estado legal de XNLAB lo exige literalmente: no inventar NIF, dirección ni datos de registro; marcar como no registrado lo que no lo está. El copy deck es el artefacto donde esa disciplina se vuelve testeable.
LA LECCIÓN
La voz de estudio es anónima: nunca primera persona singular, nunca nombre de fundador, nunca bio. La autoridad viene de la precisión, no de quién habla.
El test '¿verdad o marketing?': cada frase se etiqueta. Si es verificable, queda. Si es promesa vacía o adjetivo sin respaldo, se borra o se reescribe en hecho.
Las promesas vacías ('transformamos', 'excepcional', 'líder') son ruido que baja la credibilidad de todo lo que las rodea, incluido lo que sí es verdad.
La honestidad legal es parte de la voz: no inventar datos de entidad. Lo no registrado se marca como no registrado; el ciclo se describe como está ('Open.'), no como conviene.
Anónimo no es frío. La voz es directa y concreta —el calor viene del rigor y de hablar de cosas reales, no de confesiones personales.
EJERCICIO
Elige una página (home o /contact). Escribe el hero y tres secciones en voz de estudio. Después pasa cada frase por el test: en una columna pega la frase, en otra escribe 'verdad' (y cómo se verifica) o 'marketing' (y por qué es humo). Toda frase marcada 'marketing' se reescribe como hecho verificable o se elimina. Revisa que no haya colado ningún 'yo', ningún nombre propio, ningún dato de entidad inventado. Confirma que el estado del ciclo se describe como está realmente, no como vendería mejor.
ENTREGABLE
Un copy deck de una página real (hero + 3 secciones) con su tabla de test '¿verdad o marketing?' al lado: cada frase final clasificada como verdad-verificable, sin una sola promesa vacía superviviente y sin datos de entidad inventados. Listo para pegar en la página.
INSIGHT CLAVE
Quitar el 'yo' obliga a que la prueba la cargue cada frase, no la persona; por eso la voz anónima es el detector de humo más severo que existe. Si una afirmación necesita un nombre detrás para sostenerse, no era verdad: era marketing.
ERRORES A EVITAR
- ×Rellenar la falta de fundador con superlativos ('excepcional', 'líder', 'transformador') en vez de con hechos verificables.
- ×Colar primera persona o un nombre propio y romper el anonimato del estudio.
- ×Inventar datos de entidad (NIF, dirección, registro) para parecer establecido: viola el estado legal real y se detecta.
- ×Confundir anónimo con frío y escribir un copy sin vida: el calor viene del rigor y de lo concreto, no de un yo.
- ×Describir el ciclo como conviene comercialmente ('una plaza queda') en vez de como está ('Open.').
BS-04 Traducir preservando el sentido
lección Producir un par EN/ES de un bloque de copy donde el español diga lo mismo que el inglés —no lo literal— y entregar las notas de cada decisión de sentido.
Traducir preservando el sentido
lecciónProducir un par EN/ES de un bloque de copy donde el español diga lo mismo que el inglés —no lo literal— y entregar las notas de cada decisión de sentido.
Traducir el copy de XNLAB no es sustituir palabras: es preservar significado a través de dos idiomas con gramáticas distintas. El error documentado y recurrente es el espejo léxico: traducir 'Not X' como 'Sin X' cuando el inglés marcaba una comparación (no una ausencia) y el español la convierte en otra cosa. Lo mismo con el paso de pasiva inglesa a refleja española, o con modificadores y verbos que se caen sin que nadie lo note. Cada uno de esos resbalones cambia el sentido un grado, y tres grados después la página en español dice algo que el inglés nunca dijo. La única defensa es leer cada línea en español como un nativo —no como traductor— y verificar que la afirmación es la misma, no que las palabras coinciden.
LA LECCIÓN
Traducir es preservar el sentido, no espejar el léxico. La pregunta correcta no es '¿esta palabra existe en español?' sino '¿esta frase afirma lo mismo?'.
'Not X' → 'Sin X' es la trampa estrella: ausencia vs comparación. El inglés a veces contrasta, y 'Sin X' lo convierte en una carencia que el original no decía.
La pasiva inglesa que pasa a refleja española puede cambiar quién hace la acción y la responsabilidad implícita. Hay que comprobar el agente, no solo la forma.
Modificadores y verbos se caen en la traducción sin avisar. Un adjetivo perdido o un verbo aplanado baja la temperatura o cambia la fuerza de la afirmación.
El control de calidad es leer cada línea ES como nativo, no contrastar contra el EN palabra a palabra. Si suena a traducción, es traducción; si suena a original, está bien.
EJERCICIO
Toma un bloque EN real (hero o sección con afirmaciones cargadas). Traduce al español priorizando sentido. Luego audita línea a línea: ¿algún 'Not X' se volvió 'Sin X' cambiando comparación por ausencia? ¿alguna pasiva pasó a refleja y movió el agente? ¿cayó algún modificador o verbo? Para cada hallazgo, anota la decisión: qué dijo el inglés, qué decía tu primer borrado, qué pusiste y por qué preserva el sentido. Lee la versión final en español en voz alta como nativo y confirma que afirma exactamente lo mismo que el inglés.
ENTREGABLE
Un par EN/ES de un bloque real con sus notas de traducción: para cada línea con riesgo (Not X / pasiva-refleja / modificador caído), la decisión documentada de cómo se preservó el sentido. El ES pasa la lectura de nativo sin oler a traducción.
INSIGHT CLAVE
Una traducción correcta palabra a palabra puede ser una mentira frase a frase; el espejo léxico es el camino más rápido a decir algo que el original nunca afirmó. Preservar el sentido a veces exige alejarse de las palabras.
ERRORES A EVITAR
- ×Espejo léxico: 'Not X' → 'Sin X' convirtiendo una comparación en una ausencia que el inglés no enunciaba.
- ×Dejar que la pasiva inglesa se vuelva refleja española y desplace el agente o la responsabilidad implícita.
- ×Perder modificadores o verbos en el trasvase y aplanar la fuerza de la afirmación sin darse cuenta.
- ×Verificar contrastando palabra a palabra contra el EN en vez de leer el ES como nativo: el espejo léxico pasa esa prueba y aun así miente.
BS-05 Color y profundidad
lección Documentar un sistema de color y profundidad (glass, bandas, campos de color) como conjunto de reglas y tokens reutilizables, con muestras que prueben que da vida sin meter ruido.
Color y profundidad
lecciónDocumentar un sistema de color y profundidad (glass, bandas, campos de color) como conjunto de reglas y tokens reutilizables, con muestras que prueben que da vida sin meter ruido.
Color y profundidad son donde una superficie minimalista gana vida o se rompe. Glass, bandas de color y campos de fondo pueden hacer que una página plana respire —o convertirla en un carnaval que contradice el minimalismo radical de BS-01. La diferencia entre los dos resultados no es el gusto: es un sistema. Sin reglas escritas (cuándo glass, qué intensidad, qué profundidad de campo, qué se anima y qué no), cada pantalla improvisa y el conjunto pierde coherencia. Hay además una trampa de verificación documentada en XNLAB: las animaciones de fondo se pausan cuando la pestaña no está activa, así que un read de opacidad miente; la profundidad animada se verifica con captura visual, no leyendo valores. El entregable es el sistema escrito: tokens, reglas y muestras que cualquiera puede aplicar sin reinventarlo.
LA LECCIÓN
Color y profundidad dan vida solo dentro de un sistema. Glass, bandas y campos sin reglas degeneran en ruido que contradice el minimalismo.
El sistema se escribe como tokens y reglas: cuándo usar glass, qué intensidad, qué profundidad de campo, qué se mueve y qué se queda quieto. Reutilizable, no improvisado por pantalla.
Nunca interpolar clases de color dinámicas (bg-${theme}): rompe el JIT de Tailwind. Los temas se declaran como entradas explícitas en el mapa de THEME.
Las animaciones de fondo se pausan en pestaña inactiva: un read de opacidad da un valor falso. La profundidad animada se verifica con captura de pantalla, no leyendo el DOM.
El criterio es 'vida sin ruido': si un campo de color o un glass no aporta jerarquía o respiración, sobra. La profundidad sirve a la lectura, no se exhibe.
EJERCICIO
Inventaria los recursos de profundidad que ya usa la superficie (glass, bandas, blobs, campos de fondo). Para cada uno escribe la regla: cuándo se usa, a qué intensidad, qué jerarquía sirve, si se anima o no. Conviértelos en tokens nombrados. Renderiza una muestra con el sistema aplicado y otra sin él, lado a lado, para probar que la versión con sistema da vida sin subir el ruido. Verifica cualquier capa animada con captura de pantalla en pestaña activa, no leyendo opacidad (que miente con la pestaña en background). Confirma que ningún color se interpola en clase dinámica.
ENTREGABLE
Un sistema documentado de color y profundidad: tokens nombrados + reglas de uso (cuándo/qué intensidad/qué se anima) + un par de muestras con-sistema / sin-sistema que prueba 'vida sin ruido', verificadas por captura visual. Reutilizable por cualquier pantalla sin reinventar el criterio.
INSIGHT CLAVE
La profundidad bien hecha se siente como aire y mal hecha como ruido, y la única forma de mantener el lado correcto a escala es un sistema escrito, no buen gusto por pantalla. Y nunca te fíes de un read de opacidad: la pestaña dormida te mentirá.
ERRORES A EVITAR
- ×Improvisar glass, bandas y campos pantalla por pantalla sin reglas: el conjunto pierde coherencia y el minimalismo se rompe.
- ×Interpolar clases de color dinámicas (bg-${theme}) y romper el JIT de Tailwind, dejando estilos que no compilan.
- ×Verificar profundidad animada leyendo opacidad en el DOM: la animación se pausa en pestaña inactiva y el valor leído miente. Hay que capturar pantalla.
- ×Meter campos de color o glass que no aportan jerarquía ni respiración: decoración que sube el ruido y traiciona 'vida sin ruido'.
Siguiente constelación
Ops & Security
La disciplina