El diseño de juego inspirado en Duolingo es un caso maestro de cómo la visión visual puede aumentar significativamente la experiencia del usuario. El sistema de diseño utilizado por Duolingo se centra en elementos como el verde olivo brillante, sombras gruesas y tipografías confiantes. Este artículo explora cómo replicar estos elementos utilizando el repositorio open-design, proporcionando una guía paso a paso para implementar un estilo de juego similar a Duolingo.

1. Temática Visual y Ambiente: Juego como Lenguaje Visual

El documento de diseño menciona que la interfaz de Duolingo es "brillante sin ocultarse". Utiliza el verde olivo brillante (#58cc02) como el color principal, añadiendo sombras gruesas de 4 píxeles debajo de cada elemento interactivo, lo que da al usuario la sensación de estar presionando un botón tridimensional. El fondo es blanco (#ffffff) con bordes gruesos de 2-3 píxeles (#e5e5e5). Todo esto resalta al diseño como algo similar a las aplicaciones de iOS de 2015 revividas.

1.1 Lista de Características Clave

El documento identifica siete características clave que deben estar presentes simultáneamente:

• Verde Olivo Brillante (#58cc02) como el color principal, ocupando más del 30% del área de la pantalla;
• Sombras gruesas de 4 píxeles debajo de los elementos interactivos, simbolizando una sensación táctil de presión;
• Bordes gruesos de 2-3 píxeles, no usando líneas finas de 1 píxel;
• Fuente Feather Bold (sans-serif redondeada) + Fuente Mona Sans (para el texto general);
• Tamaño de fuente grande y confiado - comenzando desde el tamaño de fuente 48px y escalando hacia arriba;
• Personajes o吉祥物 - un cuervo llamado Duo aparece en escenarios como el proceso de introducción, errores y cumplimiento continuo (streak);
• Colores secundarios - naranja dorado (#ff9600) y rosa turquesa (#ce82ff).

1.2 Lenguaje de Formas

El lenguaje de formas es una parte importante de la sensación amigable de este sistema: los bordes redondeados de las tarjetas son de 16-20 píxeles, los botones de 12 píxeles, y los chips y barras de progreso son de 9999 píxeles (pill-shaped). Los iconos son diseñados para ser llenados y redondeados, codificados según habilidades o temas.

Es importante notar que estas características están completamente codificadas en el archivo tokens.css del repositorio. Al abrir la cabecera del archivo, se pueden ver las decisiones de diseño resumidas:

/* Decisiones de diseño clave codificadas aquí:
 *   - Verde olivo brillante (#58cc02) — color principal, CTA principal y respuesta correcta
 *   - Blanco puro (#ffffff) — nunca tonificado; claridad óptica es la base
 *   - Sombra gruesa de 4 píxeles (#d7d7d7) — la "sensación de presión táctil"
 *   - Fuente Feather Bold + Mona Sans — tipografía redondeada y fuente corporativa suiza
 *   - Tamaño de fuente inicial de 56px — Duolingo no susurra; el tamaño es la identidad
 *   - Bordes pill-shape — tarjetas de 16px, botones de entrada de 12px, chispas de 9999px
 *   - Aceleración de spring (back-out, con sobrecompensación leve) — alegría juguetona en la animación
 *   - Anillo de foco de eel blue (#1cb0f6 tonificado) — contraste juguetón con el color verde de la marca
 */

2. Sistema de Colores y Asignación de Roles

El documento divide los colores en cinco capas, cada una con un propósito específico. El nombre de cada color sigue un sistema memorizable basado en nombres de animales y roles semánticos.

2.1 Colores Principales (Primarios)

Rol	Valor	Uso
Verde Olivo Brillante Owl Green	#58cc02	Color principal, CTA principal, respuesta correcta
Verde Olivo Oscuro Owl Green Deep	#58a700	Color de presión/sombra para botones
Verde Olivo Suave Owl Green Light	#89e219	Estado de suspenso, relleno suave
Verde Olivo Deslumbrante Owl Green Pale	#dbf8c5	Superficie suave, banner de éxito

2.2 Acentos Secundarios (Secundarios)

Rol	Valor	Uso
Naranja Dorado Continua Streak Orange	#ff9600	Contador de cumplimiento continuo, ícono de llama, energía avanzada
Naranja Dorado Oscuro Continua Streak Orange Deep	#cc7a00	Estado de presión para el naranja
Rosa Turquesa Esmeralda Gem Pink	#ce82ff	Moneda de esmeralda, Super Duolingo
Azul Mariposa Eel Blue	#1cb0f6	Botón de indicación, enlace informativo
Rojo Preliminar Cardinal Red	#ff4b4b	Respuesta incorrecta, pérdida de vida
Amarillo Abeja Bee Yellow	#ffc800	Medalla profesional, logro

2.3 Colores de Superficie (Superficies)

Rol	Valor	Uso
Nieve Snow	#ffffff	Fondo principal
Eel Pez	#f7f7f7	Separadores de zona, superficie secundaria
Águila Swan	#e5e5e5	Fondo deshabilitado, bloque embebido
Lobezno Wolf	#777777	Línea de separación oscura, texto secundario

2.4 Mátteos y Texto (Mátteos y Texto)

Rol	Valor	Uso
Eel Negro Pez	#3c3c3c	Texto principle
Lobezno Wolf	#777777	Texto secundario, texto explicativo
Conejo Hare	#afafaf	Deshabilitado, marcador de posición

2.5 Colores de Borde (Colores de Borde)

Rol	Valor	Uso
Águila Swan	#e5e5e5	Borde estándar de 2 píxeles
Conejo Hare	#afafaf	Borde destacado en estado de suspenso

2.6 Mapeo Semántico: El éxito es el mismo que la marca

Un aspecto fácilmente olvidado pero crucial en el diseño es que "la respuesta correcta" y el "color principal de la marca" son el mismo color. En tokens.css, se puede ver que esta asignación semántica está codificada explícitamente:

--success: #58cc02;        /* Verde olivo brillante — "respuesta correcta" es la marca */
--warn: #ffc800;           /* Amarillo abeja — medalla profesional, relámpago de logro */
--danger: #ff4b4b;         /* Rojo preliminar — respuesta incorrecta, pérdida de vida */

Esta es la genialidad de los productos gamificados: la retroalimentación positiva de la respuesta correcta se asocia con la identidad de la marca, fortaleciendo la marca con cada "acierto".

3. Reglas de Tipografía

3.1 Familias de Tipografía

Propósito	Fuente Preferida	Fuente de Retorno
Presentación / Interfaz / Encabezados	Feather Bold	'DIN Round Pro', 'Helvetica Neue', sans-serif
Texto / Longitud de Texto	Mona Sans	'Helvetica Neue', system-ui, sans-serif
Código (raro, administración escolar/administrativa)	JetBrains Mono	ui-monospace, Menlo, monospace

3.2 Escala Completa de Tamaños

El documento proporciona una tabla completa de escalas de tamaños, que es lo que necesitas copiar y pegar durante la implementación:

Rol	Fuente	Tamaño	Peso	Línea Alta	Espacio entre Letras	Notas
Presentación	Feather Bold	56px (3.5rem)	800	1.05	-0.01em	Encabezado principal de la página de bienvenida
H1	Feather Bold	32px (2rem)	800	1.15	-0.005em	Encabezado de la página
H2	Feather Bold	24px (1.5rem)	800	1.2	normal	Encabezado de capítulo
H3	Feather Bold	18px (1.125rem)	700	1.25	normal	Título de tarjeta, fila de cursos
Texto Grande	Mona Sans	17px (1.0625rem)	500	1.5	normal	Instrucciones de curso, indicaciones
Texto	Mona Sans	15px (0.9375rem)	400	1.5	normal	Ensayo estándar
Texto Explicativo	Mona Sans	13px (0.8125rem)	600	1.4	0.01em	Cuenta de XP, metadatos
Botón	Feather Bold	16px (1rem)	800	1.2	0.02em	Etiquetas de botón estándar
Cumplimiento Continuo	Feather Bold	14px (0.875rem)	800	1.2	normal	Número de cumplimiento continuo, llama encima

3.3 Tres Principios de Diseño de Tipografía

• 800 es el valor predeterminado: Feather Bold se usa en encabezados y botones con un peso de 800, mientras que 700 parece débil en este sistema;
• Tamaños grandes: los encabezados son 25-40% más grandes que los típicos productos de marca—la confianza misma es la identidad;
• Tipografía redondeada: cada letra tiene una terminación suave, las fuentes con bordes agudos romperían el contrato amigable.

En el nivel de los tokens, esta escalada se mapea a una cadena completa de variables de tamaños desde --text-xs (12px) hasta --text-4xl (56px), acompañadas por variables de línea alta y espaciado entre letras como --leading-body, --leading-tight, --tracking-display. Se nota que el comentario especializado en tokens.css que indica --text-4xl: 56px es "hero de bienvenida, nunca temeroso"—el coraje del tamaño se considera una gestión de activos de la marca.

4. Normas de Estilo de Componentes

4.1 Sistema de Botones

Los botones son el núcleo de este sistema de diseño, compartiendo un lenguaje de interacción consistente basado en "sombras gruesas de 4 píxeles debajo + efecto de presión".

Botón Principal (verde olivo)

• Fondo: #58cc02
• Texto: #ffffff
• Padding: 14px 24px
• Radio de borde: 16px
• Borde inferior: 4px sólido #58a700 (la "sombra gruesa")
• Estado de suspenso: fondo #89e219
• Estado activo: translada 4 píxeles hacia abajo, borde inferior regresa a cero (botón "presionado")
• Propósito: "Continuar", "Comprobar", CTA principal

Botón Secundario (blanco + sombra gruesa)

• Fondo: #ffffff
• Texto: #777777
• Borde: 2px sólido #e5e5e5
• Borde inferior: 4px sólido #e5e5e5
• Radio de borde: 16px
• Padding: 14px 24px
• Estado de suspenso: texto cambia a #3c3c3c, borde cambia a #afafaf

Botón de Cumplimiento Continuo (naranja dorado)

• Fondo: #ff9600
• Texto: #ffffff
• Borde inferior: 4px sólido #cc7a00
• Propósito: meta de cumplimiento continuo, "Empezar el cumplimiento"

Botón de Error (rojo preliminar)

• Fondo: #ff4b4b
• Texto: #ffffff
• Borde inferior: 4px sólido #cc3b3b
• Propósito: retroalimentación de respuesta incorrecta

En la implementación real en components.html, este lenguaje de interacción de presión se resume en tres reglas simples:

.btn-primary {
  background: var(--accent);
  color: var(--accent-on);
  box-shadow: 0 4px 0 var(--accent-active);
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--accent-active);
}

Nota que los botones tienen text-transform: uppercase y letter-spacing: 0.04em por defecto, lo cual es un detalle implícito en los CTAs del juego: etiquetas de botones en mayúsculas suenan más como "botones de juego". El estado de foco se maneja a través de --focus-ring (0 0 0 3px rgba(28, 176, 246, 0.2)), que proporciona un contraste ligero con el color verde de la marca.

4.2 Tarjetas / Bloques de Curso

• Fondo: #ffffff
• Borde: 2px sólido #e5e5e5
• Borde inferior: 4px sólido #e5e5e5
• Radio de borde: 16px
• Padding: 16px
• Estado de suspenso: flota 2 píxeles hacia arriba, sombra 0 4px 0 #d7d7d7

4.3 Nodos del Árbol de Habilidades (Burbujas de Curso)

• Tamaño: 80×72px
• Fondo: tono claro del color de habilidad (activo como verde, bloqueado como gris)
• Borde inferior: 6px sólido variante más profunda
• Radio de borde: 50% (círculo completo)
• Estado activo: oscila entre 1.0 y 1.05 a una frecuencia de 1.6 segundos

4.4 Campos de Entrada

• Fondo: #ffffff
• Borde: 2px sólido #e5e5e5
• Radio de borde: 12px
• Padding: 12px 16px
• Estado de foco: borde #1cb0f6 (eel blue), halo 0 0 0 3px rgba(28, 176, 246, 0.2)

4.5 Barras de Progreso

• Trayectoria: #e5e5e5
• Relleno: #58cc02 (en el contexto del cumplimiento continuo se usa #ff9600)
• Radio de borde: 9999px
• Altura: 16px
• Animación incremental: 320ms ease-out

En components.html, la implementación de la barra de progreso también incluye un detalle refinado: el relleno tiene una sombra interna box-shadow: inset 0 -4px 0 var(--accent-active)—esto simula que el bloque relleno también tiene una sombra gruesa de 4 píxeles, manteniéndose coherente con la estética global del sistema.

5. Espacios y Diseño de Layout

• Unidad Base: 4 píxeles, escalado completo de 4, 8, 12, 16, 24, 32, 48, 64;
• Contenedor: ancho máximo de 1080 píxeles, margen de giro (gutter) de 24 píxeles en pantallas de escritorio;
• Columna del Árbol de Habilidades: ancho de 320 píxeles, centrada en pantallas de escritorio.

Este enfoque filosófico de diseño se desarrolla completamente en tokens.css, con una cadena completa de variables de espacio desde --space-1 (4 píxeles) hasta --space-12 (48 píxeles), así como un conjunto distinto de variables de ritmo vertical por punto de ruptura de diseño (--section-y-desktop, --section-y-tablet, --section-y-phone), y tres escalas de margen de giro para pantallas de escritorio, tablet y móvil (--container-gutter-desktop/tablet/phone). Las notas de los comentarios explican la lógica detrás del producto:"pantallas de escritorio espaciosas, pantallas móviles compactas, haciendo que la columna del árbol de habilidades lea como fluída en lugar de bloques paginados".

6. Diseño de Animaciones

• Duración: Presión de botón: 180 ms; desbloqueo de nodo de habilidad: 320 ms; pulsación de nodo activo: 1.6 s;
• Función de Tiempo: Desbloqueo de animación: cubic-bezier(0.34, 1.56, 0.64, 1) (back-out, con sobrecorrimiento leve)—esta es la expresión matemática de la "alegría juguetona";
• Personajes: Duo parpadea cada 4-6 segundos, saltando en hitos de cumplimiento continuo (spring outwards con una duración de 480 ms y curva de tiempo ease-out).

Las duraciones de las animaciones se nombran en tokens como --motion-fast: 180ms y --motion-base: 320ms, mientras que la función de tiempo se denomina --ease-standard. Todas las transiciones de todos los componentes (botones, tarjetas, campos de entrada) utilizan estas tres variables, asegurando un ritmo de animación uniforme a nivel del sitio web.

7. Límites de Uso (Límites de Uso)

El documento de diseño concluye con tres "guardrails" para evitar que el estilo se distorsione:

1. Usar juntos el verde olivo brillante, sombras gruesas y geometría redondeada de los cursos—un solo botón plano de verde olivo no será reconocido como Duolingo;
2. Reservar tipos de letra superiores para momentos de curso, cumplimiento continuo y progreso—escenarios donde el producto necesita incentivar o dar retroalimentación, no usarlos en todo el texto;
3. Restringir el uso de animaciones vibrantes cuando haya cambios en el progreso—evitar una acumulación de animaciones generales en cada control.

Estos tres guardrails corresponden a una lista detallada de "Hacer / Evitar" en USAGE.md, que garantiza la portabilidad cruz-marca de la hoja de estilos: mantener el nombre del esquema de tokens para asegurar la compatibilidad en el cambio de marcas; priorizar la reutilización de los grupos de componentes definidos en components.manifest.json; evitar el uso de valores hexadecimales directos fuera de los bloques :root; y evitar redefinir valores de tokens de diseño de Tailwind o de otras herramientas de diseño fuera del archivo tokens.css.

8. Implementación en open-design: De la norma a la ejecución de contrato

El documento de diseño no es solo texto plano, sino que forma parte de una cadena completa de procesos dentro del repositorio open-design, que incluye una serie de archivos como DESIGN.md, tokens.css, preview/colors.html, preview/typography.html, preview/spacing.html, components.html, components.manifest.json, etc. Esta estructura permite una implementación sistemática y automatizada del diseño, lo que diferencia el sistema de diseño de un simple documento de diseño tradicional.

8.1 Vista General de la Estructura del Paquete

El directorio design-systems/duolingo/ contiene los siguientes archivos y carpetas:

• Capa de Normas: DESIGN.md (inglés) y varias versiones multilingües como DESIGN-pl.md, DESIGN-zh.md, que contienen el contenido completo;
• Capa de Tokens: tokens.css (fuente única), design-tokens.json (archivo derivado), tailwind-v4.css (mapeo a Tailwind v4);
• Capa de Componentes: components.html (contiene 66 selectores, 36 clases y 9 grupos de referencias de componentes), components.manifest.json (lista de componentes);
• Capa de Previsualización: preview/colors.html, preview/typography.html, preview/spacing.html;
• Capa de Sistema: system/tokens.default.json, system/kit.html, system/kit.dark.html;
• Capa de Auditoría: source/evidence.md (declara el alcance de la evidencia), source/token-contract.report.json (informe de contrato de tokens).

El archivo manifest.json declara que el paquete sigue el esquema od-design-system-project/v1, es de tipo bundled (paquete elegido por open-design), y sugiere aplicar las normas color y accessibility-baseline.

8.2 Validación de la Lista de Componentes

El archivo components.manifest.json realiza una validación maquinaria para verificar que los componentes siguen correctamente el formato: declara 66 selectores, 36 clases y 26 elementos, agrupados en 9 categorías como botones, entradas, tarjetas, etc. Cada categoría lista los tokens que utiliza, como los botones que usan --accent, --accent-active, --accent-on, --motion-fast, --radius-md, etc., y los campos de entrada que usan --focus-ring, --font-display, etc. La valicación automática es útil porque permite comprobar si cada descripción en el documento de diseño se ha implementado correctamente.

8.3 Sistema de Contrato de Tokens

La estructura de nombres de los tokens no es arbitraria, sino que sigue un contrato global definido en token-schema.ts. Este contrato clasifica cada token en cinco capas:

• A1-identity (obligatorio): el token es parte de la propia marca, sin reemplazo (por ejemplo, --bg, --fg, --accent, tipografías);
• A1-structure (obligatorio): decisiones estructurales (escalas de tamaños, grillas de diseño, ritmos verticales), que cada marca debe escribir;
• A2 (obligatorio pero con reemplazo): tiene un valor por defecto, y el script derive obtendrá un valor de fallback de _schema/defaults.css;
• B-slot (opcional): existe para la consistencia cruz-marca, sin una jerarquía adicional de capas, se puede usar para referirse a otros tokens (por ejemplo, --fg-2 puede referirse a --fg);
• C-extension (específico de la marca): declarado explícitamente por la marca, no se puede referirse en componentes generales, se requieren al menos dos marcas para elevarlo a B-slot.

El paquete Duolingo es un ejemplo práctico de este contrato: en components.manifest.json, los tokens como --border-soft, --elev-flat, --elev-ring, --fg-2, --surface-warm están marcados como unusedDeclared (declarados pero no utilizados), y undeclaredReferenced está vacío—lo que significa que todos los tokens que los componentes utilizan han sido declarados, cerrando así el contrato. Esto se verifica con la norma de USAGE.md que dice "evitar el uso de valores hexadecimales directos fuera de los bloques :root".

8.4 Dos Caminos de Consumo

Hay dos caminos para utilizar este sistema de diseño sin modificar el contenido del repositorio:

1. Pegar directamente: siguiendo el orden de lectura de USAGE.md, primero entender la intención visual en DESIGN.md, luego pegar tokens.css en el primer bloque de tu producto, y finalmente escribir el CSS de los componentes usando las clases definidas en components.html;
2. Mapeo a Tailwind v4: mediante tailwind-v4.css, conectar los tokens a los temas de Tailwind, el bloque @theme de tailwind-v4.css mapeará --color-accent, --font-display, --shadow-raised, --duration-fast, --spacing-section-desktop, etc., a bg-accent, font-display, shadow-raised, duration-fast, etc., como clases de utilidad. El archivo head de tailwind-v4.css especifica "Derivado de tokens.css. Mantén tokens.css como la fuente única de verdad" —el único lugar verdadero de verdad donde los tokens están almacenados es tokens.css, no se deben modificar los archivos derivados.

9. De la Norma a la Evaluación: ¿Qué significa "Duolingo"?

Juntando el documento de diseño y la implementación del repositorio, se pueden extraer tres criterios rígidos para determinar si una interfaz es "con estilo Duolingo":

1. La sombra no es solo decorativa, sino semántica: --elev-raised (0 4px 0 #d7d7d7) es el "señal de presión", translateY(4px) junto con la eliminación de la sombra cuando se activa forman un ciclo de feedback de presión completo—sin esta pareja, un botón verde simplemente sería un botón verde;
2. El verde cumple dos funciones: --accent y --success son el mismo valor, lo que une la identidad de la marca con la retroalimentación positiva;
3. El tamaño de la fuente expresa el tono: Display comienza a partir de 56px, el peso es 800 y el espaciado es -0.01em—estos números combinados definen la característica distintiva de Duolingo de "no susurrar".

Para los diseñadores y desarrolladores que quieran reproducir este lenguaje en sus propias aplicaciones SaaS, herramientas de adquisición de hábitos o cualquier otro producto que requiera "incentivos positivos", los tokens de diseño, recetas de componentes y mecanismos de contrato descritos en este artículo pueden actuar como plantilla reutilizable.

Explorar más profundamente se puede hacer leyendo el documento original DESIGN.md, las definiciones completas de los tokens en tokens.css, y la implementación de los 9 grupos de componentes en components.html.

[Descarga gratuita] open-design 🎨 Mejor complemento de diseño local para Claude. Alternativa abierta a Claude Design. 🖥️ Aplicación de escritorio local. 🖼️ Tu agente de código se convierte en el motor de diseño: prototipos, páginas de aterrizaje, paneles, diapositivas, imágenes y video — archivos reales, HTML/PDF/PPTX/MP4 exportables. 🤖 Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode & 20+ CLI por medio de BYOK. Repositorio del proyecto: https://gitcode.net/gh_mirrors/opend/open-design