Era el último día del curso de Design Systems en MrMarcel School cuando Laura me hizo la pregunta que no pude quitarme de la cabeza.
"Joan, hemos pasado meses estudiando design systems. Pero sigo sin entender cómo conectar la teoría con la práctica real. ¿Por qué todo se siente tan… plano?"
Me quedé en silencio.
Llevaba dos años trabajando en un proyecto para Alexa, un Sistema de Diseño Conversacional. Interfaces multimodales que se desplegaban en diferentes pantallas, voz, gestos. Sistemas que orquestaban conversaciones, música, smart home, todo sincronizado. Era pensar en grande. Escala universo.
Pero esa noche me di cuenta: Laura me estaba preguntando por el lado opuesto.
¿Y si la siguiente evolución no era hacia arriba, sino hacia abajo?
En los próximos 10 minutos te voy a mostrar cómo aplicar la metodología 'Powers of Ten' al diseño de sistemas. Descubrirás por qué trabajar solo en una escala (macro o micro) limita tu impacto, y cómo pensar en ambas simultáneamente puede cambiar radicalmente tus resultados.
Powers of Ten: la lección que olvidamos
Esa madrugada recordé un film de 1977 que cambió cómo vemos el mundo: "Powers of Ten" de Charles y Ray Eames.
La cámara está a 1 metro de distancia.
Cada 10 segundos, se aleja 10 veces más (10 metros, 100 metros, 1 kilómetro…).
El parque. La ciudad. Illinois. Estados Unidos. La Tierra. El sistema solar. La galaxia. El universo observable.
Llegamos a 10²⁴ metros. El borde de todo lo conocido.
Luego regresa. Al picnic. Y sigue hacia adentro.
A la mano del hombre. A la piel. A las células. A las moléculas. A los átomos. A los quarks.
Hasta 10^-16 metros. La mínima expresión de la materia.
💡 El mismo punto. 40 órdenes de magnitud diferentes de verlo. Cada escala revela una realidad completamente nueva.
Alexa: cuando diseñaba en la escala del universo
Durante dos años diseñé en el extremo macro.
Un usuario en Boston dice: "Alexa, buenos días"
El sistema orquesta:
- Lee noticias personalizadas
- Ajusta luces de la casa
- Muestra calendario en la pantalla
- Sincroniza recordatorios en el móvil
- Arranca playlist de Spotify
Una frase. Cinco experiencias. Tres dispositivos. Todo coherente.
Era diseño a escala ecosistema. Pensar en cómo sistemas complejos trabajan juntos. La vista desde 10^24 metros.
Pero esa noche, después de la pregunta de Laura, me di cuenta de algo inquietante:
¿Qué pasa cuando bajas 40 órdenes de magnitud? ¿Cuál es la unidad mínima de un design system? ¿La mínima expresión que puede codificar significado?
El experimento: invitaciones de boda desde el átomo emocional
Decidí aplicar "Powers of Ten" al caso más empático que se me ocurrió: invitaciones de boda digitales.
La escala tradicional (vista desde 10 metros):
Tenía 73 templates en Figma:
- Template "Romántico" #1
- Template "Moderno" #2
- Template "Clásico" #3
El proceso era el de siempre: pareja elige template, cambio colores, ajusto nombres y fecha, envío. Rinse and repeat.
Es la escala "humana" del diseño. Donde todos operamos normalmente.
Pero ¿qué pasa si bajo a escala atómica?
En lugar de mostrar templates, pregunté a Laura (sí, mi alumna) y su pareja:
"¿Cómo queréis que se sientan vuestros invitados cuando reciban la invitación?"
Laura y su pareja: "Íntimos, cálidos, familiares"
No busqué "Template Romántico #3".
Bajé a la mínima expresión. A los tokens emocionales de la invitación:
$invitation-intimacy: (
. spacing: generous, // respira, no agobia
. palette: warm-earth, // terracotta, cream, sage
. typography: gentle, // serif suave, no imponente
. decoration: minimal. // flores discretas, no pomposas
);sc
Es como en el film de los Eames: cuando bajas a escala molecular, descubres que lo que parecía sólido (un template de boda) en realidad está hecho de átomos (decisiones emocionales mínimas).
Las dos escalas en acción: Alexa vs invitaciones de boda
Escala Macro (mi proyecto en Alexa — 2 años):
Usuario: Alexa, quiero ambiente romántico"
Sistema orquesta múltiples dispositivos:
- Luces → warm amber, 30% intensidad
- Música → jazz suave, volumen bajo
- Pantalla → fireplace animation
- Temperatura → sube 2 grados
Una instrucción. Cuatro sistemas. Todo sincronizado.
Vista desde el universo: cómo experiencias complejas trabajan juntas.
Escala Micro (invitaciones de boda — el nuevo approach):
Pero ¿qué hace que "warm amber" se sienta romántico y no "bright white"?
Ahí está el átomo. El mismo principio aplicado a una invitación de boda:
// El "átomo romántico" de Alexa
$romantic-light: (
. hue: 30, // naranja cálido
. saturation: 85, // rico pero no saturado
. brightness: 30. // íntimo, no brillante
);// El mismo "átomo romántico" en una invitación
$invitation-warmth: (
. color-primary: hsl(30, 85%, 30%), // mismo hue
. color-accent: hsl(30, 75%, 85%), // versión suave
. color-background: hsl(30, 25%, 95%) // casi blanco cálido
);
⚠️ El insight: Para que Alexa funcione a escala universo, alguien tuvo que diseñar primero a escala átomo. Lo mismo con las invitaciones de boda.
Cuando el átomo define el universo: caso real
Ana y Marcos responden diferente: "Vibrante, internacional, celebración"
Escala Micro (los tokens de su invitación):
$invitation-celebration: (
. spacing: dynamic, // elementos que se solapan
. palette: festive-bold, // electric blue + gold
. typography: geometric, // sans-serif arquitectónica
. decoration: maximal. // ornamentación festiva
);
Escala Macro (toda su experiencia de boda digital):
Desde esos átomos, el sistema genera automáticamente:
- Save the date (primer contacto)
Usa los tokens: espaciado dinámico, paleta festiva
Mood: "algo grande viene" - Invitación principal (core experience)
Mismos tokens, jerarquía más compleja
Mood: "celebración internacional" - RSVP card (interacción)
Tokens aplicados a formulario
Mood: "responde con energía" - Thank you notes (despedida)
Tokens más suaves pero reconocibles
Mood: "gracias por celebrar con nosotros"
Todo coherente. Porque los átomos emocionales son consistentes.
Es exactamente como "Powers of Ten":
Desde 10^-16 (el token $festive-bold: hsl(210, 100%, 50%)) hasta 10^24 (toda la experiencia digital de boda) hay 40 escalas entre medio.
💡 Si el átomo no codifica emoción correctamente, toda la experiencia de boda se siente genérica.
Los números que validaron las dos escalas
Seis meses probando este approach con invitaciones de boda digitales:
📊 Client satisfaction: 78% → 94%
⏱️ Iterations to approval: 5–7 → 2–3.
💰 Conversion rate: 23% → 41%
📈 Referrals: 12% → 38%
Lo revelador:
Las parejas dejaron de pedir "cambia este color por ese" (pensamiento macro, nivel template) y empezaron a decir" se siente exactamente como nosotros" (coherencia desde lo micro, nivel átomo).
Porque cuando diseñas invitaciones desde la mínima expresión emocional hacia arriba, cada pieza hereda la personalidad de la pareja.
Lo que Laura realmente me preguntó
Laura no cuestionaba la teoría de design systems.
Señalaba algo más profundo: todos pensamos design systems en una sola escala.
Yo había pasado dos años en el extremo macro con Alexa:
- Experiencias multimodales que orquestan dispositivos
- Sistemas cross-platform sincronizados
- Ecosistemas complejos de experiencias
Pero había ignorado el extremo opuesto en las invitaciones de boda:
- ¿Cuál es el átomo emocional de una invitación?
- ¿Qué es la mínima expresión que define "romántico"?
- ¿Cómo se codifica "intimidad familiar" en un solo token?
Como en el film de los Eames: si solo ves las invitaciones desde "template completo", nunca descubres los átomos emocionales que las construyen.
🎯 El futuro del diseño no es elegir macro o micro. Es pensar en ambas escalas simultáneamente.
La conexión entre Alexa y una invitación de boda
Así es como funciona en ambos casos:
Escala Micro (10^-16): Un token de color
// En Alexa
$ambient-romantic: hsl(30, 85%, 30%);// En invitación de boda
$invitation-warmth: hsl(30, 85%, 30%);
Escala Molecular (10^-8): Un componente
// En Alexa
// En invitación
Escala Celular (10^0): Una escena completa
// En Alexa
// En invitación
Escala Ecosistema (10^8): Una experiencia completa
// En Alexa (multi-dispositivo)
// En boda (multi-formato)
Cada escala construye sobre la anterior. Pero sin los átomos correctos en 10^-16, todo el universo en 10^24 se siente genérico.
Ya sea Alexa orquestando tu casa o una invitación de boda llegando a tu WhatsApp.
Lo que viene: el diseñador bidireccional
Estoy desarrollando una metodología que opera en ambas direcciones:
Cuando subes (macro):
- Desde tokens de boda → save the date → invitación → experiencia completa
- Como construir una celebración desde sus átomos emocionales
Cuando bajas (micro):
- Desde "quiero boda íntima" → ¿qué paleta? → ¿qué tokens definen intimidad?
- Como entender por qué una invitación se siente de cierta manera
El poder: Coherencia emocional desde el quark hasta el universo.
Ya sea en Alexa multimodal o en invitaciones de boda digitales.
Tu turno:
¿En qué escala diseñas normalmente?
¿Has pensado en experiencias macro (como Alexa, ecosistemas)?
¿Has bajado a escala micro (tokens que sienten) en tus proyectos?
¿Qué descubrirías si cambiaras tu escala 10x arriba o 10x abajo?
Ejercicio para hoy:
Toma tu último proyecto. Identifica en qué escala trabajaste (¿templates completos o tokens básicos?). Ahora imagina: ¿qué descubrirías si bajaras/subieras 10 escalas? Comparte tu respuesta en comentarios.
#DesignSystems #PowersOfTen #SystemsThinking #EmotionalDesign #WeddingDesign #DesignScale