LF
LinguaFlow
Design System • Lingo Style
v1.0.0
Sistema de Diseño · Lingo

Diseña con propósito y alegría

Tokens, componentes y guías de accesibilidad para la app LinguaFlow. Bold, playful, WCAG 2.2 AA.

Nunito JetBrains Mono WCAG 2.2 AA Mobile-first Tactile 3D React + Tailwind
01 · Tokens de color
Paleta principal
Primary
#58cc02
Secondary
#ce82ff
Blue
#1cb0f6
Warning
#ffc800
Danger
#ff4b4b
Text
#3c3c3c
Surface BG
#f7f7f7
Surface
#FFFFFF
02 · Escala tipográfica
Nunito · JetBrains Mono
2xl / 32px
weight 900
¡Muy bien, sigue así!
xl / 24px
weight 800
Lección 12 · Pasado simple
lg / 20px
weight 700
Traduce esta oración al inglés
md / 16px
weight 600
Completa el ejercicio para ganar 15 XP y mantener tu racha.
sm / 14px
weight 500
Pista: el sujeto es «she» y el verbo es irregular.
xs / 12px
MONO · 700
RACHA · 7 días · XP: 1.240
03 · Botones
Interacción táctil 3D
Tamaños
lg
md (default)
sm
Variantes
primary
danger
secondary
blue
outline
ghost
disabled
04 · Tarjetas de lección
Estados: completada · activa · bloqueada
✓ Hecha 🗣️
Saludos básicos
12 ejercicios · 8 min
★★★★★
✓ Hecha 🔢
Números 1–100
10 ejercicios · 6 min
★★★★☆
Activa ⏰
Pasado simple
15 ejercicios · 12 min
★★★★★
6/15 completados
🔒 🌍
Viajes y transport
18 ejercicios · 15 min
★★★★★
05 · Barras de progreso
Variantes cromáticas
Dominio del vocabulario 78%
Gramática 45%
Pronunciación 18%
Racha XP semanal 62%
06 · Racha y recompensas
Gamificación y motivación
🔥
14
días de racha
⚡ 1.240 XP
VIDAS ❤️ ❤️ ❤️ 🤍 🤍
🏆 Liga Oro ✓ Perfecta 💎 Diamante 🚀 7 días
07 · Componente de quiz
Selección con estados de respuesta
¿Cómo se dice «biblioteca» en inglés?
Selecciona la opción correcta
08 · Alertas y feedback
Mensajes de estado
🎉
¡Correcto! +15 XP
Library = biblioteca. ¡Sigues en racha!
⚠️
¡Casi! Revisa la pronunciación
Tu respuesta era correcta pero la pronunciación del acento necesita práctica.
💔
Incorrecto — perdiste una vida
La respuesta correcta era «Library». ¡Inténtalo de nuevo mañana!
💡
Tip del día
Practicar 15 minutos cada día es más efectivo que estudiar 2 horas a la semana.
09 · Badges y etiquetas
Chips informativos
✓ Completado 💜 Premium ⚡ Nuevo 🔥 Popular 🌟 Top rated Próximamente Beta
10 · Tabla de tokens
Referencia rápida de implementación
Token CSS Muestra Valor Uso
--color-primary #58cc02 CTA primario, éxito, progreso
--color-secondary #ce82ff Acciones secundarias, premium
--color-warning #ffc800 Racha, advertencias, estrellas
--color-danger #ff4b4b Errores, vidas perdidas, eliminar
--font-primary Aa Nunito Todo el body y headings
--font-mono Aa JetBrains Mono Métricas, tokens, labels caps
--shadow-tactile-primary 0 4px 0 0 #46a302 Botones activos principal
--radius-xl 16px Cards, modales, chips grandes
11 · Checklist de QA
Criterios de aceptación en code review
✓Contraste de texto mínimo 4.5:1 (WCAG 2.2 AA)
✓Focus-visible en todos los elementos interactivos
✓Áreas táctiles ≥ 44×44 px en mobile
✓Botones usan sombra táctil 3D (border-b-4 equivalente)
✓Estados: default, hover, active, disabled definidos
✓Tokens semánticos (no valores raw en componentes)
✓Animaciones respetan prefers-reduced-motion
✓Labels descriptivos (no "haz clic aquí")
✓Escala tipográfica consistente (12/14/16/20/24/32)
✓Espaciado sigue la escala 4/8/12/16/24/32
✓No hay colores decorativos sin token asignado
✓Variante mobile revisada en ≤ 375px
LinguaFlow Design System · Lingo v1.0.0 · Generado por CULTIVA IA
Bold · Playful · Accessible · WCAG 2.2 AA