¿Qué hace UX Inspirado en Nothing?
Un kit de herramientas para diseñadores de producto senior formado en tipografía suiza, diseño industrial (Braun, Teenage Engineering) y artesanía moderna de interfaces. Monocromático, tipográficamente impulsado, denso en información sin desorden. Modo oscuro y claro con igual rigor.
Antes de comenzar cualquier trabajo de diseño, declara qué Google Fonts se requieren y cómo cargarlos (consulta references/tokens.md Sección 1). Nunca asumas que las fuentes ya están disponibles.
1. FILOSOFÍA DE DISEÑO
- Resta, no sumes. Cada elemento debe ganarse su píxel. Por defecto, elimina.
- La estructura es el adorno. Expón la cuadrícula, los datos, la jerarquía misma.
- El monocromo es el lienzo. El color es un evento, no un valor predeterminado, excepto cuando codifica el estado de los datos (ver Sección 3).
- El texto hace el trabajo pesado. La escala, el peso y el espaciado crean jerarquía (no el color, no los iconos, no los bordes).
- Ambos modos son de primera clase. Modo oscuro: negro OLED. Modo claro: blanco cálido apagado. Ninguno es "derivado": ambos reciben atención de diseño completa. Pregunta al usuario con qué modo comenzar.
- Calidez industrial. Técnico y preciso, pero nunca frío. Se debe sentir una mano humana.
2. REGLAS DE ARTESANÍA — CÓMO COMPONER
2.1 Jerarquía Visual: La Regla de las Tres Capas
Cada pantalla tiene exactamente tres niveles de importancia. Ni dos, ni cinco. Tres.
| Capa | Qué | Cómo |
|---|---|---|
| Primaria | La ÚNICA cosa que el usuario ve primero. Un número, un titular, un estado. | Doto o Space Grotesk en tamaño de exhibición. --text-display. 48–96px de espacio libre. |
| Secundaria | Contexto de apoyo. Etiquetas, descripciones, datos relacionados. | Space Grotesk en cuerpo/subtítulo. --text-primary. Agrupado apretado (8–16px) a la primaria. |
| Terciaria | Metadatos, navegación, información del sistema. Visible pero nunca compitiendo. | Space Mono en pie de foto/etiqueta. --text-secondary o --text-disabled. TODO EN MAYÚSCULAS. Colocado en los bordes o en la parte inferior. |
La prueba: Entrecerrar los ojos ante la pantalla. ¿Aún puedes distinguir qué es lo más importante? Si dos elementos compiten, uno necesita encogerse, desvanecerse o moverse.
Error común: Hacer que todo sea "secundario". Elementos del mismo tamaño con espaciado uniforme = planitud visual. Sé valiente: haz que lo primario sea absurdamente grande y lo terciario absurdamente pequeño. El contraste ES la jerarquía.
2.2 Disciplina Tipográfica
Por pantalla, usa como máximo:
- 2 familias tipográficas (Space Grotesk + Space Mono. Doto solo para momentos heroicos).
- 3 tamaños de fuente (uno grande, uno mediano, uno pequeño)
- 2 pesos de fuente (Regular + otro — generalmente Light o Medium, raramente Bold)
Piensa en ello como un presupuesto. Cada tamaño/peso adicional cuesta coherencia visual. Antes de agregar un nuevo tamaño, pregúntate: ¿puedo crear esta distinción con espaciado o color?
| Decisión | Tamaño | Peso | Color |
|---|---|---|---|
| Título vs. cuerpo | Sí | No | No |
| Etiqueta vs. valor | No | No | Sí |
| Navegación activa vs. inactiva | No | No | Sí |
| Número heroico vs. unidad | Sí | No | No |
| Título de sección vs. contenido | Sí | Opcional | No |
Regla general: Si estás por usar un nuevo tamaño de fuente, probablemente sea un problema de espaciado. Añade distancia en su lugar.
2.3 Espaciado como Significado
El espaciado es la herramienta principal para comunicar relaciones.
Ajustado (4–8px) = "Estos van juntos" (icono + etiqueta, número + unidad)
Mediano (16px) = "Mismo grupo, elementos diferentes" (elementos de lista, campos de formulario)
Amplio (32–48px) = "Aquí comienza un nuevo grupo" (saltos de sección)
Vasto (64–96px) = "Este es un nuevo contexto" (heroico a contenido, divisiones importantes)
Si se necesita una línea divisoria, probablemente el espaciado sea incorrecto. Los divisores son un síntoma de contraste de espaciado insuficiente. Úsalos solo en listas densas en datos donde los elementos son estructuralmente idénticos.
2.4 Estrategia de Contenedores (preferir la parte superior)
- Solo espaciado (la proximidad agrupa los elementos)
- Una sola línea divisoria
- Un contorno de borde sutil
- Una tarjeta de superficie con cambio de fondo
Cada paso hacia abajo agrega peso visual. Usa la herramienta más ligera que funcione. Nunca encajones el elemento más importante: déjalo flotar sobre el fondo.
2.5 Color como Jerarquía
En un sistema monocromático, la escala de grises ES la jerarquía. Máximo 4 niveles por pantalla:
--text-display (100%) → Números heroicos. Uno por pantalla.
--text-primary (90%) → Texto del cuerpo, contenido principal.
--text-secondary (60%) → Etiquetas, pies de foto, metadatos.
--text-disabled (40%) → Deshabilitado, marcas de tiempo, sugerencias.
Rojo (#D71921) no es parte de la jerarquía. Es una interrupción: "mira AQUÍ, AHORA". Si nada es urgente, que no haya rojo en la pantalla.
Los colores de estado de datos (verde de éxito, ámbar de advertencia, rojo de acento) están exentos de la regla de "un acento" cuando codifican valores de datos. Aplica color al valor mismo, no a las etiquetas ni a los fondos de las filas. Consulta references/tokens.md para el sistema de color completo.
2.6 Consistencia vs. Variación
Sé consistente en: Familias tipográficas, tratamiento de etiquetas (siempre Space Mono MAYÚSCULAS), ritmo de espaciado, roles de color, formas de componentes, alineación.
Rompe el patrón exactamente en UN lugar por pantalla: Un número sobredimensionado, un widget circular entre rectángulos, un acento rojo entre grises, un titular Doto, un espacio vasto donde todo lo demás es ajustado.
Esta única ruptura ES el diseño. Sin ella: cuadrícula estéril. Con más de una: caos visual.
2.7 Equilibrio Compositivo
Asimetría > simetría. Los diseños centrados se sienten genéricos. Favorece la composición deliberadamente desequilibrada:
- Grande a la izquierda, pequeño a la derecha: Métrica heroica + pila de metadatos.
- Pesado en la parte superior: Titular grande cerca del borde superior, contenido escaso debajo.
- Anclado a los bordes: Elementos importantes fijados a los bordes de la pantalla, espacio negativo en el centro.
Equilibra los elementos pesados con más espacio vacío, no con más elementos pesados.
2.8 El Toque Nothing
- Confianza a través del vacío. Grandes áreas de fondo sin interrupciones. Resiste la tentación de llenar el espacio.
- Precisión en los detalles pequeños. Espaciado entre letras, valores de gris exactos, espacios de 4px. Las microdecisiones se acumulan en artesanía.
- Los datos como belleza.
36GB/sen Space Mono a 48px ES lo visual. No se necesitan ilustraciones. - Honestidad mecánica. Los controles parecen controles. Un interruptor = interruptor físico. Un indicador = instrumento.
- Un momento de sorpresa. Un titular en matriz de puntos. Un widget circular. Un punto rojo. La moderación hace que el único momento expresivo sea poderoso.
- Percusivo, no fluido. Imagina sonidos de interfaz: clic no swoosh, tic no timbre. Diseña transiciones que se sientan mecánicas y precisas.
2.9 Variedad Visual en Pantallas Densas en Datos
Cuando 3 o más secciones de datos aparecen en una pantalla, varía la forma visual:
| Forma | Mejor para | Peso |
|---|---|---|
| Número heroico (Doto/Space Mono grande) | Métrica clave única | Pesado — usar una vez |
| Barra de progreso segmentada | Progreso hacia una meta | Medio |
| Anillos/arcos concéntricos | Múltiples porcentajes relacionados | Medio |
| Barra compacta en línea | Métricas secundarias en filas | Ligero |
| Solo número con color de estado | Valores sin proporción | Más ligero |
| Minigráfico (sparkline) | Tendencias a lo largo del tiempo | Medio |
| Fila de estadísticas (etiqueta + valor) | Puntos de datos simples | Ligero |
Sección principal → tratamiento más pesado. Secundaria → forma diferente. Terciaria → más ligera. La FORMA varía, la VOZ se mantiene igual.
3. ANTIPATRONES — LO QUE NUNCA DEBES HACER
- Sin degradados en la interfaz de usuario
- Sin sombras. Sin desenfoque. Superficies planas, separación por bordes.
- Sin pantallas de carga esqueleto. Usa texto
[CARGANDO...]o un spinner segmentado. - Sin ventanas emergentes de notificación. Usa texto de estado en línea:
[GUARDADO],[ERROR: ...] - Sin ilustraciones de carita triste, mascotas lindas o estados vacíos de varios párrafos
- Sin rayado de cebra en tablas
- Sin iconos rellenos, iconos multicolor o emojis como interfaz
- Sin paralaje, secuestro de desplazamiento o animación gratuita
- Sin suavizado de muelle/rebote. Usa solo suavizado sutil.
- Sin border-radius > 16px en tarjetas. Los botones son pastilla (999px) o técnicos (4–8px).
- Visualización de datos: diferencia con opacidad (100%/60%/30%) o patrón (sólido/rayado/punteado) antes de introducir color.
4. FLUJO DE TRABAJO
- Declara las fuentes — dile al usuario qué Google Fonts cargar (consulta
references/tokens.md) - Pregunta el modo — ¿oscuro o claro? Ninguno es predeterminado.
- Dibuja la jerarquía — identifica las 3 capas antes de escribir cualquier código
- Compón — aplica las reglas de artesanía (Secciones 2.1–2.9)
- Verifica los tokens — consulta
references/tokens.mdpara valores exactos - Construye componentes — consulta
references/components.mdpara patrones - Adapta a la plataforma — consulta
references/platform-mapping.mdpara las convenciones de salida
5. ARCHIVOS DE REFERENCIA
Para valores de token detallados, especificaciones de componentes y guía específica de plataforma:
references/tokens.md— Fuentes, escala tipográfica, sistema de color (oscuro + claro), escala de espaciado, cuadrícula, movimiento, iconografía, motivo de matriz de puntosreferences/components.md— Tarjetas, botones, entradas, listas, tablas, navegación, etiquetas, controles segmentados, barras de progreso, gráficos, widgets, superposiciones, patrones de estadoreferences/platform-mapping.md— HTML/CSS, SwiftUI, React/Tailwind, convenciones de salida en papel